@becskr
Pushing email design
forward!
Becs Rivett
@becskr
@becskr
Pushing design forward
Becs Rivett
But seriously...
@becskr
@becskr
IE6 is dead...
• So is Lotus Notes 6.5...
• Take a more functionality-led approach
• Graceful degradation
@becskr
Funky fonts that
fallback nicely
• Huge availability of free-to-use web fonts
on Google
• Works on Apple devices, ...
@becskr
Retina images please!
• The age of high density screens
• Choosing the right file format
• Shrink those file sizes...
@becskr
Every time you use a
button for an image,
a kitten dies
@becskr
• Buttons that show with images off
• Make the whole button clickable, even in
Outlook
• We can cheat...and it’s o...
@becskr
V-v-video...
• Video support is getting better...
• Litmus’ background video
http://pages.litmus.com/webmail/31032...
@becskr
In the shadows
• Some CSS3 like box shadows and text
shadows work pretty well across the board
• Get experimental ...
@becskr
Responsive layouts
• Don’t get repetitive….Two column image
left, text right
• Brian Graves’ Responsive Email Patt...
@becskr
Responsive emails
@becskr
Responsive layouts
• Image replacement, not just image resize
• Mobile images comes in many flavours
@becskr
Scale down
Code at: http://pastebin.com/Kbrz0V6t
@becskr
Background-size: cover
Code at: http://pastebin.com/sVSSssey
@becskr
Image squeeze
Code at: http://pastebin.com/2wvSiZw6
@becskr
Relevant content
• Agile email
• Contextual information
• Geolocation, Time, Device, Weather,
Social, RSS
• Behavi...
@becskr
Finally...
A vaguely topical film
Upcoming SlideShare
Loading in …5
×

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

2,006 views
1,956 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,006
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×