HTML CSS Progressive Enhancement for Email
•Download as PPTX, PDF•
2 likes•207 views
Here are some of the slides I used at #EMD17 #EMAIL Marketing Day. About 10 minutes of the presentation was done in Apple Mail - which is not on here. They don't make too much sense out of context.
Recommended
More Related Content
What's hot
Similar to HTML CSS Progressive Enhancement for Email
Similar to HTML CSS Progressive Enhancement for Email (20)
Recently uploaded
Recently uploaded (20)
HTML CSS Progressive Enhancement for Email
- 2. Myths Code like it’s 1999 600px wide No web fonts No animation No background images
- 3. Email has to look the same everywhere
- 4. Email does not have to look the same everywhere
- 5. Mobile Friendly in non- responsive inboxes Forcing desktop in non- responsive inboxes
- 7. Progressive Enhancement Just because Outlook is rubbish, your iphone audience shouldn’t have the same experience.
- 8. Good inboxes Apple Mail iPhone ios Outlook for MAC Samsung Native inboxes (some) Basic Inboxes Outlook PC GMAIL /Android (non-gmail address) Outlook.com/365
- 14. Animation with CSS Use it to aid your design, draw attention to content, or provide a greater attack on the senses. Keep it subtle.
- 15. The end… Email does not have to look the same everywhere Progressive Enhancement allows you to think differently about your approach to email Get to know where your audience opens emails. Ignore the myths, try things, see what works for your audience.
Editor's Notes
- Hi, I’m Kristian I work for the Email Studio team at CACI – I’m an Email Developer, don’t worry though, I won’t be getting all code heavy on you. I’m going to talk about Progressive Enhancement for email… but before I do there are some myths still surrounding email....
- You have to code it like it’s 1999 It has to be 600px wide You can use animation You can’t use web fonts You can’t use background images None of these are true….. And my favourite myth of all….. Is....
- Email has to look the same everywhere. Which is rubbish....
- Email does NOT have to look the same everywhere Now you may believe this or not….. many people do, because “brand” etc… And they are well within their rights to be fundamentally wrong about about it… But the thing to remember is your brand probably isn’t created by anyone who knows anything about email...and the nuance that surrounds it. But hey it’s only the most successful marketing platform out there. No matter how hard you try it won’t look the same everwhere. It won’t. Accepting that is a great start, and open up a new way of thinking, that isn’t all about your brand.... But about your audiences experience of your brand. You see because of ‘brand’, and some f the myths.... some bad things happen with email.
- Like or trying to squeeze and desktop view inside a phone screen, It may seem like the right way to go because some instances of the Gmail app aren’t responsive....., but all you are doing is making it more difficult for large proportions of users.... Either in terms of accessibility, or simply making the email more difficult to engage with, and the content hard to read.
- Or another way is using lots of images or burning the text into the image, because you can’t use you fancy font….. Which is bad for the same reason and more. (Ok this is a over the top exmaple, but always makes me smile, and the same point still applies.) Of course… I am an idealist – I care about how easy it is to engage with your content
- So this is why I’m talking about progressive It’s about heightening your customers experience, without leaving anyone out. Just because Outlook on a PC is a limited platform, why would you force your Apple Mail users to have the same experience. Think of it as building out a base that works well across the board, and adding more complexity to it where better technology is supported, providing you with a strong foundation of which to fallback on. Part of the appeal of it for me, is the strength of the end result.
- Without hacking and targeting etc…. We can add some simple enhancements to our emails without much effort at all....even ones you’ve built already. And those enhancements are what I’ll focus on. So we're talking Apple Mail, iphone native inboxes, Outlook on a MAC, some Samsung Native inboxes, browsers obviously, and a few other edge cases as well, for the best support. With around 54% of all emails are now opened on mobiles, and we've seen (AT CACI) up to 70% in some cases of those users having IOS alone- so it’s important to know your audience in this way. A good place to start using some of these myth busting things might be in some where like mobile….It’s all a little simpler in there, you can lock the enhancement down to just your ‘mobile media queries’, and it all works pretty nicely. The thing to consider with a lot of these examples is that if they aren't supported, they will naturally fall away.
- Ok pressing on….let’s quickly take this fake email and enhance it in a simple way It’s currently pretty basic, but works really well everywhere.... Doesn’t look the same everywhere, but it’s close. It’s got lot’s of good live-text, and ticks some good accesibility boxes, it’s a really good base to start adding to. But it’s all pretty basic....a bit flat. I mean this is star wars right? It should be at least a little ostentatious.
- Background images You can go to different lengths to apply backgrounds to your email, and even make them work in Outlook. They can play an important part in allowing you put live text on top of your header image for example, so Here we’re just applying to the full-screen, behind everything to take away some of that brutal flat colour. This works great, because the image isn’t crucial…. If the image doesn’t display it’s not the end of the world. The information is not lost. But where it is supported you get that extra attack on senses. Pushing that ‘emotional response’ a little further.
- And sometimes content images aren’t that crucial either if it’s all considered before hand. Again.... There are VERY FEW places that don’t support them and most of them edge cases. What’s it look like in the Gmail apps that don’t support backgrounds??....... Like this... Arguably I prefer it. I guess one of the problems with backgrounds is, that if you’re not a dev, or use a WYWISYG or ESP to put your emails together...... This might cause you problems, because it’s a bit fiddly. (shameless plug – Our Email Sudio tool doesn’t have that problem) Webfonts – you may have noticed the difference in font on this one.... Great thing about webfonts is they just fall-away and fallbackwhere they ain’t supported.... So it will fallback to the email you initially woulda built anyway without using them. So let’s put one of those on the Star Wars email.
- Webfonts You don't have to always use system fonts like Arial or Times. Webfonts are definitely an option to consider – Google Fonts are an easy and cheap way to give your fonts a little more character. Lines The line is also quite harsh on the base, and you can style that a touch more. Again the nice line here is just a simple line of CSS… So it’s all about heightening the experience, trying to create a more emotional response. Those key things that make a distinct difference, with anyone really noticing all that much..
- BROWSER AND INBOX> Now animation with CSS goes from simple to very complex then even starts to blend in to the interactive email thing as well…..
- Thank you listening. If you wanna talk to me about any of this stuff, or our Email Studio feel free, I’m on twitter and linkedin, and I’ll be around…. Enjoy the rest of the your day.