
How Litmus didn't use tables for its first email newsletter of 2018
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.
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?
This is so cool, great work Kevin.
I'm hoping to be able to set aside a couple of days in the near(ish) future to do some more research and testing on this.
I'm keeping track of things on github if anyone wants to take a look.
https://github.com/M-J-Robbins/get-off-the-table
Yes I want to try it out for sure!
Any templates out there?