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 it’s 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
• Don’t 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