kristina huffman brenna spurlockinfo.uff.ufl.edu/resources/designing for the mobile...

Designing for the Mobile Subscriber

Kristina Huffman

Brenna Spurlock

SPEAKERS

Kristina Huffman Design Practice Lead, ExactTarget

@ETDesign

Brenna Scurlock Senior Email Developer, Rewards Network

@brennascurlock

Agenda

• Designing for the Mobile Subscriber

• Mobile User Experience

• Mobile Solutions

• Support

• Case Study

• Rewards Network

• ExactTarget Solutions

Mobile Usage

Mobile Opens Up 300%

http://www.returnpath.com/resource/email-mostly-mobile/

October 2010-October 2012 shows 300% increase in mobile opens

Data Source: Litmus 12/2012 – emailclientmarketshare.com

Email Client Market Share

Email Client Usage

iPhone 24%

Outlook 16%

iPad 11%

Apple Mail 10%

Live Hotmail 7%

Google Android 7%

Yahoo! Mail 7%

Gmail 4%

Windows Live Mail 3%

Yahoo! Mail Classic 1%

Top 10 Email Clients

42% Mobile

Consumers are purchasing through mobile

Exacttarget.com

Path to Conversion

A Poor Mobile Experience limits Conversion

Mobile User Experience

The Mobile Subscriber

Is she: Listening to music Texting Using Skype Watching a movie On a phone call Checking email Browsing a website Tweeting Watching TV

All media consumption through one device - high expectations are set for email viewing.

The mobile experience is interactive.

Emails are viewed in stages.

From Name

Subject Line

Preheader

Viewport

Scrolling view

Notification

From Name

Subject Line

Preheader

Viewport

Scrolling view

From Name Approx. 25 characters Subject Line Approx. 35 characters Preheader Approx. 85 characters

From Name

Subject Line

Preheader

Viewport

Scrolling view

Approx 320x480px

Notification Options

From Name

Subject Line

Preheader

Viewport

Scrolling view

Notification

From Name

Subject Line

Preheader

Viewport

Scrolling view

Notification

From Name

Subject Line

Preheader

Viewport

Scrolling view

Notification

What’s Different About Designing for

Mobile Devices?

Small Screens &

Touch Interfaces

DESIGNING FOR MOBILE DEVICES

Small Screens: Ideal State

• Content first: think top-down hierarchy

• Single column layout

• Large text sizes to ensure readability

• Use contrast to ensure readability across brightness levels.

• Don’t cram content into the viewport - honor legibility over length

Touch Interfaces: Touch targets should be tap-worthy

• Size: keep buttons least 44px square for easy tapping

• Position: Keep links/buttons to the center or left for ease of use

• Texture: buttons look more enticing with texture

• Space: separate links to avoid touching two links

• Avoid: hovers or other interactive user interface elements

• Never say: “click here” because 43% of openers are tapping!

Touch Interfaces: Touch targets should be tap-worthy

Look to App design for inspiration!

http://www.mobile-patterns.com

Solutions

Two Approaches to the Mobile Inbox

Aware Simple improvement without specialization.

Design-only tactics

Responsive Deliver a customized mobile experience.

Special design + code

1

2

Desktop-centric Mobile aware Responsive code

Poor experience Good experience Excellent experience

Approaching the Mobile Inbox

Establish a mobile-friendly visual framework

without specializing.

• Single column hero

• Key info & CTA in left column

• Large text & buttons

Mobile Aware 1

Mobile aware: planning the mobile experience without a specialized setup. Highlights: single column hero, big images, text & buttons.

Big pictures, headlines and buttons create a style that’s easy to maintain and successful in both desktop/mobile environments.

Mobile Aware Design

Considerations for iPhone

• Scales Messages down – Keep text large for legibility

– Use a one-column format

– Keep buttons extra large to be tappable when shrunk

– Use preheader text for pre-open visibility

iPhone: 24% of email opens

Mobile Aware Design

Considerations for Android

• Cuts the message off – Focus on left side for important content

– Keep buttons on left

• Blocks images by default – Use styled alt text behind images

– Use background colors to create interest

– Use rendering text to communicate message without images

– Use preheader text for both pre-open view and image-blocking view

Android: 7% of email opens (but 54% of operating system market share*)

*comScore

Approaching the Mobile Inbox

Photo: http://en.wikipedia.org/wiki/Responsive_web_design

Responsive Design 2

Responsive web design is a set of

techniques used to make a layout

readable and usable on any screen

and/or platform on which it’s

displayed.

• Fluid grids

• Fluid images

• Media queries

600px, multi-column email becomes 320px, single column. Responsive Email: @Media Basics

600 px, multi-column email becomes 320px, single column.

Shrink Wrap Column Drop Layout Shifter

http://www.lukew.com/ff/entry.asp?1514

3 Common Responsive Layout Approaches

Layout Pattern 1: Shrink Wrap

http://www.lukew.com/ff/entry.asp?1514

• Msg width shrinks

• Text scales up

• Text reflows

• Elements scale

Layout Pattern 2: Column Drop via luke w.

• Multi to single column

• Multi column elements shrink

• Single column elements retain size

http://www.lukew.com/ff/entry.asp?1514

• Layout reshapes

• Most significant content transitions

• Nav may disappear

http://www.lukew.com/ff/entry.asp?1514

Layout Pattern 2: Layout Shifter via luke w.

A RESPONSIVE WORKFLOW

• Label hierarchy 1,2,3,4

• Decide if any content is

suppressed/replaced:

