Implementing Responsive Email Design - A Tactical Guide
Upcoming SlideShare
Loading in...5
×
 

Implementing Responsive Email Design - A Tactical Guide

on

  • 378 views

When BlueHornet's client, TakePart, decided to refresh their website, they wanted to ensure their daily and weekly emails were aligned with their new look and feel. And, with a highly mobile ...

When BlueHornet's client, TakePart, decided to refresh their website, they wanted to ensure their daily and weekly emails were aligned with their new look and feel. And, with a highly mobile audience, it was important that the emails were also responsive.

Implementing Responsive Design: A Tactical Guide, walks through the steps TakePart and BlueHornet took to transform a simple wireframed email into a successful responsive email template.

This highly tactical webinar is presented by Daniel Park, Director of CRM Marketing at TakePart, and John Bilderback, BlueHornet's Sr. Creative Designer, and is ideal for those responsible for coding their organization's emails.

Statistics

Views

Total Views
378
Views on SlideShare
236
Embed Views
142

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 142

http://info.digitalriver.com 114
http://resources.bluehornet.com 24
http://expeng-admin.digitalriver.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Implementing Responsive Email Design - A Tactical Guide Implementing Responsive Email Design - A Tactical Guide Presentation Transcript

  • IMPLEMENTING RESPONSIVE DESIGN A TACTICAL GUIDE 13 MARCH 2014 +
  • TODAY’S PRESENTERS Daniel Park, Director of CRM Marketing, TakePart John Bilderback, Sr. Creative Designer, BlueHornet 2
  • AGENDA 1. About TakePart and their website/email program redesign 2. Adaptive design  Evaluation of the design  Adaptive design for the desktop  Adaptive design for mobile  Notes, comments, testing and support 3. Results 4. Q&A 3
  • ABOUT TAKEPART  TakePart is proud to host news and lifestyle stories, opinion pieces, and feature articles by some of the world’s foremost thought leaders, journalists, academics, and activists. Content represents a range of informed perspectives on important issues.  A new website was set to launch in November and the update to the email template would help reach a broader audience 4
  • ABOUT TAKEPART Created by TakePart creative team based on new website branding Turned to BlueHornet to create an in-brand responsively designed email experience 5
  • ADAPTIVE DESIGN EVALUATION 6
  • BENEFITS OF THE EVALUATION AND DISSECTION Understand the possibilities Not quite nuts and bolts, but enough to push the boundaries on creating and managing campaigns 7 Design is more than a reference point And integral to the success of the email One HTML email template Can be used with great results …
  • EVALUATION OF THE LAYOUT TakePart creative for mobile and desktop 8
  • EVALUATION OF THE LAYOUT Hierarchy What are the most important elements to be read or clicked? Position these elements and the surrounding pieces of design accordingly 9
  • EVALUATION OF THE LAYOUT  Type size & colors  Text vs image  Button size for call to actions What needs to draw the most visual attention? 10
  • EVALUATION OF THE LAYOUT Images Are they scaled up or down? Are they different for mobile? 11
  • EVALUATION OF THE LAYOUT Spacing  Separate items so they don’t collide visually  Helps production  Note space around objects, between rows, lines, shadows and element alignment 12
  • EVALUATION OF THE LAYOUT Overall Organization How is the layout organized? Repeatable table-row structure? Special treatment or consideration for positioning? 13
  • EVALUATION OF THE LAYOUT Best practices notes  Consider text sizes for desktop vs mobile  Call to action size, placement, organization  CSS treatments vs. image treatment 14
  • ADAPTIVE DESIGN THE DESKTOP VERSION 15
  • ADAPTIVE DESIGN THE DESKTOP VERSION Organize the table-based layout into table rows to keep the template flexible and minimize risk in the mobile version. 16
  • ADAPTIVE DESIGN: THE DESKTOP VERSION Masthead in desktop vs mobile Use a background image on the A tag, DIVs, or TD’s 17
  • ADAPTIVE DESIGN: THE DESKTOP VERSION Masthead in desktop vs mobile Using a background image on the A tag, DIVs, or TD’s Specific HTML/CSS required 18
  • ADAPTIVE DESIGN: THE DESKTOP VERSION Call to action button image and placement 19
  • ADAPTIVE DESIGN: THE DESKTOP VERSION Call to action button image and placement 20
  • ADAPTIVE DESIGN: THE DESKTOP VERSION Image bullets 21
  • ADAPTIVE DESIGN: THE DESKTOP VERSION Make special consideration for height- constrained lines or rows 22
  • ADAPTIVE DESIGN: NOTES Code changes, considerations and potentially sticky issues  Hiding items on mobile works great. However, this will create issues hiding, scaling or disguising elements on the desktop version.  Hiding desktop images and displaying background images on A tags or TD’s is a good building tactic when you need to change the layout or image.  DIVs are not a best practice or supported as layout elements in most desktop clients or even webmail, but can be used to help layout, alignment, or desktop-to-mobile changes. 23
  • ADAPTIVE DESIGN: THE ADAPTIVE VERSION 24
  • ADAPTIVE DESIGN: THE MOBILE VERSION Use a code base to jump start  Base CSS code  Yahoo! Body Fix 25
  • ADAPTIVE DESIGN: THE MOBILE VERSION Pay special attention to the CTA button placement in the mobile version Where buttons align with the image above, use a DIV that affects mobile only 26
  • ADAPTIVE DESIGN: THE MOBILE VERSION Font sizes and how they affect layout  Minimum font sizes are different in desktop and mobile  Mobile sizes typically start at 13px ( iPhone native size is 13px ). As a conscientious designer, I tend to use the 14px minimum  For the pixel-perfectionist, font size and line-height are not consistent between mail apps, platforms, devices, webmail or desktop applications and must be specified with CSS for greater consistency 27
  • ADAPTIVE DESIGN: TESTING, SUPPORT & NOTES 28
  • TESTING PRACTICES  Firefox Web Developer, Responsive Design View or Google Chrome Responsive Inspector  Send tests  W3 Code Validation Services  Email On Acid, Litmus Test on real world devices 29
  • ADAPTIVE DESIGN Clients that support @media queries  iOS Devices: iphone, iPad, ipod Touch  Android 2.2 thru 4.2  Android 4.3 – 4.4 appears to not support adaptive (responsive) design Technology is not static. Email is still coded like it’s 1999 and has adapted for delivery in a world gone mobile. 30
  • THOUGHTS: Commentary on adaptive or responsive design  Adaptive layout vs. responsive design  Each has its own set of unique opportunities 31
  • ADAPTIVE DESIGN THOUGHTS: Design Guideposts  Design for the experience: know your customers and what devices they use, getting into their habits and minds.  Responsive / Adaptive can be rich and broaden your reach into your audience.  Have a hierarchy of importance for the content.  Lead through the design, guide to the clicks, use email as an introduction to a conversation that is carried on in a better forum.  Unique designs may require more attention (development) with various technology and changes in devices or platforms.  Keep focused, be rich with content, creative, relevant, and look good. 32
  • RESULTS  Mobile CTOR (click to open rate) grew from 14.59% in November to 28% in February  Responsive emails helped create an overall consistent brand experience 33
  • THANK YOU 34