CSS SUPPORT IN THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIX

Size: px

Start display at page:

Download "CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL"

Dwain Hicks
8 years ago
Views:

1 CSS SUPPORT IN THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIX

2 Standards are not usually standard 2

3 Standards are not usually standard 3

4 it can be funny. but not always. 4

5 on our panel ROS HODGEKISS COLIN NEDERKOORN JUSTIN KHOO ANDREW KING CAMPAIGN MONITOR CUSTOMER.IO 5

6 WE are 1. designers 2. App builders 3. Entrepreneurs 4. Consultants 5. Ready for change 6

7 what is holding us back? 7

8 in this session 1. Design & the State of CSS Support Today 2. Why is Poor CSS Support in a Problem? 3. What Can The Community Do About It? 4. Let's Begin the Conversation 8

Why is Poor CSS Support in Email a Problem? 3.

9 Design & the state of SECTION No. 1 css support today 9

10 design? 10

11 DESIGNERS 1 1

12 actually, we're a big community 12

13 We're creating amazing S 1 3

14 SepArate version for gmail 14

15 We're creating amazing s RESPONSIVE DESIGNS «Look great on mobile devices «Use media queries or fluid layouts «Still have to look lovely / degrade gracefully in desktop and webmail clients 15

16 We're creating amazing s For every $1 spent, marketers receive $44.25 in return 16

17 Overheard is an under-appreciated, table-based, hack-centric, career orphan, trash fire THAT WE ALL SEEM TO REALLY LOVE. 17

18 DAY IN THE LIFE OF AN DESIGNER WIREFRAME DESIGN CODE TESTING AND FIXING ISSUES 1 HOUR 2 HOURS 2 HOURS REST OF THE DAY 18

19 wide gap in CSS Support between clients 19

20 The gap 20

21 IOS INBOX vs. 21

22 So many platforms 22% 28% 41% WEBMAIL Outlook.com - 48% Yahoo - 25% Gmail - 25% AOL Mail - 2% DESKTOP Outlook % Outlook 00/03/XP - 19% Outlook % Apple Mail 6-14% Windows Live - 10% Apple Mail 4-9% MOBILE iphone - 61% Android - 12% ipad - 26% ipod Touch - 1% 22

23 Guide to CSS Support in Clients 2 3

24 WHY is poor css support a SECTION No. 2 problem? 24

25 design web design 25

26 hacks HTML & VML <td style="text-align: center; vertical-align: top; font-size: 0;">  26

27 hacks HTML & VML <td style="text-align: center; vertical-align: top; font-size: 0;">  27

28 It's the designer or esp's fault 28

29 TIME spent building tools = time not innovating 29

30 What Can The SECTION No. 3 Community Do About It? 30

31 Build brilliant clients Two issues 31

32 Issue 1: preprocessing A preprocessor s job is to remove anything that could be dangerous, introduce privacy concerns, or cause an to behave unexpectedly. Issues: Can be very restrictive Alters CSS Removes CSS Breaks our s 32

33 issue 2: Rendering engine Once an client has preprocessed an , 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

34 Build brilliant 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 clients (eg. WebKit) 34

35 push for COMMON STANDARDS Make HTML standards a subset of HTML 5 Document yo' stuff. 35

36 VOTE WITH YOUR S Build modern HTML newsletters 36

37 collaborate Talk to your friendly designer today 37

38 Let's begin the conversation SECTION No. 4 38

39 Let's begin the conversation SECTION No. 4 39

40 Thank you! ROS HODGEKISS COLIN NEDERKOORN JUSTIN KHOO ANDREW KING CAMPAIGN MONITOR CUSTOMER.IO 40

Looking Good! Troubleshooting Email Display Problems

E-mail Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Email Display Problems November 19, 2014 Today s Speaker Geoff Phillips Senior Editor & Email