HTML Emails
Net Community
These components are for use specifically and exclusively with Net Community CRM.
Banner
<table border="0" cellpadding="0" cellspacing="0" class="font-reset" style="table-layout:auto;" width="100%">
<tbody>
<tr>
<td align="center" valign="top">
<div>
<h1 style="font-size:16px; margin:0; padding:0px;"><img alt="Image alt text" border="0" src="https://dummyimage.com/650x250/adafaf/fff.png" style="width:100%; display:block; height:auto; margin:0 auto;" /></h1>
</div>
</td>
</tr>
</tbody>
</table>
- There should only be one banner image in each email.
- When sending a series of emails, change the banner image to avoid users thinking they have already received an email.
- A banner image isn't compulsory - if your email is a simple, informational communication, it may not need an image.
When using the online text editor to add or replace an image from the Net Community image library, check the source code afterwards for the img tag:
- to make sure it has not added width and height attributes in pixels
- to add the code
style="width:100%; display:block; height:auto; margin:0 auto;"
These are needed to make the images responsive and resize for mobile devices.
Text block
Text block with full-width image
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. |
<table border="0" cellpadding="0" cellspacing="0" class="font-reset" style="table-layout:auto; background-color:#f3f3f3; text-align:left;" width="100%">
<tbody>
<tr>
<td class="element-pad element-bord" style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;" valign="top"><p style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br />
<br />
<a href="https://youtu.be/juI8-v-_4ao" target="_blank" class="button" style="padding:0; border:0;"><img src="https://dummyimage.com/610x343/adafaf/fff.png" width="100%" alt="Societies video" style="width:100%; display:block; height:auto; margin:0 auto;"></a> <br />
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p></td>
</tr>
</tbody>
</table>
Full-width images can be useful for:
- breaking up text in longer emails
- illustrating separate sections in the content
- linking to a YouTube video (since embedding video is not well supported across email clients)
When using the online text editor to add or replace an image from the Net Community image library, check the source code afterwards for the img tag:
- to make sure it has not added width and height attributes in pixels
- to add the code
style="width:100%; display:block; height:auto; margin:0 auto;"
These are needed to make the images responsive and resize for mobile devices.
If the image is a link, check the a tag includes the code style="padding:0; border:0; text-decoration:none;". This will prevent email / webmail clients adding a blue underline or border.
If the image is not a link, remove the opening a and closing /a tags altogether.
Table with text & images/icons
|
|
<!-- start example 1 -->
<table cellpadding="0" cellspacing="0" class="font-reset" width="100%" border="0" style="table-layout:auto; background-color:#f3f3f3; text-align:left;">
<tbody>
<tr>
<td valign="top" align="center" class="element-pad element-bord"><div>
<table width="98%" border="0" cellspacing="0" cellpadding="5" style="margin:0 0 10px 0; border-bottom:1px solid #ccc;">
<tr>
<td width="25%"><a href="http://www.brookes.ac.uk/#1" target="_blank"><img src="https://static.brookes.ac.uk/email/dh-images/icon-basketball.gif" width="100%" alt="Basketball icon" style="width:100%; display:block; height:auto; border:0;"></a></td>
<td width="75%"><p style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus. <a href="http://www.brookes.ac.uk/#1" target="_blank" style="color:#d10373 !important; text-decoration:none;">Donec quam felis »</a></p></td>
</tr>
</table>
<table width="98%" border="0" cellspacing="0" cellpadding="5" style="margin:0 0 10px 0; border-bottom:1px solid #ccc;">
<tr>
<td width="75%"><p style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus. <a href="http://www.brookes.ac.uk/#2" target="_blank" style="color:#d10373 !important; text-decoration:none;">Donec quam felis »</a></p></td>
<td width="25%"><a href="http://www.brookes.ac.uk/#2" target="_blank"><img src="https://static.brookes.ac.uk/email/dh-images/icon-basketball.gif" width="100%" alt="Basketball icon" style="width:100%; display:block; height:auto; border:0;"></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<!-- end example 1 -->
<!-- start example 2 -->
<table cellpadding="0" cellspacing="0" class="font-reset" width="100%" border="0" style="table-layout:auto; background-color:#f3f3f3; text-align:left;">
<tbody>
<tr>
<td valign="top" align="center" class="element-pad element-bord"><div>
<table width="98%" border="0" cellspacing="0" cellpadding="5" style="margin:0 0 10px 0;">
<tbody>
<tr>
<td width="75%"><h2 style="font-size:18px; font-weight:bold; margin:10px; text-align:left;">Sub-heading 1</h2>
<p style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p></td>
<td width="25%"><img src="http://static.brookes.ac.uk/email/dh-images/icon-courses.gif" width="100%" alt="Courses"></td>
</tr>
</tbody>
</table>
<table width="98%" border="0" cellspacing="0" cellpadding="5" style="margin:0 0 10px 0;">
<tbody>
<tr>
<td width="75%"><h2 style="font-size:18px; font-weight:bold; margin:10px; text-align:left;">Sub-heading 2</h2>
<p style="padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px; margin:0px; line-height:150%; text-align:left;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p></td>
<td width="25%"><img src="http://static.brookes.ac.uk/email/dh-images/icon-accommodation.gif" width="100%" alt="Accommodation"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!-- end example 2 --> Keep icons or images small, and all the same size and aspect ration (e.g. 150 x 150 pixels).
For best results across different device / screen sizes, keep text to between 70 and 140 characters, preferably similar for each row.
Variations
- Rows of icons can be alternately left- and right-aligned, or rows can all be aligned the same.
- Images and text can be links.
- Text can include sub-headings.
- Rows can be spearated by a line border.
For any other table layout options, contact the Web Team.
- The table and images are designed to resize for mobile devices / screens but not to change layout, so be aware the images may display quite small.
-
When using the online text editor to add or replace an image from the Net Community image library, check the
imgtag:- to make sure it has not added width and height attributes in pixels
- to add the code
style="width:100%; display:block; height:auto; margin:0 auto;"
- If you want the image to be a link as well as the text, you will need to add it in both places.
- If the image is a link, check the
atag includes the codestyle="padding:0; border:0; text-decoration:none;"to prevent email / webmail clients adding a blue underline or border. If the image is not a link, remove the openingaand closing/atags altogether.
Button
Buttons can either be centred or left-aligned by setting margin:0 auto; or margin:0 10px; on the outer table containing them.
Pull quote
Images side by side
 |
