Vision6 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.





Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

You can adjust all of your cookie settings by navigating the tabs on the left hand side.