Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 ·...
Transcript of Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 ·...
![Page 1: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/1.jpg)
Mobile Email Design 101
Private and Confidential. Property of Whereoware, LLC.
#WOWWEBINAR
![Page 2: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/2.jpg)
2
MEET OUR SPEAKERS
DAN CAROSenior Director of Marketing Ops
@dcaro12
CHRIS GROUGEDigital Marketing Manager
@ChrisGrouge
TWEET USING #WOWWEBINAR
![Page 3: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/3.jpg)
3
ABOUT US
• PRIVATELY HELD DIGITAL AGENCY• 17 YEARS OF EXPERIENCE• RESPONSIVE EMAIL CAMPAIGNS• PERSONALIZED WEBSITES• SEO & PPC• CLOUD-BASED SOLUTIONS AND MOBILE APPS• DATA INTEGRATION
![Page 4: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/4.jpg)
![Page 5: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/5.jpg)
5MOBILE DESIGN 101
AGENDA
• Who cares about mobile email?
• Designing for mobile: scalable vs. responsive
• What can you do with responsive?
• Responsive support
• Coding responsive email
• Email templates within minutes
![Page 6: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/6.jpg)
FACEBOOK ADVERTISING
101
WHO CARES ABOUT MOBILE?
![Page 7: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/7.jpg)
More email is read on Mobile than on desktop email clients. 54% of email is now opened on a mobile device.
Litmus ”State of Email” (March 2017)
![Page 8: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/8.jpg)
8
OPENS BY EMAIL ENVIRONMENTMobile dominates total email opens
Source: Litmus 2016 Email Market Share Report (March 2017)
![Page 9: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/9.jpg)
51% of consumers unsubscribed from a brand’s emails because their emails or website didn’t display or work well on their smartphone.
Litmus ”State of Email” (March 2017)
![Page 10: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/10.jpg)
10MOBILE DESIGN 101
NO MORE DESKTOP VERSIONS
Text too small to read
Links difficult to tap on mobile
Users having to pinch and swipe to read content
Users having to click to view in browser
Desktop-only versions are no longer acceptable for email sends due topoor rendering and usability on mobile devices
NO DESKTOP ONLY VERSIONS
![Page 11: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/11.jpg)
FACEBOOK ADVERTISING
101
DESIGNING FOR MOBILE DEVICESscalable vs. responsive
![Page 12: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/12.jpg)
12MOBILE DESIGN 101
CHOOSING THE RIGHT APPROACH
• One version of email• Single column design• Mobile-friendly techniques
SCALABLE (AKA MOBILE-FRIENDLY)
![Page 13: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/13.jpg)
13MOBILE DESIGN 101
SCALABLE
![Page 14: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/14.jpg)
14MOBILE DESIGN 101
CHOOSING THE RIGHT APPROACH
• Multiple email versions• CSS media queries auto-adjust email to best suit the
device reading it• Media queries can change the layout: table + images
resize, content can stack, hide/show, etc.• Uses “break points” to target screen sizes + devices
RESPONSIVE
![Page 15: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/15.jpg)
15MOBILE DESIGN 101
RESPONSIVE
![Page 16: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/16.jpg)
Click to open rates are 40% higher for brands that send exclusively responsive emails (14.1%) versus brands that only send non-responsive emails (10.1%).
Yesmail “Email Marketing Compass: The Season of Mobile” (2015)
![Page 17: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/17.jpg)
about 75% of email marketers already use responsive design on a regular basis as part of their marketing emails.
Litmus ”State of Email” (March 2017)
![Page 18: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/18.jpg)
FACEBOOK ADVERTISING
101
WHAT CAN YOU DO WITH RESPONSIVE EMAIL?
![Page 19: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/19.jpg)
A combination of media queries, fluid grids, and fluid images, which aim to provide the optimal viewing experience across various platforms.
Litmus “The how to guide to responsive email design” (September 2013)
![Page 20: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/20.jpg)
20
RESPONSIVE EMAIL DESIGN WHAT CAN YOU DO?
Resize content – image size, text size, tables
Show / hide content – optimized for smaller devices
Stack columns– allows for image & text scaling
Adjust layouts – RTL -> LTR. Opposite stacking.
![Page 21: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/21.jpg)
21MOBILE DESIGN 101
RESPONSIVE EMAIL DESIGN STEPS AND EXAMPLES
What needs to move and why?
HOW TO MAKE IT RESPONSIVE
Move navigation and housekeeping items
Grid layout stacks to linear layout
White space + padding increases readability
Can’t miss CTA
![Page 22: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/22.jpg)
22MOBILE DESIGN 101
RESPONSIVE EMAIL DESIGN STEPS AND EXAMPLES
What needs to move and why?
HOW TO MAKE IT RESPONSIVE
Optimized full-screen logo
Top navigation moved and stacked
Full-screen images
![Page 23: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/23.jpg)
23
RESPONSIVE EMAIL DESIGN STEPS AND EXAMPLES
Larger fonts + buttons
![Page 24: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/24.jpg)
24
RESPONSIVE EMAIL DESIGN STEPS AND EXAMPLES
Simplify the design
Single, clear call-to-action
Keep content concise
![Page 25: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/25.jpg)
25MOBILE DESIGN 101
RESPONSIVE EMAIL DESIGN – RESPONSIVE LANDING PAGE
HOW TO MAKE IT RESPONSIVE
![Page 26: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/26.jpg)
FACEBOOK ADVERTISING
101
RESPONSIVE EMAIL SUPPORT
![Page 27: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/27.jpg)
With Gmail’s support for media queries, over 75% of email clients will support responsive design.
Litmus “Update: Gmail Rolls Out Support for Responsive Design, Improved Font Styling + CSS for Accessibility” (September 2016)
![Page 28: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/28.jpg)
28
RESPONSIVENESS EMAIL CLIENT SUPPORT
https://www.campaignmonitor.com/css/
![Page 29: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/29.jpg)
29
RESPONSIVENESS EMAIL CLIENT SUPPORT
![Page 30: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/30.jpg)
FACEBOOK ADVERTISING
101
HOW TO CODE A RESPONSIVE EMAIL
![Page 31: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/31.jpg)
31
WHAT YOU NEED FOR RESPONSIVE EMAILS
Create a media query
Create a class within the media query
Add class to HTML element
Add appropriate meta tags
![Page 32: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/32.jpg)
32MOBILE DESIGN 101
WHAT IS A MEDIA QUERY?
MEDIA QUERY: A set of conditional statements that target html elements or classes and override existing styles in your email.
If screen size > or = X, perform Y
The “Y” is defined by classes
Not supported everywhere
![Page 33: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/33.jpg)
33
HOW TO WRITE A MEDIA QUERY
Open your media query and define your rule
![Page 34: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/34.jpg)
34
HOW TO WRITE A MEDIA QUERY
Create a class
![Page 35: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/35.jpg)
35
HOW TO WRITE A MEDIA QUERY
Append the class
![Page 36: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/36.jpg)
36
HOW TO WRITE A MEDIA QUERY
Without media query With media query
![Page 37: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/37.jpg)
FACEBOOK ADVERTISING
101
EMAIL TEMPLATES WITHIN MINUTES
![Page 38: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/38.jpg)
66% of marketers claim to have implemented mobile-optimized templates. However, only 18% of marketers have templates that support dynamic content, which enables you to personalize each email.
Getresponse “The State of Email Marketing by Industry 2016” (2016)
![Page 39: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/39.jpg)
39
![Page 40: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/40.jpg)
Code Perfect™ Demo
![Page 41: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/41.jpg)
41
WORKS WITH ANY ESP
![Page 43: Mobile Email Design 101contentz.mkt51.net/lp/10613/635951/17-Aug-MobileWebinar... · 2019-11-15 · Mobile Email Design 101. Private and Confidential. Property of Whereoware, LLC.](https://reader034.fdocuments.us/reader034/viewer/2022042310/5ed731adc30795314c175f7a/html5/thumbnails/43.jpg)
THANKS FOR WATCHING!
14399 Penrose Pl #450Chantilly, VA 20151
Contact us:
facebook.com/whereoware
@whereoware
Follow us on:
(877) 521-7448
We will be sending a follow up email with slides + recording