Create a bulletproof responsive email grid with tables that works in all major clients.
Last updated: 28 October 2015
Optimize your workflow and let the generator create for you:
if msowrapper tables for desktop Outlook support.
create gutters with table cell
paddingas 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
Level 3 CSS
Switch back to smaller gutters with media queries. This CSS requires
!importantand must be inside a media query to override previous level.
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.
Learn more about building bulletproof responsive emails:
Responsive Email Layouts for Gmail App
20 Feb 2015
Email Development Newsletter
Found this tool helpful? Learn more about responsive email strategies. No spam. Just exclusive articles, practical tips, and helpful resources. Unsubscribe anytime.
28 October 2015
- Added: HTML and CSS now auto-generated. No need to press a button.
- Added: now includes entire HTML template including doctype,
- 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.
2 October 2015
- Experimental release.
- Feature: auto-generated Grid Diagrams.
- Feature: auto-generated HTML and CSS Snippets.
If you need more than 4 columns, you're doing it wrong.