How to design responsive emails

Over the past few years, the soaring use of mobile terminals has led to an evolution or revolution in how we provide content to network users. The ultimate goal is fluid, adapting to mobile terminals and device-agnostic web and a school that has become popular:Responsive Design. However, despite the high speed of responsive design, email design and development have been striving to keep up with each other.

To some extent, HTML email is an extremely complex medium for developers. The old email client technology cannot present many rules, leading to invalid code. However, email is still a key marketing channel, which is very important. It cannot be ignored that in the first half of 2012, Litmus released a report on opening emails on mobile devices, the report shows that the number of emails accessed by mobile devices has increased by 80%. In the same year, campaign monitor showed that their mobile email opening rate for the first time had actually exceeded the desktop and web mailbox.

Obviously, it is important to perform proper analysis before mobile development. However, making a responsive email can ensure that users who use desktops and mobile devices can enjoy an excellent user experience and the arrival of 4G networks, the trend of mobile terminals is even more unstoppable, so why is responsive design not outdated.

Incompatible

If you have unfortunately opened a fixed-width email on a mobile device, you will understand the need for responsive email design. Suddenly open the screen, multi-bar layout can be zoomed in to reduce the font size and become unclear. The user may zoom in, but it is annoying that the user must continuously scroll from left to right to read the content horizontally. The link is small and crowded together, And the touch screen of the fingers is not considered at all. Comparison on small windows is often difficult to read. Obviously, Optimization on the Mobile End is very important, but what is the best method?

Best practices for mobile terminals

Before writing code, consider the design features to greatly improve the user experience on the Mobile End. Regardless of the screen size, this is wise.

• Clear and concise content:A small screen means that it is more important than ever to allow users to obtain important information more effectively.
• Single Column Layout:Simplicity is the key, and the layout is no better than the 640px width. The Single Column Layout ensures that no content is lost when the windows are enlarged.
• An attractive title:This is the most effective weapon for email marketing in a crowded inbox. Keep the title brief and concise.
• Large motion triggering area (CTA ):Do not punish fat fingers! In Apple's iOS Human-Computer Interaction Interface Design Guide, we recommend that you click 44x44 in the target area.
• Generous font size:Make sure that your information is easily read.
• Pre-header:Another key area is visibility in the inbox. Avoid text such as "Browser display.
• Align left text:There are many reasons to adjust important elements in the content area on the left. (Root eye tracking research shows that most western users focus on the content of emails on the left. This is not surprising because we read the text from left to right. In some operating systems, especially Android, the content cannot be scaled to the screen, so only the left half of the email is displayed. From an ergonomic perspective, most users will find it easy to operate with the middle elements in the lower left/hand-held corner of the screen .)
• Vertical Structure Arrangement:To reduce the size of the screen, the folding idea is often used at any time. The clickable areas of important commodity transactions should be as close as possible to the top; if they cannot be seen immediately, they may lose the functionality they use.
• Use images with caution:Do not think you will see the image. The iPhone's local email application will display the default image, but many clients will not display the image.

These skills can improve the user experience on the mobile end, but you can, and should be further optimized. As mobile email clients continue to support css3, responsive email design is now possible.

Start

As mentioned above, HTML email production has a serious lack of standards. For layers, the next step will bring you back to an early web development era. Because the rendering engine of the HTML email client is made, the layout must use the table and CSS styles and must use the intra-row style. Several Email users will ignore the <style> style in

Some email templates can be used. I suggest using Sean Powell's HTML email boilerplate as the starting point, but we should start from scratch for demonstration.

For a Chinese introduction to HTML email boilerplate, you can click HTML email boilerplate source code to read and HTML email boilerplate-Desert

If you like to keep learning with the code, you can download the template of this article here.

Demodownload

Document Type (doctype)

Hotmail and Gmail will automatically Insert the XHTML 1.0 strict document type. Although it is not a bad idea, it is important to use it to thoroughly test whether your email and email clients without document types can be automatically generated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Email acid has extensively studied the types of email documents. If you are interested, click here.

