Foundation for Email

I’m a big fan of using the right tools for the job, especially when those tools can make your life easier. In the case of Foundation for Email, those tools come in the form of a responsive CSS framework for building HTML emails.

Anyone who has ever built a HTML email knows how horrific the experience can be. Email clients haven’t really moved on much in the last 10+ years, Outlook is absolutely woeful, and you need to support web-based clients such as Gmail that have their own quirks.

Foundation for Email is a suite of styles that make building these HTML emails a lot easier. There are a number of different components that can be put together to build responsive email. These components, which you’ll recognise from other CSS frameworks such as Foundation for Sites or Bootstrap, are all tried and tested against all the major email clients, and include:

  • Responsive grid
  • Buttons
  • Panels
  • High DPI images (‘Retina’ support)

None of this stuff is new, but that isn’t the point. The point is to make using this stuff easy, straightforward and with the best support possible.

Historically responsive emails weren’t that common. It was difficult enough to get a single view to render consistently across devices never mind getting that view to respond to screen size. Fortunately, using Foundation for Email, that’s (almost) as easy as it is for web.

Another huge problem when it comes to HTML emails is where styles can go in your document. On the web that’s obvious, just link a stylesheet, but many email clients just remove any linked stylesheets so all styles need to be inline – a nightmare to manage. To tackle this Foundation has a tool called Inliner. Inliner takes your properly formatted (eg. stylesheets and classes) markup and puts all of the styles inline for you. This allows you to use modern day methods for old time compatibility.

The only thing Foundation can’t help with is the need to use tables. For all web developers using tables for layouts is just horrendous. Unfortunately, it’s a necessary evil for email clients.