Designing HTML emails is just like designing a webpage. You go planning your page’s width and length of content and consider its appearance in your target browsers. Only that one of the browsers to consider is IE6! This is just an analogy to the fact that not all email clients have wide support for HTML and CSS.
Popular email clients include: Microsoft Outlook, Gmail, Yahoo! Mail, Hotmail, and email clients used by specific platforms like iPhone, iPad, and Android. All of these top clients should be considered for the simple fact that it just might be the one your recipients are using. You wouldn’t want to send a “broken” email, would you?
Here are two important things to remember in designing your HTML emails.
- The width of your email
- Maximum width of 640px for desktop viewing
Use of CSS
As we’ve mentioned earlier, it’s like IE6 is back again in the sense that some email clients don’t fully support all the latest CSS elements.
I’ve summarized Campaign Monitor’s Guide to CSS support in email. Here, we’ll only display items which are supported by all tested email clients.
Included at the top of the table is the support for Style and Link elements — your best bet is to inline all your CSS. A handy tool for that is MailChimp’s CSS Inliner Tool. Create your markup normally, your CSS should be inside <head> via <style>.
Almost all about Text and Fonts, Color and Background, Box Model, and Tables are supported. Be cautious in using background images since there’s little support for this one across email clients.
To be able to create an HTML email that renders correctly across email clients, you have to test it out. Use MailChimp‘s free service to do this. Setup an email account in various services like Gmail, Hotmail, Yahoo! Mail, etc. and send out a test email to yourself. Next, view that email in desktop and mobile device to see if it rendered correctly.
For more information, check out Campaign Monitor’s blog for a regular dose of email knowledge.
Leave a Reply