HTML Email Design Guide

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 V A L L E YSanta Clar a University

HTML EMAILDESIGN GUIDE

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

Introduction

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

ward 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.

RelevantClearFastConsistent

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.

RED

GOLD

CHARCOAL

LIGHT BEIGE

DARK BEIGE

YELLOW

MASTHEAD 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.

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.

Title that describesevent here

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

LOCATION$00 RSVP

Friday Mass & Lunch with President Engh


FRIDAY, FEBRUARY 23, 2010 | 12:05PM

MISSION CHURCH / DONOHOE ALUMNI HOUSE$10 RSVP

RSVPRSVPRSVPRSVP

FEATURED EVENTS

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.

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.

H2 HeadlineLorem 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.

SECTION TITLE

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.



DAY, MONTH 00, 2010 | 00:00PM

LOCATION$00 RSVP

RSVPRSVP

FEATURED EVENT


SECTION TITLE


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.

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.



DAY, MONTH 00, 2010 | 00:00PM

LOCATION$00 RSVP

Friday Mass & Lunch with President Engh


FRIDAY, FEBRUARY 23, 2010 | 12:05PM

MISSION CHURCH / DONOHOE ALUMNI HOUSE$10 RSVP

RSVPRSVPRSVPRSVP

FEATURED EVENTS

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

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

SECTION TITLE

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

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


INSET H4 HEADLINE

Action

H2 Headline

EVENT LIST

Event Title0:00PM | LOCATION

Event description—one line only!4WED


Event description—one line only!15MON


Event description—one line only!26FRI

RSVP

RSVP

RSVP


Event description—one line only!15MON


Event description—one line only!26FRI

RSVP

RSVP

Contact

This basic contact module is

the last content before the

footer. It can have anywhere

from 1–3 contacts.

Q U E S T IO N S? C O MME N T S?

Firstname LastnameChapter [email protected]



Date post:	30-Mar-2016
Category:	Documents
Upload:	russ-morris
View:	229 times
Download:	3 times

HTML Email Design Guide

Documents