Mobile best practice
- Clear and concise content: Small screens mean it's more important than ever to engage the user as efficiently as possible.
- Single-column layout: Simplicity is key, as mentioned above. Layout no wider than 640px will degrade gracefully. A single column ensures no content will be completely lost.
- Large call-to-action (CTA): Don't punish fat fingers! Apple's iOS Human Interface Guidelines recommend a minimum 'tappable' target area of 44x44 points. This will however differ from device to device.
- Generous font sizes: Make sure your message can be read easily.
- Pre-header: Another key area when it comes to visibility in the inbox. Try to avoid simply displaying 'view in browser' text.
- Left-aligned text: There are a number of reasons for aligning important elements to the left-hand side of the content area. Eye tracking research suggests that western users focus the majority of their attention on the left-hand side of email content. This is hardly surprising since we read text from left to right. Certain operating systems, notably Android, will not scale content to fit the screen, therefore displaying only the left half of an email. From an ergonomic perspective, the majority of users will find it easier to interact with elements in the bottom left/middle of their hand-held screen.
- Vertical hierarchy: Reduced screen real estate places more credence than ever in the idea of 'the fold'. Significant CTAs should be placed as near to the top as possible; if they are not seen immediately, they will probably not be seen at all.
- Use images carefully: Don't assume that images will be seen. The iPhone's native email app will display images by default but many clients won't. If your email doesn't contain enough text it might also be picked up by a spam filter.
Some email clients are known to strip out the DOCTYPE such as Hotmail and Gmail. They automatically insert the XHTML 1.0 Strict DOCTYPE. It's not a bad idea to put it in whilst building your email, to avoid conflicts with Hotmail/Gmail in the testing phase.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.
Viewport rendered unusable
The viewport is a virtual area used by the browser/email rendering engine to determine how content is scaled and sized when it is initially rendered on the current screen. The viewport metatag was originally created by Apple; then it was implemented and continued by others. However for responsive emails the viewport metatag will only give you the illusion of control, browser support for this metatag is spotty and email client support is even worse.
<meta name="viewport" content="width=device-width, initial-scale=1.0,
Below you can find a list with viewport testing results on different mobile clients:
We will be back soon with more tips on responsive email design, so stay tuned!
Missed the first part of this article? Go to:
- Best practices in responsive email design - Part I
- Best practices in responsive email design - Part II
Can't wait to read more? Download our Guidelines on "Responsive email design".
- The ultimate mobile email statistics overview
- Mobile Opens Hit Record High of 47%
- What is Responsive email?
- How to design a responsive HTML email
- Responsive email design: 10 great examples
- Viewport Metatag Rendered Unusable
- Connections 2012 Key Takeaway: Design for ALL Inboxes
- Media Queries for Standard Devices
- Responsive Email Design
- CSS Media Queries for iPads & iPhones
- The How-To Guide to Responsive Email Design
- Email in Motion