Editor’s note: This is part two of a multi-part series on mobile-first email development. Read part one.
In the first part of my series on email development, we covered what mobile-first email development is and why you should consider using it. Now, it’s time to dive into how it’s done. But before we can cover any real-world code examples, we first need to understand the core of this technique.
There are five principles that make up the backbone of mobile-first email development. How you use and combine the principles will depend on the design of the email and the intended mobile rendering. At the very least, you should be thinking about these for every piece of content that goes into your email.
1. Build with a fluid structure
The key to making mobile-first development work is to ensure that your structure is fluid by default. This can be achieved by using one or both of these techniques.
Technique 1: fluid tables
Making tables fluid can be achieved in a couple ways. The first is by applying percentage widths to the <table>, meaning that the width of the table will always be based off of the width of its wrapper.
The second is to set fixed pixel-width dimensions on the <td> and not the <table>. When widths are set on the <td>, it actually behaves like a width and max-width all wrapped into one. This means you get the benefit of having the fixed width needed for Microsoft Outlook without breaking mobile.
Here’s an example of what a fluid 600px table would look like:
Technique 2: hybrid coding
There are five principles that make up the backbone of mobile-first email development. How you use and combine the principles will depend on the design of the email and the intended mobile rendering.
This one is a bit more involved, but well worth the effort. If you need an introduction to hybrid coding, or simply need a refresher, I highly encourage you to check out Nicole Merlin’s post on the technique.
What hybrid coding allows is a way to stack content without needing media-query support. Here’s a simplified version of a two-column layout using hybrid code:
2. Inline mobile styles
Normally, using conventional email development techniques, you would inline your desktop styles and use embedded media queries to handle your mobile styles. However, with mobile-first coding, we want to ensure that our mobile styles are inlined to prevent any rendering issues in the absence of embedded styles. This is done by utilizing HTML attributes (such as align, border, or bgcolor) and by placing your CSS declarations within the style attribute like so:
3. Embed desktop styles
Embedded styles in the head of the email have really good support when it comes to desktop and webmail clients. Since it’s only the mobile-email clients we’re worried will strip the embedded styles, we’ll do the majority of the desktop styling by embedding them. This is done by adding your CSS rules inside of a <style> element within the <head> of the email, like so:
4. Reset mobile styles with media queries
Since there are quite a few mobile-email apps that do support embedded styles we will need to overwrite the desktop styles with media queries. This is done by adding your mobile CSS rules inside of the @media rule within the style element, like so:
5. Avoid using !important
This is one you’ll probably have more freedom adhering to, depending on the email clients you need to support. Don’t think of this as a hard rule, but strive to achieve it whenever possible.
If your main goal is having proper rendering in the more popular email clients, then you’ll have fewer issues using !important to overwrite inline styles than in some of the less popular or international email clients.
I would encourage you to test in as many email clients as you can. Some techniques will degrade gracefully, but others will completely break down if you are using !important on everything. Here’s a basic example of using !important to overwrite styles:
Now that you have the foundational background in mobile-first email development, there’s one more thing to consider before jumping in and coding: analytics. Join us in the next post as we uncover how analytics plays into the mobile-first-email-development technique, and how you can use it to be as efficient as possible.