Download - Responsive Email Design
![Page 1: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/1.jpg)
responsive email design#RED
![Page 2: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/2.jpg)
Anna Yeaman / @stylecampaignCreative Director at STYLECampaign.comLeads the creative team. Also responsible for customer education, consulting and mobile boot camps.
![Page 3: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/3.jpg)
#REDProblem?What is it?
What’s possible?What about tablets?
TouchPerformance
@media blind tacticsTesting
![Page 4: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/4.jpg)
41% of emails were opened on mobile in 2nd
half of 2012- 14% increase in six months - 50% increase over same time last year - Will exceed 50% by end of 2013
http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_SECONDHalf2012.pdfLitmus.com to get your mobile stats
![Page 5: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/5.jpg)
One shot: only 2% will reopen email on another device
http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_SECONDHalf2012.pdf
![Page 6: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/6.jpg)
Problem? ( designing for a bijillion screens )
![Page 7: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/7.jpg)
bijillion screensMultiple builds? No thanks
![Page 8: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/8.jpg)
How wide for fixed-width?320px 400px 480px300px 520px 640px
![Page 9: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/9.jpg)
iPhoneAndroid
![Page 10: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/10.jpg)
Anna YeamanKindle Fire 7” HD
~500px
Galaxy Nexus
~320px
Note / Smablet
~390pxFixed-width
![Page 11: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/11.jpg)
BB7 clipped
![Page 12: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/12.jpg)
BBZ10 clipped342px
![Page 13: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/13.jpg)
~700px
Surface clipped
![Page 14: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/14.jpg)
Horizontal hierarchy
300px Smartphones
500px 7”Tablets
700px Surface
![Page 15: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/15.jpg)
Scalable Responsive
Kindle Fire 7” HD Kindle Fire 7” HD
![Page 16: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/16.jpg)
Responsive
![Page 17: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/17.jpg)
iPhone scalable iPhone responsive
![Page 18: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/18.jpg)
iPhone scalable iPhone responsive
![Page 19: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/19.jpg)
Responsive ( what is it & how does it work? )
![Page 20: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/20.jpg)
Fluid grids
Fluid media
Media queries
Responsive design
![Page 21: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/21.jpg)
http://alistapart.com/article/responsive-web-design
![Page 22: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/22.jpg)
www.campaignmonitor.com/blog/post/3116/what-you-can-learn-from-panics-email-marketing/
![Page 23: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/23.jpg)
@media checks screen properties e.g. width
h
![Page 24: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/24.jpg)
Screen size 800x1280
Viewport 533x731
Kindle Fire 7” HD
ViewportPPK - http://www.youtube.com/watch?v=4wscVOXjIzQ
![Page 25: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/25.jpg)
@media only screen and (max-width: 480px)
![Page 26: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/26.jpg)
If the viewport is below 480px, then change the
layout like this…
breakpoint
![Page 27: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/27.jpg)
breakpointsSimilar to key frames in an animation
Muybridge cats
![Page 28: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/28.jpg)
One HTML File( delivered to all platforms )
![Page 29: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/29.jpg)
Responsive(fluid grid, fluid media + @media)
480px 640px
Breakpoint Breakpoint
Fluid layout handles In-betweens
![Page 30: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/30.jpg)
Every time you use 'Responsive' in place of 'Adaptive' a fairy
loses it's wings #RWD@benedfit
![Page 31: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/31.jpg)
Adaptive layouts( fixed-width + @media )
480px 640px
Breakpoint Breakpoint
No in-betweens, switches between fixed-width layouts
more
![Page 32: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/32.jpg)
What’s possible? context switchmulti-platformproduct grids
retrofitsnavigation
images
![Page 33: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/33.jpg)
Context switch( adjust hierarchy or offer )
![Page 34: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/34.jpg)
![Page 35: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/35.jpg)
Prioritize content for mobile users
![Page 36: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/36.jpg)
![Page 37: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/37.jpg)
RT @gsterling: Marin: target users on mobile with device specific copy; 9%-14% increase in CTR from doing so #SMX #22C
![Page 38: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/38.jpg)
![Page 39: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/39.jpg)
A happy accident
![Page 40: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/40.jpg)
Left column for Android Gmail users
![Page 41: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/41.jpg)
Gmail
![Page 42: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/42.jpg)
Different column on mobile (copy / urls / code)
![Page 43: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/43.jpg)
Multi-platform
“The world is going mobile, which means our customers are going mobile” – Cameron Nouri, Marketing Manager at Rackspace
![Page 44: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/44.jpg)
iPhoneGalaxy Nexus
Old skinny 480px
![Page 45: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/45.jpg)
redesign
![Page 46: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/46.jpg)
2 BB running Vr. 7.1 Bold & Curve (9900 / 9320)
![Page 47: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/47.jpg)
![Page 48: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/48.jpg)
scroll
Arrow scroll cues
![Page 49: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/49.jpg)
Anchor tags
![Page 50: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/50.jpg)
ANCHOR TAG SUPPORT (ID + name)
iPhone Yes (2X TAPS) Surface Yes (Outlook.com)
iPad Yes (2X TAPS) WP7 Yes
iPod Touch Yes (2X TAPS) WP7.5 Yes
Android 2.1 No BB 7.1 Yes (also live.com)
Android 2.2 Yes Kindle Fire Gmail No
Android 2.3 Yes Kindle Fire HD No
Android 4.0 No Outlook 07 + 2010 (desktop) Yes
Android 4.1.2 No Gmail Firefox (desktop) Yes
K9-mail Yes Yahoo Mail (desktop) No
Android Gmail 2.3, 4.0, 4.1 Yes Outlook.com (desktop) No
Droid Yahoo! Mail 2.0 Yes
![Page 51: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/51.jpg)
Bigger textBigger CTAs
Swipeable areasLess copy
Scroll cues Context: read later
>Contrast Performance: few images
![Page 52: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/52.jpg)
Tap :(
Cluster bombs
![Page 53: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/53.jpg)
Tap :)
Big swipeable areas
![Page 54: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/54.jpg)
Read later flow
![Page 55: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/55.jpg)
“Turns out customers like it! Over 10% of the clicks were for the read
it later option” – Cameron Nouri, Marketing Manager at Rackspace
![Page 56: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/56.jpg)
Copy 3x line height on mobile
3 lines
9 lines
![Page 57: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/57.jpg)
Droid copy tips
More: http://twitpic.com/9w1u4h
Consult the documentation that came with your phone for further instructions.
Read the instructions that came with your phone.
1: Keep it brief.Bad: Too formal Good: Better
Touch Next to complete setup using a Wi-Fi connection.
To finish setup using Wi-Fi, touch Next.
2: Most important thing firstBad: Task last Good: Task first
![Page 58: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/58.jpg)
Vote (1st draft )
![Page 59: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/59.jpg)
Vote ( final draft )
![Page 60: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/60.jpg)
“Open rates increased, click thru rates doubled and our own
engagement survey included in the email showed that 80% of
recipients liked the new design!” – Cameron Nouri of Rackspace
![Page 61: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/61.jpg)
Retrofit oo.com.au
![Page 62: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/62.jpg)
“We decided to prioritize the mobile optimization of our transactional emails as they are one of the main revenue drivers
within our automated email program.
Optimizing these valuable communications was key to creating an engaging post -
purchase experience for our customers”. Alfredo Caballero Marketing Manager at
oo.com.au (Australian retailer)
![Page 63: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/63.jpg)
iPhone fluid iPhone responsive
![Page 64: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/64.jpg)
BIG FONTS(OR WE’LL CHANGE IT FOR YOU!)
style=”-webkit-text-size-adjust:none”
![Page 65: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/65.jpg)
Before: Droid clipped + images blocked
![Page 66: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/66.jpg)
After: Droid 1 column HTML text
![Page 67: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/67.jpg)
iPhone fluid iPhone responsive
![Page 68: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/68.jpg)
“15% of our newsletter sessions is generated by the navigation header, so we decided to start small by
mobile optimizing different navigation patterns.
The amount of traffic generated by this content area will allow us to gain insights fairly quickly and help
us plan larger optimization changes over time.”
– Alfredo Caballero of oo.com.au
![Page 69: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/69.jpg)
retrofit:Is the desktop code clean?
Clean but still incompatible?Touch friendly?
Copy lengthPerformance
![Page 70: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/70.jpg)
Responsive product grids
![Page 71: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/71.jpg)
2 column to 1 column
![Page 72: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/72.jpg)
3 column to 1 column
![Page 73: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/73.jpg)
3 column to 2 column
![Page 74: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/74.jpg)
No copy category title 3 words
iPhone apps
![Page 75: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/75.jpg)
Zappos (invision blog interview)Donny Guy – User Experience Manager
We had to ask ourselves, “Why are we trying to push this description piece when really a huge percentage of orders happen without a person even looking at it?” So we developed a hierarchy of what our customers want: they want images first, then they want to look at videos, and then they’re looking at reviews.”
![Page 76: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/76.jpg)
Living Social thru the years
![Page 77: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/77.jpg)
Fits on 1 screen
![Page 78: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/78.jpg)
4 column to 2 column
![Page 79: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/79.jpg)
Mash up
+ =?
![Page 80: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/80.jpg)
Staggered grids encourage scrollingMasonry.desandro.com
![Page 81: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/81.jpg)
Surface tablet with uneven grid
![Page 82: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/82.jpg)
Grids test:Thumbnail size
Deals per screenAmount of copy
Button vs. text as CTA1 col vs. 2 vs. 3 vs. listStaggered vs. ordered
Scroll drop offContrast
![Page 83: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/83.jpg)
Responsive navigation
![Page 84: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/84.jpg)
Wrap Stack Shift Reduce Toggle
![Page 85: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/85.jpg)
Wrap Stack Shift Reduce Toggle
![Page 86: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/86.jpg)
![Page 87: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/87.jpg)
Wrap Stack Shift Reduce Toggle
![Page 88: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/88.jpg)
![Page 89: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/89.jpg)
Wrap Stack Shift Reduce Toggle
![Page 90: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/90.jpg)
![Page 91: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/91.jpg)
Wrap Stack Shift Reduce Toggle
![Page 92: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/92.jpg)
![Page 93: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/93.jpg)
Wrap Stack Shift Reduce Toggle
![Page 94: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/94.jpg)
![Page 95: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/95.jpg)
Responsive images
![Page 96: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/96.jpg)
<320 fluid crop overflow swap hide dynamic
![Page 97: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/97.jpg)
<320 fluid crop overflow swap hide dynamic
![Page 98: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/98.jpg)
![Page 99: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/99.jpg)
<320 fluid crop overflow swap hide dynamic
![Page 100: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/100.jpg)
![Page 101: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/101.jpg)
<320 fluid
crop overflow swap hide dynamic
![Page 102: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/102.jpg)
![Page 103: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/103.jpg)
<320 fluid crop
overflowswap hide dynamic
![Page 104: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/104.jpg)
Overflow:hidden
![Page 105: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/105.jpg)
![Page 106: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/106.jpg)
<320 fluid crop overflow
swap hide dynamic
![Page 107: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/107.jpg)
![Page 108: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/108.jpg)
<320 fluid crop overflow swap
hide dynamic
![Page 109: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/109.jpg)
![Page 110: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/110.jpg)
<320 fluid crop overflow swap hide
dynamic
![Page 111: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/111.jpg)
Hook up to APIs Live videoContext Know the location, weather, click activity,
platform, time of day + can pull data from APIs.
![Page 112: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/112.jpg)
What about tablets?
![Page 113: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/113.jpg)
Unique to tablets:ContextTouch
Performance
![Page 114: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/114.jpg)
Context 7” increased mobility
Multi-screen useVisit depth
![Page 115: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/115.jpg)
location
http://research.google.com/pubs/pub38135.html
![Page 116: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/116.jpg)
Top locations for tablet email use – in bed or on couch
![Page 117: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/117.jpg)
contrast
![Page 118: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/118.jpg)
push the contrast
Low contrast copy that is easy to read
on a desktop monitor, becomes a fuzzy blur on a smaller screen
Low contrast copy that is easy to read on a desktop monitor, becomes a fuzzy blur on a smaller screen
![Page 119: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/119.jpg)
http://www.flickr.com/photos/gserafini/2545176311
distracted
![Page 120: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/120.jpg)
Goggle “The New Multi-screen world” Aug 2012
Smartphones are the most frequent companion devices during simultaneous usage
![Page 121: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/121.jpg)
Goggle “The New Multi-screen world” Aug 2012
Top activities performed during simultaneous screen usage
![Page 123: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/123.jpg)
1.7x
tablet smartphone
Visit depth ( website page views / visits )
http://readwrite.com/2013/03/07/tablet-mobile-web-traffic-eclipses-smartphone-traffic-for-first-time
![Page 124: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/124.jpg)
“Purchase amounts on the iPad an order of magnitude higher than on iPhone, Android and the web” - Fab
http://gigaom.com/2012/01/11/fab-com-mobile-shoppers-buy-twice-as-often-as-web-visitors/
![Page 125: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/125.jpg)
iPad not a 'mobile' device? I call BS on that - everyone on the bus or the train is on one every day #aea @cbandes
![Page 126: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/126.jpg)
http://www.flickr.com/photos/7486366@N08/7108199437
![Page 127: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/127.jpg)
Hendrick: Cheaper and more portable tablets will lead to broader user base. More 7inch tablets than 10inch soon #mobility13 @oliverw
![Page 128: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/128.jpg)
Touch Size
Spacingpositioning
![Page 129: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/129.jpg)
44x44(iOS)
83x58px
![Page 130: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/130.jpg)
34x34(WP)
![Page 131: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/131.jpg)
spacing
![Page 132: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/132.jpg)
iPad mini creative ~20% smaller
![Page 133: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/133.jpg)
grip
![Page 134: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/134.jpg)
grip
![Page 135: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/135.jpg)
view
![Page 136: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/136.jpg)
Controlsdesktop tablet mobile
![Page 137: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/137.jpg)
reach
![Page 138: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/138.jpg)
“We’ve been doing a lot of stuff to make it really easy to interact with BB10 one-handed, so something as simple as moving the URL bar down to the bottom…
![Page 141: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/141.jpg)
Two handed 15%
Cradled 36%
One-handed 49%
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices
![Page 142: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/142.jpg)
Performance WIFI
Retina imagesWe heart CSS3
![Page 143: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/143.jpg)
3G network connections are currently 40% slower than desktop connections, and
4G/LTE network connections are 12% slower.
http://wpdaily.co/responsive-server-side/
![Page 144: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/144.jpg)
508K 84K
luci.criosweb.ro/riot/
![Page 145: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/145.jpg)
retina http://blog.netvlies.nl/design-interactie/retina-revolution/
![Page 146: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/146.jpg)
Tablet firstStart with tablet build
as its compatible with desktop users.
![Page 148: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/148.jpg)
Performance( mobile first responsive email design )
![Page 149: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/149.jpg)
Mobile first #RED
20K60K
100K
Progressive enhancement
![Page 150: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/150.jpg)
Mobile first #RED
@media@media
Poor @media support
Progressive enhancement
![Page 151: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/151.jpg)
Desktop first #RED
100K100K
100K
Graceful degradation
![Page 152: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/152.jpg)
Lite desktop emails
![Page 153: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/153.jpg)
Using display:none for mobile-last responsive design is like shoving shit into your closet before guests arrive at your house @grigs
![Page 154: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/154.jpg)
Recycle lite assetsdesktop
tablet
mobile
![Page 156: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/156.jpg)
Prism no. of requests and weight
http://prism.mobiforge.com/
![Page 157: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/157.jpg)
mobitest average load time / weight & waterfall chart
http://mobitest.akamai.com
![Page 158: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/158.jpg)
iPhone, iPad and Nexus S
http://mobitest.akamai.com
![Page 159: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/159.jpg)
@media blind tactics
(grrrr Android Gmail)
![Page 160: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/160.jpg)
MEDIA QUERY SUPPORT
iPhone Yes Surface (Hotmail/Outlook.com) Yes
iPad (including mini) Yes Win Mobile 6.1 No
iPod Touch Yes WP7 No
Android 2.1 No WP7.5 Yes
Android 2.2 Yes WP8 ?
Android 2.3 Yes BB OS 5 No
Android 4.0 Yes BB OS 7 Yes
Android 4.1 Yes BB OS 10 Yes
Droid Exchange No Palm OS 4.5 Yes
Android Gmail No Kindle Fire Yes
Droid Yahoo No Kindle Fire HD Yes
![Page 161: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/161.jpg)
BBZ10
![Page 162: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/162.jpg)
Fixed fallbackNo
@mediaYes
@media
No min/max-width / @media support in Outlook
Fixed-width default
![Page 163: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/163.jpg)
![Page 164: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/164.jpg)
Nexus 7
Clipped at ~570px
Galaxy Nexus
Clipped at ~370px
![Page 165: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/165.jpg)
droid
http://stylecampaign.com/blog/2012/08/android-grid-of-grim/
![Page 166: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/166.jpg)
![Page 167: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/167.jpg)
Galaxy Nexus & S2 (Gmail) sub lines / snippet text
![Page 168: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/168.jpg)
2 droids inbox on home screen (can customize)
![Page 169: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/169.jpg)
![Page 170: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/170.jpg)
Gmail
![Page 171: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/171.jpg)
Desktop Gmail
iPad
Gmail appnative
![Page 172: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/172.jpg)
Desktop Yahoo!
iPad
Gmail appnative
![Page 173: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/173.jpg)
Desktop Gmail
iPad
Gmail appnative
![Page 174: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/174.jpg)
![Page 175: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/175.jpg)
left rail
![Page 176: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/176.jpg)
http://stylecampaign.com/blog/2012/08/12-android-preview-pane-tips/
![Page 177: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/177.jpg)
Vertical scroll bar Colored pre-headerStyled ALT text
![Page 178: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/178.jpg)
Android Gmail
preview
AndroidGmailleft rail
Desktop creative designed for tablets and
@media blind smartphones
Touch friendly
![Page 179: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/179.jpg)
Desktop 2 columnSurface 1 column
![Page 180: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/180.jpg)
testing
![Page 181: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/181.jpg)
STYLECampaign mobile test lab…1 - iPod touch 640 x 960 OS 4.3.5 16 - Nokia Lumia 800 running WP7.5
2 - iPod touch 640 x 960 OS 5.1.1 17 - LG-E900 WP7
3 - iPod touch 640 x 1136 (taller screen) 18 - Dell WP7 with slide out keyboard
4 - iPad 2 1024 x 768 OS 4.3.5 19 - Surface tablet Windows 8, 1366 x 768
5 - iPad 3 (2x resolution) 2048 x 1536 OS 5.1.1 20 - Blackberry Bold 9900 640 x 480 OS 7.1
6 - iPad mini 1024×768 21 - Blackberry Bold 9780 480 x 360 OS 6
7 - LG GT540 2.1 Eclair, 320 x 480 22 - Blackberry Curve 8900 480 x 360 OS 5
8 - Motorola Defy 2.2.2 Froyo, 480 x 854 23 - Blackberry Tour 9630 480 x 360 OS 5
9 - Samsung Galaxy Ace GT 2.3, 320 x 480 24 - Original Kindle 3G 600 x 800 screen
10 - Samsung Galaxy S2 2.3.6 GB, 480 x 800 25 - Kindle Touch 3G
11 - Samsung Galaxy Nexus 4.0.4 ICS, 720 x 1280 26 - Kindle Paperwhite 3G
12 - Galaxy Note 2.3.6 GB, 800 x1280 “Smablet” 27 - Kindle Fire 7″ tablet Silk (based on Android vr2)
13 - Nexus 7 4.1 Jellybean, 800 x 1280 7″ tablet 28 - Kindle Fire HD tablet 7″
14 - Android mini PC 29 - Kindle Fire HD tablet 8.9″
15 - Palm Pixi Plus 320 x400 web OS v1.4.5 30 - Palm Treo Pro 320 x 320 Windows mobile 6.1
![Page 182: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/182.jpg)
TouchErgonomics - if you're
designing for touch it helps to be able to physically interact with the device.
![Page 183: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/183.jpg)
QA Testing and debugging - it's
fast and accurate. Some stuff is hard to debug via a
static preview tool.
![Page 184: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/184.jpg)
Speed Performance - can test
download speeds. Wi-Fi at various locations, 3G & 4G.
![Page 185: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/185.jpg)
Context Use cases - using devices in my
everyday life gives me a more nuanced feel for a platform. When do I reach for the 7“ vs. iPad, do
I use them in different ways?
![Page 186: Responsive Email Design](https://reader033.vdocuments.mx/reader033/viewer/2022051311/53f0f1558d7f72e94b8b46e3/html5/thumbnails/186.jpg)
#RED not #RWD