responsive emails
TRANSCRIPT
Responsive Emails
Saturday, April 19, 14
Email client trends**http://emailclientmarketshare.com
Saturday, April 19, 14
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
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
Design of a responsive email
Layout . Typography . Responsive HTML Responsive components
Saturday, April 19, 14
Layout should be designed with mobile first
approach
Saturday, April 19, 14
Landscape Portrait
Saturday, April 19, 14
Old New
Saturday, April 19, 14
In mobileLess is more
Saturday, April 19, 14
1
2 3
4 5 6
7
1
2
3
4
5
6
7
Layout
Saturday, April 19, 14
Grid
600px / 12 column grid
20px gutter
Saturday, April 19, 14
Key principles
• reuse components• gracefully deteriorate• consistency across all
communication• keep it simple (copy, layout)
Saturday, April 19, 14
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
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
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
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
Pros and cons
Saturday, April 19, 14
Our Solution
A heavily customized fork of Zurb Ink
Saturday, April 19, 14
Dev Workflow
Wireframe Mock-ups HTML*
InlinerAutomated testing
HTML* - Dummy text/media/links
Adding variables
QA Copy changes Go Live
Saturday, April 19, 14
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
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
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
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
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