Layout of responsive emails: a detailed guide (part 1)

Anyone who periodically reads mail on the phone knows that this experience can be both quite enjoyable and just awful. The fact that the email from the mailing list looks great on the desktop does not mean that everything will be fine in the mobile mail client - on a small screen there are often problems with fonts, displaying columns, and the layout of templates simply disperses.

Why do I need to adapt letters for mobile devices

A significant part of the audience of various companies involved in email marketing, browsing letters on mobile devices. During the Campaign Monitor survey of 2011, it turned out that almost 20% of email discoveries occurred on smartphones and tablets - in 2009 this figure was only 4%. Almost 90% of these discoveries were made on iOS devices. Now the numbers are even higher.
')
In this tutorial, we will look at several ways to improve the display of mailing lists on mobile devices (from using media queries with the layout of adaptive templates to more advanced techniques). In addition, we will consider various design issues that arise at the planning stage of distribution, and also talk about how to post subscription forms to receive letters on smartphones and tablets.

Design techniques

Before diving into the world of writing letters, let's talk about the visual component of this case. An interesting point is that during the analysis of the material we will create two versions of the same letter - one template is designed to look good on desktop email clients, and the second should be nice to read on devices with small screens.

Here, for example, how such a letter might look in Outlook:



Below is the same letter, but opened in the Mail application for the iPhone. The difference between the two patterns is clearly visible. The mobile version is already, there are fewer optional visual elements in it, but it is also convenient to read it, just like the desktop version. The difference in the appearance of the two mobile options is to use CSS.



The right letter is no different from the left, but the CSS was not used for its layout. Some sections of the text turned out to be too small, and it is almost impossible for the user to make out what is written there - this is the problem of the millions of newsletters that the owners of mobile devices receive every day.

What to consider when creating templates

Creating letters that look good on mobile devices is much more complicated than just using special CSS. Attention should be paid to other things:

• On mobile devices, single-column patterns work no better than 500-600 pixels. They are easier to read, and even if they have any flaws, all the “shoals” in any case look better.
• According to Apple guidelines, the minimum target area for buttons and links should be 44 x 44 pixels. There is nothing more “useless” than a bunch of small links that are difficult to get on the small screen of a mobile device.
• The minimum font displayed on the iPhone is 13 pixels. This fact should be taken into account when creating the text of the letter - if the text in the template is typed in a smaller font, it will be automatically enlarged, which can break the entire layout.
• The letter should be concise, and all important information should be located in its upper part. Scrolling on the touchscreens is more difficult with a finger than on the desktop with a mouse.
• If possible, use the display: none property; to hide optional template elements. The sharing buttons on the social network are relevant on the desktop, but they are not always convenient to use on a smartphone.

In the process of prototyping, you should create two sketches or wireframes - one for the template, which will be displayed in desktop clients and web versions of mail services, and one for mobile devices. It is important to check how the call to action, included in the letter, looks like - whether it can be seen immediately upon opening the letter or whether the user will have to scroll the email:



Now, after we have considered some important issues of mailing list design for mobile platforms, you can go directly to the various aspects of their layout.

Impose mobile letters

When it comes to mobile styles, most often means not a separate style file, but media queries. So they look like this:

<style type="text/css"> @media only screen and (max-device-width: 480px) { /*       */ } /*   CSS   */ </style> 

Let's take a closer look at how the @media announcement happens. First of all, to create a “mobile” CSS you need to implement some criterion by which the email client will determine which styles to use.

The operator @media only screen is used for this - it shows that the email client should be displayed on the screen (instead of, for example, being printed on a printer). After that, in the example code above, we set the maximum screen width of the device to 480 pixels. This is important because for many (but not all) mobile devices, the data display area on the screen is 480 pixels or less.

Therefore, max-device-width: 480px often used (this is also the width of the display of previous iPhone models in landscape mode), but you can expand the description to cover other screen sizes:

 @media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... } 

Let us return to the above mobile letter pattern. Here’s how it looks in Apple Mail:



In this example, used for HTML tables containing text and images, applied contenttable class class. Here is a sample code:

 <style type="text/css"> @media only screen and (max-device-width: 480px) { /*    CSS- */ table[class=contenttable] { width: 320px !important; } } /* regular CSS styles go here */ table.contenttable { width: 640px; } </style> 

This class plays an interesting role - when a letter is opened on a device with a screen of 480 pixels or wider, it does not affect anything. However, when the screen is 480 or less, it narrows the width of the tables to 320 pixels. In order to avoid an unusual glitch in Yahoo mail, attribute selectors are used. Otherwise, “normal” CSS is used. In addition, you can include such ads:

 @media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ table[class=contenttable] { width: 325px !important; } img[class="headerimage"] { width: 325px !important; } p[class="date"] { display: none !important; } } 

