How to design proper responsive email templates?

Before we enter to the field of email html, we have to lay down the basic rules.

The regular approach in how to design an email, is not compatible with websites, and you are also not able to compare to print designs. Principles such as element height are totally not usable when it comes to email design.

What are the basic elements of a responsive html email?

Static blocks, media query based columns, and the content elements like titles, texts, images and buttons. All other elements are illusions: video, iframes, or other regular elements on websites are actually special elements that don’t work at all with email clients. Sometimes, other elements look different, or more complex, but usually we have to build them up from the previously mentioned basic elements. So these basic elements, are the lego bricks of our email design.

We have to choose the right size for our canvas, to start our planning like an architect. Most of the web-based email clients use viewport between 720 and 600 pixels, so the wisest decision for proper canvas size is a 600 pixel wide worksheet. Everything outside of this, is body. We are not able to put elements into this outer region. So our body should have a background-color, or some nice background image that helps to focus on the content (in rare cases body background-images also do not work, but only in few versions of outlook).

If its a repeating pattern, then it should be small so as not to consume too much space (a repeated background is most common), or we should prepare a big background, like a wallpaper, usually centered on the top, but try to keep this image under 100kbytes, and not taller than 5-600 pixels, because some email clients remove the larger background images. The most beautiful emails usually use vertical gradients and/or illustrations that end in the background color.

Most of the time, when we create a layout, we use margins and paddings – much like an onion’s layers – around our content, to separate our content from the sides, and from the above/below elements. This is not a big issue with responsive websites, because we can manage each and every screen size with media queries, and are able to adjust margin/padding properties. In email HTML however, we have to use the ancient table structure, to avoid the insane differences of different email clients. Most of them do not support margin and/or padding attributes on elements.

In the case of tables, our table secures the margin values and is always bulletproof. When the mobile screen starts to init the media query rules, most of the time we can’t change or adjust the margin values of these elements. We therefore need to use structures that can work on all viewports. This is the main point of our article, how to prepare the design in order to keep the needed distances.

If we choose to create a container that keeps a 10px margin around the content, so as not to let the content stick to the sides of the screen, a simple and good solution could be if we use only one column in our layout. If we want different structure elements, one-columned, two-columned or three-columned parts in one email, that could be a headache sometimes; the margins/paddings – that may look good on a desktop view – make a distorted structure on mobile, as you can see on the 2nd illustration. (The red shows the BAD margins, and the green ones are the GOOD margins in our illustrations.)

The problem comes from the first approach. The first illustration shows a typical usage of margins. Where we give a global margin to the big content container. Each of the columned structures needs a different handling in this case. When you have one-column, thats a good way to use the margins, but with more columns, thats the source of the evil.

Before we go to the right path, we need to understand what the real problem is.

On the third illustration, we can see that the highlighted inner elements have margin-top and margin-right with 10px. After the media queries rearrange the columns, these margins are still there and create the zig-zag effect on a mobile screen. It shows us that the global margin on the big content container is not a good choice.

So we need to create different blocks/boxes for different column-layouts.

How to deal with margins in responsive emails?

As I mentioned before, you have to handle the margins on each different column structure one-by-one. So if you have one-column, the old way is a good approach, just apply the margins around the column. If you have two columns in one row, you have to prepare for how the two columns will rearrange on a small display – the best solution is to apply symmetric margins on the left and the right of each column.

When there are more columns, you should do the same and apply symmetric values. You can see the 4th illustration, that shows the right applied margins, and on the 5th, you see the proper reordering on mobile too.

What about vertical margins?

I would advise you to apply only top margins on individual elements. For example if you want to have a 50px vertical space between two or more images, just add an 50px top margin to each of them, instead of adding 25px top and 25px bottom margin. Why? Because some of the modern clients may use collapsing margins, and that has the chance to change the expected layout. Of course you can avoid this if all of your margins and structure elements are built up by tables.

We hope this article can help graphic designers create better email designs for mobile too. Feel free to give us feedbacks.