Layout of responsive emails: Problems and solutions
E-mail is an excellent communication tool that allows companies to deliver content convenient for the audience. Many users prefer to receive HTML-letters, 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 content in various email clients. The fact is that the standard for the 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 indisputable advantages: they allow you to arrange a message in accordance with the corporate style of your company, create a clear structure and highlight important points 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 that is 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 differently, a very limited set of HTML and CSS elements remains at our disposal.
In contrast to the creation of web pages, with the layout of email we do not have the ability to use semantic elements. Therefore, in order to create a mailing list correctly displayed in each reader, we are forced to use the table. To style them, you need to use attributes such as width, height, bgcolor, align, cellpadding, cellspacing and border. In combination with inline styles like padding, width and max-width, this set of attributes gives a certain place to maneuver. Below is a sample code for a “table” letter:
Many email clients by default block the display of pictures, so it is important that the meaning of the letter is clear to the subscriber without them. You can do this with alt-text. Inline styles and img-elements allow styling it:
Ideally, after reading the letter, the user must perform some action. Therefore, the CTA (Call To Action) buttons must be made large, visible 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 display of pictures is disabled by default.
According to a study by Litmus, 53% of letter discoveries are made on mobile devices. At the same time, 26% of them fall on the iPhone, and 7% on Android devices. In many ways, this difference is explained by the fact that in iOS the display of images is enabled by default, and in many mail clients on Android, the opposite is done.
The company sending the letter can determine whether it was open with the help of special “tracking pixels” - small images loaded from a third-party server. If image loading is blocked, it is not possible to count the number of discoveries.
Working with multiple platforms inevitably leads to errors. What looks good on one can appear "crooked" on the other. When writing letters for iOS and Android, it is important to remember that not all mobile email clients have the same support for HTML and CSS. For example, iOS and Android differently "understand" responsive design:
If the letters 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. To avoid this, attention to the following nuances will help:
Short title emails stand out among many others in the Inbox. Typically, the email client on the computer displays about 60 characters in the subject field of the message. Mobile devices show no more than 20-30 characters. At the same time, on average, companies use more than 40 characters to describe the subject line.
A preheader is the first line of the text of the letter, which “pulls up” in the line under the subject and allows the subscriber to understand what the message will be about. Correctly selected text prehedera increases the efficiency of mailing.
To create a prehedera:
On small screens it is much more important to use the usable space effectively. Therefore, you need as clearly as possible to convey to the recipients the key points of the message and highlight calls to action.
Calls to action must be highlighted and located in the center of the screen. In addition, it is necessary 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 Apple iOS Human Interface Guidelines, it was stated that the button size should be no less than a square of 44 Ă— 44 pixels.
If the body of the letter consists of long blocks, use serif fonts. Georgia and Verdana fonts make text easier to read. However, sans-serif fonts are more suitable for short letters and single text passages. Read more about it here .
Font size should be large enough. A 14-pixel font for the message body and 22 pixels for the header will be optimal. 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 patterns work better than 500–600 pixels wide. 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 HTML-layout, rather than their CSS counterparts. For example, to align the text using the attributes align = "left" and cellpadding = "10" instead of float: left; and padding: 10px;
The markup for a two-column template might look something like this:
The essence of “progressive disclosure” ( progressive disclosure ) is to hide the content behind an interactive element such as a button or link, and then display this content by click. This ensures that the user does not have to scroll too much to get to the desired content at the bottom of the letter. This approach uses Wikipedia for mobile platforms.
Mail clients in terms of rendering and supporting HTML and CSS are even worse than browsers. Testing letters is necessary both on real devices and with the help of 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 confirms once again 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 be correctly displayed on any platforms.
What else do we write on the Pechkin-blog blog:
However, it cannot be denied that HTML-letters have a number of indisputable advantages: they allow you to arrange a message in accordance with the corporate style of your company, create a clear structure and highlight important points 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 that is 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 differently, a very limited set of HTML and CSS elements remains at our disposal.
1. Tables
In contrast to the creation of web pages, with the layout of email we do not have the ability to use semantic elements. Therefore, in order to create a mailing list correctly displayed in each reader, we are forced to use the table. To style them, you need to use attributes such as width, height, bgcolor, align, cellpadding, cellspacing and border. In combination with inline styles like padding, width and max-width, this set of attributes gives a certain place to maneuver. Below is a sample code for a “table” letter:
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td bgcolor="#333333"> <div align="center" style="padding: 0px 15px 0px 15px;"> <table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper"> <tr> <td>…Content…</td> </tr> </table> </div> </td> </tr> </table> 2. Images
Many email clients by default block the display of pictures, so it is important that the meaning of the letter is clear to the subscriber without them. You can do this with alt-text. Inline styles and img-elements allow styling it:
<img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"> 3. Calls to action
Ideally, after reading the letter, the user must perform some action. Therefore, the CTA (Call To Action) buttons must be made large, visible 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 display of pictures is disabled by default.
Optimization of letters for mobile devices
According to a study by Litmus, 53% of letter discoveries are made on mobile devices. At the same time, 26% of them fall on the iPhone, and 7% on Android devices. In many ways, this difference is explained by the fact that in iOS the display of images is enabled by default, and in many mail clients on Android, the opposite is done.
The company sending the letter can determine whether it was open with the help of special “tracking pixels” - small images loaded from a third-party server. If image loading is blocked, it is not possible to count the number of discoveries.
Working with multiple platforms inevitably leads to errors. What looks good on one can appear "crooked" on the other. When writing letters for iOS and Android, it is important to remember that not all mobile email clients have the same support for HTML and CSS. For example, iOS and Android differently "understand" responsive design:
- iOS devices scale the entire letter to fit it fully onto the screen.
- Android devices display a letter at a scale of 100%, and therefore you can see only a small fragment of it.
If the letters 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. To avoid this, attention to the following nuances will help:
1. Keep track of the length of the letter.
Short title emails stand out among many others in the Inbox. Typically, the email client on the computer displays about 60 characters in the subject field of the message. Mobile devices show no more than 20-30 characters. At the same time, on average, companies use more than 40 characters to describe the subject line.
2. Use the text prehedera
A preheader is the first line of the text of the letter, which “pulls up” in the line under the subject and allows the subscriber to understand what the message will be about. Correctly selected text prehedera increases the efficiency of mailing.
To create a prehedera:
- Designate the essence and advantages of your offer;
- Add a link to the landing page and a text call-to-action (for example, “Learn more”);
- The text of the prehedera should not exceed 30 words (if possible, reduce it to 20 words);
- Try to make it personalized;
- Do not repeat the title text, the preheader should complement it;
- Like the rest of the letter, the text prehedera needs to be tested, tested and tested again.
3. The text should be short
On small screens it is much more important to use the usable space effectively. Therefore, you need as clearly as possible to convey to the recipients the key points of the message and highlight calls to action.
4. Use large CTA buttons
Calls to action must be highlighted and located in the center of the screen. In addition, it is necessary 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 Apple iOS Human Interface Guidelines, it was stated that the button size should be no less than a square of 44 Ă— 44 pixels.
5. Choose the right font.
If the body of the letter consists of long blocks, use serif fonts. Georgia and Verdana fonts make text easier to read. However, sans-serif fonts are more suitable for short letters and single text passages. Read more about it here .
Font size should be large enough. A 14-pixel font for the message body and 22 pixels for the header will be optimal. The choice of 14-pixel size is due to the fact that iOS automatically increases the font to at least 13 pixels.
6. Use one-column layout.
On mobile devices, single column patterns work better than 500–600 pixels wide. 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 HTML-layout, rather than their CSS counterparts. For example, to align the text using the attributes align = "left" and cellpadding = "10" instead of float: left; and padding: 10px;
The markup for a two-column template might look something like this:
<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> 7. Apply the technique of "progressive disclosure"
The essence of “progressive disclosure” ( progressive disclosure ) is to hide the content behind an interactive element such as a button or link, and then display this content by click. This ensures that the user does not have to scroll too much 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
Mail clients in terms of rendering and supporting HTML and CSS are even worse than browsers. Testing letters is necessary both on real devices and with the help of 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 confirms once again 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 be correctly displayed on any platforms.
What else do we write on the Pechkin-blog blog:
- "Write letters": Three techniques of layout of good emails
- Email Marketing: Recipe for Correct Plain-Text Letters
- How-to: interactive writing guide
- Pechkin-mail "wiki": Checklist for email newsletters
- Interfaces and usability: Who designs UX and how
Source: https://habr.com/ru/post/311656/
All Articles