The Mobile Inbox 201: Design & Coding

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

We know WHY. Let’s talk about HOW.

Ryan AlvisDesign Consultant

ExactTarget

Designing for Small Screens and Touch Interfaces

Panel & Agenda

Tracy NovotnyTechnical Producer ExactTarget

Coding for

Mobile-Optimized Solutions

Jessica HigginsCreative Director Brightwave Marketing

Finding the Right Mobile Solution

Jeff BatteDirector, eCRM/Strategy

DEG

Sustainable Responsive Workflow

Designing for Small Screens and Touch InterfacesRyan Alvis, ExactTarget

• 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

• 44px Minimum Button (Full-width even better!)

• Left or Center Aligned Text• Adequate Spacing for Touch

Accuracy

Designing for Touch Interfaces

• 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

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 ContentBreaks

Familiar, easy on the eyes and easy to skim

Clean ContentBreaks

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 395JPG 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 45JPG: 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

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

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

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

Case in Point: Android Gmail App

Android 9%of email opensaccording to Litmus

About 70%in the Gmail Appaccording to Brightwave user survey

Creative Control Where You Can

Creative Control Where You Can

RECOMMENDATION:Make style decisions not mockup decisions

Responsive Email Coding TechniquesTracy Novotny, ExactTarget

Overview of @media query stylesCSS 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

• 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

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

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

Finding the Mobile Solution That Works For YouJessica Higgins, Brightwave Marketing

Unfortunately,one size does not fit all.

Multiple Approaches

Friendly Fluid Responsive

Things to consider:

Audience(% mobile users)

Time(budget/

timelines)

Resources

(team makeup)

Expectations

(company & user)

Equifax Newsletter

Audience:

48% mobile users

• Monthly automated

• Dynamically fed content

from blog

• Flexible layout

• ‘Set it & forget it’

Best Solution?

+16% OPENRATE

FLUIDwidth adapts allowing elements to flow across available space

Simple layout, copy heavy, automated

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 screen size

Using device detection instead of media queries

+17% OPENRATE

- Jay Baer

“The magic formula for your brand will differ from the magic

formula for your competitors.”

Sustainable Responsive WorkflowJeff Batte, DEG

Traditional Process• Concept • Creative Design• Development• QA


Responsive Process• Concept • Development & Creative Design• QA


Templatized Responsive Process• Development• Concept • Creative Design• QA


Benefits • Reduced per-email build time by up to

50%• Eliminates much opportunity for error• Contracts and strengthens QA


Downloadspages.exacttarget.com/etdesign

Q&A

Your Feedback Matters

Thank YouHave a great Connections!

The Mobile Inbox 201: Design & Coding

Technology

Transcript of The Mobile Inbox 201: Design & Coding