Hey all!

We like to experiment with new design and coding techniques in our newsletters, and this month we tried something new...

We didn’t use any tables in the structure of our email. That’s right, we only used divs for our layout. No tables.

View the full email here

We used the technique Mark Robbins debuted at Litmus Live 2017 in an effort he described to Get Off the <table>. Many don’t realize, but Outlook 2007-2016 and Windows 10 Mail are the only email clients left that require tables as HTML structure with their Microsoft Word rendering engines. All of the other email clients work just fine with divs.

Mark found a method using Word-specific CSS to only use divs for your layout. Essentially, there’s one wrapping div that converts to a centered table using this code:

<div style="max-width:600px;margin:0 auto;text-align:center; mso-element-frame-width:600px; mso-element:para-border-div; mso-element-left:center; mso-element-wrap:no-wrap-beside;">  
  <!-- Content -->
</div>

And the rest of your content can be nested inside that div.

Read Mark’s full article for a full breakdown on the code

Especially since Outlook only makes ~15% of our Litmus subscriber audience now, this method is highly intriguing to us to optimize our layout structure. Here’s a rundown of a the advantages and disadvantages from our experience...

Pros:

  • NO TABLES. This was a dream come true. Not having table>tr>td your way through life is amazing. The HTML is so lightweight, more semantic, and much easier to read. Development was much faster without having to worry about tables.

Cons:

  • This technique only works with one-column layouts. We haven’t cracked multi-column support without tables in Outlook yet, which is why we used a single column for the entire layout. Though we were able to make it work for this newsletter, it has its design limitations.
  • We ran into the Outlook page break bug. Unfortunately, we had to insert 3 empty tables along the email as a quick fix to break up Outlook’s page break bug which have tiny noticeable gaps in the email for Outlook. So technically, there were 3 tables in the email, though they weren’t used for layout purposes at all. We haven’t historically ran into this issue at all, what are your best hacks around this bug?
  • There aren’t many methods to control spacing. In traditional table structure, there’s a lot of Word-specific CSS to control padding and margin such as mso-padding-alt and mso-margin-alt, but without a table structure we found a lot of our go-to hacks on spacing didn’t work. We inserted a lot of <br> tags to create vertical spacing and left horizontal spacing out for the most part, making the Outlook design appear slightly less than ideal. This is definitely an area to improve for the future and one to explore.

Here's what the Outlook version looks like: https://cl.ly/2e0y2E0c1u24

What are your thoughts? Did you notice we didn’t use tables? Are you interested in trying this out?