1.
Email Strategy and Designfor a MultiscreenWorld

2.
Alex WilliamsCreative DirectorTrendline Interactive@alexcwilliamsJustine JordanResearch & EducationLitmus@meladorri

3.
We’re GonnaTalk. A Lot.The lay of the landMultiscreen design approachesImplications…Workflow and processKey best practices

4.
Got screens?

5.
A lookback at#spop11

6.
Today, at#spop13OF OPENS ARE ON A MOBILE DEVICE5-50% on individual campaigns60%+ for niche audiences

7.
Email Opens: April 2013Mobile:Smartphones (iPhone,Android) andtabletsDesktop:Installed email programs (Outlook, AppleMail)Webmail:Email accessed through a web browser(Gmail, Hotmail,Yahoo!)Desktop34%Webmail24%Mobile42%Source: Litmus Email Analytics

8.
0%10%20%30%40%50%60%70%Opens in Each EnvironmentWebmail Desktop MobileThe last 28 months42%33%10%

9.
The Most Important Audience…YOURS.

10.
How mobile are your customers?Brand/Industry A: 55% Brand/Industry B: 18%Plan on data, not your gut

11.
+366%since #spop11

12.
+366%since #spop11

13.
Small Medium LargeScreensize-apaloozaiPhone2.3” wideGalaxy Note II3.2” wideNexus 77.3” wideBB Bold2.6” wideiPad Mini5.3” wideExcite 138.5” wide

14.
14The unifying characteristic?TOUCH.

15.
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php15% two handed49% one handed36% cradled67% used right thumb on the screen33% used left thumb on the screen

16.
Approaches

17.
As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)

18.
Mobile FirstConsiders themobile user asa priority|-------------------460px -------------------| |---------------------600px ---------------------|

19.
Mobile First / Friendly• One layout for all screen sizes• Single column design– 320-500px• Large text & buttons• Generous white space• Clear calls to action• Short, concise body copyAgnostic / Aware / Scalable

20.
Pros• Prioritizes importantdata, content, actions• Easier execution• No reliance on media query support• Good rendering in apps and nativeclientsCons• Desktop can suffer• Less real estate• Can get long• Fixed width can be lessthan ideal for AndroidMobile First / FriendlyBEST FOR:Ready for change, testing the waters, or resource strapped

21.
FluidEmail widthchanges tofit within thewindow|--------------------------------------------------------1166px---------------------------------------------------||-----------------------------525px --------------------------|

22.
Fluid layout• Percentage-basedwidths• Adapts to fill thescreen it’s viewedon; text wrapsautomatically

23.
Fluid layoutBEST FOR:Simple layouts, automated emails, mostly text/few imagesPros• Simple execution• No learning curve or reliance on mediaqueriesCons• Fewer design choices• Very narrow or very wideemails can get awkwardand hard to read

24.
ResponsiveDesignUses mediaqueries to detectscreen size andalter contentaccordingly|-----------320px ------------||--------------------------------------------700px------------------------------------------|

25.
Responsive Design• More than a “line of code”• Set of conditional statement that enablesspecific styles– If the screen size is x, then display y– If the screen size is x, then increase headline size to y– If screen size is x, then show image at 100%• Detects screen size, not device type

26.
Pros• Restyle, resize or reorder elements• Ability to hide/show desktop or mobilespecific images/content• Customized calls to action• Seamless experience across a range ofscreen sizesCons• Coding learning curve• Forces tough choices• Increased production andQA timeResponsive DesignBEST FOR:Growing mobile audiences, travel alerts, tech companies

27.
Email is an *application*

28.
Email is an *application*Device ≠ email client

29.
IMPLICATIONS!!

30.
iPhone native yesiPad native yesAndroid 2.1 native noAndroid 2.2 native yesAndroid 2.3 native yesAndroid 4.x native yesGmail mobile apps noMailbox iOS app yes@media supporthttp://stylecampaign.com/blog/2012/10/responsive-email-support/Yahoo! mobile apps noWindows Mobile 7 noWindows Mobile 7.5 yesWindows Mobile 8 noBlackBerry OS 6 yesBlackBerry OS 7 yesBlackBerry Z10 yesKindle Fire native yes

31.
Inconsistentrenderingacross devicesand operatingsystems

32.
iPhone: 23% of opens• Automatically scalesmessages to fit the screen• Excellent support forCSS3 and media queries• Images on by default• Resizes fonts under 13px

33.
Android: 8% of opens• Blocks images by default;supportsALT text• Two apps with opposingsupport for media queries• Primary content focus on left-hand side• Various screen sizes and noautomatic scalingImage source: stylecampaign.com

34.
BlackBerry Z10 < 1%• Media query support• Blocks images; supportsstyledALT text• Does not scale/auto-zoom• No separate app; email joinssocial, SMS and voice in the“hub”

35.
Windows Phone < 1%• Mixed media querysupport• Does weird things to fonts• Blocks images; no ALT text• No one has them

36.
What about tablets?• Desktop versionusually works just fine• Plan for tap targetsand plenty of whitespace• Mobile first/friendlyrules apply

37.
Ch-Ch-Ch-Ch-Choices• First, we must choose our design approach• Next, every module and piece of content hasto have a plan• Lastly, we need a plan B in case we run intotrouble in execution.

38.
Mobile Success =Tough Choices• Analyze each section of the template• Look at historical performance, removefeelings from the process• Trace required-content back to the source tounderstand rationale.

39.
Workflow and process

40.
First Steps of Design Planning• Identify top email clients on Desktop,Tablet andSmartphone. Focus on top 3-5 in each.• Prioritize - in order - 3 desired actions from eachemail.• Audit assets. Are we working with raw assets orpre-designed assets from different channel?

41.
A Responsive Design Process1. Grid2. Wireframe3. ResponsiveWireframe HTML Prototype4. Visual Design (varies depending on stakeholders)5. Code Final HTML

42.
Key best practicesBut first…

43.
In Memorium

44.
The Fold

45.
SmallGrey Fonts

46.
Glossy ImageButtons

47.
The “Mobile Version”

48.
Link Clusters

49.
Busy Images

50.
Magazine AdEmails

51.
ClaustrophobicPre-headers

52.
Key best practices

53.
Bigger buttons & fonts• Increase all font sizes25%, especially headlines– Body copy: 16px+– Headlines: 22px+– Buttons: 44px by 44px– White space: 15px• If you don’t make thembigger, Apple will!

54.
Consider the experience• Landing pages are part ofthat experience• Driving people to stuff thatdoesn’t work on mobile isstupid????Page/SiteTapPreview/OpenPreheaderSubject LineFrom Name

55.
FsdlkjfsldjfFlash Interstitials / pop-ups Painfully long forms

56.
Prioritize and focus• Identify the top 3-5 activities and use those– Purchase?– Download?– Registration?– Social?

57.
Device targeting candisplay app/OS specificcontent

58.
Dial up the contrastBright screenskill batteries

59.
Say no to link clusters and yes to white space

60.
Retina Optimizing Images400x300 - 12kb - 70% Compression …width=”200" height=”150” class=”Loren”…@media only screen and (max-width: 599px)img[class=”Loren"] {width: 100%;height: auto !important;}

61.
THANKS!@alexcwilliamsalex@trendlineinteractive.com@meladorrijustine@litmus.com