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