How and why email code is different to web code

Both email and web use HTML and CSS to create the content and style. Both HTML and CSS are safe; JavaScript can cause security issues and is unavailable in email, only on the web. Why is it ok on the web and not email?

Think about how a user gets to a website; they may type a URL into the browser or do a search and click on a result. Users are actively going to the website. Email is the other way around; emails get sent to a user.

For someone to be able to do something malicious like install a virus on a user's computer, the user needs to go to that website actively. If the same were possible in email, just opening an email could be dangerous. Email is an open protocol so that anyone can email you. With these restrictions on email code, there is still a risk. Someone can send a link to a malicious website, but the user must still click on it for any danger.

So, if HTML and CSS are safe, why are they much more restricted in email than on the web? The email code goes through an "HTML Sanitizer," which can remove or edit parts of the code. Again, this is to help keep the end users safe. Suppose we think about the example of someone emailing a link to a malicious website. Without any restrictions, they could style that link to be positioned over the whole email client, so when the user clicks the "mark as spam" button, they are actually clicking the dangerous link instead. This is just one example, but many security risks email clients take into account when building these sanitizers.

One of the other significant differences is consistency. If you look across web browsers, they have differences in feature support, but there are few these days. These differences can be much more significant if you look across email clients. This is because each email client builds their own HTML sanitizers based on their research, ideas, and opinions, meaning each one is a little different.

Example

If we were to take a stripped-down email design and code it like we would code a web page, we can see it has several issues when viewed by certain email clients.

Applemail

Applemail has a lot of support for HTML and CSS. The email will look pretty much the same as it would when opened in Safari or any browser.

There is a purple header with the customer.io logo on it. Below is a center-aligned heading, Web code in an HTML email, then a left-aligned paragraph, What does it look like when we try and code in an HTML email, using the code we would normally use on the web? And a large purple CTA link, Learn about email rendering. Under that is a footer section with another customer.io logo and the address. Peaberry Software, Inc., 9450 SW Gemini Dr., Suite 43920, Beaverton, Oregon 97008 © 2012-2023 Peaberry.
Screen shot of an email in Applemail.

Windows Outlook

Windows Outlook has very limited support for HTML and CSS. The email won't look great here.

This is the same email as the Applemail one, but with several visual issues. The content is all still present, but the alignment, sizing, and spacing are all off. The images have blown up and are now full-width. The text is also now going the full width of the screen. The CTA link has lost it's padding and rounded corners.
Screen shot of an email in Windows Outlook.

These issues are fixable, and we’ll go over them through this course.

Back