The Mobile Inbox 201: Design & Coding
•
7 likes•2,589 views
Dive headfirst into strategy, design, and coding for mobile email. Explore design tactics for small screens and the touch experience, and get a lesson in the basics of coding responsive emails.
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to The Mobile Inbox 201: Design & Coding
Similar to The Mobile Inbox 201: Design & Coding (20)
More from Salesforce Marketing Cloud
More from Salesforce Marketing Cloud (20)
Recently uploaded
Recently uploaded (20)
The Mobile Inbox 201: Design & Coding
- 1. The Mobile Inbox 201: Design & Code Diving headfirst into strategy, design, and coding for mobile email
- 2. We know WHY. Let’s talk about HOW.
- 3. Ryan Alvis Design Consultant ExactTarget Designing for Small Screens and Touch Interfaces Panel & Agenda Tracy Novotny Technical Producer ExactTarget Coding for Mobile-Optimized Solutions Jessica Higgins Creative Director Brightwave Marketing Finding the Right Mobile Solution Jeff Batte Director, eCRM/Strategy DEG Sustainable Responsive Workflow
- 4. Designing for Small Screens and Touch Interfaces Ryan Alvis, ExactTarget
- 5. • Content First: Top down Hierarchy • Single column layout • Contrast of value and color for content distinction • Large text size ensures readability • Don‟t cram - Legibility over length using concise messaging Designing for Small Screens
- 6. • 44px Minimum Button (Full-width even better!) • Left or Center Aligned Text • Adequate Spacing for Touch Accuracy Designing for Touch Interfaces
- 7. • DETAIL: Screen Resolution allows for more detail to be seen and more enticing visuals • Watch your Language! Avoid using “click here” when users are actually “tapping” Buttons for Touch Interfaces
- 8. CSS Buttons RECOMMENDATION: Use CSS to style buttons for complete scalability & clarity
- 9. - Ben Schneiderman “A picture is worth a thousand words. An interface is worth a thousand pictures.”
- 10. What mobile subscribers are used to interacting with Google Maps Facebook YouTube Google+ WeChat At Home in the Mobile UI
- 11. Clean Content Breaks Familiar, easy on the eyes and easy to skim
- 12. Clean Content Breaks Familiar, easy on the eyes and easy to skim RECOMMENDATION: Use containers, rules, divider graphics and spacing to define content breaks
- 13. Communication at the speed of instant recognition Icons = Instant Communication RECOMMENDATION: Establish an icon set for your mobile content and USE THEM OFTEN
- 14. Mobile UI Font Sizes Average font size in the UI is about 17px Stand out from the surrounding UI with BIGGER fonts 20px 17px 15px 13px
- 15. 28px 17px 24px Mobile UI Font Sizes RECOMMENDATION: Headlines ≥ 28px Body Text ≥ 17px
- 17. HD = More Beautiful Pixels! More Beautiful Pixels! = Larger Files Larger Files = Slower Downloads Slower Downloads = Loss of Engagement Images and HD Mobile Displays
- 18. Derived from annualized monthly Google queries (from AdWords traffic estimator). - screensiz.es Mobile Pixel Density Most popular Pixel Density is 200% (“Retina Display”) RECOMMENDATION: Design for 200% Pixel Density
- 19. Compression and File Size 320 x 395 JPG Quality: 70 31KB 640 x 789 (200%) JPG Quality: 70 70KB 640 x 789 (200%) JPG Quality: 30 33KB
- 20. RECOMMENDATION: Create mobile photos at 200% and output at 30% JPEG Quality
- 21. Some images need clarity more than others Resolution Hierarchy 45 x 45 JPG: 70 3KB 90 x 90 (200%) JPG: 30 3KB 90 x 90 (200%) JPG: 70 5KB 90 x 90 (200%) GIF 5KB 90 x 90 (200%) PNG 4KB
- 22. Some images need clarity more than others Resolution Hierarchy 90 x 90 (200%) GIF 5KB 90 x 90 (200%) PNG 7KB RECOMMENDATION: Design logos and graphics for 200% save as GIF or PNG
- 23. Smart Objects are your friends HD Images & Creative Workflow
- 24. Adobe Photoshop Express @ photoshop.com pixlr.com/editor compressnow.com cutandslice.me Image Editing & Compression Utilities
- 25. - Alex Williams on 11 Things that Need to Die in Mobile Email “There's a new email client every day, whether, desktop, mobile or tablet. You can do your best to make the experience hold up across devices, but you can't make it perfect across devices.”
- 26. Case in Point: Android Gmail App Android 9% of email opens according to Litmus About 70% in the Gmail App according to Brightwave user survey
- 27. Creative Control Where You Can
- 28. Creative Control Where You Can RECOMMENDATION: Make style decisions not mockup decisions
- 29. Responsive Email Coding Techniques Tracy Novotny, ExactTarget
- 30. Overview of @media query styles CSS is activated at 480px and smaller Add body[yahoo] in front of every style class Add yahoo=“fix” to the <body> tag @media styles are applied to the HTML with class=“” !important added to override in-line styles
- 31. • Wrapping content with fluid widths • 100% width buttons • Stack left content over right • Stack right content over left • Stacking navigation • Create columns from vertical content • Showing/Hiding content on mobile 7 Responsive Email Techniques
- 32. Wrapping content with fluid widths
- 33. Wrapping content with fluid widths
- 34. Wrapping content with fluid widths
- 38. Stack Left Content Over Right
- 39. Stack Left Content Over Right
- 40. Stack Left Content Over Right
- 41. Stack Right Content Over Left
- 42. Stack Right Content Over Left
- 43. Stack Right Content Over Left
- 47. Create columns from vertical content
- 48. Create columns from vertical content
- 49. Create columns from vertical content
- 50. Showing/Hiding content on mobile
- 51. Showing/Hiding content on mobile
- 52. Showing/Hiding content on mobile
- 53. Do not set too many fixed widths, the more fixed widths the more styles you‟ll need to add to make the email responsive. Coding Recommendations Design and build to give your audience the best experience possible Don‟t be afraid to try unconventional email coding techniques for mobile content
- 54. Finding the Mobile Solution That Works For You Jessica Higgins, Brightwave Marketing
- 55. Unfortunately, one size does not fit all.
- 56. Multiple Approaches Friendly Fluid Responsive
- 57. Things to consider: Audience (% mobile users) Time (budget/tim elines) Resources (team makeup) Expectations (company & user)
- 58. Equifax Newsletter Audience: 48% mobile users • Monthly automated • Dynamically fed content from blog • Flexible layout • „Set it & forget it‟
- 59. Best Solution? +16%OPEN RATE FLUID width adapts allowing elements to flow across available space Simple layout, copy heavy, automated
- 60. Chick-fil-A Promotional Audience: • 40% mobile users • 1/3 Android users • Product launch • Educate • Showcase photography
- 61. Best Solution? RESPONSIVE • Utilizes two unique designs • Universally supported • Can target based on device instead of screen size Using device detection instead of media queries +17%OPEN RATE
- 62. - Jay Baer “The magic formula for your brand will differ from the magic formula for your competitors.”
- 64. Traditional Process • Concept • Creative Design • Development • QA Sustainable Responsive Workflow
- 65. Responsive Process • Concept • Development & Creative Design • QA Sustainable Responsive Workflow
- 66. Templatized Responsive Process • Development • Concept • Creative Design • QA Sustainable Responsive Workflow
- 70. Benefits • Reduced per-email build time by up to 50% • Eliminates much opportunity for error • Contracts and strengthens QA Sustainable Responsive Workflow
- 73. Thank You Have a great Connections!
Editor's Notes
- sharing button language testing in the performance-Driven design session
- Create content and design that has visual harmony within the mobile user interface and allow your subscribers to engage with your content in an intuitive and familiar way
- Use of list treatments for content deliveryUse containers, rules, divider graphics and spacing to clearly define your content breaks, using
- Use of list treatments for content deliveryUse containers, rules, divider graphics and spacing to clearly define your content breaks, using
- navigating the smaller screen of a mobile device relies heavily on iconsuse of icons as visuals has been heavily adopted in digital design across channelsinstant associations and messages conveyed in these simple and easily recognizable visuals
- smallest font size you are likely to find anywhere in the mobile UI is 16pxText menus and labels are a minimum of 20pxmenu bars use fonts of 24pxtitles and features that content needs to stand out from it’s surroundings so recommendation is at least 36-40px and no smaller than 28px
- smallest font size you are likely to find anywhere in the mobile UI is 16pxText menus and labels are a minimum of 20pxmenu bars use fonts of 24pxtitles and features that content needs to stand out from it’s surroundings so recommendation is at least 36-40px and no smaller than 28px
- Small devices equipped with beautiful displays which continue to grow in resolutionloading your content with high-resolution images raises issues with download time and potential truncation
- Focusing on 200% recommendation:EX. 300px wide image should be created and uploaded at 600px wide at 72dpi, not 300px wide at 144dpi
- If managing all of your images at 200% is not sustainable be selective about your important visuals. Logo, buttons, icons, 2D graphics or feature image should look beautiful in mobile
- If managing all of your images at 200% is not sustainable be selective about your important visuals. Logo, buttons, icons, 2D graphics or feature image should look beautiful in mobile
- Do you slice your images from your PSD?Save time by working at 200%create your visual assets separately they can be placed as smart objects within your PSD
- @media queries are placed in the <head> of the HTML between the opening and closing <syle> tags. The @media call acts like a conditional statement to determine if the styles should be used in the email. In this example if the screen size is 480px or smaller the styles will be used. Yahoo! Ignores the @media query statement and uses the styles in the email even if it doesn’t meet the conditional statement. The fix is to add body[yahoo] in front of every style. You also need to add yahoo=“fix” to the <body> tag. !important is used on the CSS property if you need to override an in-line style you set as part of the desktop version. In this example we want to override the container table width of 640px with 100% width. You add @media styles the same way you add regular styles to tags, with class=“”.
- This technique relies on variable width and is the key to the fluid widths.Set the containing table to 100%Resize full width imagesto 100%Up the body font size and let it wrap.
- You can see in this view that the structure of the email doesn’t change. We are resizing elements and letting the text flow within the new width. Tip: Only set table cell widths where needed so you don’t have to override a lot of styles in the @media query.
- The first style .container resizes the containing table of the email from a fixed width of 600px to a width of 100% once the screen size goes below 480px.The second style .photo is used on full width images to change the fixed width and height of the image in the desktop version to resize to full width of the screen size.The third style .body is used on the body text to up the font size from 14px to 18px on mobile devices.
- This technique relies on CSS properties to change the width of the button to 100%Resize the button table to 100%Use CSS3 properties like rounded corners, drop shadows, to enhance the buttonThis email is also a good example of the fluid width
- The style .button changes the width of the table containing the button to 100% width. The table in the desktop version uses the length of the text to determine the width of the button so we do not need to add !important.The bottom HTML shows the use of CSS3 styles to add rounded corners to the button.
- This technique relies on the CSS property float applied to the <td>’s you want to stack. You will also apply a width:100% to span the content 100% as well
- The class .drop is applied to the containing table cells you want to stack. The first property width:100% will span the contents of the column to 100%. The second property float:left will stack the content.
- This technique relies on the CSS property float applied to the <td>’s you want to stack. You will also apply a width:100% to span the content 100% as well
- The only difference between this technique from the last is you will need to use a rowspan on the right column content. You will also need to put a 1px spacer.gif or hidden content in the top row of the left column. You could also have content in the top row if you want to sandwich the right column between left column content. When you use the rowspan the hierarchy of the table cells change in the code
- This technique relies on the CSS property float applied to the <td>’s you want to stack. You will also apply a width:100% to span the content 100% as well
- This technique is commonly used for footer navigation. It separate the links making it easier for the touch interface of mobile devices.
- This technique is commonly used for footer navigation. It separate the links making it easier for the touch interface of mobile devices.
- This technique is commonly used for footer navigation. It separate the links making it easier for the touch interface of mobile devices.
- This technique relies on CSS properties float left and right and span tags around the content to enable the float
- This technique is commonly used for footer navigation. It separate the links making it easier for the touch interface of mobile devices.
- This technique relies on CSS property display:none used in @media styleCommonly used to condense navigationUsed to remove un-needed imagery from mobile
- This technique relies on CSS property display:none used in @media styleCommonly used to condense navigationUsed to remove un-needed imagery from mobile
- Do not set too many fixed widths, the more fixed widths the more styles you’ll need to add to make the email responsive.Mobile rendering engines support CSS3 (as well as many webmail clients) so design and build to give your audience the best experience possible knowing that it will degrade safely.Don’t be afraid to try unconventional email coding techniques for mobile content.
- matching mobile solutions with client examples and explaining why they are a fit
- ----- Meeting Notes (9/6/13 11:20) -----tracy mentioned multiple methods, keep that in mind.
- friendly -fluid- responsivecombine 1 or 2 and remember not one size fits all.
- So is it worth your time?-audience- what’s the break down of your mobile users-resources-do you have a team of 8 developers or one project manager/account executive/designer-time- when does the campaign need to go out and what’s the budget to get it done-expectations- are you a Tech company / are your subscribers early adoptersWe kept these things in mind in the next client examples
- What solution fits Equifax?Based on the content needs it’s Fluid--Layout Adjustments--Percentage based widthSingle column layoutFonts and image sizes stay the same
- --mobile adjustments--Single column layoutLarger Fonts (at least 14px)Condensed body copyTouch friendly buttonsHide navigation barSwap out large image with single animated gif