DESIGNING MOBILE FRIENDLY EMAILS
MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage
PICTURES OF DESKTOP VS MOBILE SAME SAME BUT DIFFERENT EMAIL CLIENTS SCREEN SIZES LAYOUT STYLE GRAPHIC ELEMENTS CTA RESPONSES
MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage
CONTEXT WHO ARE YOUR USERS Users (May 12) 960mn Mobile Subsctiptions (all over) 700/5981 29 mobile v/s 1 Landline HOW MANY USERS ARE MOBILE? ANALYTICS 56%/86% Population with mobile SURVEY 6%/26% 3G/4G subscriptions Yearly 43% growth 40% users connected only via phone YOUR BRAND? 4.8 Bn handsets - more than cars, PCs, radios, LL, TVs combined 19% handsets are smartphones
HOLD ON WHAT IS ON YOUR MOBILE? APP CHEAT WRAP THE LINK AS AN APP WAP Native applications The mobile web Need to download Needs connectivity Static, user specific content Dynamic, mass content Requires a smartphone Requires a mobile browser Functional but expensive Cheaper but up to date Platform specific design Responsive design
HOW ARE EMAILS READ? USAGE PHONE AND TABLET EMAIL OPENS BY TIME-OF-DAY Phone % Tablet % Open Volume OPEN RATE
CONTEXT CONTENT AND HOW DO USERS RESPOND? 35% Advertiser site USER ACTION 42% Click on AD 35% Search 49% Make a Purchase 27% Call a business INFORMATION YOUR BRAND?
CONTENT BEFORE YOU GO MOBILE Encoding Responsive Device specific HTML 5 Credibility of source Message Layout Information ECOSYSTEM Response Open Mobile Click Channel Delivery Device Operator OS Email Client User Context Time of day User history Preferences
MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage
DESIGN OPTION 01 ONE AND DONE Single-column Proportional tables Larger headline and body-copy Scaling of elements SCALABLE Easy to make, maintain Too simple and possibly long
DESIGN OPTION 02 ONE FOR EACH SCREEN SPECIFIC Optimized to each screen Versions of text, images Variations in column DEVICE SPECIFIC Higher engagement Effort and time Variation in message Third-party technology
DESIGN OPTION 03 ONE FOR ALL RESPONSIVE Font size variations Grid led layout Design with CSS in mind Create a single message Effort and time Special code and testing
DESIGN RULE 01 HIDE CONTENT
DESIGN RULE 02 SIZE ZERO GORGEOUS
DESIGN RULE 03 EASY TO TOUCH
DESIGN RULE 04 WATCH THAT FONT Disable auto-scaling fonts Big fonts Size 13 to 18 Fonts differ by OS
DESIGN RULE 05 DEFINE VIEW Narrower widths Viewport in the meta tag Varies between 320px, 480px, 520px 980px viewport
DELIVERY HOW IS CONTENT SERVED Different Versions Device Targeted Screen Agnostic SENDS DEVICE INFO Web Script/Handset Detection API Responsive HTTP REQUEST
DELIVERY MODES OF DESIGN + DELIVERY SCREEN AGNOSTIC DEVICE TARGETED DIFFERENT VERSIONS RESPONSIVE
DELIVERY BEST PRACTICES 1 RESPONSIVE LAYOUT Divide the content in blocks Use media uery to style for different screen size Dynamic Image scaling 2 PROGRESSIVE DISCLOSURE Hide detailed content on mobile. Use tap to show the content 3 CLICK TO CALL / SMS Action buttons which can call a phone number or send an sms 4 IMAGE OPTIMIZATION No Spacer Image. Use Alt Text. Include dimensions. Fallback colors for background of images 5 FORMS Textboxes, radio buttons in a single column or in responsive grid Use input type= text/number/email to open up the appropriate keypad in mobile devices Avoid shorthand for fonts in css font:bold 1em/1.2em georgia,times,serif; 6 HTML OPTIMIZATION Use table layout. Keep width less than 600px Use inline CSS. Don t use <br> <div> tags
DELIVERY TESTING 1 To check all images are working 2 To check all links are working 3 To check the layout is not getting broken across browsers and devices 4 To check the fonts are rendered properly and are readable 5 Newer devices come up, need the code to upgrade to them 6 Test against spam filters
DELIVERY EMAILER TESTING TOOLS KEYNOTE DOT MOBI LITMUSAPP PREVIEWMYEMAIL CAMPAIGN MONITOR
DELIVERY WHAT CAN GO WRONG WHAT CAN GO WRONG Layout is good on Desktop but all the columns are not proper in mobile HOW TO SOLVE IT Check responsiveness of the grid, use of correct source for outputting emailer. Image not displayed Margin, Padding issues Various layout issues. Some client s turn off images. Avoid putting important contextual information in the image. Use significant Alt text. Specific with some clients. Modify the html/css as per the allowed structure for the Use a CSS Reset. If still the issues are there check the structure of the html Extra Spacing issue below images Use CSS style= display:block for img tag. Email is going into spam Do not put any javascript code in the mailer. Use Spam testing tools. Loss of background from full width wrapper in hotmail Add width=100% Yahoo turns all links to blue.yshortcuts { color:#000000 }.yshortcuts a span { color:#000000 } Background image not displayed Use a background for a table and not div. Also fixes available online to show background images in email for certain clients