pushing email design forward - completely email conference june 2014 - becs rivett
DESCRIPTION
Discussing ideas to make your email really up to date in 2014 including several techniques to code nice responsive imagesTRANSCRIPT
![Page 1: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/1.jpg)
@becskr
Pushing email design forward!
Becs Rivett@becskr
![Page 2: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/2.jpg)
@becskr
Pushing design forwardBecs Rivett
But seriously...
![Page 3: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/3.jpg)
@becskr
![Page 4: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/4.jpg)
@becskr
IE6 is dead...
• So is Lotus Notes 6.5...
• Take a more functionality-led approach
• Graceful degradation
![Page 5: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/5.jpg)
@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
![Page 6: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/6.jpg)
@becskr
Retina images please!
• The age of high density screens
• Choosing the right file format
• Shrink those file sizes with tinypng, jpegmini
![Page 7: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/7.jpg)
@becskr
Every time you use a button for an image,
a kitten dies
![Page 8: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/8.jpg)
@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
![Page 9: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/9.jpg)
@becskr
V-v-video...
• Video support is getting better...
• Litmus’ background videohttp://pages.litmus.com/webmail/31032/17445841/0af8553b867f60bc74807b56355f44a6
• Fiddly workarounds but a great tutorial over at Email on Acidhttp://www.emailonacid.com/blog/details/C13/a_how_to_guide_to_embedding_html5_video_in_email
• A function too far? Measurability...
![Page 10: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/10.jpg)
@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
![Page 11: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/11.jpg)
@becskr
Responsive layouts
• Don’t get repetitive….Two column image left, text right
• Brian Graves’ Responsive Email Patterns Source: http://briangraves.github.io/ResponsiveEmailPatterns/
![Page 12: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/12.jpg)
@becskr
Responsive emails
![Page 13: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/13.jpg)
@becskr
Responsive layouts
• Image replacement, not just image resize
• Mobile images comes in many flavours
![Page 15: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/15.jpg)
@becskr
Background-size: cover
Code at: http://pastebin.com/sVSSssey
![Page 16: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/16.jpg)
@becskr
Image squeeze
Code at: http://pastebin.com/2wvSiZw6
![Page 17: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/17.jpg)
@becskr
Relevant content• Agile email
• Contextual information
• Geolocation, Time, Device, Weather, Social, RSS
• Behavioural
• Browsing, purchasing, abandonment behaviours
![Page 18: Pushing Email Design Forward - Completely Email Conference June 2014 - Becs Rivett](https://reader035.vdocument.in/reader035/viewer/2022081602/54c73cb74a79590c6e8b483a/html5/thumbnails/18.jpg)
@becskr
Finally...A vaguely topical film