BarCampCHS2: Email Newsletters

Presenter: Julia Anderson | @blueys | Presentation slides

  • Code like it’s 1999
  • Keep in mind what various email software displays the preview pane

Your mission

  • Design with a goal in mind
  • Be useful
  • Less is more
  • Get attention
  • Be trustworthy – make unsubscribing easy

Sizing it up

  • Fixed width of no more than 550-600 px
  • Ave preview pane = 300-500px, and that’s generous.  Phones, for example
  • Design for vertical growth…let their be space & scroll down

Preview Pain

  • Sweet spot is about 250 by 250, right at the top left corner.  look at the ikea email.  have the logo, nav, headline & start of an image at the top
  • Introduce yourself
  • Entice more reading
  • Leftalign your logo = credibility
  • Try to get action above the scroll
    • ex Pottery Barn…has name in Text at very top, then big logo shortly below


  • Image display may be turned off
    • ex: earthfare has BAD newsletter without images
  • Sometimes you don’t even get the placeholder pictures
  • Code around this with alt text
  • OR always include a plaintext version of your email UM, this can help as it’s your mobile version
  • “Add me to your address book”
  • Use more reputable company to send these things to help guide you

Code like it’s 1999

  • Code for lowest common denominator
  • Provide fallbacks – be degradable
  • define EVERYTHING

Campaign monitor – a pic that shows you which css attributes work in which client. Woah!  Baaad.

Getting the feeling that my text-based email newsletter at work isn’t so awful. 😉

Market Share

  • Outlook 27.77
  • 16.23 hotmail
  • Then Yahoo & down.
  • Mobile is at the bottom, but growing & this is nearly impossible to track well

Layout: use tables!

  • Use empty cells and nested tables because you HAVE to set the width on every cell.
  • Avoid extra space between td and img tags
  • Don’t rely on margin or padding
  • No floating!

Reset & Define Everything

  • Dont rely on header styling – only inline styles on each instance
  • Leave nothing to interpretation even the font size, decoration, color, text decoration, etc
  • Set all margins & padding to 0

I’m looking at 4 lines of code to say Hey ya’ll! in orange bold arial, etc font.


  • Don’t use spacer images
  • Include all dimensions & size img to delcared size
  • Avoid PNGs
  • Provide fallback colors for background img

Display hack for hotmail
They add a few pixels below padding of images

img {sidplay: block;}

Degradable Coding

  • bg image fallbacks
  • alt text or life text links for everything
  • css alt tags

Inspiration – you can look at galleries online for ideas, but it may not be real world workable.  If you’re sending to a bunch of designers, have more fun!  Traditional clients – um NO.  Assume it’s gonna be seriously degraded.

One idea: go up just a tad from plain text.  Make the flourish in a useless area, and make the meat of the mail text.  Be strategic about your idea

One idea: hey – it’s narrow, they use bg color on tables with declared cell widths to draw 8-bit character images.  with text over it.

Litmus app – they will take your email & do a text with it.

Inline stylers – put code in & you get inline styles out

Comments are closed.