Email Layout Calculator

by Julie Ng

Create a bulletproof responsive email grid with tables that works in all major clients.

Last updated: 28 October 2015

Features

Optimize your workflow and let the generator create for you:

  • if mso wrapper tables for desktop Outlook support.

  • create gutters with table cell padding as inlined CSS.

  • included CSS to reset gmail first grid.

  • included media queries for mobile devices.

How it Works

Customize your grid's container, number of columns and gutter. The HTML and CSS is automatically updated for you. N.B. This is a tool, not production code. The basic math and layout should be correct.

This uses follows the a Gmail first Strategy for Responsive Emails. In short, we code for Gmail on Android first and override our styles so:

  • Level 1 CSS
    Prioritize mobile Gmail and use (smaller) padding for gutters. This CSS is inlined.

  • Level 2 CSS
    Apply (large) desktop gutters in included <style> tags. This CSS requires !important.

  • Level 3 CSS
    Switch back to smaller gutters with media queries. This CSS requires !important and must be inside a media query to override previous level.

Don't forget…

This just generates your layout and shows you where to put your column content. Tip: after you've finished your email, double check that the if mso comments are still intact.

Resources

Learn more about building bulletproof responsive emails:

Email Development Newsletter

Changelog

Version 1.0
28 October 2015

  • Added: HTML and CSS now auto-generated. No need to press a button.
  • Added: now includes entire HTML template including doctype, <head> tag, etc.
  • Added: Copy to Clipboard functionality.
  • Refactored: template code to be more robust. Now uses Handlebars instead of Underscore templates. Weird linespacing and extra newlines now gone.

Version 0.1
2 October 2015

  • Experimental release.
  • Feature: auto-generated Grid Diagrams.
  • Feature: auto-generated HTML and CSS Snippets.

Customize Grid

px
px

Generated HTML & CSS Copy to Clipboard