Diving headfirst into strategy, design, and coding for mobile email

1. The Mobile Inbox 201: Design & Code
Diving headfirst into strategy, design, and coding
for mobile email

2. Tracy Novotny
Technical Producer
ExactTarget

3. Tana Babcock
Sr. Design Consultant
ExactTarget

4. Agenda
• Mobile Landscape
• Designing for Small Screens and Touch
Interfaces
• Coding for Mobile-Optimized Solutions
• Sustainable Responsive Workflow

5. Tana Babcock
Responsive Design Techniques, Tricks & Tips

6. Mobile adoption
Webmail
Desktop
Mobile
70%
60%
42%
50%
33%
40%
30%
20%
10%
0%
Data
Source:
Litmus
emailclientmarketshare.com
10%
Opens in Each Environment
Data
Source:
Litmus
emailclientmarketshare.com

7. Email Client Landscape
As of October 2013
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Apple iPhone
Outlook
Apple iPad
Google Android
Apple Mail
Outlook.com
Yahoo! Mail
Gmail
Windows Live Mail
Windows Mail
Recent changes:
24%
17%
12%
11%
8%
6%
6%
3%
3%
2%
iOS 7 launched Sept 18th
Outlook 2013 released in Q1
Mini released Q4 2012
Gmail app updates Q3
NEW in Q2
Redesigned Q3
Gmail tabs – impacts sorting
Emailclientmarketshare.com

8. Designing for
Small Screens
• 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

9. Designing for
Touch Interfaces
• 44px Minimum Button (Full-width even better!)
• Left or Center Aligned Text
• Adequate Spacing for Touch Accuracy

10. Buttons for
Touch Interfaces
• 44px Minimum Button
(Full-width even better!)
• Left or CenteDETAIL:
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”
• Aligned Text
• Adequate Spacing for Touch Accuracy

11. CSS Buttons
RECOMMENDATION:
Use CSS to style
buttons for complete
scalability & clarity

12. “A picture is worth a thousand
words. An interface is worth a
thousand pictures.”
- Ben Schneiderman

13. At Home in the Mobile UI
What mobile subscribers are
used to interacting with
Google Maps
Facebook
YouTube
Google+
WeChat

14. Clean Content
Breaks
Familiar, easy on the eyes
and easy to skim

15. Clean Content
Breaks
Familiar, easy on the
eyes and easy to skim
RECOMMENDATION:
Use containers, rules,
divider graphics and
spacing to define
content breaks

16. Icons = Instant Communication
Communication at the speed of
instant recognition
RECOMMENDATION:
Establish an icon set for
your mobile content and
USE THEM OFTEN

17. 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

18. Mobile UI
Font Sizes
28px
RECOMMENDATION:
Headlines ≥ 28px
Body Text ≥ 17px
17px
24px

19. Mo’ pixels,
Mo’ problems…

20. Images and HD
Mobile Displays
HD = More Beautiful Pixels!
More Beautiful Pixels! = Larger Files
Larger Files = Slower Downloads
Slower Downloads = Loss of Engagement

21. Mobile Pixel Density
Most popular Pixel Density is 200%
(“Retina Display”)
RECOMMENDATION:
Design for 200%
Pixel Density
Derived from annualized monthly Google queries (from AdWords traffic estimator). - screensiz.es

22. Compression and File Size
320 x 395
JPG Quality: 70
31KB
640 x 789 (200%)
JPG Quality: 70
640 x 789 (200%)
JPG Quality: 30
70KB
33KB

23. RECOMMENDATION:
Create mobile photos at
200% and output at 30%
JPEG Quality

24. Resolution Hierarchy
Some images need clarity more than others
45 x 45
JPG: 70
90 x 90 (200%)
JPG: 30
90 x 90 (200%)
JPG: 70
90 x 90 (200%)
GIF
90 x 90 (200%)
PNG
3KB
3KB
5KB
5KB
4KB

25. Resolution Hierarchy
Some images need clarity more than others
RECOMMENDATION:
Design logos and
graphics for 200% save
as GIF or PNG
90 x 90 (200%)
GIF
90 x 90 (200%)
PNG
5KB
4KB

26. HD Images &
Creative Workflow
Smart Objects are
your friends

27. Image Editing
& Compression
Utilities
Adobe Photoshop Express
@ photoshop.com
pixlr.com/editor
compressnow.com
cutandslice.me

28. “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”
- Alex Williams on 11 Things that Need to Die
in Mobile Email

29. Case in Point: Android Gmail App
9%
Android
of email opens
according to Litmus
70%
About
in the Gmail App
according to Brightwave
user survey

30. Creative Control
Where You Can

31. Creative Control
Where You Can
RECOMMENDATION:
Make style decisions
not mockup decisions

32. Two Steps to the Mobile Inbox
1
hort-term
Aware S
Simple improvement without specialization.
Design-only tactics
2
2
Long-term
Responsive
Deliver a customized mobile experience.
Special design + code

33. Tracy Novotny
Responsive Email Coding Techniques
Sustainable Responsive Workflow

34. Overview of @media query styles
CSS is activated at 480px and
smaller
Add body[yahoo] in front of every
style class
!important added to override
in-line styles
Add yahoo= fix to the
<body> tag
@media styles are applied to the
HTML with class=

35. 7 Responsive Email Techniques
• Wrapping content with fluid widths
• 100% width buttons
• Stacking left column on right
• Stacking right column on left
• Stacking navigation
• Create columns from vertical content
• Showing/Hiding content on mobile

36. Wrapping content with fluid widths

37. Wrapping content with fluid widths

38. Wrapping content with fluid widths

39. 100% width buttons

40. 100% width buttons

41. 100% width buttons

42. Stacking left column on right

43. Stacking left column on right

44. Stacking left column on right

45. Stacking right column on left

46. Stacking right column on left

47. Stacking right column on left

48. Stacking navigation

49. Stacking navigation

50. Stacking navigation

51. Create columns from vertical content

52. Create columns from vertical content

53. Create columns from vertical content

54. Showing/Hiding content on mobile

55. Showing/Hiding content on mobile

56. Showing/Hiding content on mobile

57. Coding recommendations
Do not set too many fixed widths,
the more fixed widths the more
styles you’ll need to add to make
the email responsive.
Don t be afraid to try
unconventional email
coding techniques for
mobile content
Design and build to give
your audience the best
experience possible

58. Sustainable responsive workflow
• Responsive emails take on average 1.5 – 2X longer to build
over static campaigns
• Develop a modular template to reduce build time
• Design and development should work together to build a
reusable wireframe/framework
• Pre-build modules

59. Wireframe and live prototype

60. Framework examples

61. Framework examples

62. Check us out on
Pinterest