A lot of designers assume that the same web design principles can be carried over to email design – but they cannot be built the same. Since there are so many popular email applications (like gmail or yahoo), each application has its own design and coding paradigms. In the following article, you will learn how email design differs from web design.
Email design is like building a webpage in the 1990’s. Going back to the design principles using tables to stack content to build off one another.
Typical Web Standards Web Design Approach
1. HTML using semantic (paragraph tag, header tag, etc.) elements.
2. Stylize HTML with CSSS, usually via an external stylesheet.
Modern web browsers primarily stick to the above web standards. It becomes an issue when users are using old web browser versions say an old version of IE (on a side note- why are people still using IE8?). Older browsers simply do not have all the features as the new browsers have. As a web designer, it comes to a point where you just need to design for the newer browsers and troubleshoot when an issue arrises for old old browsers.
Unlike web browsers, there are a multitude of email applications that the majority of people use. There are about 40 popular email applications that are widely used today. The issue here is that all of these email applications support different subsets of HTML and CSS. The difference between these applications is sometimes drastic. Then you add in mobile, desktop, and webmail and you have a ton of different principles to design for. The main application that differs from most application is Outlook. Outlook has a considerable amount of email application market share and is the sore thumb for all email designers.
Web designers rely on CSS properties like padding, height, margin, and float to code their web pages. These CSS properties are supported across web browsers and have become a reliable way to build content. Outlook has little to no support for any of the common CSS properties used to build web pages.
Typical Email Standards Design Approach:
1. Tables – Rows, Collumns, & Padding
|Web Principles||Email Principles|
|<div>||<table>, <tr>, <td>|
|<h1>, <h2>, <h3>, etc.||<td> or <span>|
|<link type=”text/css”>||<td style=””>|
|float||multiple table cells and align|
Even though email design varies so much from web design, you can still create dynamic emails, it just takes a different set of principles.