HTML emails

When sending email newsletters or invitations on behalf of ANU, our HTML email templates will help you to represent ANU professionally (templates can be downloaded at the end of the page).

Please note that the templates on this page must retain their header (ANU logo) and footer (CRICOS, ABN, unsubscribe link). Any secondary logos must be approved by the Director Marketing.

Additionally, if using social media icons, please ensure social media icons for emails are used. 

Before editing any HTML emails

HTML emails must be edited by someone who knows how to code in HTML, using a web editing package such as Dreamweaver or a plain text editor such as Notepad where you can see and edit the HTML code. Editing the email in an email client such as Outlook or in Word will break the code. HTML email editing is a specialised skill. Marketing Office can provide you with training options and coding advice.

Once the email is complete

Once the email has been completed and is ready to send, we encourage you to contact us to review any changes you have made to these email designs to help ensure the email displays correctly and consistently. We will provide you with feedback within one business day.

Email standards

These standards explain techniques to help ensure that your HTML emails will display as you intend and won't be blocked as spam.

Surprisingly the rules for HTML email are often in direct contradiction to the best practice rules for a webpage. A basic checklist of things to do and not to do will get you started.

To do checklist

  • Use our HTML email templates as a starting point.
  • Use tables for layouts.
  • Use inline CSS for styling.
  • Use absolute links to embed graphics, i.e. full URL, including the http:// prefix.
  • Include alt text that makes sense for all images, as most email clients will remove images by default.
  • Host a local version of your email on your website and provide a link in the email so that recipients can view in a browser window if desired.
  • Keep text in the body of the email concise and compelling.
  • Ensure that the code within the <body> tags is validated by using a validator service.
  • Use an email testing and preview service to test your emails.
  • Include an unsubscribe facility as this is mandatory under the Spam Act 2003. It is a good idea to use a mailing list database to manage your subscribed and unsubscribed recipients.
  • Never have more than a dozen names in the To, CC, or BCC field.

Not to do checklist

  • Do not use an external or embedded stylesheet.
  • Do not use background images.
  • Do not use CSS that doesn't work, such as float.
  • Do not embed video, including YouTube videos, as they will not play within an email. Instead include an image of the video linked to a website where the video can be played.
  • Do not use Rich Media, such as JavaScript or Flash.
  • Do not place important information in images and graphics. Test to make sure that if images are turned off your email still makes sense.
  • Do not include all newsletter content in your email. Give users a story teaser that links to the full story on your website.
  • Do not spam your mailing list.
  • Do not send large email campaigns using your desktop client, i.e. Outlook. Instead use an email campaign service.

Layout & tables

Due to limited support of HTML and CSS by email clients, tables must be used to layout content.

  • Divide content into a grid of rows and columns before coding the table, similar to creating a wireframe for a website.
  • Stick to width of 600-700 px, as this will display in most users' reading panes.
  • To centre the email use a master table with all the content in one cell, e.g. <table width="700" align="center">.
  • Use cellpadding, valign and width attributes to position content.Float will not work consistently.
  • Add style="border-collapse:collapse; table-layout:fixed;" border="0" to make sure there are no unwanted borders on the table and to make the table honour your width statements and sit correctly. Don't use border-collapse:separate.
  • When using table borders each side should clearly specify the line type, width and colour through the use of border-left, border-right, border-top, border-bottom rather than  border:, border-width  etc. This will give greater control and ensure the table borders are correctly displayed in all email clients.
  • colspan does not work well in fixed layout. Instead use nested tables.
  • Nest tables where possible. Aim for four nested levels at most. Most email clients stop rendering nested tables after eight deep.
  • When using symbols or special characters, use their HTML entity names, e.g. &ndash; &amp; &copy;.
  • When creating links ensure there are styles to make the text platinum, i.e. <a href="https://services.anu.edu.au/%3Ca%20href%3D"http://www.anu.edu.au/">http://www.anu.edu.au/" style="color:#4c6e78;"><span style="color:#4c6e78;">

Styles

  • Always use inline styles as email clients tend to strip out or ignore styles which are embedded or external.
  • To ensure styling is consistently applied, style every elements in the email, i.e. all <p> and <td> tags should be styled individually.

Spacing

  • Favour margins over padding for spacing.
  • Avoid margin-top as this tends to be ignored by email clients.
  • Set all padding and margins to zero first to avoid any unwanted spacing appearing through the email.
  • Specify margins and padding in multiple ways to ensure all clients display spacing correctly, e.g.  margin: 0 0 5px 0; margin-bottom:5px;. Even if you are just setting margin:0you will need to explicitly state margin-top;0 as well in order to get the spacing you want on all email clients.

Images

  • Ask yourself 'does this email still make sense without images?' as many email clients will not show images until the recipient requests that they be downloaded.
  • Add alt attributes for each image that is present.
  • Images have to be hosted on your web server to ensure they are viewable by email recipients. Do not insert images directly from your local computer drive.
  • When linking images and documents, always use the absolute URL, e.g. http://www.anu.edu.au/exampleimage.jpg
  • Images should be placed inside <p> tags as a fail-safe for margins.

Testing & sending

Once you are ready to send your email do an initial quick test with your own email client. If you are using Outlook follow these steps:

  1. Create a new blank message, making sure to delete your signature.
  2. Select the 'Insert' tab.
  3. Select the 'Attach file' button, i.e. the paperclip icon.
  4. Select the relevant HTML file. Before pressing 'Insert' use the down arrow on the right of the 'Insert' button and choose 'Insert as Text'. Your HTML email content should then appear with the body of the email.
  5. Add your own email addresses (internal and external) as recipients and send the email.
  6. Review the email received in your different email accounts for layout and test all links.

There are a number of online services that allow you to test in many different online and desktop email clients, as well as generating a preview of what the email will look like for each client. It is highly recommended that you use such a service before the final distribution of your HTML email.

If you have significantly modified the layout in our HTML email templates, we recommend contacting us for a review before you send it out.

 
Page owner: Marketing Office