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

@becskr

Pushing email design forward!

Becs Rivett@becskr

@becskr

Pushing design forwardBecs 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, Android and Outlook (sort of)

• Great for mobile when text should be resized upwards to legibility

@becskr

Retina images please!

• The age of high density screens

• Choosing the right file format

• Shrink those file sizes with tinypng, jpegmini

@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 ok! Try buttons.cm

Buttons that work...properly

@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...

@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

@becskr

Responsive layouts

• Don’t get repetitive….Two column image left, text right

• Brian Graves’ Responsive Email Patterns Source: http://briangraves.github.io/ResponsiveEmailPatterns/

@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

• Behavioural

• Browsing, purchasing, abandonment behaviours

@becskr

Finally...A vaguely topical film