Archive for the ‘E-mail’ Category

We used to see lots of CSS frameworks for website layouts but it is hard to find one for e-mails.

Ink, by Zurb, fills that gap by simplifying the creation of HTML e-mails that look the same on all major e-mail clients.

The framework includes the styles for a table-based grid, buttons, panels, retina images and more.

E-mail CSS Framework

Once the e-mail is ready, you can use the web-based Inliner tool to get all styles inline.

And, to get started quickly, take a look at the ready-to-use e-mail templates of Ink.

HTML e-mails need some special attention when coding them.

We should be using inline CSS and absolute paths, many modern elements are not supported (table-usage is preferred), etc.


Premailer is a free web-based tool (an optional bookmarklet exists) that can help you create “more compatible” HTML e-mails by checking all above and even more.

Additionally, it creates a plain text version and checks the CSS properties against e-mail client capabilities.

You received an e-mail and want to share it with others without e-mailing them (as you don’t have their e-mails or there are lots of people to share with and e-mailing would be hard).

Litmus Scope is a free service that works with the help of a bookmarklet and converts e-mails into hosted previews (supports all major web-based e-mail clients).

Litmus Scope

The service provides a unique link for the generated previews and the preview works in all major devices.

Also, it is possible to create a free account for saving these previews for a longer period and editing them.

Responsive layouts are everywhere on the web. But, for e-mails (whose standards almost never changed), usually, we still prefer fixed-width layouts.

Antwort is a free newsletter template that still uses tables but manages to provide a responsive layout.

It is a multi-column layout where columns are transformed into rows in smaller screens.

And, the template works in all major e-mail clients (including Outlook).

Antwort - Responsive Newsletter Template

Few weeks ago, EmailCraft, an e-mail/newsletter design and markup service, has contacted me asking whether their service can be reviewed at WRD.

I thought this was a chance to offer another nice freebie to WRD readers and try the service which I was aware of for a long time.

EmailCraft gifted their “Design & Markup” package (priced $178). I was also in need of a newsletter design for a project I was part of (ioDeck) and ordered a design-markup for it.

The brief was simple: “a slick newsletter to share any upcoming features with few screenshots and details”. The output is pretty nice, we’ll be using it regularly and want to share it considering you may want to as well. Here it is (click for full version):

ioDeck Free Newsletter

The communication with the EmailCraft team was great and they created 2 different templates to choose from.

I selected the one above and requested few revisions. They were so responsive and quickly replied to the changes I asked for (all the process took only few days).

In the past, I have used PSD to HTML services and this was the first time for an e-mail markup service.

Imho, it makes so much sense as designing newsletters is a pain considering each e-mail client has its own rules and things are much worse compared to crafting HTML-CSS for websites (btw, the template above is compatible with all major e-mail clients/platforms).

P.S. The template is completely free to be used in personal and commercial projects with no attributions. It is only not allowed to redistribute the template.