Media queries)

We can now insert a meta tag for Windows to ensure that our emails are correctly displayed on mobile devices. It is also a good idea to specify the content type and a title label. This is a good idea if you plan to provide a "browser View" link in your email, but ignore this point, which will be ignored in many email clients.

Because Content-Type may be ignored in an email, it is wise to use HTML Entity character encoding for all special characters in your email.

There are also a few other ways to ensure that our email can be cross-platform, and we also need to set several management fees.

 
 Note:The Windows Meta tag has a negative impact on Blackberry.
 
Now we can insert a media query, depending on the number of features you want each device to require. In this example, we will use only one media query-the screen size of most devices is not greater than 600px, which is made by modern mobile phones and touch screens to help optimize the style of mobile devices. In addition, we assume that we follow the general mobile best practices technology. We also said earlier that the larger layout for mobile users will be shipped to a major availability issue.
 
When we build a website using media query in a sample way, if the window size meets the media query conditions, we apply the style in the media query.
 
@media only screen and (max-width: 600px) { table[class="hide"], img[class="hide"], td[class="hide"] { display:none!important; } }
 
In the preceding example, when the screen is smaller than 600px, you can set display: none for the element with the class name hidden to hide the element .! Important can ensure that any inline style is overwritten. This is the basic principle of responsive email design: Pass in the  
It is worth noting that the CSS attribute selector for HTML elements can overcome the rendering problem of Yahoo Mail.
 
So we can see that the selective display of media queries is a useful tool, but we can also use them to layout other features of my air conditioner. Perhaps the most important thing is that we can constrain the column width of our email-the biggest key to the mobile experience.
 
@media only screen and (max-width: 600px) { table[class="content_block"] { width: 92%!important; } }
 
We have set it in our media query. When the screen width is smaller than 600px, the width of all class names content_block is adjusted to 92%. Now we need to specify the inline attribute width (600px) and the definition class content_block in any table. We have a fixed-width container, and then specify a ratio of the width under the mobile device.
 
Specify the width attribute of the sub-element of the container as a percentage. This is a basic responsive email template.
 
As an empirical rule, to take care of WebKit's automatic adjustment of the <body> label text size, try to keep the minimum font size above 12 PX.
Button
Call Operations (CAT) are usually the most important part of marketing emails. They should be compelling, good, and most importantly used. A powerful cat standard is to have different cursors or fingers based on different actions. The powerful function of responsive email is to provide a finger-operated button on a small touch screen device, so that finger operations are not hindered by images.
 
 
 
Unfortunately, such buttons cannot be universally displayed because they depend on the padding attribute, but are not supported on some desktop email clients.
 
@media only screen and (max-width:600) { a[class="button"]{ display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-align: center; text-decoration: none!important; } }
 
The style Declaration above will change the tag with the class name button, as long as the screen width is not greater than 600px, the button will become larger, nice-looking, color, and cross the width of the content area. Css3 support should not be a problem. We can write our objective to be a reasonable modern mobile technology.
 
<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>
 
Inline styles allow users with the mouse to click and more precise, but overwrite these styles to reduce interaction errors. It is important that this method does not depend on the image, so it avoids the availability problem of image loading block.
Conclusion
Response email design is still a compromise. What is confusing is a series of different devices. The rendering engine of the email client brings a daunting task to designers and developers. However, as technology advances, it is easier to provide users with an appropriate layout and they can provide effective interaction without any effort. More and more email clients support media queries, which changes the appearance and optimization of mobile emails and provides a platform for us to greatly improve the user experience. Now, designers and developers are trying creative ways to give more mobile users a better experience.
 
Have you designed emails? Are you using a responsive method? Please let us know in the comment.
 
 Translator's sign language:The whole translation is carried out in accordance with the original line, and a personal understanding of the technology is added in the translation process. If there is something wrong with the translation, please contact your colleagues. Thank you!
 
If you need to reprint it, please indicate the source:
 
Http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/.
 
Http://www.w3cplus.com/css/responsive-html-email-design.html.
How to design responsive emails