Logo

A template showcasing responsive email techniques.

Header image

The Dark Art of Responsive Email

This template provides a starting point for a responsive email framework which will render consistently across email clients. It uses a modular approach with vertically-stacked table components.

Minimal markup

The template is designed to use minimal markup and a low level of nesting so that it can be easily modified and maintained. There are comments in the source explaining the construction and styling of each component.

Modular components

The template consists of:

  • a set of styles which normalise the rendering behaviour of different clients
  • responsive styles for adapting the layout to smaller screens
  • a layout demonstrating the use of modular components
Call to action

Flexibility

We can do many things with this template, and most of them will just work.

Caption

We can describe the image on the left.

This will stack below the image.

We can place content before...

← Left button

...or after the button.

We can also have a full-size button with the whole cell contents right-aligned.

Right button →

Three columns is a little more complex, requiring a containing cell around each column's table.

The .responsive-column-container class sets display: block on the containing cell.

Gmail doesn't support this technique.

The utility of three columns is probably not worth the trade-off in complexity.

Left.

Right.