DESIGNING MOBILE FRIENDLY S

Transcription

1 DESIGNING MOBILE FRIENDLY S

2 MAKING MOBILE ERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage

3 PICTURES OF DESKTOP VS MOBILE SAME SAME BUT DIFFERENT CLIENTS SCREEN SIZES LAYOUT STYLE GRAPHIC ELEMENTS CTA RESPONSES

4 MAKING MOBILE ERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage

5 CONTEXT WHO ARE YOUR USERS Users (May 12) 960mn Mobile Subsctiptions (all over) 700/ 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

6 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

7 HOW ARE S READ? USAGE PHONE AND TABLET OPENS BY TIME-OF-DAY Phone % Tablet % Open Volume OPEN RATE

8 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?

9 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 Client User Context Time of day User history Preferences

10 MAKING MOBILE ERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage

11 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

12 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

13 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

14 DESIGN RULE 01 HIDE CONTENT

15 DESIGN RULE 02 SIZE ZERO GORGEOUS

16 DESIGN RULE 03 EASY TO TOUCH

17 DESIGN RULE 04 WATCH THAT FONT Disable auto-scaling fonts Big fonts Size 13 to 18 Fonts differ by OS

18 DESIGN RULE 05 DEFINE VIEW Narrower widths Viewport in the meta tag Varies between 320px, 480px, 520px 980px viewport

19 DELIVERY HOW IS CONTENT SERVED Different Versions Device Targeted Screen Agnostic SENDS DEVICE INFO Web Script/Handset Detection API Responsive HTTP REQUEST

20 DELIVERY MODES OF DESIGN + DELIVERY SCREEN AGNOSTIC DEVICE TARGETED DIFFERENT VERSIONS RESPONSIVE

21 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/ 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

22 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

23 DELIVERY ER TESTING TOOLS KEYNOTE DOT MOBI LITMUSAPP PREVIEWMY CAMPAIGN MONITOR

24 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 er. 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. 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:# }.yshortcuts a span { color:# } Background image not displayed Use a background for a table and not div. Also fixes available online to show background images in for certain clients