responsive emails

24
Responsive Emails Saturday, April 19, 14

Upload: rohit-mohan

Post on 27-Jan-2017

102 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Responsive emails

Responsive Emails

Saturday, April 19, 14

Page 2: Responsive emails

Email client trends**http://emailclientmarketshare.com

Saturday, April 19, 14

Page 3: Responsive emails

Why ?‣ LinkdIn’s major traffic source is emails‣ 51% of all emails are opened in mobile‣ Email marketing has an ROI of 4,300%

Saturday, April 19, 14

Page 4: Responsive emails

Emails at SlideShare‣ SlideShare sends 5M+ emails per day‣ Around .25 million are opened on mobile‣ Non responsive emails costs us a huge

part of those .25 million people.‣ Having a mobile experience needs

emails to be responsive

Saturday, April 19, 14

Page 5: Responsive emails

Design of a responsive email

Layout . Typography . Responsive HTML Responsive components

Saturday, April 19, 14

Page 6: Responsive emails

Layout should be designed with mobile first

approach

Saturday, April 19, 14

Page 7: Responsive emails

Landscape Portrait

Saturday, April 19, 14

Page 8: Responsive emails

Old New

Saturday, April 19, 14

Page 9: Responsive emails

In mobileLess is more

Saturday, April 19, 14

Page 10: Responsive emails

1

2 3

4 5 6

7

1

2

3

4

5

6

7

Layout

Saturday, April 19, 14

Page 11: Responsive emails

Grid

600px / 12 column grid

20px gutter

Saturday, April 19, 14

Page 12: Responsive emails

Key principles

• reuse components• gracefully deteriorate• consistency across all

communication• keep it simple (copy, layout)

Saturday, April 19, 14

Page 13: Responsive emails

TypographyDesktop Mobile

Hi vivek,

Top presentation on SlideShare

Discover and share the most popular content on SlideShare

Crowd Companies: The Next 10 Years, Leweb Keynote and what wil...

By Jane Austin

Saturday, April 19, 14

Page 14: Responsive emails

Responsive Components

Crowd Companies: The Next 10 Years, Leweb Keynote and what wil...

View

By Jane Austin321 likes, 23 comments

Crowd Companies: The Next 10 will be the future...

View

By Jane Austin

321 likes, 23 comments

Crowd Companies: The Next 10 Years, Leweb Keynote and what wil...

By Jane Austin

Crowd Companies: The Next and what wil...

By Jane Austin

Crowd Companies: The Next and what wil...

By Jane Austin

Crowd Companies: The Next and what wil...

By Jane Austin

Crowd Companies: The Next 10 Years, Leweb Keynote and what wil...

By Jane Austin

Saturday, April 19, 14

Page 15: Responsive emails

Mark KapoorSoftware guru and techinal talets

Mark KapoorSoftware guru and techinal taletsSed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae

vitae dicta sunt explicabo

Reply

Reply

Saturday, April 19, 14

Page 16: Responsive emails

Responsive email frameworks

Zurb InkAntwortZurb playgroundThemeforest (specific layouts)

Most of the themes and frameworks are forks of zurb’s ink, which is highly derived from zurb foundation. But Zurb is not responsive on many devices and has issues pertaining to outlook.

Saturday, April 19, 14

Page 17: Responsive emails

Pros and cons

Saturday, April 19, 14

Page 18: Responsive emails

Our Solution

A heavily customized fork of Zurb Ink

Saturday, April 19, 14

Page 19: Responsive emails

Dev Workflow

Wireframe Mock-ups HTML*

InlinerAutomated testing

HTML* - Dummy text/media/links

Adding variables

QA Copy changes Go Live

Saturday, April 19, 14

Page 20: Responsive emails

Outlook - a major pain

Outlook shifted the rendering from crappy Internet Explorer (HTML) to Microsoft Word (VML)from outlook 2007 onwards.

VML is rendering is very different and buttons, backgrounds are completely messed up.

Saturday, April 19, 14

Page 21: Responsive emails

Generic Fixes‣ For spacing never give padding/spacing to container, rather give it to element.

This is an issue you will encounter in Outlook 2007 onwards.

‣ Outlook.com, if you have added a background style to an element (table cell) add it as an attribute as well. It is semantically wrong but somehow it seems to work. Else outlook.com will add its own black image

‣ For outlook add the image width as an attribute. We use style=width:100% for responsive images but that completely messes with layout as images in outlook breaks the bounding container. So if its a grid then add the grid’s width to the image width attribute.

Saturday, April 19, 14

Page 22: Responsive emails

Future

Gmail app on android and iOS

Yahoo mail app

Usability study

(* very shoddy media query support)

(* Why on earth google doesn’t support media queries)

Saturday, April 19, 14

Page 23: Responsive emails

Good resources•Campaign monitor (http://www.campaignmonitor.com/css/)

•Email standards project (www.email-standards.org)

•Zurb inliner tool (http://zurb.com/ink/inliner.php)

•Bulletproof buttons (http://buttons.cm/)

•Bulletproof background (http://backgrounds.cm/)

•We will be rolling out our findings soon.

Saturday, April 19, 14

Page 24: Responsive emails

Rohit Mohan Vivek TripathiUser Experience Designer at LinkedIn User Experience Designer at LinkedInin.linkedin.com/pub/rohit-mohan/8/534/5a4/[email protected]

https://www.linkedin.com/pub/vivek-tripathi/7/ab2/[email protected]

About us

Saturday, April 19, 14