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.
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
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
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
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
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
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
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
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
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.”
70. Benefits
• Reduced per-email build time by up to
50%
• Eliminates much opportunity for error
• Contracts and strengthens QA
Sustainable Responsive Workflow
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