HTML Emails

Hobsons

These patterns are for use specifically and exclusively with Hobsons CRM.

Templates:

Templates are designed to work as self-contained emails.

Sections:

Sections are designed for emails that Hobsons builds from conditional content.

Components:

Components are optional, and can be included within a template or 'main' section.

Templates

Sample email

Top of page

Reportage email

Top of page


Sections

Header

Top of page

Main

Top of page

Footer

Top of page


Components

Text block

Top of page

Image blocks

Top of page

Button

Buttons can either be centred or left-aligned by setting margin:0 auto; or margin:0 10px; on the outer table containing them.

Top of page

Quote

Top of page

Table with text & icons / thumbnails

Top of page


Content reference

Text styling + CSS

Body copy

Body copy must be marked up within p paragraph tags. To ensure text is displayed and styled correctly and consistently across email / webmail clients, make sure the p tags contain the following inline styling:

<p style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;"/p>
 

Separate paragraphs of text can be coded in two ways:

  1. using separate p tags - in which case, you need to include all the inline styling with each p tag
  2. alternatively, it can be easier to using two line break br/ tags within the same p tag:
<br/><br/>

Headings

If you need to split up the text with subheadings, use h2 headings. Again, make sure the h2 tags contain the following inline styling:

<h2 style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:10px; margin:0; text-align:left !important;"/h2>

If using h2 headings, then text before and after will need it's own p tag, including styling.

Lists

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>

Top of page

Link styling + CSS

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

Web links need target="_blank" to open a browser, and styling:

<a href="#" target="_blank" style="color:#d10373 !important; text-decoration:none;">Link text here</a>

Email links need mailto:, and styling:

<a href="mailto:query@brookes.ac.uk" style="color:#d10373 !important; text-decoration:none;">query@brookes.ac.uk</a>

Phone numbers need tel:, and styling:

<a href="tel:+441865484848" style="color:#d10373 !important; text-decoration:none;">01865 484848</a>

Top of page

Image sizes + CSS

Banners:

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

Images

  • Full-width images: 610 x 343 pixels, to span the full width of the email contents allowing for 20px padding on either side.
  • 2 x images: 309 x 175 px
  • 3 x images: 201 x 114 px
  • 4 x images: 147 x 83 px

Note:when using the online text editor to add or replace any image from the Hobsons image library,check the source code afterwardsfor the img tag:

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

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

<img width="100%" src="https://static.brookes.ac.uk/email/dh-images/student-life1-banner7.jpg" style="width:100%; display:block; height:auto; margin:0 auto;" border="0" alt="More than studying" />

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">

Top of page

Icons

This is the full current range of icons designed and uploaded to Hobsons. If you need others, please contact the Web Team.

Top of page

Social media channels

The full range of University social media channels, should specific email campaigns require them.

Top of page