CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL
Standards are not usually standard 2
Standards are not usually standard 3
it can be funny. but not always. 4
on our panel ROS HODGEKISS COLIN NEDERKOORN JUSTIN KHOO ANDREW KING CAMPAIGN MONITOR CUSTOMER.IO CAMPAIGNWORKHUB LYRIS @yarrcat @alphacolin @freshinbox @akingkiwi 5
WE are 1. Email designers 2. App builders 3. Entrepreneurs 4. Consultants 5. Ready for change 6
what is holding us back? 7
in this session 1. Email Design & the State of CSS Support Today 2. Why is Poor CSS Support in Email a Problem? 3. What Can The Email Community Do About It? 4. Let's Begin the Conversation 8
Email Design & the state of SECTION No. 1 css support today 9
email design? 10
EMAIL DESIGNERS 1 1
actually, we're a big community 12
We're creating amazing EMAILS 1 3
SepArate version for gmail 14
We're creating amazing emails RESPONSIVE EMAIL DESIGNS «Look great on mobile devices «Use media queries or fluid layouts «Still have to look lovely / degrade gracefully in desktop and webmail email clients 15
We're creating amazing emails For every $1 spent, email marketers receive $44.25 in return 16
Overheard Email is an under-appreciated, table-based, hack-centric, career orphan, trash fire THAT WE ALL SEEM TO REALLY LOVE. 17
DAY IN THE LIFE OF AN EMAIL DESIGNER WIREFRAME 5 5 5 DESIGN CODE TESTING AND FIXING ISSUES 1 HOUR 2 HOURS 2 HOURS REST OF THE DAY 18
wide gap in CSS Support between email clients 19
The gap 20
IOS INBOX vs. MAIL @meladorri 21
So many platforms 22% 28% 41% WEBMAIL Outlook.com - 48% Yahoo - 25% Gmail - 25% AOL Mail - 2% DESKTOP Outlook 2010-22% Outlook 00/03/XP - 19% Outlook 2007-15% Apple Mail 6-14% Windows Live - 10% Apple Mail 4-9% MOBILE iphone - 61% Android - 12% ipad - 26% ipod Touch - 1% 22
Guide to CSS Support in EMail Clients 2 3
WHY is poor css support a SECTION No. 2 problem? 24
email design web design 25
hacks HTML & VML <td style="text-align: center; vertical-align: top; font-size: 0;"> <!--[if (gte mso 9) (IE)]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> 26
hacks HTML & VML <td style="text-align: center; vertical-align: top; font-size: 0;"> <!--[if (gte mso 9) (IE)]> <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> 27
It's the designer or esp's fault 28
TIME spent building tools = time not innovating 29
What Can The Email SECTION No. 3 Community Do About It? 30
Build brilliant email clients Two issues 31
Issue 1: preprocessing A preprocessor s job is to remove anything that could be dangerous, introduce privacy concerns, or cause an email to behave unexpectedly. Issues: Can be very restrictive Alters CSS Removes CSS Breaks our emails 32
issue 2: Rendering engine Once an email client has preprocessed an email, it s ready for the rendering engine to take over and display it to the recipient. Issues: Many different rendering engines with varied CSS support The same rendering engine is being implemented differently across devices 33
Build brilliant email clients 1. Preprocessor support for a standard set of non-threatening CSS elements 2. Standard implementation of a modern rendering engine for mobile and desktop email clients (eg. WebKit) 34
push for COMMON STANDARDS Make HTML email standards a subset of HTML 5 Document yo' stuff. 35
VOTE WITH YOUR EMAILS Build modern HTML email newsletters 36
collaborate Talk to your friendly email designer today 37
Let's begin the conversation SECTION No. 4 38
Let's begin the conversation SECTION No. 4 39
Thank you! ROS HODGEKISS COLIN NEDERKOORN JUSTIN KHOO ANDREW KING CAMPAIGN MONITOR CUSTOMER.IO CAMPAIGNWORKHUB LYRIS @yarrcat @alphacolin @freshinbox @akingkiwi 40