View
212
Download
0
Category
Preview:
Citation preview
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
Email Summit | February 23, 2016 3
Fundamentals for mobile
Email Summit | February 23, 2016 4
§ 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
Email Summit | February 23, 2016 5
§ 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
Email Summit | February 23, 2016 6
§ 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
Email Summit | February 23, 2016 7
Challenges in responsive email
Email Summit | February 23, 2016 8
§ “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
Email Summit | February 23, 2016 9
Design for your audience…
Email Summit | February 23, 2016 10
…or for internal stakeholders?
Email Summit | February 23, 2016 11
Litmus: email client market share
Images & statistics from Litmus 2016 State of Email Report
Email Summit | February 23, 2016 12
§ 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
Email Summit | February 23, 2016 13
Migrating to a mobile-responsive template
Email Summit | February 23, 2016 14
§ 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
Email Summit | February 23, 2016 15
§ 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 travis.rice@yesmail.com | LinkedIn
Recommended