Post on 15-May-2015
description
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
YouTube
Google+
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
Wrapping content with fluid widths
Wrapping content with fluid widths
100% width buttons
100% width buttons
100% width buttons
Stack Left Content Over Right
Stack Left Content Over Right
Stack Left Content Over Right
Stack Right Content Over Left
Stack Right Content Over Left
Stack Right Content Over 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
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
Sustainable Responsive Workflow
Responsive Process• Concept • Development & Creative Design• QA
Sustainable Responsive Workflow
Templatized Responsive Process• Development• Concept • Creative Design• QA
Sustainable Responsive Workflow
Sustainable Responsive Workflow
Sustainable Responsive Workflow
Sustainable Responsive Workflow
Benefits • Reduced per-email build time by up to
50%• Eliminates much opportunity for error• Contracts and strengthens QA
Sustainable Responsive Workflow
Downloadspages.exacttarget.com/etdesign
Q&A
Your Feedback Matters
Thank YouHave a great Connections!