Email vs Website – Design Constraints

Published by

What's The Difference Between Email and Website | Emailcenter

I’ve been posed this question a lot. You view both websites and emails on your computer, so surely they must be the same, right? Oh no, not at all! That’s like saying a Great Dane is identical to a Chihuahua, both dogs but completely different.

Email and websites share the same technologies, such as HTML and CSS and are built in the same way. However, their functions and viewings are different entirely. This means that they can not show all the same things and only certain areas overlap.

Why are there constraints?

The main reason for the constraint is how you are viewing the content. With websites you have a handful of browsers to view the content on such as Firefox, Chrome and Safari. Despite a few differences, these browsers all support HTML and CSS very well. Web code is also well supported, so you can pretty much do what ever you want.

Emails are read on a huge variety of email applications and clients, and each has its own quirks in what they can and can’t accept. In fact, this is why we offer Litmus testing in Maxemail. This tool allows you to test and preview your emails with over 40 email clients to make sure your design is received in the best possible way.

Most email clients can’t embed video content like you would do using a browser. Most will simply strip the code from your email. To get around it, you can use a placement still image of your video with a play button on it, linking to the video externally. Or alternatively you can use a GIF within your email content.

Many coding elements are not supported by some email clients, such as @fontface (code used to show a unique font) which only works on iPhone ios7 and Apple Mail. It does not work in other email clients, such as Outlook, Yahoo! Mail, Google Mail etc. This means you’re constrained to using websafe text in email.

What are the constraints?

To better illustrate the differences between website and email, I’ve created the table below:

Email and Website Design Constraints | Emailcenter

About Nicola Lush

UX/ UI and Graphic Designer at Emailcenter.


Design & Content