A new table structure

The Past

For years developers have been building email in the same way, a 2 table structure where the outer table is set to 100% width and the inner table is set to something like 600px wide resulting in a 600px centered container for your content.

The Present

More recently people have been using the spongy/hybrid approach that sets the inner table width a max width of 600px and a width of 100%, so the content will fit the viewport when viewed under 600px. With this method there is also the need for a ‘ghost table’ hidden from everything but Outlook and set to a fixed width of 600px as Outlook doesn’t recognise the max-width property.

More recently I’ve been replacing this inner table with a div as it uses a little less code, but now...

The Future?

My new approach uses just one table. The width is set to 100% and it contains 3 table cells, the center cell has a width of 600px and the other 2 are left blank so they will automatically fill the remaining space and center the content. It's the same concept as setting margin:0 auto; often used on the web.

If the viewport is less than 600px the width of the table overrides that of the table cell so it will adjust to fit, therefor giving the same result as the max-width:600px; trick.

This new technique uses less code and also gives you a couple more design options.

You can now control the background of the left and right side of the email separately, to give this cool flag effect.

Frence flag

You could maybe use background images instead of colours to recreate the classic Smith and Jones head to heads (British comedians from the 80's).

Smith and Jones

You can even add additional empty table cells to offset the content, these will automatically align as the viewport gets smaller.

Offset tables

The Code

So here is the basic code I use.

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333" role="presentation" style="table-layout:fixed">  
    <td style="font-size:0px">&nbsp;
    <td align="center" width="600" bgcolor="white">
            New Table Structure
    <td style="font-size:0px">&nbsp;

And you can view the code for all the examples here

The left and right table cells both contain &nbsp; as if they are empty they it can break in some clients. This however has the side effect of creating a one character space either side of the content on mobile. This may well be an effect you like but if not simple add style="font-size:0px" to remove it.

As an extra plus this new technique also fixes things like the Yahoo! left align bug.

It's still early days and although I've tested this in a few campaigns already, there may still be some limitations I've not yet come across.

N.B I'm already working on a new structure that uses no tables at all. Just need a little more testing on that one first.

Every user matters

Email client support at Rebelmail.

One of the first questions people often ask about Rebelmail is about support. It's a fair question, the things we build haven't been seen in email before so not all email clients are ready to support them.

The way we see it, every user is important, whether they are using a modern email client like Apple Mail, or an old fashioned client like Outlook. So we use some very clever code to only show the advanced parts of the email to the users who are able to engage with them and users who can't will see a simple layout like they always have done.

To simplify all the rendering differences across the hundreds of email clients, we group them into 3 groups; Interactive, Limited and Static.

Interactive - these email clients support all the advanced features we build, we ❤ these ones the most.

Limited - these email clients support some of our advanced features, some features may also require a slightly different layout to get them working here.

Static - these clients don't support any advanced features. However we will still deliver a beautifully rendered email, it just won't be interactive.

Interactive email clients

61% of email opens1

  • iOS
  • Apple Mail
  • Android - Ice Cream Sandwich and up 2

Limited email clients

3% of email opens1

  • Yahoo!
  • AOL
  • Android - Gingerbread, Honeycomb

Static email clients

36% of email opens1

  • Gmail
  • Outlook desktop3
  • Outlook.com
  • Windows Live mail
  • Gmail mobile app
  1. Stats taken from emailclientmarketshare.com based on 1.27 billion opens in October 2016

  2. Android KitKat and up no longer has a native email clients, instead it uses Gmail app as default. But these stats refer to other apps on Android

  3. Outlook on Mac can render as Interactive but is usually delivered as Static as there is no support to submit the data gathered in the email