Recognizing the industry needed a scalable design strategy that acknowledged the growing stable of web-enabled devices, Ethan Marcotte coined the term “responsive web design.”
Designing responsively means planning for a site to span and appropriately adjust to a range of screens and resolutions, rather than creating unique interfaces or experiences for each.
Marcotte’s recent book, also titled Responsive Web Design, defined the idea as having three key pieces:
Flexible, grid-based layouts
Flexible images (and media)
Media queries
Responsive Email
Their powers combined, those components allow for (web) experiences that respond to the viewing environment – but what about email?
Flexible/fluid grids pose a problem for email marketers – while possible, complexity and consistent rendering are going to be at odds. Flexible images can be a different story, though the rigidity of table structures can lessen their impact. Media queries, however, work quite well and provide a safe fallback.
That said, in email we have a spectrum of screens and a spectrum of email clients on each of those screens. A desire for consistent function and rendering across those spectra means responsive email will likely focus on either a fluid layout or a media query.
Further, with a media query we’re likely focusing on a single breakpoint around 480-500px, which results in two layout states — large/desktop screen (1024+px wide) and small/mobile screen (480-px wide).
A number of folks have written on the topics of media query support in email quite nicely, so let’s look at a few of these messages and explore how the layouts transition from desktop to mobile.
I should note these messages are simply a selection of the responsive emails that have hit my inbox the past few weeks. I’m viewing all of them in Gmail on a Macbook Pro, and on an iPhone 4 with iOS 5.1.1.
PlayStation Network
The modular setup of this PSN email is apparent from the start, with all content divided into rectangular blocks. This responsive layout doesn’t specialize the presentation but does a basic 2-to-1 column restructure, so it’s a perfect example of using the same content elements in two states. Here are the key differences between the states:
Full width elements are re-sized from 600px to 300px (see the hero content).
Existing 300px elements are set to block level (via display: block) on mobile, causing them to stack to become single column.
Click the screenshot for a full view.
Gilt
Rather than stacking content to achieve a single column, this Gilt email hides its left column for similar effect. Beyond the left column housing lower priority information, it’s also worth noting that the presence of imagery in the right column makes it easier to absorb in at a glance, and easier to tap, on mobile.
When content is hidden in email, it’s typically accomplished by setting the display property to none for a given element.
This hides but doesn’t remove content — it still loads but isn’t seen. It’s a viable tool for addressing usability in the mobile view by hiding low-priority or mobile-unfriendly content, but it doesn’t address bandwidth concerns.
Again, here are the differences between states:
Left column disappears (allowing the remaining column to center align). The left column is ~220px, leaving behind only the ~450px right column.
The preheader (including VAWP and add to address book) disappears.
The right half of the nav disappears (the left half presumably being the core offerings).
“Invite your friends” banner disappears.
Full width app ad resized to fit the new column size.
Hilton HHonors
This Hilton HHonors rewards message employs a combination of tactics from the previous two messages — content is hidden, and the message becomes both thinner and single column. It’s easier to read, but, in this case, hiding some content has actually hurt the message.
Two of the elements that disappear are the account module in the top right, which offers personalization and legitimacy, and the logos in the body, which are the most compelling aspect of the offers. While some of the responsive choices do make the layout easy to read on mobile, it has lost the two main components that interest me in the content of that easy-to-read message.
Here’s the state comparison:
Amazon.com Rewards
Lastly, I want to quickly revisit an Amazon email I shared last time and take a closer look at how the layout responds. This particular email transitions from 750px to 320px and it’s a great example for wireframing a responsive email layout.
First, begin to think in rectangular content blocks. Go back through responsive emails you’ve seen and identify how the rectangles transition from desktop to mobile states. Generally, blocks will resize, stack, disappear or some combination of those effects. For this message, I’ve labeled each content block in both states to show how they transition into single column.
Here are a few important points to note about the transition:
Every individual content element becomes block level and stacks when viewed on mobile (as with the PSN example).
Wide elements undergo a few simple transformations:
Blocks 1 and 11 become thinner. Both are header bars that act largely as visual dividers, so excess space is eliminated and little scaling is required.
Blocks 2 and 3 scale to become smaller images.
Blocks 4 and 9 resize and allow the text they contain to reflow.
Blocks 5-8 have been designed to read easily in a horizontal or vertical format, so the reading order transitions as naturally as the layout.
The final section of the email, initially appearing to be 6 product images, is actually three separate 2-product images. This keeps the mobile view truly single column and much easier to manage, even if the images give a different appearance.
Responsive Growth
The number of responsive email layouts in my inbox has grown dramatically across 2012, and that’s not going to change any time soon. Some of those brands are using these possibilities quite while, but the majority are still learning how to think and execute in a responsive fashion.
Are you using responsive emails, or seeing good examples in your own inbox? Share examples you’ve seen in the comments below.
Commentaires