Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the prior video, we saw how HTML email is not a web page sent as an email. Now, let's dig more deeply into how one email can be different when viewed in different email software. Here is one HTML email viewed in several different email software clients: Gmail, Outlook 2003, and Outlook 2010. While they mostly look the same, there are some key visual differences, aren't there? For example, the background is missing and one of these emails.
The key difference between email software is the software they use to display HTML email. The older the software used to display HTML in an email, the more problems you will find when you send email to people with that software. Let's dig a little deeper into the code of an actual HTML email. In this case, we'll use Google Chrome, so that we can view the code. As you can see, here is the text, "Link to web page version." I'll scroll down, so you can see that's the text right there. Push this back up.
This is the sum total of the code for the email in the email software we saw a moment ago. This single table contains this entire plum-colored email. Now, let's look at the code above and below it. You'll notice that almost all of the code around this HTML email, it can be variable. There's no way to predict whether there will be a little code around our HTML email or not.
What are the reasons for the differences in the way that HTML email software renders? HTML email, for one, there are no standards for email display. In addition, services like Gmail must protect themselves from harmful code. It's also the case that some services have to fix broken HTML code in the emails that are sent. Finally, some email software use old rendering software for HTML.
How can you code HTML email that will work across all email software? The answer is to use HTML tables. You wrap HTML tables around your email like nested Russian dolls. You put one HTML table inside of another. For example, with this HTML table, the initial table is 99% wide and nested within it is another table that is the width of the actual email.
And if we were to click down, we would find additional tables that contain all of the content within the email. Using HTML tables protects your email, no matter what happens when your email is displayed with an inferior HTML rendering engine, and no matter what happens with the code that is wrapped around the HTML email you send. We now have a greater understanding about how HTML email is different from web pages, and the challenges we face as we create code and send email, and how to use HTML tables to protect your emails.
In our next video, let's look at how to keep up with the changes in how email is displayed.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 70252 Viewers
80 Video lessons · 127533 Viewers
52 Video lessons · 62449 Viewers
59 Video lessons · 48162 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.