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.
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
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 …
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
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
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
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
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