Designing Email For Multiple Screens: Four Options

• Comment (3)
• Recommend (6)
• Tweet
• 

Without a doubt, the most frequently asked question in email marketing today is "How do we address the growing number of subscribers who are reading our emails on mobile devices?"

Specifically, the question becomes: "How do we design our emails to render well and provide a good user experience, no matter which device the email viewer uses?"

Recent data from Return Path underscores this "multiple-screen" design challenge: 38% of U.S. emails are opened on a mobile device, followed by 31% in a browser on Webmail, and 31% on a desktop client.

Given that challenge, I've spoken with email gurus from around the globe about how they approach this multiscreen design challenge, which I've nicknamed "Screen-size-apalooza."

These conversations led me to the better question email marketers should ask: "How do we design for multiple devices, operating systems and screen sizes, not just for small mobile screens?"

Four Multiscreen Design Approaches to Consider

After digesting the different advice and suggestions, I concluded that there are four approaches to multiscreen email design:

1. "Screen-agnostic"/Scalable

A screen-agnostic or scalable email is a compromise between mobile and large-screen design. It has one simple rule: "Think big."

Screen-agnostic or scalable design features a single "mobile-friendly" layout, which is targeted for mobile but also reads well on bigger screens.

This approach uses:

• A single-column format viewed by top-to-bottom scrolling
• Proportional tables that ensure that the layout scales with the device screen size
• Larger headline and body-copy font sizes (14-point minimum is often recommended)
• Touch-friendly navigation and call-to-action links and buttons

Advantage: You create a "one and done" template for your email that you can send to all subscribers and doesn't require complicated coding. Done well, the message will render fairly well across all screens and environments.

Disadvantage: Focusing on simple and big can make complex emails with multiple elements more challenging. It also sacrifices functionality, such as two-column layouts.

2. Two versions: One each for mobile and desktop/large screens

With this design, you create one version of your email for large screens and another that's optimized for smaller mobile devices. Using an email analytics solution, you identify, divide and email your database in two segments: frequent/regular mobile openers and desktop client/Webmail openers.

Advantages: Your recipients will receive the email version that is 100% optimized for the screen they use most often. Neither email design and layout is a compromise; each is ideal for its screen size and should lead to higher engagement and conversion rates.

Disadvantages: You must create two versions of each message, which can be challenging for teams with limited resources.

Also, people change their habits. Dedicated desktop users are continually moving over to mobile email reading, and many people switch between devices. You cannot predict which devices they might use each time they read your email.

3. Responsive Design

Responsive design uses CSS3 @media query tags in your emails to present different versions based on device screen size. These tags in your desktop layout resize page width and images, reformat fonts and colors and eliminate selected images and copy.

Advantage: You create a single message. Your desktop version will be optimized for many mobile devices, especially the iPhone.

Disadvantages: It requires specialized coding expertise and isn't compatible with all devices/OS, such as BlackBerry and some Android versions.

4. Device Targeting

Unlike responsive design, which is based on screen size, this approach detects the device your recipient uses and then presents an optimized version of your content using standard HTML coding. Movable Ink is one company that offers device-targeting technology. My guess is that many more will emerge in 2013.

Advantage: Because the actual device is recognized, you can link directly to the right app store or version of your mobile app. While coding variations are required for various devices, it can be a bit simpler than using CSS3.

Disadvantage: You need to use a third-party technology and must still include code variations within the email.

What's the Right Approach for You?

Email is not a "one size fits all" channel. Responsive design, for example, looks like a savior for rendering issues, but, from a practical standpoint, you might not have employees with the coding skills to make it work.

Also, one solution might work well for one set of messages, such as your broadcast emails, but not for behavior-based automated emails that pull dynamic content into multiple blocks.

Take time to consider all of your email challenges and how these four approaches might work for you.

One final note: Make your landing pages and website mobile-friendly as well. If you don't, your email design won't matter, because you could lose them on an unworkable landing page.

Did I overlook any multiscreen design approaches? Or, do you disagree with my ideas? Let me know in the comments section.

Until next time, take it up a notch!

• Comment (3)
• Recommend (6)
• Tweet
• 

3 comments on "Designing Email For Multiple Screens: Four Options".

1. David Gerbino from Provident Bank
   

   commented on: December 14, 2012 at 12:53 p.m.
   Loren, you nailed it. Email today is complicated. Responsive web design has been with us since May 2010. This is great for landing pages but not for email. I too have gone through the research process you described. The good news is it is easier today than it was in 2010 but the email challenge is still that, a challenge. We all must adapt and adapt now and continue to test along the way. Thanks for sharing.
2. Alex Williams from Trendline Interactive
   

   commented on: December 14, 2012 at 9:49 p.m.
   David, care to elaborate on your categorical dismissal of Responsive design for email? The numbers disagree with you.
3. David Gerbino from Provident Bank
   

   commented on: December 17, 2012 at 2:53 p.m.
   Alex, thanks for your feedback to my comment. I did not mean to categorically dismiss responsive web design for email. Responsive web design and responsive email are not the same as they are not on par with each other. So to clarify my comment I will restate it. Loren, you nailed it. Email today is complicated. Responsive web design has been with us since May 2010. This is great for landing pages but not for email. I too have gone through the research process you described. The good news is it is easier today than it was in 2010 but the email challenge is still that, a challenge. If you create an email as a responsive web page and copy that code into your email platform it will fail. The CSS for starters can not be in an external file. Also, some email environments, like Gmail are not responsive at all. That is to say RWD techniques you use on the web will not work in this client. We all must adapt and adapt now and continue to test along the way. Crafting emails with responsive web design techniques is possible but by no means as easy responsive web design. A great place to start your research is with this StyleCampaign blog post: http://stylecampaign.com/blog/2012/10/responsive-email-support/ It lists what email clients support media queries. You will note that the Android Gmail and Android Outlook Exchange via native client do not support them. Loren thanks again for sharing and Alex thank you for pointing out my faux pas. I hope I have clarified my opinion.

Leave a Comment