Email & Header

Emails are a common method of communication for both internal and external use. Guidelines for ensuring that emails are consistent with our brand guidelines are below.

Subject line

The best email subject lines are short, descriptive and provide the reader with a reason to explore your message further. Splashy phrases more often cause your email to be ignored rather than make them stand out.

Further tips and tricks can be found at: http://kb.mailchimp.com/campaigns/previews-and-tests/best-practices-for-email-subject-lines.

Header image

In keeping with our brand guidelines, email header images should not be changed or personalized with your particular header (e.g., for a project, initiative or team name). Instead, use a blank version of the “Simple Email Header” shown below and insert a short header line in your subject line as described above instead of in the image.

Also, please note that often images are blocked depending on the settings of Outlook. (You will only see a white area with a small red cross.) So, any text displayed in an image may not be seen.

Email banners featuring a personal portrait and the “A message from…” text are reserved for use only by the CEO and Senior Leadership Team members.

Simple Email Header

As an alternative, one of the following jpegs may be inserted at the beginning of an email to act as a header.

Xylem_Email_Header1

Xylem_Email_Header1.jpg

Xylem_Email_Header2

Xylem_Email_Header2.jpg

Type hierarchy

When creating emails, maintain a strong type hierarchy and keep formatting clean and simple to allow for easy reading and navigation. The key content of your message should be placed “above the fold.” That is to say, at the top of the email, within the area first visible without scrolling. The font used for your email should be Arial.

Headlines

Headlines should be the largest-sized text on the page.

Introductory text

Text that immediately follows headlines generally should be sized smaller than headlines, but larger than body text to allow for a quick, easy read.

Paragraph headings

Paragraph headings should be Medium or Bold, using core colors or the same color as body text.

Body text

Body text should be set in Arial Regular in Xylem Gray. Use color or bold treatments sparingly and only to attract attention to key points. When there is concern over the legibility of Xylem Gray, use black.

Use of images or graphic elements

Avoid excessive use of imagery or graphic elements. When images are necessary, be sure to adhere to the following guidelines and refer to the samples provided.

  • Most email communications should be text only. Imagery should be used only in certain categories where it is important to engage the reader visually (e.g., HR Benefits and Wellness programs or Xylem Watermark initiatives).
  • Make sure any imagery used is in line with our corporate photographic style described on this site.
  • Place images that extend the full width of the email either at the top of the message as a compelling introduction, or at the bottom of the message as a sign off. Smaller images should be placed in a column on the right side of the message. For best readability, the right-side column should not be greater than 30-40% of the total width of the message. Some examples are provided below.
  • The width of your email should not exceed 600 pixels.
  • Make sure to add “ALT tags” behind images to provide a clear text alternative for any image that does not load.
  • Keep image file sizes under 45 kB to ensure quick loading and conserve internal server space.
  • Save images using the RGB color space at 72dpi in JPG or PNG format.
  • Animation should be used sparingly, as it can be a distraction to the message and increase the file size.

Using the HTML Email Template

Creating an HTML-formatted email can be a complicated process. Due to the many variables involved, including computer platforms, email applications and personal preference settings, creating a graphic based email message that appears consistent and attractive on all computers is challenging.

The template below requires:

  • Working knowledge of HTML.
  • A text editor.
  • A webserver to host and archive the HTML and supporting image files.
  • An email application, or web browser that allows you to send HTML formatted email.

This template is designed for the user to edit the raw HTML source code. If you are unfamiliar with HTML, it is recommended that you work with a dedicated mail service (such as MailChimp or Constant Contact) or an experienced web developer who can help you edit the template, post the files to a server and send out the formatted messages.

View Template »

EXAMPLE 1

Example1_FullWidth_rev

EXAMPLE 2

Example2_columns_rev

Rev: 03-10-2015