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 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.
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.
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:
A Gmail first Strategy for Responsive Emails2 Oct 2015
Responsive Email Layouts for Gmail App20 Feb 2015
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
2 October 2015