HTML Email Design Guide

HTML EMAIL DESIGN GUIDE

Sa nta Cl ar a Univer sit y T H E J E S U I T U N I V E R S I T Y I N S I L I C O N VA L L E Y

Introduction

The SCU Template System was created to assist the SCU community in the strategic development of university web and print publications and promotional materials in a consistent and effective manner that strengthens the SCU’s branding.

The templates represent graphic parameters and suggestions and a tool to guide you in the creation of your web and print materials.

The system is purposely flexible to allow for individuality and variations within an institutional look. By working within these guidelines, you will help us:

• Be quickly and effectively recognized, understood and appreciated • Represent a range of attributes, promises and expectations across a number of audiences • Communicate the essence of who we are, what we do and how we do it

Relevant Clear Fast Consistent DESIGN GOALS Relevant People value information when it’s relevant to their needs and wants. Send an email only when you have something to say that’s valuable to your audience. Every time you send an email that they open an immediately trash, your brand takes a hit.

Clear The person reading your email may also get email from other Santa Clara University departments. Be straightforward and clear about the source of the email and its purpose.

Fast The modern email inbox is like Grand Central Station. There’s a lot going on, and it’s usually happening very quickly. Keep your messages short and to the point. Make your call to action clear and easy.

Consistent Once you’ve settled on a design for your mail, stick to it.

You may get bored with it after seeing it for a few months, but remeber that your audience has only seen it a few times.

And with communications coming from multiple SCU sources, consistency is even more important.

RED

LIGHT BEIGE

GOLD

DARK BEIGE

CHARCOAL

YELLOW

BACKGROUND COLOR Six background colors are available for HTML email. The color you choose depends on your specific needs: what you want to convey, what colors you already use, what looks good with photos you already have, etc. Once you pick a color, be sure to stick with it!

Some basic examples are shown here, but you’re free to create any kind of masthead that’s appropriate for your email messages.

M ASTHEAD DESIGN Purpose The masthead of an HTML email acts like the cover of a magazine—it lets the reader know where the email is coming from and why they should care.

Name & Tagline The name should be as short as possible. It doesn’t have to be your department or organization, either. Consider naming your email like a magazine: perhaps “Proofs” for the mathamatics department, or “The Score” for athletics.

Also, include a tagline that speaks to the benefit: “The latest advances in SCU math” or “Your SCU sports update”.

Tyopgraphy Typography should be bold and simple, like a magazine logo, and stay within approved university guidelines.

Images & Graphics Use simple, bold images.

Large areas of solid color and blurred areas work well for overlaying type. Remember, the image doesn’t have to tell a story, it’s there to add color and interest and generate a sense of place. Ideally, it relates to something specific on campus.

FEATURED EVENTS

DAY, MONTH 00, 2010 | 00:00PM

FR IDAY, FEBRUARY 23, 2010 | 12:05PM

Title that describes event here

Friday Mass & Lunch with President Engh

LOCATION $00 RSVP

MISSION CHURCH / DONOHOE ALUMNI HOUSE $10 RSVP

Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Cras orci tortor, iaculis id,

adipiscing elit. Cras orci tortor, iaculis id,

lacinia vel, nonummy sit amet, tortor. Ut

lacinia vel, nonummy sit amet, tortor. Ut

non neque. Aliquam erat. Lorem ipsum dolor

non neque. Aliquam erat. Lorem ipsum dolor

sit amet, consectetuer adipiscing elit. Cras

sit amet, consectetuer adipiscing elit. Cras

orci tortor, iaculis id, lacinia vel, nonummy

orci tortor, iaculis id, lacinia vel, nonummy

sit amet, tortor. Ut non neque. Aliquam erat.

sit amet, tortor. Ut non neque. Aliquam erat.

RSVP

RSVP

CONTENT Have a Purpose Why are you sending this email? Are you raising money?

Promoting events?

Announcing important changes? Whatever it is, be clear about why you are sending it and clear about what the reader should do. In the example above, we want readers to come to the event, so the RSVP button is a clear call to action.

Keep it Brief The body of the email can theoretically contain any number of content modules stacked on top of each other.

But just because you can doesn’t mean you should. Try and limit yourself to 3–5 modules per email. Always use only one of each module to maintain the hierarchy of information.

Edit Yourself The design templates are built with the recommended amount of copy already laid out. Sticking to the layout will help keep the message short and direct. Information is flexible! Move information around. Think of a shorter way to say it. Edit out all the uncessary words and phrases.

With practice, copy editing becomes quick and easy.

Use Good Photography Use simple, bold images. Use people when possible. Try to stick with images that have one subject. Remember, the image doesn’t have to tell a story—it captures attention and supports the text.

Single Story Use this or the double story as the lead content. Use the gold title at the top to name a section with multiple stories.

Grouping content in this way gives a sense of context. The article headline links to the story online. Text should not exceed the height of the image. Use only one Single Story module per email.

SECTION TITLE

Single Event Use this or the double event as the lead content. The gold title at the top lets users know the context. Keep the event information as short as possible—the title links to a full description online. Provide an immediate call to action. Use only one Single Event module per email.

