The Real Challenges of Responsive Email Design
For us folks who have been in the email marketing world for a while, the iPhone was a godsend. With the introduction of WebKit rendering engines into our universe, we can now balance our past-expiration technique of nested HTML tables to get emails to display correctly, (placed on us by our draconian overlords Outlook and Gmail ),with CSS3 which allows us to target particular screen sizes and restyle, resize or remove content from rendering on mobile devices. Hallelujah! We can now, at least on mobile devices, make email a more native-web expereience.
Many of these techniques are lumped under the term "Responsive Email Design”. This term is a bit of a misnomer. It covers multiple descriptors: adaptive, fluid, flexible, mobile-optimized and device-agnostic.
Once you get your head around it, the code is actually the easy part. The design challenges arise in how to create a layout that balances the legacy code needed for desktop email clients with the code needed to create a mobile render that optimizes performance for both environments. Once you’re through that, then you get to the real challenges of Responsive Email Design.
The Code is the Easy Part. Here are the Hard Parts…
Your content density needs to be questioned, as you have 2 routes to go: shrunken content that allows the mobile reader to zoom in and out to read requiring greater effort before a click, or screen appropriate content dimensions that will require a user to scroll multiple times to read it all. Both result in increased effort level on the user. An email design with a kitchen sink of links and call to actions clustered above the fold is on the wrong side of history. Giving a user 5 choices emphasized and prioritized appropriately versus 25 choices scattered from top to bottom requires a new way of looking at your emails.
Design choices now need to be made for the mobile user on content that requires both a click and user action on the web. An example of this would be driving a mobile user to a web experience that is difficult or impossible for them to complete. (ie - flash content, long registration processes or heavy bandwidth activities.).
Latency is a real issue on mobile, especially for wi-fi tablets that don't have cellular data connections. For both, there are many situations where bandwidth will not be present (think airplanes or subways) or spotty at best (3G networks in big cities or airplane wi-fi). This requires questioning every image choice and increased alt-text, HTML optimization. No one buys or clicks without knowing what you’re talking about.
Contrast and typography choices become extremely important on the small screen as users have variant levels of screen brightness or vision impairment.
Click Behavior and conversion analysis by category is needed to optimize content and performance (desktop/tablet/phone). This also applies to how you go about testing, as you need more data to truly know if something worked.
Screen targeting makes content and asset creation more rigid, as restyling and resizing rely on arithmetic, not aesthetic.
High density displays on both mobile and desktop require new workflows for image optimization and require access to higher resolution assets.
Render issues and last minute edits require higher skill levels from all parties involved in shipping and sending.
Now that I've scared you off, let's look at the amazing opportunities Responsive Email Design provides.
In the inbox, you’re not only competing with your direct competitors, you're competing with every brand that a user gets email from. From a consumer mobile view, you're also competing with social apps, games, photos, etc… Looking natively similar to the apps and mobile websites on all the devices they check email on can be a huge competitive advantage.
Now that people have an a inbox within arms reach at all times, push notifications, badges and alerts mean your message has a much better chance of being seen with a much higher chance of annoying a user with a low value message at an inopportune time. Rethinking your content, message types, and frequency gives you the ability to refocus your program and identify the key priorities from a business perspective. It also allows you to address the intimacy you now have with the subscriber and how to foster a deeper relationship with your message types, content and tone.
Responsive design won't solve bad email program design, but it will bring a well designed program to life and beyond.
You can look at this shift of email to mobile devices as a bad thing, or you can look at it as an opportunity to generate increased value. The questions that come from this process will not only create great looking emails, it will create a foundation for your email program for the future.