The Mobile Inbox
201: Design & Code
Diving headfirst into strategy, design,
and coding for mobile email
We know WHY.
Let’s talk about
HOW.
Ryan Alvis
Design Consultant
ExactTarget
Designing for
Small Screens
and Touch
Interfaces
Panel & Agenda
Tracy Novotny
Tec...
Designing for Small
Screens and Touch
Interfaces
Ryan Alvis, ExactTarget
• Content First: Top down Hierarchy
• Single column layout
• Contrast of value and color for content
distinction
• Large t...
• 44px Minimum Button
(Full-width even better!)
• Left or Center Aligned Text
• Adequate Spacing for Touch
Accuracy
Design...
• DETAIL:
Screen Resolution allows
for more detail to be seen
and more enticing visuals
• Watch your Language!
Avoid using...
CSS Buttons
RECOMMENDATION:
Use CSS to style
buttons for complete
scalability & clarity
- Ben Schneiderman
“A picture is worth a thousand
words. An interface is worth a
thousand pictures.”
What mobile subscribers
are used to interacting with
Google Maps
Facebook
YouTube
Google+
WeChat
At Home in the Mobile UI
Clean Content
Breaks
Familiar, easy on the
eyes and easy to skim
Clean Content
Breaks
Familiar, easy on the
eyes and easy to skim
RECOMMENDATION:
Use containers, rules,
divider graphics a...
Communication at the
speed of instant recognition
Icons = Instant Communication
RECOMMENDATION:
Establish an icon set
for ...
Mobile UI
Font Sizes
Average font size in the
UI is about 17px
Stand out from the
surrounding UI with
BIGGER fonts
20px
17...
28px
17px
24px
Mobile UI
Font Sizes
RECOMMENDATION:
Headlines ≥ 28px
Body Text ≥ 17px
Mo’ Pixels,
Mo’ Problems…
HD = More Beautiful Pixels!
More Beautiful Pixels! =
Larger Files
Larger Files =
Slower Downloads
Slower Downloads =
Loss ...
Derived from annualized monthly Google queries (from AdWords traffic estimator). - screensiz.es
Mobile Pixel Density
Most ...
Compression and File Size
320 x 395
JPG Quality: 70
31KB
640 x 789 (200%)
JPG Quality: 70
70KB
640 x 789 (200%)
JPG Qualit...
RECOMMENDATION:
Create mobile photos
at 200% and output at
30% JPEG Quality
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...
Some images need clarity more than others
Resolution Hierarchy
90 x 90 (200%)
GIF
5KB
90 x 90 (200%)
PNG
7KB
RECOMMENDATIO...
Smart Objects
are your friends
HD Images &
Creative Workflow
Adobe Photoshop
Express @
photoshop.com
pixlr.com/editor
compressnow.com
cutandslice.me
Image Editing & Compression Utilit...
- Alex Williams on 11 Things that Need to Die
in Mobile Email
“There's a new email client every day,
whether, desktop, mob...
Case in Point: Android Gmail App
Android 9%
of email opens
according to Litmus
About 70%
in the Gmail App
according to Bri...
Creative Control
Where You Can
Creative Control
Where You Can
RECOMMENDATION:
Make style
decisions not
mockup decisions
Responsive Email
Coding Techniques
Tracy Novotny, ExactTarget
Overview of @media query styles
CSS is activated at 480px
and smaller
Add body[yahoo] in front
of every style class
Add ya...
• Wrapping content with fluid widths
• 100% width buttons
• Stack left content over right
• Stack right content over left
...
Wrapping content with fluid widths
Wrapping content with fluid widths
Wrapping content with fluid widths
100% width buttons
100% width buttons
100% width buttons
Stack Left Content Over Right
Stack Left Content Over Right
Stack Left Content Over Right
Stack Right Content Over Left
Stack Right Content Over Left
Stack Right Content Over Left
Stacking navigation
Stacking navigation
Stacking navigation
Create columns from vertical content
Create columns from vertical content
Create columns from vertical content
Showing/Hiding content on mobile
Showing/Hiding content on mobile
Showing/Hiding content on 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.
C...
Finding the Mobile
Solution That Works
For You
Jessica Higgins, Brightwave Marketing
Unfortunately,
one size does
not fit all.
Multiple Approaches
Friendly Fluid Responsive
Things to consider:
Audience
(% mobile users)
Time
(budget/tim
elines)
Resources
(team
makeup)
Expectations
(company &
use...
Equifax Newsletter
Audience:
48% mobile users
• Monthly automated
• Dynamically fed content
from blog
• Flexible layout
• ...
Best Solution?
+16%OPEN
RATE
FLUID
width adapts allowing elements
to flow across available space
Simple layout, copy heavy...
Chick-fil-A Promotional
Audience:
• 40% mobile users
• 1/3 Android users
• Product launch
• Educate
• Showcase photography
Best Solution?
RESPONSIVE
• Utilizes two unique designs
• Universally supported
• Can target based on device
instead of sc...
- Jay Baer
“The magic formula for your
brand will differ from the magic
formula for your competitors.”
Sustainable
Responsive Workflow
Jeff Batte, DEG
Traditional Process
• Concept
• Creative Design
• Development
• QA
Sustainable Responsive Workflow
Responsive Process
• Concept
• Development & Creative Design
• QA
Sustainable Responsive Workflow
Templatized Responsive Process
• Development
• Concept
• Creative Design
• QA
Sustainable Responsive Workflow
Sustainable Responsive Workflow
Sustainable Responsive Workflow
Sustainable Responsive Workflow
Benefits
• Reduced per-email build time by up to
50%
• Eliminates much opportunity for error
• Contracts and strengthens Q...
Downloads
pages.exacttarget.com/etdesign
Q&A
Your Feedback Matters
Thank You
Have a great Connections!
The Mobile Inbox 201: Design & Coding
Upcoming SlideShare
Loading in …5
×

The Mobile Inbox 201: Design & Coding

1,320
-1

Published on

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.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,320
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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
  • The Mobile Inbox 201: Design & Coding

    1. 1. The Mobile Inbox 201: Design & Code Diving headfirst into strategy, design, and coding for mobile email
    2. 2. We know WHY. Let’s talk about HOW.
    3. 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. 4. Designing for Small Screens and Touch Interfaces Ryan Alvis, ExactTarget
    5. 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. 6. • 44px Minimum Button (Full-width even better!) • Left or Center Aligned Text • Adequate Spacing for Touch Accuracy Designing for Touch Interfaces
    7. 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. 8. CSS Buttons RECOMMENDATION: Use CSS to style buttons for complete scalability & clarity
    9. 9. - Ben Schneiderman “A picture is worth a thousand words. An interface is worth a thousand pictures.”
    10. 10. What mobile subscribers are used to interacting with Google Maps Facebook YouTube Google+ WeChat At Home in the Mobile UI
    11. 11. Clean Content Breaks Familiar, easy on the eyes and easy to skim
    12. 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. 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. 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. 15. 28px 17px 24px Mobile UI Font Sizes RECOMMENDATION: Headlines ≥ 28px Body Text ≥ 17px
    16. 16. Mo’ Pixels, Mo’ Problems…
    17. 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. 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. 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. 20. RECOMMENDATION: Create mobile photos at 200% and output at 30% JPEG Quality
    21. 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. 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. 23. Smart Objects are your friends HD Images & Creative Workflow
    24. 24. Adobe Photoshop Express @ photoshop.com pixlr.com/editor compressnow.com cutandslice.me Image Editing & Compression Utilities
    25. 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. 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. 27. Creative Control Where You Can
    28. 28. Creative Control Where You Can RECOMMENDATION: Make style decisions not mockup decisions
    29. 29. Responsive Email Coding Techniques Tracy Novotny, ExactTarget
    30. 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. 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. 32. Wrapping content with fluid widths
    33. 33. Wrapping content with fluid widths
    34. 34. Wrapping content with fluid widths
    35. 35. 100% width buttons
    36. 36. 100% width buttons
    37. 37. 100% width buttons
    38. 38. Stack Left Content Over Right
    39. 39. Stack Left Content Over Right
    40. 40. Stack Left Content Over Right
    41. 41. Stack Right Content Over Left
    42. 42. Stack Right Content Over Left
    43. 43. Stack Right Content Over Left
    44. 44. Stacking navigation
    45. 45. Stacking navigation
    46. 46. Stacking navigation
    47. 47. Create columns from vertical content
    48. 48. Create columns from vertical content
    49. 49. Create columns from vertical content
    50. 50. Showing/Hiding content on mobile
    51. 51. Showing/Hiding content on mobile
    52. 52. Showing/Hiding content on mobile
    53. 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. 54. Finding the Mobile Solution That Works For You Jessica Higgins, Brightwave Marketing
    55. 55. Unfortunately, one size does not fit all.
    56. 56. Multiple Approaches Friendly Fluid Responsive
    57. 57. Things to consider: Audience (% mobile users) Time (budget/tim elines) Resources (team makeup) Expectations (company & user)
    58. 58. Equifax Newsletter Audience: 48% mobile users • Monthly automated • Dynamically fed content from blog • Flexible layout • „Set it & forget it‟
    59. 59. Best Solution? +16%OPEN RATE FLUID width adapts allowing elements to flow across available space Simple layout, copy heavy, automated
    60. 60. Chick-fil-A Promotional Audience: • 40% mobile users • 1/3 Android users • Product launch • Educate • Showcase photography
    61. 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. 62. - Jay Baer “The magic formula for your brand will differ from the magic formula for your competitors.”
    63. 63. Sustainable Responsive Workflow Jeff Batte, DEG
    64. 64. Traditional Process • Concept • Creative Design • Development • QA Sustainable Responsive Workflow
    65. 65. Responsive Process • Concept • Development & Creative Design • QA Sustainable Responsive Workflow
    66. 66. Templatized Responsive Process • Development • Concept • Creative Design • QA Sustainable Responsive Workflow
    67. 67. Sustainable Responsive Workflow
    68. 68. Sustainable Responsive Workflow
    69. 69. Sustainable Responsive Workflow
    70. 70. Benefits • Reduced per-email build time by up to 50% • Eliminates much opportunity for error • Contracts and strengthens QA Sustainable Responsive Workflow
    71. 71. Downloads pages.exacttarget.com/etdesign Q&A
    72. 72. Your Feedback Matters
    73. 73. Thank You Have a great Connections!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×