td or not td? That is now a question.

Some time ago now we published a piece on how to make content re-order – “stack” on mobile. Essentially distilled into 3 methodologies:

1. Column splitting

2. Table aligning

3. Hybrid

Now Column splitting was great, using display: block or float: left to reorder table columns into rows, with one mega flaw: not working in a lot of ‘droid. Mainly because the doctype got stripped and then this *[class=colsplit] {width:100% !important; display: block !important;} was no good.

So Table align became a lot more attractive, despite being a little less forgiving to code; tables just sit side by side and then push each other around when media query is triggered – with or without Doctype.

This was one of the base principles of Hybrid, a fuller solution to optimising without media queries, but we’re not going to talk about that in this post. We are going to revisit column splitting.

A guy called Steven Collins kindly left a comment in one of our Lab posts about coding methods and suggested that if we use <th> (table header) instead of <td> we could column split again without a Doctype. And therefore column splitting, with all its plus points over table align, would now work in ‘droid.

It does.

There are rules and caveats as ever, but if used sparingly this actually works as an option. At the very least, it could be a viable way to retro-fit code that previously only worked in iPhone in order to make it work on more devices.

Here is the updated codepen

Considerations.

1. <th> naturally may want to bold and centre its contents, override this with align and font-weight.

2. As ever, be careful there are no mismatching tags i.e. <th></th> not <th></td> or anything cray cray – it can be hard to troubleshoot. When is it ever easy with email code?

3. If stacking column splitting tables on top of each other, wrap the whole thing in a <table><tr><td></td></tr></table> so that it behaves itself in AOL.

4. What are you waiting for? This is potentially such a cool little hack.

As an extra, all the reversing stuff we have talked about previously works. This is areal winner, especially if you are using an ESP which usefully strips Doctype for example.

Give it a go and let us know how you get on! Would love to see this being cranked out at volume to stress test it across a full range of devices. I am working it into some small elements currently, one winning example is where we create buttons to appear on the mobile version, and where android might previously only semi optimise; now renders more consistently.

Addendum:
Steven has already posted up in the Litmus community (good on him) about this here *bump*

 

 

  • http://tvjames.blogspot.com/ TV James

    Is #3 an example of #2? (Shouldn’t it be ?

  • Powow Marn

    Just a question regarding your codepen : is it still of any use to put the CSS selector [class=...] now that Yahoo does not have that bug anymore ? Personally I’ve stopped using it and did not notice rendering problems elsewhere.

  • http://labs.actionrocket.co/ Mike Ragan

    Hi James – good spot, amended now!

  • http://labs.actionrocket.co/ Mike Ragan

    Hi Powow – this is a good point, you don’t need to anymore – I just continue to do it out of habit, consistency & an irrational pessimistic fear for things changing back! I’m email-jaded.
    Generally, If something works for me everywhere I’ll be in no rush to change it, as soon as something starts to faulter however, I drop it and work around it asap.

  • http://labs.actionrocket.co/ Mike Ragan

    Interestingly enough and almost bang on cue – got a reported render bug in Yahoo/Safari Version 6.1.6 (fine on up to date Safari) where media query rules being triggered in desktop mailing, solved out by using [ ] to ignore them. So I’m going to continue to leave my templates as is! Email code is so fickle, guess that’s why we love it.

  • http://www.ultimatestylesbundle.com/ Derek Stevenson

    Does this method work for Android Gmail App as well?

  • http://labs.actionrocket.co/ Mike Ragan

    Hi Derek – sadly not as it would still need a media query trigger to make the tds [ths] display as block rows. Go Hybrid!

  • Pingback: Wkly 002 – Gary Wesolowski