Images off creativity in email design delivered at #TEDC15, Boston

1. @Mike_Ragan
actionrocket.co

2. HOW TO MAKE YOUR
EMAILS LOOK GOOD
NAKED
Images are not displayed.

3. #GAMEPLAN #HUSTLE
• Rationale
• Solutions
• Turning lemons into lemon grenades
• Concepting
• Case study
• Slicing & building in HTML + tips
• Some FAQ
• Glimpse at the future

6. THE EMAIL LANDSCAPE IS
ALWAYS CHANGING

7. MORE?
When considering and styling for image blocking we are
actually doing much more than that:
• Slow connections – from the developing world to Starbucks.
• Mobile phones – every year is year of the mobile now.
• Security – if there’s a meltdown…
• Easter egg – “going viral”, marketers buzzword bingo
heaven.

8. WHAT CAN YOU DO?
1. Follow email production “best practices”
2. Style your email using background colours
3. Use meaningful alt text and style it
4. Get creative!

12. CONCEPTING

13. • Context
• Audience
• Tone

17. 2 3

18. • Review the slices – start a new HTML doc.
• Break into clear sections for fault finding & updates.
• Separate tables make updates easier later.
• Do not use colspan or rowspan.
• Make the frame first, then add images & render test it. Then comes
the colouring in.
img { visibility: hidden !important; }
• Link the slice name to the td & add bgcolor=“#XXXXXX” (td or gtfo)
• Test again in browser and make any alterations to pixel art as needed.
CODING TIPS

20. img { visibility: hidden !important; }
Add the styled alt tag
style=“display:block; font-family:arial;
color:#cb0a10; font-size:11px; font-
weight:bold;” alt=“Nintendo™”
Add the icons for the d pad
alt=" ◀"

22. Reduce the overall file size of the email.
Aiming for <102kb code to prevent clipping e.g. Gmail.
1. Use fewer colours & bigger pieces.
2. Tidy the code. Do not minify. Careful with third party code
cleaners.
3. Shorten pathways.
4. Remove superfluous code e.g. tbody, blank alt=“”.
5. Marginal: do you need border=“0” on your table tag?
6. Address known bugs e.g. line height in MSO13, display:block
FINALISE THE CODE

23. OBJECTION!
Known bugs?
Responsive? Hybrid?
Retina images?
Spammy?
Fragile?
Bloated?
Reuseable?
Gimmick?

24. Hand crafted
Bespoke
Complete control
Engages recipient
Adds value
Doesn’t go out of fashion.

25. Pixel art is true LCD but can always
enhance…
Ghost effect with transparency on hover with
CSS wildcards
Interactivity in email
Animate with CSS
Foreground and background sharing
Minimalism in pixel art
NOT
Online tools
FUTURE OF PIXEL ART?

26. THANK YOU!
Sign-up: emailweekly.co
Continued: labs.actionrocket.co
Follow us: @actionrocket @taxiforemail