Fluid columns

[dudeonthehorse]

Hello, Remi!

I know about Nicole Merlin method. I know about "Fab Four". It's cool practices. I use it in my projects.

But... What do you think about this example? https://jsfiddle.net/xq6cptwd/

<table align="center" style="border-collapse: collapse; border-spacing: 0;" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr align="center">
            <td></td>

            <td bgcolor="#D7EFFE" width="128" align="center" style="display: inline-block;">
                Alexey
            </td>

            <td bgcolor="#D7EFFE" width="128" align="center" style="display: inline-block;">
                Marie
            </td>

            <td bgcolor="#D7EFFE" width="128" align="center" style="display: inline-block;">
                Sergey
            </td>

            <td bgcolor="#D7EFFE" width="128" align="center" style="display: inline-block;">
                Vadim
            </td>

            <td></td>
        </tr>
    </tbody>
</table>

That's how we can use fluid method with supporting lotus notes client, for example

[revelt]

@dudeonthehorse which version of Lotus Notes? I'm curious because I remember 6 & 7 were terrible, but 8 was better.

[dudeonthehorse]

@revelt it's just an hypothesis. Sorry for that. I shall do all tests soon.

Thats my logic: This method uses div elements for columns. My method uses td for columns.

I think: td looks like more bulletproof than div

[revelt]

@dudeonthehorse your snippet achieves stacking but is not fluid (-width). The hybrid's point is it's both stacking and fluid, at the same time. Technically speaking, div's contained within "shadow code" (commented-out Outlook-only blocks) are as bulletproof as td, provided all fixes are implemented (notably parent td's font-size:0). But I agree, the td approach, if it worked, would be less code.

Now, criticising the snippet, the further challenge would be to make the cells stack full-width when it's one-column. You'd add CSS media queries, but hybrid would achieve that without them. That's the beauty of hybrid.

PS. There was th tag stacking approach, did you hear about it? Basically header rows were being treated differently on certain email clients which gave an edge, albeit hacky, when stacking, compared to tds.

[dudeonthehorse]

@revelt thank you for detailed answer. I appreciate it. I shall continue my experiments.

P.S. Yes, I know about th. I got td just for an example.

[hteumeuleu]

Hey there. It's an interesting technique. Although one shortcoming I can think of is that you can't change the display value of a <td> on WebKit in Quirks Mode (without a doctype). This can happen in a few email clients. But it can be solved by using a <th> instead.

So perhaps the most problematic thing to me is the use of table for presentation purposes. This can be problematic for accessibility (especially for screen readers). And yes, it can be improved by using role="presentation" on tables. But not all email clients support that. So I have a preference for mobile first approach with semantic code and <div>s.

But then, I usually don't bother with support for Lotus Notes 6 or 7. So I guess if this method works for you, then it's good to have one more tool in ones arsenal.

[revelt]

@hteumeuleu good article on doctype, by the way!

[dudeonthehorse]

@hteumeuleu thanks for reply. I got the answer for my subject question.

[lembitk]

@hteumeuleu My question will be a bit OT but I could not hold back after reading this:

/---/ the most problematic thing to me is the use of table for presentation purposes. /---/ So I have a preference for mobile first approach with semantic code and <div>s.

In my mind this translates to ~ “I prefer to build my emails with <div>'s” – something that I've been greatly interested in for a long time, and yet I haven't seen any such production-ready example so far…

So, presuming I understood you correctly, here's my question: could you please point me to a right direction on how to achieve production-ready (i.e. “works also in Outlook 2007-2016 and Windows 10 Mail”) HTML email code/layout with <div>'s? Or is it still impossible, as has been my understanding so far?

Thanks.

P.S. I would also like to thank you for all your great work with this repo and beyond. Useful and inspiring.

[braddunzer]

@lembitk you might find this post interesting on a Tableless email that Litmus sent out

https://litmus.com/community/discussions/7148-how-litmus-didn-t-use-tables-for-its-first-email-newsletter-of-2018

[lembitk]

@braddunzer Thanks, I've seen/read this and it's within my bookmarks w/ several more more or less alike examples. And yet none of such approaches is not production-ready IMHO in the sense that would also work in Outlook 2007-2016 and Windows 10 Mail… Edit: to clarify, yes it works in MS's desktop email clients for relatively simple, one-column emails only. What I'm hoping for is more than this (multiple columns, and then some)…