Designing Email For Multiple Screens: Four Options
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:
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!