Connect With WRD
feed via e-mail
feed via e-mail

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

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
Download

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.

It was always the desktop where e-mails were viewed but this has changed a lot and e-mails are now reached from multiple devices.

Just like web pages, e-mails can be responsive too, so that they will be displayed as expected on tablets and mobile devices as well.

ZURB is sharing a free set of responsive e-mail templates what can be used as a base for any newsletter.

Responsive Newsletter Templates

Currently, there are 5 templates with single or  2-column layouts in different variations.

These templates have separate HTML-CSS files and they are built with “newsletter delivery services (like Campaign Monitor or Mailchimp)” in mind which will format the e-mail and auto-convert the styles to inline.

Gmail is probably the most widely used e-mail provider between creative people. It is always simplistic, modern and always works.

Personally, besides my personal e-mail, I use their "custom domain" feature for handling the e-mails of all my projects.

As expected, the content there is very valuable and hard to risk losing. Gmvault is an open source tool that saves the day by backing up Gmail accounts to your drive smartly.

Gmvault

It can backup the entire Gmail account at once and can synchronize afterwards by only picking the non-backed-up ones (there is also an optional encryption).

If we ever want to restore them, Gmvault can do that as well. They can also be restored to another Gmail address (including labels).

There is a Windows installer and ashell/batch client exists for Linux, Mac OSX and Windows.

Emailology is a website which aims to guide designers and developers with the best practices of e-mail design.

The project includes an e-mail boilerplate, that is very well-commented and includes hacks for cross-client compatibility, for starting quickly.

A knowledgebase lists the tips and tricks categorized for each e-mail client. It is the right place for finding answers to client-specific issues.

Emailology

There is a standards guide which presents the universally-supported HTML and CSS tags (it is possible to get client-specific data).

And, a character conversion feature allows copy-pasting your own code for converting the special characters into HTML entities.

E-mail code validation is a painful job considering many e-mail clients/applications have a low-level HTML-CSS rendering support and many others have their own standards. Actually, it is worse than designing for the browser.

Fractal is a free-to-use web application for validating HTML-CSS code across 24 most-popular e-mail clients.

It simply works by pasting the code to the application and finding out if each line is validated, if not, why and in which e-mail clients.

Fractal

Best of all, Fractal doesn't come with only the bad news but also suggests fixes.

P.S. Besides the desktop and web-based e-mail applications, it also checks the code for the mobile as well.

There are various new and exciting stuff with the website development like HTML5 and CSS3.

But, when it comes to designing HTML e-mails, it is still the tables and hacks for improving compatibility with different e-mail clients.

HTML E-mail Boilerplate is a project which presents a starting point for HTML e-mail design and includes solutions for the major rendering problems with the most common email clients.

The code is very well documented and the download pack includes a non-documented version).

HTML E-mail Boilerplate

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com