[?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