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 of the types

And here is the full updated th stacking code

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 method.

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

Addendum:

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

I say: “standardised nomenclature!” you say: “boring”.
I say: “CSS wildcards – build a bulletproof rule set!” you say: “Hmmm…?”
I say: “this might change the way you code CSS in emails!” you say: “Meh, OK. Go on, you’ve got 5 minutes“.
Continue reading →

AKA: reverse stacking using the table-align method 2.0; this time it’s Hybrid.

This article is another method option for reverse stacking (previous method here), this one has the advantage of working without media queries or doctype. We will still add the media queries after, but this is about raising the bar and progressively enhancing upon the base level.
Continue reading →

A lot has been written before about different types of email, the table-align method is a very popular choice with email designers/developers, as it allows layout change to occur with or without a doctype being present, therefore making it a more robust method than using the column splitting method.
Continue reading →

The mobile web explosion is great news for us email folk — but super fast unregulated growth brings with it a problem or two — in this case, keeping everyone on the same page.
Continue reading →

Hiding content on desktop and revealing mobile specific content can be really useful technique, if used sparingly. It enables us to “target mobile users” – at least ones who support media queries – properly, and serve them specific content.
Continue reading →