HTML Emails

StarRez

These patterns are designed to work specifically and exclusively with StarRez.

Note: code must be used as supplied. StarRez only permits the use of specific tags, so any other code may be removed or changed, breaking your email.

Email with banner

Top of page

Email with no banner

Top of page

Brookes Lettings email

Top of page


Content reference

Text

Body copy should be inside p (paragraph) tags:

<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>

Paragraphs can either be coded using separate p tags, or a single p tag containing two br (line break) tags:

<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
<br><br>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

Sub-headings are most easily made by making the relevant text bold using strong tags, and adding a br line break:

<p><strong>Subheading</strong><br>
ltricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

Lists can be coded using ul ('unordered', or bulleted list) or ol ('ordered', or numbered list) tags:

<ul>
<li>list item</li>
<li>list item</li>
<ul>
<ol> <li>list item 1</li> <li>list item 2</li> <ol>

Note: do not add any inline CSS styling to p, ul, ol, li or other HTML tags - StarRez will remove it.


Links

Web pages, email addresses and phone numbers can all be links:

<a href="http://www.brookes.ac.uk/?utm_source=email">web link with tracking code</a>
<a href="mailto:accomm@brookes.ac.uk">accomm@brookes.ac.uk</a>
<a href="tel:+441865484660";>01865 484660</a>

Note: do not add any inline CSS styling to a tags - StarRez will remove it.

Link colours and underlining will appear in the default colours and style for Gmail, Yahoo! Mail etc.


Images

Banners:

  • should resize automatically for desktop and mobile viewing
  • The optimum size to make them to suit all screen sizes is 800 x 250 pixels

Note: when using the online text editor to add or replace an image from the StarRez image library, check the source code afterwards for the img tag:

  1. to make sure it has not added width and height attributes in pixels
  2. to add the code style="style="margin:0 auto" width="100%"

These are needed to make the images responsive. Your code should look like this:

<img src="http://static.brookes.ac.uk/email/starrez/banner-halls-night.jpg" style="margin:0 auto" width="100%">

Icons / thumbnails:

  • should be a fixed size that works for both desktop and mobile viewing
  • The optimum size to make them is 150 x 150 pixels

Your code should look like this:

<img src="http://static.brookes.ac.uk/email/dh-images/icon-courses.gif" width="150px" alt="Courses">

Table with text + images

Top of page