1.
IMPLEMENTING
RESPONSIVE DESIGN
A TACTICAL GUIDE
13 MARCH 2014
+

2.
TODAY’S PRESENTERS
Daniel Park,
Director of CRM Marketing, TakePart
John Bilderback,
Sr. Creative Designer, BlueHornet
2

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.
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.
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.
ADAPTIVE DESIGN
EVALUATION
6

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.
EVALUATION OF THE LAYOUT
TakePart creative for
mobile and desktop
8

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.
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.
EVALUATION OF THE LAYOUT
Images
Are they scaled up or
down?
Are they different for
mobile?
11

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.
EVALUATION OF THE LAYOUT
Overall
Organization
How is the layout
organized?
Repeatable
table-row structure?
Special treatment or
consideration for
positioning?
13

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.
ADAPTIVE DESIGN
THE DESKTOP VERSION
15

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.
ADAPTIVE DESIGN:
THE DESKTOP VERSION
Masthead in
desktop vs
mobile
Use a background
image on the A tag,
DIVs, or TD’s
17

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.
ADAPTIVE DESIGN:
THE DESKTOP VERSION
Call to action
button image and
placement
19

20.
ADAPTIVE DESIGN:
THE DESKTOP VERSION
Call to action
button image and
placement
20

21.
ADAPTIVE DESIGN:
THE DESKTOP VERSION
Image bullets
21

22.
ADAPTIVE DESIGN:
THE DESKTOP VERSION
Make special
consideration
for height-
constrained
lines or rows
22

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.
ADAPTIVE DESIGN:
THE ADAPTIVE VERSION
24

25.
ADAPTIVE DESIGN:
THE MOBILE VERSION
Use a code base
to jump start
 Base CSS code
 Yahoo! Body Fix
25

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.
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.
ADAPTIVE DESIGN:
TESTING, SUPPORT &
NOTES
28

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.
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.
THOUGHTS:
Commentary on adaptive or
responsive design
 Adaptive layout vs. responsive design
 Each has its own set of unique
opportunities
31

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.
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.
THANK YOU
34