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. If you require an icon that is not listed, please let us know and we can create it for you.
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 (recommended) or Kompozer (free) 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.
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 to ensure your email is styled consistently across email clients.
- Do not use web fonts as they are not widely supported.
- Use absolute links to embed graphics, i.e. full URL, including the http:// prefix. This means images must be uploaded to a web server, and not inserted from your computer.
- Include alt text that makes sense for all images, as most email clients will not display 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.
- Aim for a minimum of 500 text characters to ensure that your email is not blocked by spam filters.
- Do think about contrast between text colours and background colours - email need to be just as accessible as web pages.
- Do think about the audience you are creating the email for - think about the email strategy, what goals the email is meant to achieve, what you want the receiver to feel or be driven to do, etc.
- 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. E.g. Email on Acid.
- 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 as they may not be supported by an email client or cause your email to be flagged as spam/suspicious.
- Do not use background images.
- Do not use CSS that doesn't work, such as float.
- Do not use <div> to layout your email.
- 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 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 - the more traffic to you site, the better!
- Do not justify text, and try to limit the use of centred text, as this can make it difficult for people to read, especially those with visual and cognitive impairments.
- Do not spam your mailing list.
- Do not send large email campaigns using your desktop client, i.e. Outlook, as this will break the email code. Instead use an email campaign service. E.g. Mailchimp.
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">.
- Include role="presentation" in the table tag to improve the
- 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.
Text & links
- When using symbols or special characters, use their HTML entity names, e.g. – & ©.
- When creating links ensure there are styles to make the text University blue, i.e. <a href="http://www.anu.edu.au/" style="color:#00549E;"><span style="color:#00549E;">
- Font size should be no smaller than 14px, with 16px ideally used for body content.
- When using a call-to-action, it should be large, clear, and ideally placed at the top of the email.
- 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.
- Favour margins over padding for spacing, as padding is sometimes stripped out 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.
- 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
- When linking to documents, include the file type and size in the link text, e.g. example document (PDF, 65KB)
- 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 an email management system. 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. You can also contact us to check that your email meets University brand.