October 4, 2016 at 10:26Layout of adaptive emails: Problems and their solutions
Email is a great communication tool that allows companies to deliver content in an audience-friendly way. Many users prefer to receive HTML emails, and this is not surprising. However, the creation of such letters is not always an easy task for designers, since it is necessary to achieve an adequate presentation of the content in various email clients. The fact is that the standard layout of letters, which would be supported by all mail applications at the same time, does not yet exist.
However, it cannot be denied that HTML letters have a number of undeniable advantages: they allow you to design a message in accordance with the corporate identity of your company, create a clear structure and highlight important places of the message. Yesterday we returned to this topic, and in today's article we will provide some useful tips that will allow you to create a competent letter, beautifully displayed on all platforms. Photo by Johan Larsson / Flickr / CC
HTML layout is based on three pillars: tables, HTML attributes and inline CSS. Unfortunately, due to the peculiarities of the work of email clients, who “understand” the same things in different ways, we still have a very limited set of HTML and CSS elements at our disposal.
Unlike the creation of web pages, we do not have the ability to use semantic elements in the layout of email. Therefore, in order for each reader to correctly create mailing letters, we are forced to use tables. To style them, you need to use attributes such as width, height, bgcolor, align, cellpadding, cellspacing and border. Combined with inline styles like padding, width and max-width, this set of attributes provides a specific place to maneuver. The following is an example code for a tabular email:
Many email clients block the display of images by default, so it is important that the message’s meaning is understood by the subscriber without them. This can be done using alt-text. Inline styles and img elements will allow styling it:
Ideally, after reading the letter, the user should perform some action. Therefore, the CTA (Call To Action) buttons must be made large, noticeable and, if possible, placed at the top of the letter. Instead of conventional images, it is advisable to use bulletproof buttons . They will be visible even in those clients where the image display is disabled by default.
According to a Litmus study, 53% of open emails are made on mobile devices. At the same time, 26% of them are on the iPhone, and 7% are on Android devices. This difference is largely due to the fact that in iOS, the display of images is enabled by default, and in many email clients on Android the opposite is done.
The company sending the letter can determine whether it was opened using special “tracking pixels” - small images uploaded from a third-party server. If image loading is blocked, it is not possible to calculate the number of openings.
Working with multiple platforms inevitably leads to errors. What looks good on one, on the other can be displayed “crookedly”. When composing emails for iOS and Android, it is important to remember that not all mobile email clients have the same HTML and CSS support. For example, iOS and Android differently "understand" responsive design:
If the letters that you send to your subscribers are not optimized for viewing on small screens, then a significant part of the audience simply will not read them. Attention to the following nuances will help to avoid this:
Emails with short headers stand out among many others in the Inbox. Typically, an email client on a computer displays about 60 characters in the subject line of a message. Mobile devices show no more than 20-30 characters. Moreover, on average, companies use more than 40 characters to describe the topic of writing.
A preheader is the first line of the text of the letter, which is “pulled” into the line under the subject line and allows the subscriber to understand what will be discussed in the message. Correctly selected preheader text increases the efficiency of the distribution.
To create a preheader:
On small screens, it’s much more important to use usable space efficiently. Therefore, it is necessary to convey the key points of the message to the recipients as clearly as possible and to highlight calls to action.
Calls to action should be highlighted and centered on the screen. In addition, it is worthwhile to surround them with a significant amount of empty space - it is easier to get into them with your finger. For example, even in the earliest versions of the Apple iOS Human Interface Guidelines, it was stated that the button size should be no less than a 44 × 44 pixel square.
If the body of the message consists of long blocks, serif fonts should be used. Georgia and Verdana fonts make text easier to read. However, for short letters and single passages of text, sans-serif fonts are more suitable. Read more about it here .
The font size should be large enough. The optimal font size is 14 pixels for the body of the message and 22 pixels for the header. The choice of 14-pixel size is due to the fact that iOS automatically increases the font to at least 13 pixels.
On mobile devices, single-column templates no wider than 500-600 pixels work better. To turn a two-column layout into a single-column layout, you need to create a container table for the desktop version of 640 pixels and nested tables of 320 pixels. Nested tables will play the role of columns.
Since this is not a web layout, it is better to use the attributes of the HTML layout, rather than their CSS counterparts. For example, to align text, use the attributes align = "left" and cellpadding = "10" instead of float: left; and padding: 10px ;.
The layout for a two-column template might look something like this:
The essence of the "progressive disclosure» ( progressive disclosure ) is interactive content for concealing element such as buttons or links, and then display this content on click. This ensures that the user does not have to scroll too much in order to get to the desired content at the bottom of the letter. This approach uses Wikipedia for mobile platforms.
Email clients are even worse at rendering and supporting HTML and CSS than browsers. Testing letters is necessary both on real devices and using special preview services (for example, from Pechkin ).
Between 2010 and 2015, the number of emails opened on mobile devices increased by 30% . And this trend once again confirms that responsive email design is not a luxury, but a necessity. Following the recommendations presented in the post, you can create an attractive HTML letter that will correctly display on any platform.
What else are we writing in the Pechkin-mail blog:
However, it cannot be denied that HTML letters have a number of undeniable advantages: they allow you to design a message in accordance with the corporate identity of your company, create a clear structure and highlight important places of the message. Yesterday we returned to this topic, and in today's article we will provide some useful tips that will allow you to create a competent letter, beautifully displayed on all platforms. Photo by Johan Larsson / Flickr / CC
HTML for email
HTML layout is based on three pillars: tables, HTML attributes and inline CSS. Unfortunately, due to the peculiarities of the work of email clients, who “understand” the same things in different ways, we still have a very limited set of HTML and CSS elements at our disposal.
1. Tables
Unlike the creation of web pages, we do not have the ability to use semantic elements in the layout of email. Therefore, in order for each reader to correctly create mailing letters, we are forced to use tables. To style them, you need to use attributes such as width, height, bgcolor, align, cellpadding, cellspacing and border. Combined with inline styles like padding, width and max-width, this set of attributes provides a specific place to maneuver. The following is an example code for a tabular email:
…Content…
2. Images
Many email clients block the display of images by default, so it is important that the message’s meaning is understood by the subscriber without them. This can be done using alt-text. Inline styles and img elements will allow styling it:
3. Calls to action
Ideally, after reading the letter, the user should perform some action. Therefore, the CTA (Call To Action) buttons must be made large, noticeable and, if possible, placed at the top of the letter. Instead of conventional images, it is advisable to use bulletproof buttons . They will be visible even in those clients where the image display is disabled by default.
Optimization of letters for mobile devices
According to a Litmus study, 53% of open emails are made on mobile devices. At the same time, 26% of them are on the iPhone, and 7% are on Android devices. This difference is largely due to the fact that in iOS, the display of images is enabled by default, and in many email clients on Android the opposite is done.
The company sending the letter can determine whether it was opened using special “tracking pixels” - small images uploaded from a third-party server. If image loading is blocked, it is not possible to calculate the number of openings.
Working with multiple platforms inevitably leads to errors. What looks good on one, on the other can be displayed “crookedly”. When composing emails for iOS and Android, it is important to remember that not all mobile email clients have the same HTML and CSS support. For example, iOS and Android differently "understand" responsive design:
- iOS devices scale the entire letter to fit it on the screen.
- Android devices display a letter at a scale of 100%, in connection with which you can see only a small fragment of it.
If the letters that you send to your subscribers are not optimized for viewing on small screens, then a significant part of the audience simply will not read them. Attention to the following nuances will help to avoid this:
1. Keep track of the length of the subject line
Emails with short headers stand out among many others in the Inbox. Typically, an email client on a computer displays about 60 characters in the subject line of a message. Mobile devices show no more than 20-30 characters. Moreover, on average, companies use more than 40 characters to describe the topic of writing.
2. Use preheader text
A preheader is the first line of the text of the letter, which is “pulled” into the line under the subject line and allows the subscriber to understand what will be discussed in the message. Correctly selected preheader text increases the efficiency of the distribution.
To create a preheader:
- Identify the essence and advantages of your proposal;
- Add a link to the landing page and a text call to action (for example, “Learn more”);
- The preheader text should not exceed 30 words (if possible, reduce it to 20 words);
- Try to make it personified;
- Do not repeat the title text; the preheader should supplement it;
- Like other elements of the letter, the preheader text needs to be tested, tested, and tested again.
3. The text should be short
On small screens, it’s much more important to use usable space efficiently. Therefore, it is necessary to convey the key points of the message to the recipients as clearly as possible and to highlight calls to action.
4. Use the large CTA buttons
Calls to action should be highlighted and centered on the screen. In addition, it is worthwhile to surround them with a significant amount of empty space - it is easier to get into them with your finger. For example, even in the earliest versions of the Apple iOS Human Interface Guidelines, it was stated that the button size should be no less than a 44 × 44 pixel square.
5. Choose the correct font
If the body of the message consists of long blocks, serif fonts should be used. Georgia and Verdana fonts make text easier to read. However, for short letters and single passages of text, sans-serif fonts are more suitable. Read more about it here .
The font size should be large enough. The optimal font size is 14 pixels for the body of the message and 22 pixels for the header. The choice of 14-pixel size is due to the fact that iOS automatically increases the font to at least 13 pixels.
6. Use single-column layout
On mobile devices, single-column templates no wider than 500-600 pixels work better. To turn a two-column layout into a single-column layout, you need to create a container table for the desktop version of 640 pixels and nested tables of 320 pixels. Nested tables will play the role of columns.
Since this is not a web layout, it is better to use the attributes of the HTML layout, rather than their CSS counterparts. For example, to align text, use the attributes align = "left" and cellpadding = "10" instead of float: left; and padding: 10px ;.
The layout for a two-column template might look something like this:
Column Left Content
Column Right Content
7. Use the "progressive disclosure" technique
The essence of the "progressive disclosure» ( progressive disclosure ) is interactive content for concealing element such as buttons or links, and then display this content on click. This ensures that the user does not have to scroll too much in order to get to the desired content at the bottom of the letter. This approach uses Wikipedia for mobile platforms.
8. Test the letter before sending
Email clients are even worse at rendering and supporting HTML and CSS than browsers. Testing letters is necessary both on real devices and using special preview services (for example, from Pechkin ).
Between 2010 and 2015, the number of emails opened on mobile devices increased by 30% . And this trend once again confirms that responsive email design is not a luxury, but a necessity. Following the recommendations presented in the post, you can create an attractive HTML letter that will correctly display on any platform.
What else are we writing in the Pechkin-mail blog:
- “Write letters”: Three techniques for making good emails
- Email Marketing: The Recipe for the Right Plain-Text Email
- How-to: Interactive Email Creation Guide
- Pechkin email "wiki": Email newsletter checklist
- Interfaces and Usability: Who and How Designs UX
