ݺߣ

ݺߣShare a Scribd company logo
Exploring experimental email code
Mark Robbins
Senior Front End Web and Email Developer
The Learning People
@M_J_Robbins
emailcodegeek.com
What we’re going to look at
● What is experimental email code?
● How to approach it
● Why you should be playing with it
● What I’m currently doing
What is experimental email code?
It’s not 1998!
What is experimental email code?
● Responsive email
● CSS animation
● Embedded video
● SVG images
● SVG animation
● Interactive emails
● and more...
Code like it’s 2014
How to approach experimental email code
● Subscribe to newsletters and blogs
● Don’t just look at email
● Think how to exploit every trick you find
● Don’t limit your ideas to what is possible
● If it ain’t broke, optimise it
Research
How to approach experimental email code
● Screenshot aggregators
● Emulators
● DIY live testing suite
● Send it internally
● Share it and collaborate
Test
How to approach experimental email code
Finding a fallback for SVG images
How to approach experimental email code
If you’re not failing, you’re not pushing the
boundaries hard enough
Fail
Why you should be playing with email code
Progressive enhancement
“If you book them,
they will come”
spirit of Jim Morrison
1. It’s cool
2. Your competitors are/aren’t doing it
3. It will improve engagement
4. Your boss is the only person using Lotus notes
5. x% of people will see this
6. That x% are better customers
7. Mobile click through rates are low
8. It works
Justifying it to the boss
What am I working on?
Interactive in email games
What am I working on?
What am I working on?
ThWack-a-Vole
● Selected hidden radio buttons
● Buttons are triggered by <label> tags
● When button 3 is selected you see the
<label> for button 2 and 4
● Moved with a 10 step animation which is
reversed, switched and sped up
What am I working on?
Interactive in email games
goo.gl/PxnVUs
Mark Robbins
@M_J_Robbins
Thanks

More Related Content

Exploring experimental email code

  • 1. Exploring experimental email code Mark Robbins Senior Front End Web and Email Developer The Learning People @M_J_Robbins emailcodegeek.com
  • 2. What we’re going to look at ● What is experimental email code? ● How to approach it ● Why you should be playing with it ● What I’m currently doing
  • 3. What is experimental email code? It’s not 1998!
  • 4. What is experimental email code? ● Responsive email ● CSS animation ● Embedded video ● SVG images ● SVG animation ● Interactive emails ● and more... Code like it’s 2014
  • 5. How to approach experimental email code ● Subscribe to newsletters and blogs ● Don’t just look at email ● Think how to exploit every trick you find ● Don’t limit your ideas to what is possible ● If it ain’t broke, optimise it Research
  • 6. How to approach experimental email code ● Screenshot aggregators ● Emulators ● DIY live testing suite ● Send it internally ● Share it and collaborate Test
  • 7. How to approach experimental email code Finding a fallback for SVG images
  • 8. How to approach experimental email code If you’re not failing, you’re not pushing the boundaries hard enough Fail
  • 9. Why you should be playing with email code Progressive enhancement “If you book them, they will come” spirit of Jim Morrison
  • 10. 1. It’s cool 2. Your competitors are/aren’t doing it 3. It will improve engagement 4. Your boss is the only person using Lotus notes 5. x% of people will see this 6. That x% are better customers 7. Mobile click through rates are low 8. It works Justifying it to the boss
  • 11. What am I working on? Interactive in email games
  • 12. What am I working on?
  • 13. What am I working on? ThWack-a-Vole ● Selected hidden radio buttons ● Buttons are triggered by <label> tags ● When button 3 is selected you see the <label> for button 2 and 4 ● Moved with a 10 step animation which is reversed, switched and sped up
  • 14. What am I working on? Interactive in email games goo.gl/PxnVUs

Editor's Notes

  • #2: So with my job title I wanted to separate the two areas of web development and email development. Although related they are a very separate set of skills You can also follow me on twitter And I have a website where I talk about my experiments in more detail - it needs a little updating
  • #3: Why you shoudl be pusshing the boundires of email
  • #4: alturnate image http://www.thinkstockphotos.co.uk/image/stock-photo-worn-cellphone/461856801/popup?sq=old%20phone/f=CPIHVX/s=DynamicRank I hate it when people say for email you have to code like it’s 1998 About half of all emails sent are read on mobile devices, more email clients that render modern email code People think because we use tables we can’t do anything more
  • #5: Alternate image http://www.thinkstockphotos.co.uk/image/stock-photo-blank-transparent-smart-phone-in-hand/469690787 Bex when through these in more detail earlier in the day These are things that are new and are still being understood Because of the sudden surge in support there are a lot of new things being found all the time
  • #6: Ones for influence but also your competitors There is a lot of cool stuff happening in the web at the moment. We can’t do everything they do but we can take influence. If someone finds a new way to swap an image for mobile, think can you do it with text? Think without restriction then work backwards to find a way to do it. You don’t have to be revolutionary, I’m constantly refining my code. Add a line to further support or remove code to clean it up.
  • #7: Good but not interactive Handy for testing iPhone and Android browser support which is close to email support Ideally pick up a load of old mobile devices, but more simply sign up for gmail, yahoo, outlook.com, AOL. Download thunderbird and outlook. Set up an email address to forward to all those accounts. If you’re sending a newsletter send it to your staff a couple of days early The more developers who see it the more likely a mistake will be spotted and fixed - even if it didn’t work someone may have a hack that will do it
  • #9: You need to break things to understand the limitations. Even if you know something doesn’t work still try it as things change all the time (not Outlook) The more you fail the better you get at it - You need to understand what part of your code went wrong and why, then when someone comes up with a solution to that small problem you can get your whole idea working
  • #10: Email clients don’t need to support CSS animation if nobody is sending it Also if you start doing something really cool, you can guarantee your competitors will follow. And some CEO somewhere is going to be checking his iPhone and realise they are falling behind Consumers will realise Outlook is out of date not your email, this happened with Internet Explorer
  • #11: You’ll enjoy doing it, you do something cool, you’ll look cool, your department will look cool, your boss will look cool, your company will look cool You’re either catching up or breaking away, either is a good argument Interesting things draw people in It’s sad but true, your email is likely being signed off by someone viewing it in the office on Outlook or Lotus notes. But get some analytics going. Back up your argument with stats, only 5% of people are viewing in Outlook but 50% will see the cool animation mac users - If you’ve the disposable income to have an advance device to read the email you’ve got the disposable income to buy our product People are opening on mobile but you need to work harder to encourage the clicks All the stuff we’ve done has lead to awards, recognition and most importantly higher opens, clicks and conversions
  • #12: I’ve not used this in a campaign yet You simply catch the fly with your mouse or tap it on a touch screen and you’ll see a link to a prize This interaction gives a sense of achievement so in theory will encourage a click It’s basically a div moved around with CSS animation with a hover effect to display the hidden link
  • #13: Could be used for carousel or tabbed layout Those of you who aren’t coders I’ll try and keep it simple Those of you who are, it’s still pretty hard to follow, I barely understand it and I wrote the bloody thing
  • #15: Either a give away or just look at this in the pub later
  • #16: resources page some people are gernal marketing and not email