10 Popular Layouts for HTML Email

Even at a width of 600 pixels, there are plenty of ways to lay out HTML email content. How do designers usually approach an email layout? The image below shows some the most popular block-level email layouts, as taken from a typical day of email campaigns sent through Campaign Monitor.

(In truth, these are the most popular layouts once we’ve excluded the common but horrifying “jumbled mess of unstructured text and images,” which remains an unfortunate favorite with many senders.)

Two-column layouts (with about an 80/20 split) are by far the most popular layouts, which was true for websites ten years ago as well. The idea of interspersing two-column blocks with full-width blocks is very popular, and gives the email a more dynamic feel if it’s done right. It’s also very flexible, and allows you to use a variety of different content types.

It’s very rare to see more than three columns, and that’s hardly surprising given the design constraints email designers face. If you have a client that sends several different types of content, you can of course create many design variations to suit; you’d still want to make them recognizable as being from the same sender and on the same topic, though.

Remember that the actual content could be shorter than what we were planning on, or longer, or more varied month by month. So our design needs to be flexible enough to hold together over time. Pixel-perfect design never worked very well on the Web, and it certainly won’t work in an email client.

Some designers like to create a more detailed mockup at this point, slotting content sections in wherever they fit. You might find the mockup a useful document to show your client before you commit to particular color schemes or layout sizes.

What’s your preferred HTML email layout?