html email design guide
DESCRIPTION
HTML Email Design GuideTRANSCRIPT
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
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.
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.
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
RSVPRSVP
FEATURED EVENT
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
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.
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.
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
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.
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
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
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
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.
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. 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 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
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
Action
H2 Headline
EVENT LIST
Event Title0:00PM | LOCATION
Event description—one line only!4WED
Event Title0:00PM | LOCATION
Event description—one line only!15MON
Event Title0:00PM | LOCATION
Event description—one line only!26FRI
RSVP
RSVP
RSVP
Event Title0:00PM | LOCATION
Event description—one line only!15MON
Event Title0:00PM | LOCATION
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]
Firstname LastnameChapter [email protected]
Firstname LastnameChapter [email protected]