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

Tracy Novotny Technical Producer

ExactTarget

Tana Babcock Sr. Design Consultant

ExactTarget

Agenda •  Mobile Landscape •  Designing for Small Screens and Touch

Interfaces

•  Coding for Mobile-Optimized Solutions

•  Sustainable Responsive Workflow

Tana Babcock Responsive Design Techniques, Tricks & Tips

0%

10%

20%

30%

40%

50%

60%

70%

Opens in Each Environment

Webmail Desktop Mobile

Mobile adoption

Data  Source:  Litmus  emailclientmarketshare.com  

42%

33%

10%

Data  Source:  Litmus  emailclientmarketshare.com  

Email Client Landscape

1.  Apple iPhone 24% 2.  Outlook 17% 3.  Apple iPad 12% 4.  Google Android 11% 5.  Apple Mail 8% 6.  Outlook.com 6% 7.  Yahoo! Mail 6% 8.  Gmail 3% 9.  Windows Live Mail 3% 10.  Windows Mail 2%

Emailclientmarketshare.com

As of October 2013 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

Recent changes:

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

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

•  Adequate Spacing for Touch Accuracy

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

CSS Buttons

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

“A picture is worth a thousand words. An interface is worth a thousand pictures.”

- Ben Schneiderman

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 and spacing to define content breaks

Communication at the speed of instant recognition

Icons = Instant Communication

RECOMMENDATION: Establish an icon set for your mobile content and USE THEM OFTEN

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

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 of Engagement

Images and HD Mobile Displays

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

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

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%) JPG: 70 5KB

90 x 90 (200%) GIF 5KB

90 x 90 (200%) PNG 4KB

RECOMMENDATION: Design logos and graphics for 200% save as GIF or PNG 90 x 90 (200%)

GIF 5KB

90 x 90 (200%) PNG 4KB

Some images need clarity more than others

Resolution Hierarchy

Smart Objects are your friends

HD Images & Creative Workflow

Adobe Photoshop Express @ photoshop.com

pixlr.com/editor

compressnow.com

cutandslice.me

Image Editing & Compression Utilities

“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

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

Creative Control Where You Can

RECOMMENDATION: Make style decisions not mockup decisions

Creative Control Where You Can

Two Steps to the Mobile Inbox Aware Simple improvement without specialization. Design-only tactics  

Responsive Deliver a customized mobile experience. Special design + code

1

22

Short-term

Long-term

Tracy Novotny Responsive Email Coding Techniques

Sustainable Responsive Workflow

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

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

Wrapping content with fluid widths

Wrapping content with fluid widths

Wrapping content with fluid widths

100% width buttons

100% width buttons

100% width buttons

Stacking left column on right

Stacking left column on right

Stacking left column on right

Stacking right column on left

Stacking right column on left

Stacking right column on 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

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.

Design and build to give your audience the best experience possible

Don’t be afraid to try unconventional email coding techniques for mobile content

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

Wireframe and live prototype

Framework examples

Framework examples

Check us out on Pinterest