Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile...
Transcript of 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!