FEATURED EVENT

H2 Headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat.

DAY, MONTH 00, 2010 | 00:00PM

Title that describes event here LOCATION $00 RSVP

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat.

RSVP

Double Story Can be also used as the lead content module. Brief headlines are crucial with two next to each other. Use only one Double Story module per email.

SECTION TITLE

H2 Headline

H2 Headline

Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Cras orci tortor, iaculis id,

adipiscing elit. Cras orci tortor, iaculis id,

lacinia vel, nonummy sit amet, tortor. Ut

lacinia vel, nonummy sit amet, tortor. Ut

non neque. Aliquam erat. Lorem ipsum dolor

non neque. Aliquam erat. Lorem ipsum dolor

sit amet, consectetuer adipiscing elit. Cras

sit amet, consectetuer adipiscing elit. Cras

orci tortor, iaculis id, lacinia vel, nonummy

orci tortor, iaculis id, lacinia vel, nonummy

sit amet, tortor. Ut non neque. Aliquam erat.

sit amet, tortor. Ut non neque. Aliquam erat.

Double Event Can be also used as the lead content module. Brief headlines are crucial with two next to each other. Try and keep the descriptive content the same length so the buttons align at the bottom. Use only one Double Event module per email.

FEATURED EVENTS

DAY, MONTH 00, 2010 | 00:00PM

FR IDAY, FEBRUARY 23, 2010 | 12:05PM

Title that describes event here

Friday Mass & Lunch with President Engh

LOCATION $00 RSVP

MISSION CHURCH / DONOHOE ALUMNI HOUSE $10 RSVP

Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Cras orci tortor, iaculis id,

adipiscing elit. Cras orci tortor, iaculis id,

lacinia vel, nonummy sit amet, tortor. Ut

lacinia vel, nonummy sit amet, tortor. Ut

non neque. Aliquam erat. Lorem ipsum dolor

non neque. Aliquam erat. Lorem ipsum dolor

sit amet, consectetuer adipiscing elit. Cras

sit amet, consectetuer adipiscing elit. Cras

orci tortor, iaculis id, lacinia vel, nonummy

orci tortor, iaculis id, lacinia vel, nonummy

sit amet, tortor. Ut non neque. Aliquam erat.

sit amet, tortor. Ut non neque. Aliquam erat.

RSVP

Secondary Story After the lead content modules comes the secondary stories.

Can also be used after an Event List module, but should always be used before plain Text or Triple Story modules.

Stack anywhere from 2–5 stories in this module. Use only one Secondary module per email.

Triple Story Used after secondary stories.

Can be used before or after Text stories. Keep headlines very short. Keep body copy very short and match the number of lines. This content is the equivalent of a “See Also” sidebar in the main site. Use only one Triple Story module per email.

RSVP

SECTION TITLE

H3 Headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat.

H3 Headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat.

H4 HEADLINE

H4 HEADLINE

H4 HEADLINE

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

consectetuer adipiscing elit.

consectetuer adipiscing elit.

Cras orci tortor, iaculis id,

Cras orci tortor, iaculis id,

Cras orci tortor, iaculis id,

lacinia vel, nonummy sit

lacinia vel, nonummy sit

lacinia vel, nonummy sit

amet, tortor. Ut non neque.

amet, tortor. Ut non neque.

amet, tortor. Ut non neque.

Aliquam erat.

Aliquam erat.

Aliquam erat.

Text Story The most basic content without an image. Can be used before or after Triple Story modules. Multiple stories can be stacked in this section—recommended limit is three. Try and group them under a common section title.

Use only one Text Story module per email.

Inset Box Also similar to a “See Also” box in the main site, the Inset Box is used to call attention to a specific piece of content and is usually associated with an action. Use only one Inset Box per email.

Event List Give the event list a headline to call attention and motivate readers. You can stack anywhere from 2–5 events in a module. Keep descriptions to one line—the title links to more information. The Event List module can appear anywhere after the lead content module.

Use only one Event module per email.

SECTION TITLE

H3 Headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor.

Ut non neque. Aliquam erat.

H3 Headline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor.

Ut non neque. Aliquam erat.

INSET H4 HEADLINE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, iaculis id, lacinia vel, nonummy sit amet, tortor. Ut non neque. Aliquam erat.

Action

EVENT LIST

H2 Headline WED

4

MON

15 FRI

26 MON

15 FRI

26

Event Title 0:00PM | LOCATION

RSVP

Event description—one line only!

Event Title 0:00PM | LOCATION

RSVP

Event description—one line only!

Event Title 0:00PM | LOCATION

RSVP

Event description—one line only!

Event Title 0:00PM | LOCATION

RSVP

Event description—one line only!

Event Title 0:00PM | LOCATION

Event description—one line only!

RSVP

Contact This basic contact module is the last content before the footer. It can have anywhere from 1–3 contacts.

QUESTIONS? COMMENTS?

Firstname Lastname Chapter Manager firstlastname@scu.edu 000-000-0000

Firstname Lastname Chapter President firstlastname@scu.edu 000-000-0000

Firstname Lastname Chapter Vice-President firstlastname@scu.edu 000-000-0000