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
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…