Engaging Responsive DesignHow to Optimize Emails for All Devices Using Media Queries Hobsons University 2015

2. Engaging Responsive Design
How to Optimize Emails for All Devices Using Media Queries

3. Whatisresponsive design?
Why does responsive design matter?
HowdoI implement responsive design?

4. Whatisresponsive design?
Whatisfluid, or liquid design?
Whatisadaptive design?
Fluid widths at multiple viewports/breakpoints
Full width of single viewport Maintain 100% width
Fixed& Fluid widths at multiple viewports/breakpoints

5. FLUID EMAIL DESIGN
AKA, “Liquid” design
Fluid emails use percentage-based sizing to make the width of tables and
images adapt to the screen size on which they are viewed, similar to what
is known as “liquid” layouts on the web.
• Simplelayouts
• Ideal for textheavy content
• Use % based sizing
• Reliablesupport

6. RESPONSIVEEMAIL DESIGN
Responsive email takes everything from scalable and fluid emails and
builds on it by adding more control via CSS media queries. Responsive
email uses media queries to change the layout of emails, adjust the size
of text, images, and buttons, and, in some cases, hide or even swap
content between desktop and mobile devices.
• Media queries
• Fulllayout control
• Swap/hidecontent
• Limitedsupport

7. ADAPTIVE EMAIL DESIGN
The condensed definition of an adaptive design is that it will change to fit
a predetermined set of screen and device sizes.
• Utilizes ProgressiveEnhancements
• Designhones in on uniquesupport on theuser
• Uses combination of HTML, CSS, JavaScript & jQuery
behaviors

8. 53%oftotal email opens occurredon a mobile phone or tablet in Q3 2014. This is an
increasefrom the 48% percent seen in Q2 2014. –Experian “Quarterly email benchmark
report”(Q32014)
Moreonthisinfographic
W H Y ?
Responsiveemails havea 21% higher click-to-open rate. - MarketingProfs(March
2015)
33%ofemails areopened in a mobile application, 17% in a webmail client and 48%
ondesktop. –Freshmail “Best practices for email coding” (May 2015)
Overa500%increase since2010

11. www.emailclientmarketshare.com

13. campaignmonitor.com/css

14. https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing

15. HowdoI get started?
MEASURE
ANALYZE
PLAN
BUILD
TEST
IMPLEMENT
SUPPORT
REPEAT

16. …LETSBUILD SOMETHING

17. CHECKLIST
 Subject line
 From
 Audience (get your Filter right…and don’t forget people! - EEK!)- have someone
else look over the filter too to double check your work
 Personalized touch – why should <i> I </i> care?
 Copy Copy Copy…who edited this?
 Images, video, data /performance…does this look good on mobile?
 Call to Action (big enough?)
 Is it responsive? / progressive enhancement/ graceful degredation?
 Growth oriented / can people share it, and is it worth sharing? Grow your
interest/lists
 Plain text version (use mailchimp tool)
 SPAM test
 Analytics code if you are using an outside source (reporting in Connect? )
 Meta tags (responsive + windows phone)
 Pre-header text
 TEST to your editor (again) to make sure your merge tags & links (events) are
working.
 Landing pages are live/working/optimizied
 Set up behavior action – another e-mail? Phone call? Physical mail? Based on
opens/non-opens/interactions etc…

18. Litmus.com
Litmus.com/scope
Litmusbuilder.com
MailChimp.com
CampaignMonitor.com/css
CampaignMonitor.com/canvas
ResponsiveEmailResources.com
ResponsiveEmailPatterns.com
Premailer.dialiect.ca
SpamCheck.postmarkapp.com
Emailology.org
Stampready.net

19. Questions?

20. Michael Langhoff
@mflanghoff
mlangh@saic.edu