Green means it stays, red

means it is hidden

Step 1: Content Strategy

1 2 3

Small Screen Oath:

Brad Frost Responsive web leader/publisher

“Don’t penalize users for visiting your site on smaller devices.”

Use high level content and low-fi graphics

to communicate content strategy for

mobile screens.

Use photoshop, Illustrator, wireframing

software like balsamiq, or just pen and

paper

Step 2: Wireframe Mobile

Decide how content should

expand on desktop views.

5 common tactics:

• Stack

• Hide

• Show

• Resize

• Restyle

Step 2: Wireframe Desktop

Code the wireframe

into an HTML-based

prototype to show

functionality.

Step 2.5: Live Prototype

600px wide

320px wide Step 3: Visual Design

• Are both views on brand?

• Does it align with the content strategy/wireframe?

• Is this able to be coded in an adaptable way (avoiding

too many areas to hide/show)

• Is this a sustainable format to follow for future emails?

Visual Design gut-check

Mobile Wisdom: Plan for the Long Term

Design a sustainable responsive framework to streamline

planning, content creation, testing and user experience.

Mobile Wisdom: Plan for the Long Term

Step 4: Code

CSS is activated at 480px and smaller

The sidebar drops below the left column

Container shrinks to 300px wide

Padding is added

Images resize to 100%

Text scales up, more padding is added, classes are assigned to containers in the code below

BEFORE AFTER

Step 5: QA Use software to test email rendering, like Litmus or Return Path

But nothing beats firsthand testing – borrow a friend’s iPhone or Android.

Phone, Tablet or Laptop?

The line between device types are blurring: focus on breakpoints that

work for your layout and can accommodate multiple devices.

Samsung Galaxy Note II

Width: 3.17’’

Width: 2.31’’

iPhone 5 Width: 4.72’’

Google Nexus Width: 7.31’’

iPad Width: 10.81’’

Surface

Under 480px Over 480px

480px is a common breakpoint today

SUPPORT

@media support

Media queries are well supported

98.5% of mobile opens occur in environments supporting @media

1.5% of mobile opens occur in environments which do not support

@media

Data Source: ExactTarget primary research using Litmus dataset

Approximately 43% of all opens

are mobile

98% of mobile opens occur via a native email app

2% of mobile opens occur via a non-native email app

or mobile browser

Mobile market share is significant

Most opens come from native email apps

@MEDIA SUPPORT

Mobile Email Client @media Support

iPhone Mail Yes

iPad Mail Yes

iPod Touch Mail Yes

Android Mail 2.1- 1 No

Android Mail 2.2+ 1 Yes 2

Windows Phone 8 No

BlackBerry 6 No

Yahoo App (A&i) No

Hotmail App (A) Yes

Gmail App (A&i) No

AOL App n/a

Gmail via Mobile Browser No

Yahoo via Mobile Browser No

Hotmail via Mobile Browser No

AOL via Mobile Browser Yes

Data source: ExactTarget primary research 1 See Google’s Android Platform Distribution site for current stats on platform distribution

2 Mail routed through an Outlook Exchange server may see different results

@media Support Chart @media support is based on operating system and application (software), not device (hardware)—just as we might discuss support for CSS on desktop email clients.

Sin

gle

Pla

tfo

rm

Cro

ss-P

latf

orm

Responsive Email: Solution Complexity

WYSIWYG Editor

Altering Code & Graphics

Data Driven Email

Custom Code & Design

Responsive Email

Low / Basic Resources

Specialized Resources / High

Email + Mobile: Teamwork is the key

Overall Experience: IT/Web Team

• Path to conversion – websites, landing pages

Content: Strategist/Copywriter

• Testing, Measurement, Content hierarchy

Layout: Designer

• Designing for small screens, touch, streamlined production

Technology: Coders

• Writing media queries, QA on multiple devices

Brenna Scurlock, Rewards Network

CASE STUDY

CASE STUDY: Rewards Network

Why a mobile approach?

• Mobile opens are increasing for our subscribers

• Mobile legibility was low on existing emails

• Increased focus on mobile experience as a

marketing strategy

Before

Before

After

After

Mobile Desktop

1. Wireframe: Present wireframes to all departments to get buy-in.

1. Wireframe: Present wireframes to all departments

to get buy-in.

2. Design

• Grid layout

• Lots of live text

• Large buttons

3. Resize, Restyle, Remove

Results

• Reduced overall assets

• Reduced total number of email templates

• Allowed for expansion of current email strategy to meet business needs

• Expanded strategy from B2C to B2B

• Increased click through rates by more than 25% for the main promotional email

campaigns

Takeaways

• Use a mobile first approach

• Execute small, but impactful, changes if a total redesign is not available

• Conduct creative testing

• Gather metrics from both old and new campaigns to compare results

Patty Rayl, ExactTarget

ExactTarget Resources

Inbox Tools: Inbox Preview

Inbox Preview allows you to see how your content renders across

the most popular software and web-based email readers

Access from Email

Application

Inbox Tools: Inbox Preview

Click on the Inbox

Preview Tab

Inbox Tools: Inbox Preview

Inbox Preview: Inbox Tools

Inbox Tools: Campaign Insight

Click on the

Campaign Insight Tab

Campaign Insight is a tracking feature that monitors what types of email clients your subscribers use

Inbox Tools: Campaign Insight

Click on Mobile

Solution Kit

• Webinar assets and recording available in 3sixty

• In the future Solutions located in 3sixty under the Learn Tab

Questions

THANK YOU!