pushing email design forward - completely email conference june 2014 - becs rivett

Click here to load reader

Download Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett

Post on 27-Jan-2015




0 download

Embed Size (px)


Discussing ideas to make your email really up to date in 2014 including several techniques to code nice responsive images


  • 1. @becskr Pushing email design forward! Becs Rivett @becskr

2. @becskr Pushing design forward Becs Rivett But seriously... 3. @becskr 4. @becskr IE6 is dead... So is Lotus Notes 6.5... Take a more functionality-led approach Graceful degradation 5. @becskr Funky fonts that fallback nicely Huge availability of free-to-use web fonts on Google Works on Apple devices, Android and Outlook (sort of) Great for mobile when text should be resized upwards to legibility 6. @becskr Retina images please! The age of high density screens Choosing the right file format Shrink those file sizes with tinypng, jpegmini 7. @becskr Every time you use a button for an image, a kitten dies 8. @becskr Buttons that show with images off Make the whole button clickable, even in Outlook We can cheat...and its ok! Try buttons.cm Buttons that work...properly 9. @becskr V-v-video... Video support is getting better... Litmus background video http://pages.litmus.com/webmail/31032/17445841/0af8553b867f60bc74807b 56355f44a6 Fiddly workarounds but a great tutorial over at Email on Acid http://www.emailonacid.com/blog/details/C13/a_how_to_guide_to_embeddi ng_html5_video_in_email A function too far? Measurability... 10. @becskr In the shadows Some CSS3 like box shadows and text shadows work pretty well across the board Get experimental with keyframe animation like Panic...but remember to check your fall backs! Source: http://www.campaignmonitor.com/blog/post/4035/css3-animation- svg-masks-web-fonts-panics-newsletter 11. @becskr Responsive layouts Dont get repetitive.Two column image left, text right Brian Graves Responsive Email Patterns Source: http://briangraves.github.io/ResponsiveEmailPatterns/ 12. @becskr Responsive emails 13. @becskr Responsive layouts Image replacement, not just image resize Mobile images comes in many flavours 14. @becskr Scale down Code at: http://pastebin.com/Kbrz0V6t 15. @becskr Background-size: cover Code at: http://pastebin.com/sVSSssey 16. @becskr Image squeeze Code at: http://pastebin.com/2wvSiZw6 17. @becskr Relevant content Agile email Contextual information Geolocation, Time, Device, Weather, Social, RSS Behavioural Browsing, purchasing, abandonment behaviours 18. @becskr Finally... A vaguely topical film