Basic Creative Optimisation Tips

[tweetmeme source=”getintheinbox” only_single=false]I wrote this at the end of the report did for a customer, thought it was blog worthy…

Deliverability and Brand Rapport

Try to invite replies to the email, this not only gets you in their address book, it will also tell each inbox that you are a trusted sender so deliverability will be easier. Also allowing your recipients to converse to you will bring them closer to the brand.


To ensure an optimal experience before the images are loaded on desktops, having a 2 line preheader to tease for the snippet preview and get the images loaded permanently can not only improve the engagement and subsequent conversions of this email but all future emails once the images are permanently loaded.

  • Left aligned
  • 10px
  • Top line as teaser
  • 2nd line imager loader / view in a browser
Preview Pane

The preview pane content and the rest of the email could be thought of as two different emails, where the preview pane view is built for optimal engagement and conversion and the rest of the email is freer because anyone who gets that far would/should have loaded the images of hit the browser view button.

  • Avoid large images spanning the whole width
    • Can break one up into more than one image
    • Some will be hidden with Responsive Design.
  • Where you have text, use actual text
    • rather than text in an image, where possible
  • Needs some text that grabs attention in the top left
    • Also a great spot for personalisation, like first name
    • Try using HTML buttons for calls to action
      • Rather than image buttons
      • The latest CSS3 features can add rounded corners, shadows and glows depending on the email client used.
Mobile Responsive Design

As per the piece earlier in this review responsive design is the best way to build an email because each recipient should then get the best experience depending on their device.

  • Ensure you have the ability to shrink the width from 600px to 300px.
    • Two main columns
    • Be happy to lose the far right if needed
    • Full width banner images can be shrunk or sections hidden (split the images)
    • Learn how to force right hand content to underneath the left column.
  • Make sure the normal text is still readable once zoomed to the width
    • 14px Arial
    • 12px Verdana
    • HTML Call to Action Buttons
      • Use CSS3 HTML buttons that can be made easily ‘tappable’ on a mobile
      • On the iPhone, this can even be given a pulsing glow!
  • Hide the preheader
    • Mobile devices don’t really need the preheader text as long as the images are loaded.
    • You may still need a browser view link for iPhones will no images – but they are so few it might not be worth the effort.
    • The teaser text will still work in the inbox preview.
    • Consider leaving and optimising the call to action depending on the content goals.
  • Test the email length to ensure the length does not harm engagement.