Email vs. Web Design: Why Is It So Different?

If you’re a seasoned email designer, I’m sure you remember that first time you coded an email from scratch. I am also quite sure you were shocked when you tested that email the first time only to find out it broke in almost every email client. I know I was.

If you haven’t coded your first email yet, and if you think email design is coded the same as web design, you may be in for a rude awakening.

Spoiler alert! It isn’t.

In fact, we are still coding like it is the early 2000s for email — and that is actually an improvement. We used to code like it was 1999, but now we can use CSS inline and internal style sheets.

Why is there such a big gap between email and web design?

The simplest answer is standards. Web design has them and email design doesn’t.

Back in the early 2000s, browser developers started to conform to the web standards that were being created by groups like the Web Standards Project and W3 to bring:

“…standards that reduce the cost and complexity of development while increasing
the accessibility and long-term viability of any site published on the Web.”

– Web Standards Project

Those standards would help ensure a consistent and functional experience for web users, a consistent and uniform coding process for developers, and in turn an affordable platform for businesses. That just was not possible when each browser was implementing and/or supporting its own version of HTML. (Does this sound familiar with email?)

Today, experience and support are fairly consistent across browsers, and the only real delay in supporting new web standards is the time to implement the additions.

Email still doesn’t benefit from those standards. Even now, designing email is like the web design of 1999, with multiple coding bases, varied support, no standards, limited consistency, and a great many coding hacks to get a single email to look the same across a large number of email clients.

And yes, Microsoft is one of the worst when it comes to implementing and conforming to email standards. In 2007 Microsoft stopped using its own browser, Internet Explorer, to render HTML email from Outlook. Instead, Outlook now uses Microsoft Word to render all HTML for emails and, as one would expect, that doesn’t work well.

With the call for mobile design and the need for accessibility in email, we are finally starting to see some email clients conform to web standards.

What are the major differences?

Below are a few of the major differences between email and browsers when it comes to supporting different types of functionality:

What can we do?

Spread the word! Just like Web Standards Project, the web standards group, there is a group called Email Standards Project that is fighting for email standards. It is a community-supported group that works with email client developers and the design community to setup and create standards for use in email clients. Litmus is another group that is continually pushing for standards and working with developers (including Microsoft).

Find other groups that talk directly to the email client designers because they are finally starting to listen. Blog or write about the need for standards. Contribute to the need by educating others and provide information on rendering to groups like Email Standards Project and Litmus.

Check out the following resources for more information:

• Why Web Standards Matter for Email
• What you can do
• Litmus + Microsoft Partnership

Having issues with your code?

Always remember: Google is a coder’s best friend. Google the issue you are having and specify the email client. There is a ton of information, tips, tricks, hacks, and fixes (not to mention templates and tutorials) available on the web.

Use templates that have already been created as a base because they have already been through the troubleshooting process and will save you a LOT of time. You can find templates on sites like Email on Acid and Litmus for the small cost of your email address.

Check out this blog post for new email coders as well. It is a good read with good tips.

Good luck, everyone! Keep pushing for those standards in any way you can, and remember: Google is your best friend. 😉

Lori Mann is an expert in web and email design and deployment. As a DemandGen Campaign Specialist II, she uses her advanced knowledge of HTML, XHTML, CSS, PHP, and MySql to build and deploy emails, landing pages, forms/smartforms, and microsites in requesters’ Eloqua and Marketo systems. Lori also helps requesters make the most of their marketing programs through sophisticated email template development, script authoring for automated form input, and rigorous quality assurance testing.