|
|
|
|
<table width="98%" border="0" cellspacing="0" cellpadding="5px" style="margin:0 auto; text-align:center;">
<tbody>
<tr>
<td width="33%"><img src="https://static.brookes.ac.uk/email/dh-images/yt-societies.jpg" width="100%" alt="Societies video" style="width:100%; display:block; height:auto; margin:0 auto;"></td>
<td width="33%"><img src="https://static.brookes.ac.uk/email/dh-images/yt-societies.jpg" width="100%" alt="Societies video" style="width:100%; display:block; height:auto; margin:0 auto;"></td>
<td width="33%"><img src="https://static.brookes.ac.uk/email/dh-images/yt-societies.jpg" width="100%" alt="Societies video" style="width:100%; display:block; height:auto; margin:0 auto;"></td>
</tr>
</tbody>
</table>
<table width="98%" border="0" cellspacing="0" cellpadding="5px" style="margin:0 auto; text-align:center;">
<tbody>
<tr>
<td width="50%"><img src="https://static.brookes.ac.uk/email/dh-images/yt-societies.jpg" width="100%" alt="Societies video" style="width:100%; display:block; height:auto; margin:0 auto;"></td>
<td width="50%"><img src="https://static.brookes.ac.uk/email/dh-images/yt-societies.jpg" width="100%" alt="Societies video" style="width:100%; display:block; height:auto; margin:0 auto;"></td>
</tr>
</tbody>
</table>Note: only use these options if you absolutely have to add multiple images. For preference add fewer but larger images, to keep the content simpler and more engaging.
These images will still display side by side on mobile devices - the layout is not responsive.
When using the online text editor to add or replace an image from the Net Community image library, check the source code afterwards:
- to make sure it has not added width and height attributes in pixels
- to add the code
style="width:100%; display:block; height:auto; margin:0 auto;"
These are needed to make the images responsive and resize for mobile devices.
Icons
This is the full current range of icons designed and uploaded to Net Community. If you need others, please contact the Web Team.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
<img alt="Acommodation" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-accommodation.gif" />
<img alt="Basketball" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-basketball.gif" />
<img alt="Books" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-book.gif" />
<img alt="Briefcase" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-briefcase.gif" />
<img alt="Brookes Bus logo" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-brookesbus-logo.gif" />
<img alt="Bus" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-bus.gif" />
<img alt="Car" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-car.gif" />
<img alt="Careers" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-careers.gif" />
<img alt="Courses" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-courses.gif" />
<img alt="CV" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-cv.gif" />
<img alt="Funding" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-funding.gif" />
<img alt="Hockey" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-hockey.gif" />
<img alt="Information" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-info.gif" />
<img alt="John Henry Brookes Building" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-jhbb.gif" />
<img alt="Netball" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-netball.gif" />
<img alt="Notebook" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-notebook.gif" />
<img alt="Notepad" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-notepad.gif" />
<img alt="Order a prospectus" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-order-prospectus.gif" />
<img alt="Oxford" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-oxford.gif" />
<img alt="Pencil" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-pencil-square.gif" />
<img alt="Rosette" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-rosette.gif" />
<img alt="Rowing" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-rowing.gif" />
<img alt="Rugby ball" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-rugby.gif" />
<img alt="Rugby ball" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-rugby2.gif" />
<img alt="Smiley" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-smiley.gif" />
<img alt="Student life" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-studentlife.gif" />
<img alt="Teaching Fellowship" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-teachingfellowship.gif" />
<img alt="Thought bubble" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-thought-bubble.gif" />
<img alt="Thought bubble" src="https://dhstudentcrm.s3.amazonaws.com/images/est_1073/Icons/icon-thought-bubble-outline.gif" />
This is the full current range of icons designed and uploaded to Net Community. If you need others, please contact the Web Team.
These icons are already uploaded to Net Community, so you can use the online text editor to add them from the Net Community image library, from a folder called "Icons".
Alternatively, you can copy and paste the code directly from here.
If you upload the from the image library, you will need to add the alt text yourself. Alt text is needed to describe the image contents if a user's email is set to not display images by default.
Note: these icons have a transparent background. Google Mail copies email images to it's own servers, compressing them to a lower quality. Using a transparent background means there is no discrepency in colour between images and HTML / CSS colours.
Social media icons
Recruitment emails currently promote four social channels: Snapchat, Instagram, Twitter and Facebook.
A wider range is available, should specific email campaigns require them.
|
|
<table cellpadding="0" border="0" cellspacing="0" align="center" width="100%" data-title="Social links" style="background-color:#fff; table-layout:auto; text-align:center;">
<tbody>
<tr>
<td valign="top" class="element-pad element-bord"><div>
<table cellpadding="0" cellspacing="0" align="center" class="align-center" style="table-layout:auto; text-align:center;">
<tbody>
<tr>
<td style="text-align:center; padding-top:10px;padding-right:10px;padding-bottom:0;padding-left:0px;">
<!-- Snapchat -->
<a href="https://www.snapchat.com/add/oxfordbrookes/" target="_blank"><img src="https://static.brookes.ac.uk/email/icon-snapchat-white.png" border="0" title="Add us on Snapchat"></a>
<!-- Instagram -->
<a href="https://instagram.com/oxfordbrookes/" target="_blank"><img alt="Instagram icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-instagram-white.png" border="0" title="Follow us on Instagram" /></a>
<!-- Twitter -->
<a href="http://www.twitter.com/oxford_brookes" target="_blank"><img alt="Twitter icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-twitter-white.png" border="0" title="Follow us on Twitter" /></a>
<!-- Facebook -->
<a href="http://www.facebook.com/oxfordbrookes" target="_blank"><img alt="Facebook icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-facebook-white.png" border="0" title="Find us on Facebook" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" border="0" cellspacing="0" align="center" width="100%" data-title="Social links" style="background-color:#fff; table-layout:auto; text-align:center;">
<tbody>
<tr>
<td valign="top" class="element-pad element-bord"><div>
<table cellpadding="0" cellspacing="0" align="center" class="align-center" style="table-layout:auto; text-align:center;">
<tbody>
<tr>
<td style="text-align:center; padding-top:10px;padding-right:10px;padding-bottom:0;padding-left:0px;">
<!-- Snapchat -->
<a href="https://www.snapchat.com/add/oxfordbrookes/" target="_blank"><img src="https://static.brookes.ac.uk/email/icon-snapchat-white.png" border="0" title="Add us on Snapchat"></a>
<!-- Instagram -->
<a href="https://instagram.com/oxfordbrookes/" target="_blank"><img alt="Instagram icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-instagram-white.png" border="0" title="Follow us on Instagram" /></a>
<!-- Twitter -->
<a href="http://www.twitter.com/oxford_brookes" target="_blank"><img alt="Twitter icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-twitter-white.png" border="0" title="Follow us on Twitter" /></a>
<!-- Facebook -->
<a href="http://www.facebook.com/oxfordbrookes" target="_blank"><img alt="Facebook icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-facebook-white.png" border="0" title="Find us on Facebook" /></a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/edu/school?id=12621&oxfordbrookes" target="_blank"><img alt="LinkedIn icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-linkedin-white.png" border="0" title="Find us on LinkedIn" /></a>
<!-- YouTube -->
<a href="http://www.youtube.com/oxfordbrookes" target="_blank"><img alt="YouTube icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-youtube-white.png" border="0" title="Find us on YouTube" /></a>
<!-- Flickr -->
<a href="http://www.flickr.com/photos/40003115@N05/" target="_blank"><img alt="Flickr icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-flickr-white.png" border="0" title="Find us on Flickr" /></a>
<!-- Pinterest -->
<a href="http://www.pinterest.com/oxfordbrookes/oxford-brookes-university/" target="_blank"><img alt="Pinterest icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-pinterest-white.png" border="0" title="Find us on Pinterest" /></a>
<!-- Google+ -->
<a href="http://plus.google.com/+oxfordbrookes" target="_blank"><img alt="Google+ icon" src="https://dhstudentcrm.s3-eu-west-1.amazonaws.com/images/est_1073/TPLEmails/TID215/icon-googleplus-white.png" border="0" title="Find us on Google+" /></a>
<!-- Weibo -->
<a href="http://www.weibo.com/OxfordBrookesUni" target="_blank"><img alt="Weibo icon" src="https://static.brookes.ac.uk/email/icon-weibo-white.png" border="0" title="Find us on Weibo" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>Note: only add additional social media channels if specifically required by a campaign for a target audience.
Social media links are contained in the email footer, which is part of the email template.
If you need to add or replace social media icons, the template code will need editing, and Net Community will need to update the templates used by your campaign.