Here’s a topline summary of a very valuable article to save for future reference…
A) 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!).
2) Column drop: 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.
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.
3) Layout shifter: 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.
The Question Of Nav
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
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.
http://pttrns.com/ – This site catalogs screens from iOS apps and it’s a great place for exploring UI and organizational patterns in apps.
http://onepagelove.com/ – My single favorite site for email inspiration also provides a great starting point for responsive messages.
See the full article at marketingland.com.
Receive a daily summary of The Marketing Automation Alert directly to your inbox. Subscribe here (your privacy is protected). If you like this scoop, please share by using the links below.
iNeoMarketing has the talent and experience to help you with your marketing automation. Contact us.
See on marketingland.com
