Mobile Email Design: Scalable vs. Responsive
 

Mobile Email Design: Scalable vs. Responsive

on

  • 1,156 views

With more than 50% of all emails being opened on mobile devices, it's vital to ensure that your email campaigns are mobile-friendly. In this presentation, Yesmail Interactive highlights the principles ...

With more than 50% of all emails being opened on mobile devices, it's vital to ensure that your email campaigns are mobile-friendly. In this presentation, Yesmail Interactive highlights the principles behind mobile-responsive and mobile-scalable email design, and how marketers can design bulletproof mobile-friendly email marketing

Statistics

Views

Total Views
1,156
Views on SlideShare
1,156
Embed Views
0

Actions

Likes
3
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Email Design: Scalable vs. Responsive Mobile Email Design: Scalable vs. Responsive Presentation Transcript

  • Mobile Email Design Scalable & Responsive Matthew Caldwell VP Creative & Agency Services Jack Satta Art Director Alyson Coutts Senior Designer
  • Agenda1. Scalable vs Responsive design2. Which ones right for you? Pros vs. Cons3. Responsive design in depth Yesmail Confidential 2
  • Scalable email design
  • Scalable Email DesignA email layout, that when reduced to half it’s size(on the phone) is still 100% readable and 100%finger-tip clickable.Scalable designs utilize:• A single layout for both large and small screens• A grid system for alignment and proportion• A single-column stacked layout, typically• Large scale design elements: – Font size of 14 points or larger – Big, clickable buttons Yesmail Confidential 4
  • Scalable Example 1 Yesmail Confidential 5
  • Scalable Example 2 Yesmail Confidential 6
  • Scalable Example 3 Yesmail Confidential 7
  • Responsive email design
  • What is Responsive Email Design?An email that uses CSS3 @media techniques torender two different layouts (PC + mobile) dependingon where the email is opened (PC or mobile).Responsive designs typically:• Works mainly on iPhone and some Android inboxes (not gmail app)• Requires 2 designs, extensive coding• Does not work in all mobile environments Yesmail Confidential 9
  • Responsive Example 1 Yesmail Confidential 10
  • Responsive Example 2 Yesmail Confidential 11
  • Responsive Example 3 Yesmail Confidential 12
  • Responsive Example 4 Yesmail Confidential 13
  • Scalable vs. Responsive?Which option is right for me?
  • Scalable Pro Con ✔ Works Everywhere ✗Not “true” mobile design ✔ One design ✔ Easy to code ✔ Readable & Clickable in both environments Yesmail Confidential 15
  • Responsive Pro Con ✔True Mobile-first design ✗Works mainly in iPhone and some Androids ✗Requires 2 designs ✗Coding is complex Yesmail Confidential 16
  • Where do they work? Scalable Responsive ✔ Everywhere 24/7 ✔ iPhone ✔ Android default Inbox ✗ Android Gmail App ✗ Windows Mobile ✗ Blackberry Yesmail Confidential 17
  • Responsive design in depth
  • Responsive DesignWhat can be done? Change width of email Resize images Reformat copy – fonts, colors, sizes, alignment Turn off images Turn off copyCannot be done:• Turn on code Yesmail Confidential 19
  • Responsive DesignHow does it work? Actual CSS Code: @media only screen and (max-device-width: 480px) { mobile specific CSS }- if your screen width is 480 pixels or less- then load a different set of styles Yesmail Confidential 20
  • Responsive DesignWhat can be done?Image off and switch Yesmail Confidential 21
  • Responsive DesignWhat can be done?Navigation -1 row into 2 Yesmail Confidential 22
  • Responsive DesignWhat can be done?3 columns to 1 Yesmail Confidential 23
  • Responsive DesignWhat can be done?• 2 columns to 1• Image resized• Font color change• Button resized Yesmail Confidential 24
  • Responsive DesignWhat about iPad & tablets?- iPad & tablet screens are quite large (768 x 1024)- For tablets, we recommend the full size version Yesmail Confidential 25
  • Responsive DesignPerformance?- The jury is still out, it’s still early- Several responsive campaigns had same opens and clicks as their running average- However one campaign saw 12% increase in click through for mobile openers- The invite to this webinar saw a 28% increase in mobile-clicks compared to our average mobile-click rate Yesmail Confidential 26
  • Responsive vs. ScalableWhich one do I use?• BOTH• Scalable layout that turns responsive• Follow best practices like large scale, single- column, HTML-copy, and bulletproof buttons• Then modify it so it can also be responsive Yesmail Confidential 27
  • Responsive DesignHow do I get my emails responsive?- Not “automatic”- Not done by mailing system but by code of html- Requires that you review / redesign pc version- The PC design creates the responsive design but resizing, reformatting and turning items off Yesmail Confidential 28
  • Summary• Scalable and responsive are both good options• Scalable design is easier, but not truly mobile• Responsive is truly mobile, but does not work everywhere and takes extra time to code• Use both! PC version designed to be scalable with a responsive layout• Responsive = reformat, resize, turn off objects• Your PC layout is closely tied to your responsive Yesmail Confidential 29
  • Want more guidance?Check out the accompanying webinar for moredetailed explanations and the Q&A session:http://www.yesmail.com/resources/webinar/mobile-email-design-differences-between-responsive-and-mobile-scalable-email Yesmail Confidential 30
  • ThanksMatthew CaldwellVP Creative & Agency Servicesmatt.caldwell@yesmail.com