mobile-responsive email design

MarketingSherpa Summit 2016: Mobile-responsive email design Travis Rice Art Director, Yes Agency Services

Email Summit | February 23, 2016 2

I.  Fundamentals for mobile §  Coding basics: how’s it work §  Designing for touch §  Mobile-first approach

II.  Challenges in responsive email §  Innovation vs. broad support §  Fallbacks for advanced code §  Creative control: letting go of PS

III.  Migrating to a mobile-responsive template system §  Workflow efficiencies in modular design §  Testing, maintenance & version control

Discussion outline


Fundamentals for mobile


§  The ringleader of mobile reformatting in email is the @media declaration.

§  Media queries allow us to target a screen size (or multiple breakpoints)—then determine how elements behave when a mobile open is detected.

§  Support for CSS in email is growing, but we’re still well behind that found on the Web.

§  For now, our core tactics are: reformat, resize, or remove.

The basics of responsive code


§  Think about how you consume mobile email. Are you a 1-handed reader or do you use both?

§  Your thumb has an ergonomic range of motion. CTAs should land within that thumb zone.

§  To avoid mistaps, clear space around CTAs is equally important. Apple’s touch target is 44 x 44 points with around 10 points of clear space.

Designing for touch


§  Remember, over half your opens are on-the-go. §  As mobile opens grow, attention spans diminish. §  When planning a campaign, ask yourself:

1.  What’s important to the reader? 2.  What can be cut to distill the message? 3.  How strong is the call to action?

§  Based on our eye-tracking studies, readers stay narrowly focused. They see: images, headlines, & buttons—body copy gets very little attention.

Mobile first approach to content


Challenges in responsive email


§  “It looks great on iPhone but blows up in Outlook!” §  Check with your ESP to find out where your emails

are opened. Metrics should dictate the environments you design for.

§  Most importantly, don’t dilute creative to ensure rendering for a small percentage of your audience.

§  Innovation can set your emails apart in a crowded inbox.

§  When you innovate, just ensure that you’ve tested & considered how the layout will degrade in problem environments.

Cutting-edge or all-inclusive


Design for your audience…


…or for internal stakeholders?


Litmus: email client market share

Images & statistics from Litmus 2016 State of Email Report


§  Yes, you can make handsome emails in Photoshop. But is it worth alienating over half your audience?

§  Most image-based emails can be recreated in an HTML/image hybrid layout.

§  While you may lose some control over type & layout options, the gains are undeniable: ü  Images-off readability ü  Reduced message weight ü  Simplified workflow ü Mobile reformatting

Letting go of Photoshop


Migrating to a mobile-responsive template


§  Essential tip: don’t code responsive email from scratch. §  In a multi-screen world, templates are the cornerstone to

ensuring accurate mobile rendering across environments.

§  Production is a snap—design daily emails right in the HTML editor. No Photoshop slicing. No responsive coding (it’s already done). Just hit send.

§  Template systems streamline your workflow & give you time to focus on what’s important…content.

Building on a solid foundation


§  Once your template system is in place, use a phased approach to transition your email program.

§  Start with regular messaging then move on to lifecycle emails & transactional triggers.

§  Test your deployments (Litmus or EOA). The space is always changing—your template will need maintenance.

§  Appoint a template master who owns the codebase & oversees scheduled updates. In between updates, collect revisions & fixes into a batch (rather than one-off fixes).

§  When a batched update is made, version the template accordingly: “template_v2.4 (fixed Outlook margin break)”.

Migration & template maintenance

Thank you

Travis Rice [email protected] | LinkedIn