Faculty and Professional staff may load this template for requests sent to the Mass Mailing team, or modify the code for their own use at Drexel. Request the raw code file (.html) by sending an email to mailreq@drexel.edu.

Note: This guide assumes that you have a basic understanding of Hyper Text Markup Language (HTML). If you are new to HTML, you might find this external resource helpful.

Please also note that these tips might change, depending on independent updates made to the various email clients and apps in use.

If you have formatting questions or concerns, contact the Mass Mailing team.

Drexel Identity Guidelines

The email template uses colors and logos as defined by the Identity Guidelines maintained by the Office of University Communications. If you plan the modify the header of the email template, Drexel IT recommends that you review these guidelines, and use the appropriate wordmarks and logos (more on the formatting of those below).

Template Organization

Style and Format

Templates are organized with tables, not divs.

When loading a template with content, save a copy under another name so you don't overwrite your clean template.

This template uses CSS styles, media queries, and conditional code to achieve compatibility and responsiveness across current email clients and apps. To modify table sizes, font and font size, text color, and similar global attributes, make your changes in the stylesheet rather than in the body except in cases where inline coding is necessary (such as for list styles).

This template includes styles for h1, h2, and h3 headers, as well as paragraph styles. Further levels will need to be defined in the CSS.

Some styles, such as bulleted lists and data tables, must use inline styles. Refer below or to the template for examples. Otherwise, the style will reset to the recipient's email client default.

Optional Elements and Markers

Optional elements are marked in the raw code and can be removed (Note: Remove the entire chunk of code from the start marker to the end marker to ensure leftover formatting is removed from the layout--deleting the image from design view in a WYSIWYG editor might not remove all of the code). Examples include the banner image, and individual title in the yellow bar under the wordmark.

Note: When removing or modifying elements of this template, be sure to check the code as well as the design view. Removing an element from a design view sometimes still leaves scrap code behind that can change spacing or formatting in the template. Keep your code clean!

Loading the Template

Banner Image

The template includes optional code for a banner image sized at 630px or smaller. This code includes a class="hide" attribute to hide it on small screen sizes, so it's good practice to ensure your images don't include critical information that isn't repeated in the text itself.

A centered image smaller than 630px wide can be used in this space, but any image larger than 630px wide will distort the width of the entire email. If you need larger images, you might need to adjust fixed width attributes in the inline code for tables and in the CSS.

Text in Body

You may copy and paste text from MS Word into the template. Pasting directly into the code between the <p>text</p> tags (or <h1>text</h1> tags for headers) will paste plain text. Pasting text into a WYSIWYG editor such as Dreamweaver from MS Word will sometimes format properly but might require some code cleanup.

Bulleted list styles are defined inline in this template. An example is included in the template, but any additional lists will need to have the inline style copied into the <ol> or <ul> tag. For example:

<ul style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:150%;">
<li>Some List Items</li>
<li>Some List items</li>
<li>Some List items</li>
</ul>

Other inline styles include font size and color, which can be added around the text using <span style=" "></span> tags. Putting styles in the paragraph tag will not work, as the CSS styles defined for paragraphs will overwrite it from the stylesheet.

Tables in Body

Refer to the template for an example of data table formatting. Tables in the message body require slews of inline styles for responsiveness. The addition of rows, columns, or cells will need to be manually coded. Leave the table width at 100% to help with responsiveness. Text can be pasted into the cells, and the inline styles modified as needed.

Images in Body

All images used in HTML email should be hosted, not attached. This means loading images into Sitecore and building the image's full URL for placement in the template, or uploading and obtaining the full URL from another image hosting service (Facebook, Flickr, etc.). For example, hosted image code looks like:

<img src="http://drexel.edu/~/media/Images/it/ext/mailtemplates/headers/duit2.png" />

Local, unhosted image code looks like this:

<img src="file:///C|/Users/abc123/Desktop/example.jpg" />

Local images will break when the email is sent. Use hosted images.

Image formatting can be tricky in responsive design. Some email clients don't respect floats or margins (MS Outlook). Thus, some code wizardry might be necessary for image alignment and padding.

Method 1: Use Photoshop or another image editing application to build white space onto the image itself. The benefit of this method is that you don't have to code margins and can insert the image directly into the message body with your desired alignment (e.g. align="left" inside the <img> tag).

Method 2: Stuff the image into a single-celled table. Add cell-spacing (10-20px is sufficient), size the table to the image's width or less, add class="hide" to the <table> tag to hide the whole image-containing table on mobile devices. Align the table left, center, or right, as desired for text wrapping.

It is good practice to include alt text for your image.

Note: Recent updates to Outlook have caused images with width and height attributes designated in the code to distort on some devices. The current workaround is to size images appropriately before hosting them, then removing the height and width attributes in the code.

Footer

If you are loading the template for the Mass Mailing team to send on your behalf, then the team will fill in the appropriate footer information. If you are sending the message yourself, no footer text is necessary from our end.