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*

 

 

4 column Hybrid shape with an Outlook.com hack

A few people have asked me for more Hybrid shapes and I keep Slacking…. cool gifs to co-workers instead, amirite?! Sorry…

Anyway, here we are: this is a quick example of a 4 column stacking 2×2 without the need for media queries. This is also a little more fun than a regular block, as we have expanded upon the Campaign Monitor method of centering without media queries (really can’t explain how useful that post has been) again and this time removed the need for a fixed width on the div element.
Continue reading →

Why are we thinking like it’s 1999, when we should be partying?

If you are reading this and you work in email marketing, it is likely you are doing a good job already — well done to you! Sorry, I don’t have any statistical proof of that: I’m going with my gut. By reading industry blog posts and articles, you may not be directly making anyone any money (direct value), but you are widening your own knowledge (indirect value). Does that seem fair?  This idea of directly attributed value (e.g. ROI) and indirect, often overlooked, value (e.g. reputation) is core to this post.
Continue reading →