Last weeks #EmailWeekly had an extra little feature, just for iPhone users. A few people spotted it, like Justin from Freshinbox:
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 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*
Hybrid is the answer. Is it the right question?
Nicole Merlin started it. She posted an in-depth tutorial on how to optimise emails without media queries. This prompted email community member Ted Goas to ask the question: why we do all this just because gmail has an embarrassing problem?
Continue reading
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
Bossing your master template CSS rules
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
Reverse stacking in the Gmail App
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
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
Reverse stack using table-align based methods
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
Can you just make it responsive?
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
How to hide and show content on mobile devices
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