HTML Email – Design considerations

Design for images being turned off

Some email clients (e.g. Outlook and Gmail) will block images by default until a user accepts to view them so it?s important to consider the following.

  1. The company name or brand should be included near the top of the document as text based HTML. Don?t just rely on a logo graphic.
  2. Don?t use images for important content (e.g. calls to action, headlines, content and links).
  3. Keep the use of graphics for decorative images to a minimum and avoid using them at all where possible.
  4. Mention within the HTML email that the user should add the sender to their address book as this will enable images by default.

Screen resolution and window size

Email clients usually have extra toolbars which seriously limit the amount of horizontal space available so it?s advisable to consider the width differently to that of a website and design an HTML email within the range of 500px and 600px).

Reading pane

Vertical space also becomes an issue with preview reading panes that can sit below the user?s inbox. It?s therefore important that the design considers the following:

  1. Include a brand/identity as HTML text that will appear in the reading pane to identify you (preferably in the top left where all users will see it).
  2. Include a call to action and text to entice the user.

Background images

Due to the limitations of CSS in email clients, background images cannot be displayed. It?s therefore important to consider the following:

  1. HTML text cannot be placed over a background image.
  2. Any images that would usually be a background image on a website will need to be foreground images in HTML email and will initially be blocked in a large number of email clients.
  3. Use solid background colours instead of background graphics where possible.