SlideShare ist ein Scribd-Unternehmen logo
1 von 34
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 design for the desktop
 Adaptive design for mobile
 Notes, comments, testing and support
3. Results
4. Q&A
3
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
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
ADAPTIVE DESIGN
EVALUATION
6
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 …
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 the
surrounding pieces of
design accordingly
9
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
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 objects,
between rows,
lines, shadows
and element
alignment
12
EVALUATION OF THE LAYOUT
Overall
Organization
How is the layout
organized?
Repeatable
table-row structure?
Special treatment or
consideration for
positioning?
13
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
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 minimize risk in the mobile version.
16
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
Specific HTML/CSS
required
18
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. 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
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 align
with the image
above, use a DIV that
affects mobile only
26
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
ADAPTIVE DESIGN:
TESTING, SUPPORT &
NOTES
28
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
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
THOUGHTS:
Commentary on adaptive or
responsive design
 Adaptive layout vs. responsive design
 Each has its own set of unique
opportunities
31
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
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
THANK YOU
34

Weitere ähnliche Inhalte

Ähnlich wie Implementing Responsive Email Design - A Tactical Guide

Haresh Karkar - Visual Resume
Haresh Karkar - Visual ResumeHaresh Karkar - Visual Resume
Haresh Karkar - Visual ResumeHaresh Karkar
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Processcreed
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignKarin Tracy
 
Portfolio Swetha Dubbaka
Portfolio Swetha DubbakaPortfolio Swetha Dubbaka
Portfolio Swetha Dubbakaswethadn
 
Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
Responsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsResponsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsCatalyst
 
Fusionops sr ux designer 2 2017
Fusionops sr ux designer 2 2017Fusionops sr ux designer 2 2017
Fusionops sr ux designer 2 2017Rich Goldstein
 
