Responsive
Foundation: A toolkit for designing responsive emails
Zurb announced today version 2 of “Foundation for Email”, a full stack for designing content for responsive email.
It looks rather nice, with features a modern web developer might look for when working on email content. It has many of the things you’d expect a web design stack to have. It support SASS for styling, includes browser sync for previewing content as it’s edited, both on a local browser and on a device, and uses gulp to tie the workflow together.
But it also has some features useful for email that you’d be unlikely to find in a web design stack. It has an inliner, to convert separate SASS/CSS and HTML content into a single HTML document suitable for sending by mail. And it supports a slightly extended HTML format called “Inky”, which lets you use simple tags like <row> and <column> to develop grid-based content, then compile those into old-school HTML tables which mail clients will happily render.
And it comes with ten starter templates for different types of email.
You can find documentation, downloads and examples here.
Mail that looks good on desktop and mobile
Over the weekend I noticed a new CSS framework aimed at email rather than web development, “Antwort“.
This isn’t the first or only framework for email content, but this one looks simple and robust, and it allows for content that doesn’t just adapt for different sized displays but looks good on all of them. The idea behind it is to divide your content into columns, magazine style, then display the columns side-by-side on desktop clients and top to bottom on mobile clients. That opens up much more interesting designs than the more common single fluid column approach.
It looks nice, it supports pretty much every interesting email client, but it also comes with some directions based on real world experience.