Designing for email

Email is the worst medium I design for and one of the most important. The constraints make designers complain and the results make clients happy, in roughly equal measure. This is a short post on what I have learned from designing for it more seriously over the last two years.

The constraints first, because they shape everything else. Email is HTML rendered in a hundred different clients with substantially different rules. Outlook on Windows still uses Microsoft Word’s rendering engine for parts of its layout, which dates from 2007. Gmail strips most modern CSS. Apple Mail is fine. Mobile clients are mostly fine. Inboxes do not allow any external resources to load by default for many users, which means web fonts often will not render. The lowest common denominator is roughly an HTML file from 2010.

This sounds bad. In practice it forces clearer design decisions than the open web does. There is no place to hide bad typography behind a clever animation. Either the type works at fallback sizes in a system stack, or it does not.

A few things that have improved my email work specifically.

A genuine fallback type stack. Not “your brand font, then sans-serif”. An actual ordered list of system faces that tries to look like the brand even when nothing else loads. For brands set in modern serifs, my default fallback is Georgia. For modern sans, it is the system sans (system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial). Both work surprisingly well if the size and weight relationships were sized for the fallback in the first place.

Two-column layouts, sparingly. Most newsletters look better as a single column at a generous width, around 600 pixels, regardless of how the brand’s website looks. Email design conventions have aged toward this for good reasons. Resist the urge to recreate the website in a smaller box.

A test pass through Litmus or Email on Acid before any send. There is no substitute. Either tool will catch a Gmail-Apple-Outlook issue your design tool cannot show you.

Read Really Good Emails regularly, the way you might read magazine archives. The volume is enormous and the quality is high. Most of the best newsletter design has been sitting in their archive for years.

The thing nobody warns you about: most clients are surprised, in a good way, by how much a properly considered newsletter improves their broader brand. The newsletter shows up in their inbox a hundred times a year. The website, far less. The newsletter’s design ends up being the brand for them, more than the homepage is. It is worth treating it that way from the start, not as the afterthought most agencies treat it as.