Fusionops UX position (richard.goldstein@fusionops.com
Fusionops UX position (richard.goldstein@fusionops.comFusionops UX position (richard.goldstein@fusionops.com
Fusionops UX position (richard.goldstein@fusionops.comRich Goldstein
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingYury Vetrov
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Org Design for Design Orgs - The Workshop
Org Design for Design Orgs - The WorkshopOrg Design for Design Orgs - The Workshop
Org Design for Design Orgs - The WorkshopPeter Merholz
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJohn Nollin
 
B2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentB2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentRosetta Marketing
 
UI & API designing services infasta
UI  &  API designing services  infastaUI  &  API designing services  infasta
UI & API designing services infastaShiva Kumar
 
Stop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile MathStop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile MathSourcebits
 
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllResponsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllPerficient, Inc.
 

Ähnlich wie Implementing Responsive Email Design - A Tactical Guide (20)

Haresh Karkar - Visual Resume
Haresh Karkar - Visual ResumeHaresh Karkar - Visual Resume
Haresh Karkar - Visual Resume
 
Rwdprocess
RwdprocessRwdprocess
Rwdprocess
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive Redesign
 
Portfolio Swetha Dubbaka
Portfolio Swetha DubbakaPortfolio Swetha Dubbaka
Portfolio Swetha Dubbaka
 
Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
Responsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsResponsive email design: 3 how-to steps
Responsive email design: 3 how-to steps
 
Fusionops sr ux designer 2 2017
Fusionops sr ux designer 2 2017Fusionops sr ux designer 2 2017
Fusionops sr ux designer 2 2017
 
Fusionops UX position (richard.goldstein@fusionops.com
Fusionops UX position (richard.goldstein@fusionops.comFusionops UX position (richard.goldstein@fusionops.com
Fusionops UX position (richard.goldstein@fusionops.com
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Redesign design V2.0
Redesign design V2.0Redesign design V2.0
Redesign design V2.0
 
Org Design for Design Orgs - The Workshop
Org Design for Design Orgs - The WorkshopOrg Design for Design Orgs - The Workshop
Org Design for Design Orgs - The Workshop
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
B2B Tech Website Competitive Assessment
B2B Tech Website Competitive AssessmentB2B Tech Website Competitive Assessment
B2B Tech Website Competitive Assessment
 
UI & API designing services infasta
UI  &  API designing services  infastaUI  &  API designing services  infasta
UI & API designing services infasta
 
Stop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile MathStop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile Math
 
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllResponsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits All
 
DOXSEY resume 9-12
DOXSEY resume 9-12DOXSEY resume 9-12
DOXSEY resume 9-12
 

Mehr von BlueHornet

First Impressions: The Power of an Amazing Welcome Email
First Impressions: The Power of an Amazing Welcome EmailFirst Impressions: The Power of an Amazing Welcome Email
First Impressions: The Power of an Amazing Welcome EmailBlueHornet
 
5 Ways to Increase Email Engagement and Revenue with CRM Data
5 Ways to Increase Email Engagement and Revenue with CRM Data5 Ways to Increase Email Engagement and Revenue with CRM Data
5 Ways to Increase Email Engagement and Revenue with CRM DataBlueHornet
 
2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...
2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...
2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...BlueHornet
 
2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...
2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...
2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...BlueHornet
 
Shine Bright In the Inbox This Holiday Season
Shine Bright In the Inbox This Holiday SeasonShine Bright In the Inbox This Holiday Season
Shine Bright In the Inbox This Holiday SeasonBlueHornet
 
New for 2015: Bright Ideas in Retail Email
New for 2015: Bright Ideas in Retail EmailNew for 2015: Bright Ideas in Retail Email
New for 2015: Bright Ideas in Retail EmailBlueHornet
 
The Evolution of Email: Real-Time Segmentation & Contextual Marketing
The Evolution of Email: Real-Time Segmentation & Contextual MarketingThe Evolution of Email: Real-Time Segmentation & Contextual Marketing
The Evolution of Email: Real-Time Segmentation & Contextual MarketingBlueHornet
 
Five Keys to List Growth: Building a Healthy Database
Five Keys to List Growth: Building a Healthy DatabaseFive Keys to List Growth: Building a Healthy Database
Five Keys to List Growth: Building a Healthy DatabaseBlueHornet
 
Triggered & Transactional Emails That Really Work
Triggered & Transactional Emails That Really WorkTriggered & Transactional Emails That Really Work
Triggered & Transactional Emails That Really WorkBlueHornet
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...BlueHornet
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...BlueHornet
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...BlueHornet
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...BlueHornet
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...BlueHornet
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...BlueHornet
 
Preparing for CASL: A Checklist for Email Marketers, by BlueHornet
Preparing for CASL: A Checklist for Email Marketers, by BlueHornetPreparing for CASL: A Checklist for Email Marketers, by BlueHornet
Preparing for CASL: A Checklist for Email Marketers, by BlueHornetBlueHornet
 
12 Bright Ideas in Retail Email - Webinar
12 Bright Ideas in Retail Email - Webinar12 Bright Ideas in Retail Email - Webinar
12 Bright Ideas in Retail Email - WebinarBlueHornet
 
Preparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should Do
Preparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should DoPreparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should Do
Preparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should DoBlueHornet
 
Leveraging the Right Data to Get Big Results
Leveraging the Right Data to Get Big ResultsLeveraging the Right Data to Get Big Results
Leveraging the Right Data to Get Big ResultsBlueHornet
 
Four Keys to Exceeding Email Subscriber Expectations
Four Keys to Exceeding Email Subscriber ExpectationsFour Keys to Exceeding Email Subscriber Expectations
Four Keys to Exceeding Email Subscriber ExpectationsBlueHornet
 

Mehr von BlueHornet (20)

First Impressions: The Power of an Amazing Welcome Email
First Impressions: The Power of an Amazing Welcome EmailFirst Impressions: The Power of an Amazing Welcome Email
First Impressions: The Power of an Amazing Welcome Email
 
5 Ways to Increase Email Engagement and Revenue with CRM Data
5 Ways to Increase Email Engagement and Revenue with CRM Data5 Ways to Increase Email Engagement and Revenue with CRM Data
5 Ways to Increase Email Engagement and Revenue with CRM Data
 
2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...
2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...
2015 Consumer Views of Email Marketing, Part 2: How Email Influences Purchasi...
 
2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...
2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...
2015 Consumer Views of Email Marketing, Part 1: Email Usage Patterns & Mobile...
 
Shine Bright In the Inbox This Holiday Season
Shine Bright In the Inbox This Holiday SeasonShine Bright In the Inbox This Holiday Season
Shine Bright In the Inbox This Holiday Season
 
New for 2015: Bright Ideas in Retail Email
New for 2015: Bright Ideas in Retail EmailNew for 2015: Bright Ideas in Retail Email
New for 2015: Bright Ideas in Retail Email
 
The Evolution of Email: Real-Time Segmentation & Contextual Marketing
The Evolution of Email: Real-Time Segmentation & Contextual MarketingThe Evolution of Email: Real-Time Segmentation & Contextual Marketing
The Evolution of Email: Real-Time Segmentation & Contextual Marketing
 
Five Keys to List Growth: Building a Healthy Database
Five Keys to List Growth: Building a Healthy DatabaseFive Keys to List Growth: Building a Healthy Database
Five Keys to List Growth: Building a Healthy Database
 
Triggered & Transactional Emails That Really Work
Triggered & Transactional Emails That Really WorkTriggered & Transactional Emails That Really Work
Triggered & Transactional Emails That Really Work
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 6 of...
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 5 of 6: Email & M...
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 4 of 6: Email & P...
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar 3 of 6: Email Fre...
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series Part 2 of ...
 
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...
BlueHornet's 2014 Consumer Views of Email Marketing Webinar Series: Part 1 of...
 
Preparing for CASL: A Checklist for Email Marketers, by BlueHornet
Preparing for CASL: A Checklist for Email Marketers, by BlueHornetPreparing for CASL: A Checklist for Email Marketers, by BlueHornet
Preparing for CASL: A Checklist for Email Marketers, by BlueHornet
 
12 Bright Ideas in Retail Email - Webinar
12 Bright Ideas in Retail Email - Webinar12 Bright Ideas in Retail Email - Webinar
12 Bright Ideas in Retail Email - Webinar
 
Preparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should Do
Preparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should DoPreparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should Do
Preparing for Canada's Anti-Spam Law - 5 Things Email Marketers Should Do
 
Leveraging the Right Data to Get Big Results
Leveraging the Right Data to Get Big ResultsLeveraging the Right Data to Get Big Results
Leveraging the Right Data to Get Big Results
 
Four Keys to Exceeding Email Subscriber Expectations
Four Keys to Exceeding Email Subscriber ExpectationsFour Keys to Exceeding Email Subscriber Expectations
Four Keys to Exceeding Email Subscriber Expectations
 

Kürzlich hochgeladen

From Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOFrom Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOSzymon Słowik
 
A Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | BanyanbrainA Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | BanyanbrainBanyanbrain
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessLiv Day
 
Best digital marketing e-book form bignners
Best digital marketing e-book form bignnersBest digital marketing e-book form bignners
Best digital marketing e-book form bignnersmuntasibkhan58
 
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...Hugues Rey
 
Miss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMiss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMagdalena Kulisz
 
5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software SolutionsDevherds Software Solutions
 
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the InternetExploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internetnehapardhi711
 
Most Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdf
Most Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdfMost Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdf
Most Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdfCIO Business World
 
Exploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdfExploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdfadult marketing
 
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...CIO Business World
 
Master the Art of Digital Recruitment in Asia.pdf
Master the Art of Digital Recruitment in Asia.pdfMaster the Art of Digital Recruitment in Asia.pdf
Master the Art of Digital Recruitment in Asia.pdfHigher Education Marketing
 
Fueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdfFueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdfVWO
 
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdfResearch and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdfVWO
 
Unlocking Passive Income: The Power of Affiliate Marketing
Unlocking Passive Income: The Power of Affiliate MarketingUnlocking Passive Income: The Power of Affiliate Marketing
Unlocking Passive Income: The Power of Affiliate MarketingDaniel
 
Digital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingDigital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingShauryaBadaya
 
top marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar Ctop marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar CManojkumar C
 
Understanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guideUnderstanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guidePartnercademy
 
Understand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMMUnderstand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMMsearchextensionin
 
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local LeadsSearch Engine Journal
 

Kürzlich hochgeladen (20)

From Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOFrom Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEO
 
A Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | BanyanbrainA Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | Banyanbrain
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise Success
 
Best digital marketing e-book form bignners
Best digital marketing e-book form bignnersBest digital marketing e-book form bignners
Best digital marketing e-book form bignners
 
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
(Generative) AI & Marketing: - Out of the Hype - Empowering the Marketing M...
 
Miss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMiss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdf
 
5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions
 
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the InternetExploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
 
Most Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdf
Most Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdfMost Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdf
Most Influential HR Leaders Leading the Corporate World, 2024 (Final file).pdf
 
Exploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdfExploring The World Of Adult Ad Networks.pdf
Exploring The World Of Adult Ad Networks.pdf
 
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
Most Impressive Construction Leaders in Tech, Making Waves in the Industry, 2...
 
Master the Art of Digital Recruitment in Asia.pdf
Master the Art of Digital Recruitment in Asia.pdfMaster the Art of Digital Recruitment in Asia.pdf
Master the Art of Digital Recruitment in Asia.pdf
 
Fueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdfFueling A_B experiments with behavioral insights (1).pdf
Fueling A_B experiments with behavioral insights (1).pdf
 
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdfResearch and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
 
Unlocking Passive Income: The Power of Affiliate Marketing
Unlocking Passive Income: The Power of Affiliate MarketingUnlocking Passive Income: The Power of Affiliate Marketing
Unlocking Passive Income: The Power of Affiliate Marketing
 
Digital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingDigital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet Marketing
 
top marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar Ctop marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar C
 
Understanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guideUnderstanding the Affiliate Marketing Channel; the short guide
Understanding the Affiliate Marketing Channel; the short guide
 
Understand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMMUnderstand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMM
 
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
 

Implementing Responsive Email Design - A Tactical Guide

  • 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
  • 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
  • 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
  • 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
  • 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