The Mobile Inbox 201: Design & Coding
-
Upload
salesforce-marketing-cloud -
Category
Technology
-
view
1.157 -
download
0
description
Transcript of The Mobile Inbox 201: Design & Coding
![Page 1: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/1.jpg)
The Mobile Inbox 201: Design & CodeDiving headfirst into strategy, design, and coding for mobile email
![Page 2: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/2.jpg)
We know WHY. Let’s talk about HOW.
![Page 3: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/3.jpg)
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
![Page 4: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/4.jpg)
Designing for Small Screens and Touch InterfacesRyan Alvis, ExactTarget
![Page 5: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/5.jpg)
• 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
![Page 6: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/6.jpg)
• 44px Minimum Button (Full-width even better!)
• Left or Center Aligned Text• Adequate Spacing for Touch
Accuracy
Designing for Touch Interfaces
![Page 7: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/7.jpg)
• 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
![Page 8: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/8.jpg)
CSS Buttons
RECOMMENDATION:
Use CSS to style buttons for complete scalability & clarity
![Page 9: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/9.jpg)
- Ben Schneiderman
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
![Page 10: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/10.jpg)
What mobile subscribers are used to interacting with
Google Maps
YouTube
Google+
At Home in the Mobile UI
![Page 11: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/11.jpg)
Clean ContentBreaks
Familiar, easy on the eyes and easy to skim
![Page 12: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/12.jpg)
Clean ContentBreaks
Familiar, easy on the eyes and easy to skim
RECOMMENDATION:
Use containers, rules, divider graphics and spacing to define content breaks
![Page 13: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/13.jpg)
Communication at the speed of instant recognition
Icons = Instant Communication
RECOMMENDATION:
Establish an icon set for your mobile content and USE THEM OFTEN
![Page 14: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/14.jpg)
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
![Page 15: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/15.jpg)
28px
17px
24px
Mobile UI Font Sizes
RECOMMENDATION:
Headlines ≥ 28px
Body Text ≥ 17px
![Page 16: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/16.jpg)
Mo’ Pixels,Mo’ Problems…
![Page 17: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/17.jpg)
HD = More Beautiful Pixels!
More Beautiful Pixels! = Larger Files
Larger Files = Slower Downloads
Slower Downloads = Loss of Engagement
Images and HD Mobile Displays
![Page 18: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/18.jpg)
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
![Page 19: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/19.jpg)
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
![Page 20: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/20.jpg)
RECOMMENDATION:
Create mobile photos at
200% and output at 30%
JPEG Quality
![Page 21: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/21.jpg)
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
![Page 22: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/22.jpg)
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
![Page 23: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/23.jpg)
Smart Objects are your friends
HD Images & Creative Workflow
![Page 24: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/24.jpg)
Adobe Photoshop Express @ photoshop.com
pixlr.com/editor
compressnow.com
cutandslice.me
Image Editing & Compression Utilities
![Page 25: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/25.jpg)
- 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.”
![Page 26: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/26.jpg)
Case in Point: Android Gmail App
Android 9%of email opensaccording to Litmus
About 70%in the Gmail Appaccording to Brightwave user survey
![Page 27: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/27.jpg)
Creative Control Where You Can
![Page 28: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/28.jpg)
Creative Control Where You Can
RECOMMENDATION:Make style decisions not mockup decisions
![Page 29: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/29.jpg)
Responsive Email Coding TechniquesTracy Novotny, ExactTarget
![Page 30: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/30.jpg)
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
![Page 31: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/31.jpg)
• 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
![Page 32: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/32.jpg)
Wrapping content with fluid widths
![Page 33: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/33.jpg)
Wrapping content with fluid widths
![Page 34: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/34.jpg)
Wrapping content with fluid widths
![Page 35: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/35.jpg)
100% width buttons
![Page 36: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/36.jpg)
100% width buttons
![Page 37: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/37.jpg)
100% width buttons
![Page 38: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/38.jpg)
Stack Left Content Over Right
![Page 39: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/39.jpg)
Stack Left Content Over Right
![Page 40: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/40.jpg)
Stack Left Content Over Right
![Page 41: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/41.jpg)
Stack Right Content Over Left
![Page 42: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/42.jpg)
Stack Right Content Over Left
![Page 43: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/43.jpg)
Stack Right Content Over Left
![Page 44: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/44.jpg)
Stacking navigation
![Page 45: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/45.jpg)
Stacking navigation
![Page 46: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/46.jpg)
Stacking navigation
![Page 47: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/47.jpg)
Create columns from vertical content
![Page 48: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/48.jpg)
Create columns from vertical content
![Page 49: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/49.jpg)
Create columns from vertical content
![Page 50: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/50.jpg)
Showing/Hiding content on mobile
![Page 51: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/51.jpg)
Showing/Hiding content on mobile
![Page 52: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/52.jpg)
Showing/Hiding content on mobile
![Page 53: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/53.jpg)
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
![Page 54: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/54.jpg)
Finding the Mobile Solution That Works For YouJessica Higgins, Brightwave Marketing
![Page 55: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/55.jpg)
Unfortunately,one size does not fit all.
![Page 56: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/56.jpg)
Multiple Approaches
Friendly Fluid Responsive
![Page 57: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/57.jpg)
Things to consider:
Audience(% mobile users)
Time(budget/
timelines)
Resources
(team makeup)
Expectations
(company & user)
![Page 58: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/58.jpg)
Equifax Newsletter
Audience:
48% mobile users
• Monthly automated
• Dynamically fed content
from blog
• Flexible layout
• ‘Set it & forget it’
![Page 59: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/59.jpg)
Best Solution?
+16% OPENRATE
FLUIDwidth adapts allowing elements to flow across available space
Simple layout, copy heavy, automated
![Page 60: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/60.jpg)
Chick-fil-A Promotional
Audience:
• 40% mobile users• 1/3 Android users
• Product launch
• Educate
• Showcase photography
![Page 61: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/61.jpg)
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
![Page 62: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/62.jpg)
- Jay Baer
“The magic formula for your brand will differ from the magic
formula for your competitors.”
![Page 63: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/63.jpg)
Sustainable Responsive WorkflowJeff Batte, DEG
![Page 64: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/64.jpg)
Traditional Process• Concept • Creative Design• Development• QA
Sustainable Responsive Workflow
![Page 65: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/65.jpg)
Responsive Process• Concept • Development & Creative Design• QA
Sustainable Responsive Workflow
![Page 66: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/66.jpg)
Templatized Responsive Process• Development• Concept • Creative Design• QA
Sustainable Responsive Workflow
![Page 67: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/67.jpg)
Sustainable Responsive Workflow
![Page 68: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/68.jpg)
Sustainable Responsive Workflow
![Page 69: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/69.jpg)
Sustainable Responsive Workflow
![Page 70: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/70.jpg)
Benefits • Reduced per-email build time by up to
50%• Eliminates much opportunity for error• Contracts and strengthens QA
Sustainable Responsive Workflow
![Page 71: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/71.jpg)
Downloadspages.exacttarget.com/etdesign
Q&A
![Page 72: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/72.jpg)
Your Feedback Matters
![Page 73: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/73.jpg)
Thank YouHave a great Connections!
![Page 74: The Mobile Inbox 201: Design & Coding](https://reader038.fdocuments.us/reader038/viewer/2022110118/5555c995d8b42aaf158b4983/html5/thumbnails/74.jpg)