Implementing Responsive Email Design - A Tactical Guide

1,189 views
1,029 views

Published on

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.

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,189
On SlideShare
0
From Embeds
0
Number of Embeds
244
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Implementing Responsive Email Design - A Tactical Guide

  1. 1. IMPLEMENTING RESPONSIVE DESIGN A TACTICAL GUIDE 13 MARCH 2014 +
  2. 2. TODAY’S PRESENTERS Daniel Park, Director of CRM Marketing, TakePart John Bilderback, Sr. Creative Designer, BlueHornet 2
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. ADAPTIVE DESIGN EVALUATION 6
  7. 7. 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 …
  8. 8. EVALUATION OF THE LAYOUT TakePart creative for mobile and desktop 8
  9. 9. 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
  10. 10. 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
  11. 11. EVALUATION OF THE LAYOUT Images Are they scaled up or down? Are they different for mobile? 11
  12. 12. 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
  13. 13. EVALUATION OF THE LAYOUT Overall Organization How is the layout organized? Repeatable table-row structure? Special treatment or consideration for positioning? 13
  14. 14. 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
  15. 15. ADAPTIVE DESIGN THE DESKTOP VERSION 15
  16. 16. 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
  17. 17. ADAPTIVE DESIGN: THE DESKTOP VERSION Masthead in desktop vs mobile Use a background image on the A tag, DIVs, or TD’s 17
  18. 18. 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
  19. 19. ADAPTIVE DESIGN: THE DESKTOP VERSION Call to action button image and placement 19
  20. 20. ADAPTIVE DESIGN: THE DESKTOP VERSION Call to action button image and placement 20
  21. 21. ADAPTIVE DESIGN: THE DESKTOP VERSION Image bullets 21
  22. 22. ADAPTIVE DESIGN: THE DESKTOP VERSION Make special consideration for height- constrained lines or rows 22
  23. 23. 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
  24. 24. ADAPTIVE DESIGN: THE ADAPTIVE VERSION 24
  25. 25. ADAPTIVE DESIGN: THE MOBILE VERSION Use a code base to jump start  Base CSS code  Yahoo! Body Fix 25
  26. 26. 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
  27. 27. 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
  28. 28. ADAPTIVE DESIGN: TESTING, SUPPORT & NOTES 28
  29. 29. 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
  30. 30. 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
  31. 31. THOUGHTS: Commentary on adaptive or responsive design  Adaptive layout vs. responsive design  Each has its own set of unique opportunities 31
  32. 32. 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
  33. 33. 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
  34. 34. THANK YOU 34

×