Responsive Email Template

Skills: web design, ux design, responsive, UI

Responsive web design has taken over as the norm when it comes to designing interfaces for the screen. Responsive HTML email design follows the same logic as designing responsively for the web, in that it’s built around one template which can adapt to different screen sizes through media queries. But under the bonnet, RED (Responsive Email Design) is different in many ways to usual web design. For one, it has to cater to a whole host email clients, some web based, others not. It’s also built on a table structure, and generally has a considerable amount of a caveats the designer has to take into consideration when creating a template.

I’m fascinated by RWD and RED, and wanted to create a template that I could use for myself in promotional campaigns. This template, which you can download for the link below, includes inline CSS, HTML and Images, and you can use it as a basic template to create designs for yourself.

Email Template info

The template has been coded to be compatible with Campaign Monitor, and includes code snippets that make fields fully editable.  Some testing has been done with it but I recommend using services like Litmus to ensure as wide a compatability as possible. Email clients are ever changing and as the implementation of HTML 5 progresses, many of the difficulties with RED will disappear. It’s always worth keeping up to date.

This template also features placeholder images that are the correct dimensions for retina display, in other words, twice the pixel density of usual displays. These dimensions should be followed if you want to have nice and crisp images in your template.

download Template

Previews

On screen sizes superior to 480px in width:

Desktop version of the template

 

 

On screen sizes inferior to 480px in width:

portfolio-image_RED2