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.

The most popular layout variations sent through Campaign Monitor

The most popular layout variations sent through Campaign Monitor

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • oliver

    Hello, I’ve read that is better to use table instead of div when creating html email layout. Could you give me your expert advice on this point ? By the way is there a complete tutorial how to set up your html mail correctly ?

    thank you for this usefull post and your answer.

    ps: my favorite is the third one of the first line :-)

    • http://www.mhdesign.co.nz Mike Henden

      When doing HTML email remember your design is going to be see across a wide range of platforms, systems and email clients (including webmail, which ironically has problems of its own). And if the email gets fowarded on things can get really ugly really fast! So dumb things back to the late 1990s. Use tables, minimise the use of CSS styles, even break out the old tag and get set to get your hands dirty!

  • kim

    this article sucks. and the layouts suck even more.

  • jakes

    Unable to view the image posted for most popular layouts by campaign monitor.

  • http://design-clues.com Design Clues

    I Guess it is more confusing as increasing in size :D