When designing for the inbox, user experience is a critical factor. The number of users reading email on their mobile devices continues to climb, so how do you ensure that your message gets through the proverbial inbox clutter and provides the best experience for your customer? One design style that seems to be gaining in popularity is horizontal or side-scrolling emails. Besides the obvious difference in screen size there are other factors to consider when designing a horizontal email for the mobile user.
Understand your mobile audience. Mobile users are just that… mobile. This means that the already small window of opportunity to grab their attention, is not only smaller, it’s competing with an infinite number of outside influences that are also competing for your customer’s attention. The better you understand who you’re speaking to, the easier it is to serve them content that they deem valuable.
The overall width of your email should not exceed 2,110 pixels. Outlook 2007 does not display any content beyond this point. While the intention is to give your customers a standout experience on their mobile device there is no reason to alienate your desktop viewers.
Excluding pre-header text and footer text, the height of your email shouldn’t exceed 700 pixels. Keep it closer to 550 pixels, if possible, to reduce the chance of making your viewers scroll both horizontally and vertically.
Attention to detail is paramount. Details like how your navigation, headers and footers will look within the horizontal layout are just as important as the rest of your email content. Last year JC Penny launched a horizontal email that was well designed except that they kept their standard navigation at the top.
Read the New School Marketing Blog review of this email here.
Design your email content to be consumable in several “swipe frames.” On a mobile device, gestures and swiping motions feel more intuitive to us like turning a page within a book or magazine. Designing your email content to be consumed in several swipe frames creates a similar experience. Each swipe frame should be approximately 550-650 pixels in width.
In the Safeway email below you can see how the email content has been divided into three swipe frames.
Provide instructions and visual cues to the reader that they need to scroll right instead of down. There are many ways to achieve this. Some of the more common methods are teasing the viewer with part of an image that is hidden to the right, use arrows, or simply tell them to scroll right as Crate and Barrel did in its recent email featured below.
Horizontally formatted emails are one of several ways to tackle the challenge of designing for the mobile user. To help, we’ve put together the Responsys Mobile Email Guide, which gives some insight into design innovations like mobile optimization and responsive email templates.
Want to know more about mobile email experience?
Check out Tips For Creating A Better Mobile Email Experience by Wacarra Yeomans.