Web vs. Email Development
ow many web developers out there were around when table-based layouts and inline styling were in vogue? Ask anyone who has been coding before the modern web what it was like and they’ll say that we’ve come a long way. With the proliferation of modern CSS techniques, the adoption of accessibility in design, and a strong focus towards web standards, tables are now used for what they were originally intended for—displaying tabular data.
Unless you’ve been coding HTML since the late 90’s and/or work in a shop that develops emails for clients, you may not have formal experience in coding an HTML email. This is not a guide or a deep dive, but a brief overview of what I found helpful when starting to work with HTML for email.
Doctype
- DOCTYPES are not required for email. Since the information in the <head> tag can be stripped out, a DOCTYPE shouldn’t be defined. In some cases, you can probably leave out the <head> section altogether.
Layout
- Since style sheet support is not consistent from client to client, use tables to achieve your preferred layout. Also, stay away from <div> tags and margins. Layouts that are built around<div>s and margins could yield unfavorable results when you test.
Style Sheets
- While most web developers know that inline styling should be avoided if possible, this doesn’t apply when styling elements in an email. Inline styling is the preferred method for applying CSS properties to your design. While support for style sheets is on the rise, you must still code for the lowest common denominator— the email client that doesn’t support this feature.
- Read more about CSS Support for Email.
Block-Level Elements (<h1>, <h2>, <ul>, <p>)
- While block-level elements are supported in many email clients, it is good to remember that not all clients support style-sheets.
- You may also run into challenges when using padding and margins through various email clients. Since <span> tags have a default margin/padding of zero, this would be a good starting point as an alternative to using block-level elements.
Float
- Previously mentioned, there are emails clients that support the float property. As you’ll likely want to code in a way that achieves the best possible rendering performance in all the major email clients, you should avoid this property. A suitable alternative would be to use nested tables. Using tables, you will achieve better control over your layout, resulting in pixel-perfect email designs.
