You've already started watching Design Techniques: Part 1
In this video, you'll learn what to do and what not to do when designing HTML email. In part 1, you'll learn techniques for dealing with e-mail clients that disable images by default.
-
0:00
[?mellow guitar music?]
-
0:03
Think Vitamin Membership - Est. 2020 membership.thinkvitamin.com
-
0:07
Design: HTML E-mail - Design Techniques: Part 1 with Nick Pettit
-
0:13
If you've never designed an HTML email, you might assume
-
0:16
that it's exactly like designing a webpage.
-
0:19
However, it turns out that there is a lot more to it than just that.
-
0:23
Over the next several videos, I'll show you how to design and code HTML emails.
-
0:28
Email is an interesting communication and marketing medium, and often times
-
0:34
your favorite brands will send you newsletters and important updates,
-
0:38
and friend notifications, and even more stuff.
-
0:41
Most of the time, emails that you send around to your friends and family
-
0:46
use rich text, or even plain text.
-
0:49
Most email clients, like Apple Mail, Gmail, Outlook, and others
-
0:54
support the use of HTML and CSS, although not in the same capacity
-
1:00
that you see on the web.
-
1:02
Very few email clients feature strong standard support.
-
1:06
Most email clients, especially those on mobile phones,
-
1:09
force you to code like it's 1997.
-
1:13
We'll talk more about this when we get into coding.
-
1:16
When designing HTML emails, the catch that will impact your design the most
-
1:21
is the fact that images may not always be enabled.
-
1:25
We were just looking at an HTML email in Apple Mail,
-
1:28
but this is what the same email looks like in Gmail with images disabled.
-
1:35
Images are off by default in Gmail, along with older versions of Outlook
-
1:39
and many other email clients.
-
1:41
There's no way for the sender to force images to be enabled,
-
1:46
so you're at the mercy of the email client and the person reading the email.
-
1:51
The receiver could choose to enable images,
-
1:55
but there's no way to guarantee that they will.
-
1:58
In fact, if you don't catch their attention and look like a legitimate sender,
-
2:02
they might delete your email without even seeing the images.
-
2:06
This is the biggest challenge when designing HTML emails.
-
2:10
You can never assume that images will be enabled, so you have to design your emails
-
2:15
to look good when images are present and for when they are not.
-
2:20
Fortunately, if images are disabled, there are several techniques you can use
-
2:25
to make your emails look more presentable.
-
2:28
First, make sure that it's clear to the user
-
2:32
that there are indeed images that they're missing out on.
-
2:34
You might do this by including a text link
-
2:37
so that they can view the email in the browser.
-
2:40
In this case, a friendly message says,
-
2:43
"To enjoy this email fully, please enable images."
-
2:46
This text is hidden as the alternate text of an image.
-
2:51
In other words, users will only see this message if images are disabled.
-
2:56
Secondly, if you must use images, you should make sure you include
-
3:01
an alt attribute with meaningful text.
-
3:04
Like I said, if images are disabled, the alt text will be displayed instead.
-
3:11
In the case of the logo in the upper right, the image across the middle,
-
3:16
and the image in the footer,
-
3:19
alt text is used in places where there's actual text in the image.
-
3:25
This is also good for the sake of accessibility,
-
3:28
so that people using screen readers can still get all the text in an email.
-
3:33
Next, you should make use of text whenever possible.
-
3:37
Don't use images for important information, links, and calls to action.
-
3:42
You can see here that the title text, the body of the email, and all the links
-
3:49
and the contact information on the side are all displayed as text.
-
3:54
Even without images, all the links and information are still present.
-
3:59
By now, you may have noticed that the stars next to the text
-
4:03
appear to be images--a neat trick being employed here is the use of HTML entities.
-
4:11
The stars are actually special characters, or "glyphs" that can be displayed using HTML,
-
4:18
and in this case, a red color has been applied to them.
-
4:22
There are many other glyphs you can use, and when we get to coding later on,
-
4:27
I'll show you how to do this.
-
4:29
FInally, if you have to make heavy use of images, it's best to split them up
-
4:33
into a bunch of smaller images interspersed with text,
-
4:38
like you see here, rather than combining them all into one giant image.
-
4:43
Coding HTML emails can be tricky, so it might be tempting
-
4:48
to just lump all the images and text into a big image and call it a day.
-
4:52
This is a risky proposition, though, because this is actually a tactic that spammers use.
-
4:58
Most email filters look for keywords in text to identify spam,
-
5:03
so spammers started sending emails that were filled with single giant images
-
5:08
and no text.
-
5:10
Of course, spam filters have caught on to this tactic as well,
-
5:14
so if you lump all of your content into one image, not only will the receiver
-
5:19
not see any of your content if images are disabled, you also run the risk
-
5:23
of your email being thrown into the junk folder.
-
5:26
By now, you should know to be careful when using images in your HTML emails.
-
5:31
In the next video, we'll take a look at several more design techniques
-
5:34
and constraints to be aware of.
-
5:37
[?mellow guitar music?]
-
5:39
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
You need to sign up for Treehouse in order to download course files.
Sign up