Tips for Designing Effective HTML Emails

Tips for Designing Effective HTML Emails

Are you an experienced front-end developer creating magic with the pure combination of CSS and Javascript where the output of your work is shining on the modern browsers however just jumped into the email coding ?

If your answer is YES this article will probably send you back to the 90s where our ancestors were using giant tables and inline CSS for creating web pages.

As you have already created dozens of fancy and functional layouts with the power and harmony of html, css and javascript without any concern about the rendering now it’s time to accomplish a new challenge where there’s no consistent standard for rendering email code, so each email programs (like Gmail, Yahoo! or Outlook) have the possibility to render the same HTML code differently.

If you are looking forward to start coding your first html email, you are on the right place to get the know commonly used tips and tricks for creating pixel perfect emails for all email clients.

The main idea behind these several solutions and workarounds to make sure to provide best user experience to the millions of contacts receiving promotional emails on their devices everyday.

Rendering Engines of Email Clients

• Apple Mail, Outlook for Mac, Android Mail and iOS Mail use WebKit
• Outlook 2000/02/03 use Internet Explorer 6
• Outlook 2007/10/13 use Microsoft Word
• Web clients use their browser’s respective engine (e.g. Safari uses WebKit, Chrome uses Blink)

The Problem: Email Clients

Floats, background images and even margins are no longer a part of our code as email clients don’t render the html as the same way browsers do –not even close in most of the cases.

The Solution: Code like it’s 90s

Hope you are a fan of the great movie “Back To The Future” where the characters were solving the today’s problems by travelling to the past. Cellpadding, cellspacing, colspan – We have already left them behind many years ago however tables are the only way to create a consistent email layouts therefore now it’s time to leave modern CSS techniques and start working with non-semantic, messy tables.

Steps of the email coding

The Design Phase

• It’s always a good guide to see the final layout on a design file therefore it’s a good practice to create a design document before start coding the email.
• When designing the email keep in mind that simplicity is the ultimate sophistication and could save you from lots of complications. It’s a good practice to design an one or two column layout.
• As most of the email clients using small screen sizes, it’s a good practice to design the email canvas not wider than the 600 px as nobody likes the horizontal scrolling.

Tips before start coding

• <table> instead of <div>
• CSS2 instead of CSS3
• HTML4 instead of HTML5
• #FFFFFF instead of #FFF
• padding instead of margin
• background-color instead of background;
• color instead of images as a background,
• visual elements through the <img> tag
• HTML-attributes instead of CSS
• inline CSS instead of style sets or <style> blocks

The Development Phase

• As there are many email clients and rendering engines it’s important to find a way to create a generic structure.
• Keep in mind that about half of all emails in the world are read on the mobile devices and this number is growing everyday therefore it’s crucial to create a responsive layout.
• If you are working on a single column layout it’s not quite difficult to make the email responsive as there is no need to reorganize email’s components and we only need to adjust the width of the layout for the different screen sizes.
• Working with multi-column layouts are much difficult as the components needed to aligned vertically for the mobile screen sizes. We will be talking about 2 common techniques to create the multi-column responsive emails.              

Nested Tables

You can create multi-column layouts with the help of nested tables. This approach is more relaible regarding to the compatibility with several email clients.  The trick of this approach is to use align=”left” attribute for organizing the tables horizontally. Each of the elements should have a specific width and the total size of the elements should be equal to the container’s width. For the smaller screen sizes it’s necessary to use Media Queries to resize the container and using 100% width for the tables and columns. This technique ensures compatibility with the most of the email clients.

Changing the Display Property

The other option to create responsive html emails is changing the default display property of the table cells for the different screen sizes. For the mobile screen sizes we change the inital width of the tables and cells by using Media Queries and turning them to block elements. In this case layout won’t be fluid as we specify the necessary rules for the different screen sizes and as some of the mobile email clients such as Android Gmail app, Android Yahoo! Mail app, Windows Phone 8, and some others don’t support the Media Queries this method won’t be working properlyon these clients.

Responsive Images

As it’s looking shiny to use big  hero banners just under the header section of our emails it may cause readability issues on the mobile sizes. The solution of this issue quite simply using Media Queries and hiding the original image and show mobile optimized image instead of the original one.

Styling Phase

Fonts: It’s practical to use the Safe Fonts such as Arial, Times New Roman, Verdana, as they are default fonts found on the majority of the operation systems and devices.

However if you are looking for a creative touch to your email typography you can use font embedding services like Google Fonts.

Background Color: As the background images are not working properly on or email clients it’s crucial to have a fallback background color which is assigne to a cell as “bgcolor” for the clients don’t support the CSS backgrounds.

Display Block: Make sure to add display: block property to all images to avoid the weird margin bug on the Hotmail.

GIFS: Keep in mind that Outlook of 2007 to 2013 doesn’t support the GIFs and showing only the first shot of the GIFs. 

Testing Phase

Here are the some of the clients at least we should be testing for;

• Outlook 2003/2007
• Gmail
• Hotmail
• Yahoo! Mail
• Apple Mail
• Thunderbird

First of all we need to find a way to send out html emails. This can be a basic or enterprise       level email service provider.

We may create email accounts on all of the necessary email clients and can send out email to our own email addresses to see the results of the html rendering however as you may imagine this is not the most efficient way to test all of the email clients.

The other option is to use free or paid web apps that test hmtl emails on all email clients and all versions. These apps let you send your html email directly to a given email address or copy and paste your html to a code editor inside the app and showing the result of the rendering of all clients.

     Below you may see some of the best online email testing tools;

• Litmus
• PutsMail
• Inbox Inspector
• Email on Acid
• EmailReach

Common Html Email Coding Mistakes

Using box model ( <div> tags ) instead of <table>

Using table tag for layouts is not a good practice for the web however it’s still the best option to use tables for creating html emails for some reasons. As most of the Outlook versions don’t support the box model, css grid, floats etc. it’s hard to use semantic HTML to create html email layouts working properly on Outlook.

Usage of external CSS files

Most of the email clients such as Gmail, Yahoo, Mac, AOL won’t reference the external CSS files as they are using their own CSS coding. Use inline CSS instead of referencing to an external CSS file or putting the CSS file to the <head> of the email and calling it in the <body>.

Using large images as a whole email

Most email programs are blocking images by default, so there is a possiblility that your clients may see a blank screen when they open your email. Using a ratio of %80 images and  %20 text is ideal to not face this type of issues.

Using JavaScript in HTML Email

Most email applications block javascript for the security purposes. Make sure that your email doesn’t have any JavaScript code.

Creating too wide email canvas

When you are designing an html email you should consider viewing area of the most email clients. Creating email canvas not wider than the 600 px is a good idea as it fits with most of the email client windows.