Revisiting Style Resets in Email
If you’ve been involved in web design for more than a few years, you’re likely familiar with resets. Resets are bits of code used to whip browsers into shape and provide a baseline of rendering. They, as their name suggests, reset some of those browser quirks and make it easier to design and code more consistent web experiences. Popular resets include Eric Meyer’s classic and my favorite, Normalize.
Now, if you’ve been involved in email design, you’re likely aware that email clients are riddled with quirks and bugs. Which typically makes coding an email that renders consistently across clients a chore. While striving for pixel-perfect designs between email clients is fodder for another post, the idea of a reset for HTML email does exist.
As an example, here’s the reset code that I typically use.
<!DOCTYPE html>
See the Pen The Reset by Jason Rodriguez (@rodriguezcommaj) on CodePen.
</div>
It's similar to the code that made its way into the [Salted](https://github.com/rodriguezcommaj/salted) and [Author](/author-template) templates, and is derived from our [Litmus newsletter template](https://litmus.com/subscribe/). Each rule targets a specific email client quirk. From top to bottom, they are:
- Forcing a *view in browser* message in Outlook
- Getting Hotmail to display full-width emails
- Get Hotmail to display normal line spacing
- Stop Webkit and Windows Mobile from changing text sizes
- Remove spacing between tables in Outlook 2007+
- Improve resized image rendering in Internet Explorer
- Some sane defaults for the body, images, and tables
- Handling iOS blue links
In the midst of [writing a new book](http://rodriguezcommaj.com/books/professional-email-design) and preparing material for a [Front End Masters Workshop](http://rodriguezcommaj.com/blog/front-end-masters-workshop), I'm wondering whether all of these rules still make sense. At first blush, Hotmail as a product is dead, having been replaced by Outlook.com. I'm admittedly the worst when it comes to keeping up with and understanding Microsoft products (Outlook.com, OWA, 365, WTF?), so I wouldn't be surprised if some updates were made to affect the rendering of those reset styles. In particular, James White [recently reported](http://blog.jmwhite.co.uk/2014/11/14/revisiting-the-email-rendering-quirks-of-office365-owa/) some improvements to OWA rendering, including some sanity when it comes to line heights. Will that affect Outlook.com, too?
More importantly, do we need to add anything to account for newer developments in email clients? Or should we add in some boilerplate to handle different coding styles?
I know a few people–looking at you, [Fabio](https://twitter.com/flcarneiro)–prefer using semantic elements and resetting their styles instead of the *all styling on the table cell* approach that I favor. When releasing templates out into the wild or sharing code, should some resets for those elements be involved?
I'd love to hear what everyone else is doing for resets in HTML email. [Drop me an email](mailto:jason@rodriguezcommaj.com) or [tweet at me](http://twitter.com/rodriguezcommaj) and let me know. Or fork the sample above on [Codepen](http://codepen.io/rodriguezcommaj/pen/Dxbdm) and write your own reset.
Thoughts on this post? Email me and let me know.