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