The concept of responsive email has entered into the industry consciousness, though the actual deployment is still far from common. Still, enough senders are experimenting with the technique, and we’re beginning to see patterns in layouts and organization.
Any examination of responsive layout patterns must first point to the work of Luke Wroblewski. Wroblewski has written a wonderful series of posts on responsive layout patterns on the Web, which informs many ideas and images (the column drop, layout shifter and associated images port very directly from his web observations). His work is geared toward the Web but a number of the patterns he identifies translate quite well to email.
When thinking about email, these patterns help designers understand the way subscribers are learning to interact and the way brands are working to create sustainable investments in the new approach.
Responsive Email Layout Patterns
1) Shrink wrap
This is the pattern immediately adopted by letter format messages and many newsletters. Basically, the message container becomes skinnier (shrinks!), and the content within reflows (wraps!).
The value of letter or newsletter format messages is usually based in text content, so scaling up headlines and copy is a no-brainer to ensure that value remains instantly accessible. Full width images scale within the container, and images associated with other text content resize to fit.
The shrink wrap has a clear benefit due to ease of implementation. When a message has a simple structure and the value is largely text-based, this is the responsive path to choose.
Message width shrinks
Text and images reflow within the smaller container
Text scales up
Other elements scale to fit
2) Column drop
One of Wroblewski’s web patterns, the column drop, is very common in email, as well. In multi-column layouts, one or more of the columns drop down to sit beneath other columns. Depending on the number of columns, a little additional manipulation may be required, as individual columns in an email design are often well suited for viewing on a mobile screen.
The benefit of the column drop lies in allowing readability and the flow of ideas in a message to remain very strong with relatively low effort, assuming the execution has been properly planned. The PlayStation Network and Amazon emails in this previous post are excellent examples of this pattern.
This is the pattern we’re going to see most consistently in email, as it closely aligns to ways we already think about email layout. You’ll see this pattern much more frequently in email than Wroblewski’s “mostly fluid,” due to the relative rarity of fluid email layouts.
Column drop layouts have potential for “boxy” emails if lazily designed. The real “wow” of a column drop email comes from a natural look in both states and graceful transition between them. Check out the ModCloth example in this post for one of the most seamless transitions I’ve seen in an email.
Multi column sections stack content to become to single column on mobile
Newly stacked elements may or may not resize, as the new layout might not require it
2.5) Grandfathered column drop
A small subset of the column drop, this pattern appears with senders who pursue a column drop layout in the interest of a quick win for mobile readability. Seen mostly in cases with an even split two-column layout already in place, the effect is that entire right column drops below the left column. These emails are often long in their original format and extremely long in their mobile view.
It’s a viable choice for making messages more readable and potentially more readable, and it’s a path of de facto content priority choice for those unwilling to commit to content decisions. That said, it’s usually an obvious retrofit, as well. Not recommended, but it’s a starting point for those unwilling to start from the ground up. See the Salesforce.com example in this post for an example.
3) Layout shifter
Borrowing from Wroblewski again, this pattern is the one least frequently seen in email. It features the most dramatic layout changes, so it’s to be expected that fewer senders would be making the largely aesthetic investment.
There have been a few notable examples, though, including Litmus’s recent invitation to their Responsive Workshop.
There isn’t a singular benefit, and in email, this pattern is more likely an impressive demonstration or built for effect.
Largest investment, most impressive
Layout reshapes
1 set of content, potentially 2 layouts
The Question Of Nav
Navigation holds a unique question on responsive email: how should we handle an element traditionally in an email’s most valuable real estate (the top of the message!) but which offers low direct value?
To start, Brad Frost has an excellent examination of nav patterns in responsive Web design. Like Wroblewski’s work, the specific implementation doesn’t always apply to email, but there’s a lot to learn from the ideas.
Refined for email, I see two common and two uncommon nav options that most responsive email designers will end up employing to avoid the inefficient nav “net” of 5-10 categories.
Common:
Hide – hide the nav entirely in the mobile view
Reduce – hide all except the top 2 highest performing nav links; this approach achieves a balance of offering the highest proven click opportunities with minimal layout needs
Uncommon:
Move it – nav jumps below primary content or to the bottom of the message
Roll it up – use a rollout menu (that expands when tapped) to preserve real estate but offer immediate access
Also bundled at the top of an email, the preheader similarly consumes prime real estate, but provides little value on mobile. Standard components of the preheader – a snippet, view-as-web-page (VAWP) link, add to address book message, social sharing links, etc. – all plummet in value when viewed in a mobile context.
Senders are trending toward hiding the entirety of the preheader, and I have yet to see an email that wouldn’t benefit from following suit to give faster access to hero content.
Getting Started: Responsive Reference Material
There are 3 particular resources I reference when researching and planning responsive messages.
http://mediaqueri.es/ – The quintessential catalog of responsive sites. There are more responsive techniques and ideas demonstrated here than will ever make sense for email, but it’s a great place for examining state transitions, priority decisions and layout shifts. The perfect first stop to understanding responsive layout in action.
http://pttrns.com/ – This site catalogs screens from iOS apps and it’s a great place for exploring UI and organizational patterns in apps. Even if ideas don’t port directly to email there are lots of valuable visual cues and organization ideas.
http://onepagelove.com/ – My single favorite site for email inspiration also provides a great starting point for responsive messages. Email content, especially when consumed on a mobile, is often best when rooted in an elevator pitch. To that end, these single page sites are the perfect balance of message flow, education and pitch to be a point of inspiration and learning for email.
Have you seen patterns emerge that differ from those above? Have another favorite resource? Drop a note below.
Comments