Mobile devices are quickly becoming the majority of email opens. Unless your messages are designed for multiple screen types, your desktop-geared designs are likely to result in a frustrating experience for mobile recipients.
Regardless of the approach you use, apply these mobile-specific best practices to improve your results.
- Plan for desktop and mobile throughout the entire design process.
- Start with the standard email best practices.
- Use CSS3 media queries to provide a responsive mobile email experience where possible.
- A minimum font size of 14 px is recommended for easy reading on smaller screens.
- Provide ample space for touch interaction. 44 px by 44 px is the recommended minimum size for tappable elements.
- Use single column layouts.
- Reduce the amount of content that is shown in mobile versions. Focus on providing only content that is most relevant to your primary message goals.
- Keep your layout simple and easy to scan.
- Keep styles as lean and simple as possible.
- Use code comments and restrict them to one line per comment.
- Use images sparingly and wisely. Where possible rely on typography, contrast and color instead.
- Position calls-to-action wisely. The upper-left area of the message is prime real estate for mobile email clients that do not yet support media queries. Include a Click to view in browser link here so that users can open your message in web browser.
- Test extensively with multiple screen sizes and resolutions. Bring your own Litmus integration, which allows you to preview the rendering of your messages in major email client and device combinations from your interface.
- Hide navigation bars, icons, and any other potentially distracting, non-essential elements.
- Avoid clustering links. Links that are too close together are difficult to interact with on a touch interface.
- Use high-contrast designs because they are easier to read in different lighting conditions. Think about indoor and outdoor lighting conditions.
- Avoid horizontal scrolling.
Coding approaches for multiple screen types
A modern and effective email marketing strategy addresses the needs of both desktop and mobile recipients. The following approaches to coding can help you accomplishing that balance.
Scalable
This approach might be easiest to implement because of its use of familiar HTML coding practices and a single layout design. The key elements of this approach are a narrow message width and a simple layout that is easier to read and interact with on mobile devices. However, this mobile-friendly presentation might appear awkwardly narrow when viewed on larger displays.
Fluid
When you use percentages to define all table-related widths in your layout, your content fluidly wraps to fill the available screen area. For example, instead of defining two columns as 600 and 200 pixels wide, you define them as 75% and 25%. By doing so, the table column widths scale up or down, and the content shifts and rewraps as you resize the browser or view the content on different-sized devices. This approach results in less control over how the recipient sees your message and can be awkward-to-read text areas for large displays.
Adaptive
By using CSS3 media queries to trigger specific sets of styles, you can target specific resolutions and display corresponding fixed-width layouts. For example, in addition to including a standard fixed-width desktop layout, you can target the resolution of an iPhone by using a media query. A tailored layout is presented when your message is viewed on that device. However, one drawback is the wide range of devices with different screen resolutions. CSS3 media query coding is required as well as additional development time and effort to create and test each layout.
Responsive
Truly responsive design combines the best of fluid and adaptive approaches by incorporating CSS3 media query styling and percentage-based widths. A responsive email scales and wraps the content to fit 100% of the screen regardless of the recipient's device. CSS3 media query coding is required as well as additional time and effort to create and test.
Adaptive and responsive coding
Note: To incorporate an adaptive or responsive approach to your email coding, you must have a working knowledge of CSS.
The key to adaptive and responsive emails is to combine media queries with strategically-placed classes or IDs. Media queries are included in the head of your HTML code. In the following example, look for the tag @media
.
Note: You must refer to HTML elements by using attribute selectors, as shown in the sample code because of a bug in Yahoo! mail.
<head> <style type="text/css"> /* Standard email client bug fixes */ div, p, a, li, td {-webkit-text-size-adjust: none; } .ReadMsgBody { width: 100%; } .External Class { width: 100%; } /* Smartphones */ @media screen and 9max-width: 480px) { /* 100% width control */ table[class=full-width], img[class=full-width] {width:100% !important; height:auto !important;} /* Text size */ span[class=subheadtext] {font-size:20px !important;} span[class=content] {font-size:16px !important;} } /* Medium screen tablets */ @media screen and 9min-width: 481px) and (max-width: 649px) { table[class=full-width], img[class=full-width] {width:100% !important; height:auto !important;} } </style> </head>
Media queries contain styles that refer to elements included throughout the message content. They are activated only when certain conditions are met and override conflicting styles. In the previous example, styles are activated when the screen or browser width falls in the ranges of either 1 - 480 pixels or 481 - 649 pixels.
Desktop email clients receive the standard layout as included in the HTML document without any of the media query styles applied.
When this message is viewed on a smartphone with a screen 480 pixels wide or less, the first set of media query styles are triggered. In that situation, any table whose table tag contains the attribute class=”full-width”
rescales and the contents wrap to 100% of the available width. The other styles in that media query are also activated and the result is an alternative layout, where the tables are stacked vertically, and the text is formatted to be easier to read on a smartphone.
Note: Not all mobile device email clients support CSS3 media queries. However, iOS and Android email clients account for the majority of mobile opens and they support media queries. Email clients that do not support media queries display the full sized desktop layout as they would if you hadn’t included any responsive or adaptive code. For these email clients, include a Click to view in browser link in the upper left of the email. This part of the message is visible without scrolling or zooming. When recipients click that link, your email opens in a web browser where your media query code is used and the content is displayed as you intended.