0
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...
ABOUT TAKEPART
 TakePart is proud to host news and
lifestyle stories, opinion pieces,
and feature articles by some of the...
ABOUT TAKEPART
Created by TakePart creative team
based on new website branding
Turned to BlueHornet to create
an in-brand ...
ADAPTIVE DESIGN
EVALUATION
6
BENEFITS OF THE EVALUATION AND DISSECTION
Understand the possibilities
Not quite nuts and bolts, but enough to push the
bo...
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...
EVALUATION OF THE LAYOUT
 Type size & colors
 Text vs image
 Button size for call
to actions
What needs to draw
the mos...
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 ob...
EVALUATION OF THE LAYOUT
Overall
Organization
How is the layout
organized?
Repeatable
table-row structure?
Special treatme...
EVALUATION OF THE LAYOUT
Best practices notes
 Consider text sizes for desktop vs mobile
 Call to action size, placement...
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 mini...
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
Sp...
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. Ho...
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 ...
ADAPTIVE DESIGN:
THE MOBILE VERSION
Font sizes and how they affect layout
 Minimum font sizes are different in desktop an...
ADAPTIVE DESIGN:
TESTING, SUPPORT &
NOTES
28
TESTING PRACTICES
 Firefox Web Developer, Responsive Design View or
Google Chrome Responsive Inspector
 Send tests
 W3 ...
ADAPTIVE DESIGN
Clients that support @media queries
 iOS Devices: iphone, iPad, ipod Touch
 Android 2.2 thru 4.2
 Andro...
THOUGHTS:
Commentary on adaptive or
responsive design
 Adaptive layout vs. responsive design
 Each has its own set of un...
ADAPTIVE DESIGN THOUGHTS:
Design Guideposts
 Design for the experience: know your customers and
what devices they use, ge...
RESULTS
 Mobile CTOR (click to open rate) grew from
14.59% in November to 28% in February
 Responsive emails helped crea...
THANK YOU
34
Upcoming SlideShare
Loading in...5
×

Implementing Responsive Email Design - A Tactical Guide

806

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
806
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×