Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,194 views

Published on

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

Published in: Design, Technology, Art & Photos
  • Be the first to comment

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

  1. 1. @becskr Pushing email design forward! Becs Rivett @becskr
  2. 2. @becskr Pushing design forward Becs Rivett But seriously...
  3. 3. @becskr
  4. 4. @becskr IE6 is dead... • So is Lotus Notes 6.5... • Take a more functionality-led approach • Graceful degradation
  5. 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. 6. @becskr Retina images please! • The age of high density screens • Choosing the right file format • Shrink those file sizes with tinypng, jpegmini
  7. 7. @becskr Every time you use a button for an image, a kitten dies
  8. 8. @becskr • Buttons that show with images off • Make the whole button clickable, even in Outlook • We can cheat...and it’s ok! Try buttons.cm Buttons that work...properly
  9. 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. 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. 11. @becskr Responsive layouts • Don’t get repetitive….Two column image left, text right • Brian Graves’ Responsive Email Patterns Source: http://briangraves.github.io/ResponsiveEmailPatterns/
  12. 12. @becskr Responsive emails
  13. 13. @becskr Responsive layouts • Image replacement, not just image resize • Mobile images comes in many flavours
  14. 14. @becskr Scale down Code at: http://pastebin.com/Kbrz0V6t
  15. 15. @becskr Background-size: cover Code at: http://pastebin.com/sVSSssey
  16. 16. @becskr Image squeeze Code at: http://pastebin.com/2wvSiZw6
  17. 17. @becskr Relevant content • Agile email • Contextual information • Geolocation, Time, Device, Weather, Social, RSS • Behavioural • Browsing, purchasing, abandonment behaviours
  18. 18. @becskr Finally... A vaguely topical film

×