implementing responsive email design - a tactical guide
Post on 17-May-2015
755 Views
Preview:
DESCRIPTION
TRANSCRIPT
IMPLEMENTING RESPONSIVE DESIGNA TACTICAL GUIDE
13 MARCH 2014
+
2
TODAY’S PRESENTERS
Daniel Park,Director of CRM Marketing, TakePart
John Bilderback,Sr. Creative Designer, BlueHornet
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
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
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
ADAPTIVE DESIGN
EVALUATION
6
7
BENEFITS OF THE EVALUATION AND DISSECTION
Understand the possibilitiesNot quite nuts and bolts, but enough to push the boundaries on creating and managing campaigns
Design is more than a reference point And integral to the success of the email
One HTML email templateCan be used with great results …
8
EVALUATION OF THE LAYOUT
TakePart creative for mobile and desktop
9
EVALUATION OF THE LAYOUT
Hierarchy
What are the most important elements to be read or clicked?
Position theseelements and the surrounding pieces of design accordingly
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?
11
EVALUATION OF THE LAYOUT
Images
Are they scaled up or down?
Are they different for mobile?
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
13
EVALUATION OF THE LAYOUT
Overall Organization
How is the layout organized?
Repeatable table-row structure?
Special treatment or consideration for positioning?
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
ADAPTIVE DESIGN
THE DESKTOP VERSION
15
16
ADAPTIVE DESIGNTHE DESKTOP VERSION
Organize the table-based layout into table rows to keep the template flexible and minimize risk in the mobile version.
17
ADAPTIVE DESIGN: THE DESKTOP VERSION
Masthead in desktop vs mobile
Use a background image on the A tag, DIVs, or TD’s
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
19
ADAPTIVE DESIGN:THE DESKTOP VERSION
Call to action button image and placement
20
ADAPTIVE DESIGN:THE DESKTOP VERSION
Call to action button image and placement
21
ADAPTIVE DESIGN:THE DESKTOP VERSION
Image bullets
22
ADAPTIVE DESIGN:THE DESKTOP VERSION
Make special consideration for height-constrained lines or rows
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.
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
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
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
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
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.
31
THOUGHTS:
Commentary on adaptive or responsive design
Adaptive layout vs. responsive design
Each has its own set of unique opportunities
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.
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
34
THANK YOU
top related