To understand email design, you need to understand the end user’s viewing experience. Many designers think that web pages and emails are built the same way because they both rely on HTML and CSS, but current web standards don’t work in the world of email. Email applications, or clients, do not use the same standards as web browsers. They provide limited support for HTML and CSS in outdated and inconsistent ways. Semantic elements — like section, header, footer, headings and paragraph tags — and external CSS don’t exist in email. Everything must be built in tables nested within other tables and styles are applied inline.
Web pages are usually viewed in about 10 common browsers, which share similar modern standards for supporting HTML and CSS. Email is viewed in a wider number of clients, which use a rendering engine to display the content of the message. Control over how your email is viewed by every client on every device can sometimes be tricky. For example, the SubscriberMail® Inbox Experience displays more than 40 different ways your recipient might view the email you send.
Also, not all declarations work across all browsers. A background-image will not work in Yahoo® Mail, Gmail™ and AOL®, and rarely will it display in any Outlook® program or Lotus Notes®. Outlook holds a large percentage of market-share with email recipients, but has little support for CSS properties like display, float, width, height, margin and padding.
Responsive design is an elegant way to display web content across devices. Unfortunately, the code that makes this possible is not universally supported across all email clients. Responsive design relies on CSS media queries to conditionally change table, font or image sizes or even hide content from one device to another, but Gmail is known for stripping out the head section of an email and all the media queries within it.
The current trend is mobile-friendly or scalable design. This type of design works well across desktop and mobile devices by using a method called mobile-first. No media queries are used to adjust the design or elements between devices. Mobile-friendly designs are generally one column, less than 600 pixels wide, use larger fonts for better legibility on a small screen and include extra space around buttons and links for easier clickability.
You can also use the tried and true fixed-width or static design. This type of design will simply shrink itself to fit the screen on which it is being viewed. This means that images set to 600 pixels wide will be viewed at about 50 percent on a mobile phone and all fonts and images will reduce size proportionately as well.