![Page 1: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/1.jpg)
Designing for the Mobile Subscriber
Kristina Huffman
Brenna Spurlock
![Page 2: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/2.jpg)
SPEAKERS
Kristina Huffman Design Practice Lead, ExactTarget
@ETDesign
Brenna Scurlock Senior Email Developer, Rewards Network
@brennascurlock
![Page 3: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/3.jpg)
Agenda
• Designing for the Mobile Subscriber
• Mobile User Experience
• Mobile Solutions
• Support
• Case Study
• Rewards Network
• ExactTarget Solutions
![Page 4: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/4.jpg)
Mobile Usage
![Page 5: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/5.jpg)
Mobile Opens Up 300%
http://www.returnpath.com/resource/email-mostly-mobile/
October 2010-October 2012 shows 300% increase in mobile opens
![Page 6: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/6.jpg)
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
![Page 7: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/7.jpg)
Consumers are purchasing through mobile
Exacttarget.com
![Page 8: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/8.jpg)
Path to Conversion
![Page 9: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/9.jpg)
A Poor Mobile Experience limits Conversion
![Page 10: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/10.jpg)
Mobile User Experience
![Page 11: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/11.jpg)
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.
![Page 12: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/12.jpg)
The mobile experience is interactive.
Emails are viewed in stages.
From Name
Subject Line
Preheader
Viewport
Scrolling view
Notification
![Page 13: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/13.jpg)
From Name
Subject Line
Preheader
Viewport
Scrolling view
![Page 14: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/14.jpg)
From Name Approx. 25 characters Subject Line Approx. 35 characters Preheader Approx. 85 characters
![Page 15: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/15.jpg)
From Name
Subject Line
Preheader
Viewport
Scrolling view
Approx 320x480px
![Page 16: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/16.jpg)
Notification Options
From Name
Subject Line
Preheader
Viewport
Scrolling view
Notification
![Page 17: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/17.jpg)
From Name
Subject Line
Preheader
Viewport
Scrolling view
Notification
![Page 18: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/18.jpg)
From Name
Subject Line
Preheader
Viewport
Scrolling view
Notification
![Page 19: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/19.jpg)
What’s Different About Designing for
Mobile Devices?
Small Screens &
Touch Interfaces
![Page 20: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/20.jpg)
DESIGNING FOR MOBILE DEVICES
![Page 21: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/21.jpg)
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
![Page 22: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/22.jpg)
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!
![Page 23: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/23.jpg)
Touch Interfaces: Touch targets should be tap-worthy
Look to App design for inspiration!
http://www.mobile-patterns.com
![Page 24: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/24.jpg)
Solutions
![Page 25: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/25.jpg)
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
![Page 26: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/26.jpg)
Desktop-centric Mobile aware Responsive code
Poor experience Good experience Excellent experience
![Page 27: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/27.jpg)
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
![Page 28: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/28.jpg)
Mobile aware: planning the mobile experience without a specialized setup. Highlights: single column hero, big images, text & buttons.
![Page 29: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/29.jpg)
Big pictures, headlines and buttons create a style that’s easy to maintain and successful in both desktop/mobile environments.
![Page 30: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/30.jpg)
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
![Page 31: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/31.jpg)
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
![Page 32: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/32.jpg)
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
![Page 33: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/33.jpg)
600px, multi-column email becomes 320px, single column. Responsive Email: @Media Basics
600 px, multi-column email becomes 320px, single column.
![Page 34: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/34.jpg)
Shrink Wrap Column Drop Layout Shifter
http://www.lukew.com/ff/entry.asp?1514
3 Common Responsive Layout Approaches
![Page 35: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/35.jpg)
Layout Pattern 1: Shrink Wrap
http://www.lukew.com/ff/entry.asp?1514
• Msg width shrinks
• Text scales up
• Text reflows
• Elements scale
![Page 36: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/36.jpg)
![Page 37: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/37.jpg)
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
![Page 38: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/38.jpg)
![Page 39: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/39.jpg)
• 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.
![Page 40: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/40.jpg)
![Page 41: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/41.jpg)
A RESPONSIVE WORKFLOW
![Page 42: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/42.jpg)
• 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
![Page 43: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/43.jpg)
Small Screen Oath:
Brad Frost Responsive web leader/publisher
“Don’t penalize users for visiting your site on smaller devices.”
![Page 44: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/44.jpg)
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
![Page 45: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/45.jpg)
Decide how content should
expand on desktop views.
5 common tactics:
• Stack
• Hide
• Show
• Resize
• Restyle
Step 2: Wireframe Desktop
![Page 46: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/46.jpg)
Code the wireframe
into an HTML-based
prototype to show
functionality.
Step 2.5: Live Prototype
![Page 47: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/47.jpg)
600px wide
320px wide Step 3: Visual Design
![Page 48: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/48.jpg)
• 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
![Page 49: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/49.jpg)
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
![Page 50: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/50.jpg)
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
![Page 51: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/51.jpg)
BEFORE AFTER
![Page 52: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/52.jpg)
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.
![Page 53: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/53.jpg)
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
![Page 54: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/54.jpg)
SUPPORT
![Page 55: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/55.jpg)
@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
![Page 56: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/56.jpg)
@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
![Page 57: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/57.jpg)
Responsive Email: Solution Complexity
WYSIWYG Editor
Altering Code & Graphics
Data Driven Email
Custom Code & Design
Responsive Email
Low / Basic Resources
Specialized Resources / High
![Page 58: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/58.jpg)
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
![Page 59: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/59.jpg)
Brenna Scurlock, Rewards Network
CASE STUDY
![Page 60: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/60.jpg)
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
![Page 61: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/61.jpg)
Before
Before
![Page 62: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/62.jpg)
After
After
![Page 63: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/63.jpg)
Mobile Desktop
1. Wireframe: Present wireframes to all departments to get buy-in.
1. Wireframe: Present wireframes to all departments
to get buy-in.
![Page 64: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/64.jpg)
2. Design
• Grid layout
• Lots of live text
• Large buttons
![Page 65: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/65.jpg)
3. Resize, Restyle, Remove
![Page 66: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/66.jpg)
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
![Page 67: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/67.jpg)
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
![Page 68: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/68.jpg)
Patty Rayl, ExactTarget
ExactTarget Resources
![Page 69: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/69.jpg)
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
![Page 70: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/70.jpg)
Inbox Tools: Inbox Preview
Click on the Inbox
Preview Tab
![Page 71: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/71.jpg)
Inbox Tools: Inbox Preview
![Page 72: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/72.jpg)
Inbox Preview: Inbox Tools
![Page 73: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/73.jpg)
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
![Page 74: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/74.jpg)
Inbox Tools: Campaign Insight
Click on Mobile
![Page 75: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/75.jpg)
Solution Kit
• Webinar assets and recording available in 3sixty
• In the future Solutions located in 3sixty under the Learn Tab
![Page 76: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/76.jpg)
![Page 77: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/77.jpg)
Questions
![Page 78: Kristina Huffman Brenna Spurlockinfo.uff.ufl.edu/Resources/designing for the mobile subscriber-2-6-13.pdfKristina Huffman Design Practice Lead, ExactTarget @ETDesign Brenna Scurlock](https://reader030.vdocument.in/reader030/viewer/2022041019/5ecdfc0219f1cd25916aef49/html5/thumbnails/78.jpg)
THANK YOU!