[?mellow guitar music?]

Think Vitamin Membership - Est. 2020 membership.thinkvitamin.com

Design: HTML E-mail - Design Techniques: Part 1 with Nick Pettit

If you've never designed an HTML email, you might assume

that it's exactly like designing a webpage.

However, it turns out that there is a lot more to it than just that.

Over the next several videos, I'll show you how to design and code HTML emails.

Email is an interesting communication and marketing medium, and often times

your favorite brands will send you newsletters and important updates,

and friend notifications, and even more stuff.

Most of the time, emails that you send around to your friends and family

use rich text, or even plain text.

Most email clients, like Apple Mail, Gmail, Outlook, and others

support the use of HTML and CSS, although not in the same capacity

that you see on the web.

Very few email clients feature strong standard support.

Most email clients, especially those on mobile phones,

force you to code like it's 1997.

We'll talk more about this when we get into coding.

When designing HTML emails, the catch that will impact your design the most

is the fact that images may not always be enabled.

We were just looking at an HTML email in Apple Mail,

but this is what the same email looks like in Gmail with images disabled.

Images are off by default in Gmail, along with older versions of Outlook

and many other email clients.

There's no way for the sender to force images to be enabled,

so you're at the mercy of the email client and the person reading the email.

The receiver could choose to enable images,

but there's no way to guarantee that they will.

In fact, if you don't catch their attention and look like a legitimate sender,

they might delete your email without even seeing the images.

This is the biggest challenge when designing HTML emails.

You can never assume that images will be enabled, so you have to design your emails

to look good when images are present and for when they are not.

Fortunately, if images are disabled, there are several techniques you can use

to make your emails look more presentable.

First, make sure that it's clear to the user

that there are indeed images that they're missing out on.

You might do this by including a text link

so that they can view the email in the browser.

In this case, a friendly message says,

"To enjoy this email fully, please enable images."

This text is hidden as the alternate text of an image.

In other words, users will only see this message if images are disabled.

Secondly, if you must use images, you should make sure you include

an alt attribute with meaningful text.

Like I said, if images are disabled, the alt text will be displayed instead.

In the case of the logo in the upper right, the image across the middle,

and the image in the footer,

alt text is used in places where there's actual text in the image.

This is also good for the sake of accessibility,

so that people using screen readers can still get all the text in an email.

Next, you should make use of text whenever possible.

Don't use images for important information, links, and calls to action.

You can see here that the title text, the body of the email, and all the links

and the contact information on the side are all displayed as text.

Even without images, all the links and information are still present.

By now, you may have noticed that the stars next to the text

appear to be images--a neat trick being employed here is the use of HTML entities.

The stars are actually special characters, or "glyphs" that can be displayed using HTML,

and in this case, a red color has been applied to them.

There are many other glyphs you can use, and when we get to coding later on,

I'll show you how to do this.

FInally, if you have to make heavy use of images, it's best to split them up

into a bunch of smaller images interspersed with text,

like you see here, rather than combining them all into one giant image.

Coding HTML emails can be tricky, so it might be tempting

to just lump all the images and text into a big image and call it a day.

This is a risky proposition, though, because this is actually a tactic that spammers use.

Most email filters look for keywords in text to identify spam,

so spammers started sending emails that were filled with single giant images

and no text.

Of course, spam filters have caught on to this tactic as well,

so if you lump all of your content into one image, not only will the receiver

not see any of your content if images are disabled, you also run the risk

of your email being thrown into the junk folder.

By now, you should know to be careful when using images in your HTML emails.

In the next video, we'll take a look at several more design techniques

and constraints to be aware of.

[?mellow guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com