I could probably talk about do and don'ts email , but if you consider only a couple of basic principles, you will learn more than most.
gmail (and MS Outlook) are the two most difficult email clients to encode, but you can develop responsive with a high level of design that will be well displayed among clients. In Gmail, it simply displays the desktop layout without any response.
When you start email encoding, you should use quite a bit without using CSS. Think of the “desktop-first” approach and program it as simple as possible, because you want it to be displayed when viewed with a resolution of 600 pixels. I don't care if people say that this works by email or not, if there is a more discouraged way to do the same thing, a more depreciated method will always be more compatible with email clients.
Forget css and html as you usually use. You should try to restrict your xhtml1.0 tags to only valid tags. In fact, you can make many layouts with a limited tag palette, you just need to think about more circular ways to do this.
For a very simple example:
Instead of using padding or margins or transparent image separators to achieve vertical distance in the CTA button, you can use a table nested in one table depth, valid xhtml attribute tags and null CSS to achieve a vertical label in a padded color button with a color text.
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200"> <tr> <td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td> </tr> <tr> <td align="center"><font color="#ffffff"><b>Click Here</b></font></td> </tr> <tr> <td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td> </tr> </table>
Step 1
Compose your email address without CSS and make sure it looks good.
At this point, your alphabet should consist only of
html, body, table , tbody , tr, td, span, a, b, nobr, src, alt, target, cellpadding , cellspacing , border, align, bgcolor, color, height and alphanumeric content in these tags.
You may be tempted to use valign, style, background, class, ...... NOT .. not yet
If you want to achieve the highest cross-compatibility, accept that some customers will see it this way, so you need to make it as clean and presentable as possible.
Step 2
Once you get this basic structure that looks good and presentable, you can think about making it look better. You can start adding some CSS and HTML4 tags to improve the style for those customers who see it. But do not go out into the wild, try to maintain a minimalist approach.
After you get your CSS, whatever CSS you use (caniuse.com is a great resource if you want to get an idea of what to try). Once all of this is in place, delete it all suddenly and without prejudice, just remove those new tags, nothing more. Now take a look at the email. If removing these tags didn't break your layout, then you will be fine. You can safely recover them and sleep well, knowing that you have cross-compatible email. If something broke your layout, it’s best not to have it, because many customers are going to do just that and remove it, and you will have a very bad day if you leave it there.
Step 3
After that, you can add a couple [tag: media queries]. I have media queries for 600 and 400, and I double them to achieve higher compatibility. Using CSS in your head, you can set up overwriting any of your layouts in HTML with important tags. Thus, those customers who read it will ignore the inline style that you used, and adhere to the new style of your addition. This is great for adjusting the width of elements, hiding or showing elements, etc.
.mobile {display:none;} @media screen and (max-device-width: 600px), screen and (max-width: 600px) { *[class="desktop"]{display:none !important;} *[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}
With these 4 lines, you can do almost all of your responsive structuring.
** Note: using the desktop class requires extra effort.
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr style="mso-display:none;"> <td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;"> <a href="" target="_blank"> <img class="banner" alt="o" src="logo-wide.gif" border="0" width="0"> </a> </td> </tr> </table>
This is probably the most important CSS in my code. The sample table will not be displayed on any desktop devices (including Gmail), but it will be displayed on mobile devices. The only client he does not work with is Windows Mobile 7.
I use these two classes to remove elements from the mobile layout to achieve responsive design. The desktop class is excluded and used only in rare cases, because this means that your email address will lose compatibility with Windows Mobile 7.
Step 4
Testing a test test test. Its ridiculously insane how easily email can break. Do not trust Litmus or any test suite because they are only accurate to the extent. You must have a test device for each of your devices. If you did not spend significantly more time checking your email than ever, you had to enter the code, then you did not test it thoroughly.
Do not believe what people say about email encoding unless you have tried it, tested it, and proven it. Because far more people think they know what they are talking about than those who actually do, especially when it comes to reading blogs and articles on email encoding.
If you want to use an example or template, here is a template that I created over about 2 years with encoding 2+ letters almost every week. I can pretty much guarantee that this will be the most cross-client / marketing compliant email example you find. Feel free to copy it, modify it, whatever.
It is worth noting that when I worked for the launch, I had to encode several emails a week, and we decided to do this in the most difficult way: crazy compatibility with clients and using as many images as possible. No text in the images, rather I had to splicing the text, and doing things like background images behind the text work well on clients. The background behind the text in the email is incredibly difficult to do the job well for some email clients. Maybe, but disappointment is like shit. When I switched from this job and started working for large brands, for a short period of time I had to encode a few more letters (I no longer copy emails) .. but for these large brands .. they are not "I want me to spend a lot time for emails. They just preferred to make it one big image, text and everything .. Easy peezy. On this note, when I worked at startup, we ran the test once, comparing click speeds on highly polished encoded emails and text messages e-mail against all graphic emails, at best the differences were not significant.