Next, we will look at more complex techniques for adapting mobile emails for mobile devices.

Creating adaptive templates with columns "from two to one"

Using single-column patterns is a good way to optimize newsletter for mobile devices. At the same time, there are ways to create adaptive two-column templates, without the need for long CSS in media queries.

The two-column template allows you to put more content in the upper part of the message displayed in desktop or web mail clients, but reading and navigating such letters on mobile devices is still a pleasure. You can fix this with the help of the good old code.

The golden rule for the imposition of letters is: "Wherever possible, use HTML instead of CSS." The degree of CSS support by different email clients can vary considerably, but they all work the same way with HTML. For example, attributes like align=”left” and cellpadding=”10” are a much more reliable tool than their CSS counterparts float: left; and padding: 10px; . These attributes will be used when creating letters in the “from two to one column” format.

This is how a similar letter might look like in Outlook 2007:



In the example above, a table container with a width of 640px is used, which contains two tables of 320px forming columns. These columns have cellpadding=”20“ - this is done so that the content does not cling to the borders.

For web layouts, float:left; to align the columns. However, you can use align=”left” instead. Since the width of the container table is equal to or greater than the total width of the two nested tables, using HTML will work well. Below is the simplified code for a similar two-column template:

 <table width="640" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="320" border="0" cellspacing="0" cellpadding="20" align="left"> <tr> <td><p>Column Left Content</p></td> </tr> </table> <table width="320" border="0" cellspacing="0" cellpadding="20" align="right"> <tr> <td><p>Column Right Content</p></td> </tr> </table> </td> </tr> </table> 

The result looks like this:



The container table is 640 pixels wide, so the pattern will be two-column. But in the event that the width of the screen is smaller than this, then the content of the right column will be “wrapped” under the left. If you make the width of the nested tables equal to 320 pixels, then when displayed on a mobile device, you will get a one-column letter that you do not need to zoom at all. This effect can be achieved by adding a single media query line to the HTML code:

 <style type="text/css"> @media only screen and (max-device-width: 480px) { table[class=contenttable] { width:320px !important; } } </style> <table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable"> 

The result is an adaptive template that will be two-column on the desktop and one-column on mobile devices (in the default Mail application for the iPhone and the Android mail client).

Adding “progressive disclosure” (as in Wikipedia)

Many sites use to convert long web content into a short mobile technique called progressive disclosure . It consists of hiding the content behind an interactive element like a button or link, and then showing this content by clicking (or tap). This technique is used by Wikipedia and many other projects - it can also be used for layout of letters for mobile devices (CSS is used to hide and show content).

For example, a situation is possible in which various articles are listed in the newsletter. The web version for each article should display the title and text:



But for mobile devices, displaying only the title and the button, with which you can expand (and minimize) the description, is much better suited. This turns the letter into an interactive table with content and allows you to make it much more concise:



In order to achieve this effect, you first need to create a “fish” of the article with its title and description using HTML. You should also add a pair of classes to display the maximize / hide buttons on mobile devices only. Below is a simplified version of this code:

 <td> <h4><a href="http://yourdomain.com" class="link">First heading</a></h4> <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a> <div class="article"> <p class="bodytext"> <img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi... </p> <a href="http://yourdomain.com">Read more...</a> </div> </td> 

The main actions will be carried out using mobilehide , mobileshow and article classes. With display:none; The button for expanding / hiding content will be hidden on the desktop:

 a[class="mobileshow"], a[class="mobilehide"] { display: none !important; } 

To make sure that this button is displayed only on mobile devices, you will have to resort to the media query. Below is the code for this (including the previously used mobileshow and mobilehide , as well as some styles for webkit):

 @media only screen and (max-device-width: 480px) { a[class="mobileshow"], a[class="mobilehide"] { display: block !important; color: #fff !important; background-color: #aaa; border-radius: 20px; padding: 0 8px; text-decoration: none; font-weight: bold; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; position: absolute; top: 25px; right: 10px; text-align: center; width: 40px; } div[class="article"] { display: none; } a.mobileshow:hover { visibility: hidden; } .mobileshow:hover + .article, .article:hover { display: inline !important; } } 

As a result, the iPhone will display buttons for minimizing and expanding content. On GitHub, the entire code of the test case is presented - it can be used to adapt and use in your own email campaigns.

Today, everything, in the next article will be about using media query for targeting mobile devices and optimizing images for display on smartphones and tablets.

Thank you for your attention, do not forget to subscribe to our blog !