MR10
Get Off The Table
Yesterday at Litmus Live I did a short hack session about building emails without <table>s that work in Outlook.
You can read full details on the REBEL blog but the short version is if you use this code you can create a basic single column layout without tables.
<div style="background:red;max-width:600px;margin:0 auto;text-align:center;
mso-element-frame-width:600px;
mso-element:para-border-div;
mso-element-left:center;
mso-element-wrap:no-wrap-beside;">
<!-- Content -->
</div>
However there are a few issues;
- There is a think blue outline
- I can't nest sections
- I've not tried background images yet
- I still need
<table>for multi column layouts inside the container
I need your help
I want to colaborate on this with other email geeks to try and solve all these issues so wwe can all start building emails without useing <table>s
Great, i'm going to dig into this right now! :D
I've added my code to github so you can work on it there if you prefer
https://github.com/M-J-Robbins/get-off-the-table
Here is columns inside the container. It still uses conditionals as I literally cannot find a way to circumvent this with mso css elements or attributes. I have kept the conditionals to a bare minimum. Each container needs a conditional wrapper and each div inside. I have used 296px on the column widths to bypass the HTML whitespace issue just so the code looks easier to read.
I have no clue how to add a code block coz I am an idiot. So here is a test link
Test link: https://litmus.com/builder/bb4008e
Thanks @Nicholas,
My plan is to try and do this without any tables, not even ghost tables as they still add a fair amount of code weight.
I know it's quite ambitious to try and do this. But if it works it could change the way we all code emails :)
Fair enough. I am trying with spans declared inline block and using mso-border-alt to pad the content. It's proving a bit tricky though. Will report back
In my test (Outlook 2010/win 10) the border was also visible in the preview pane.But when I opened the email in an extra window, it was just blank. White sensation of nothing. Litmus shows the email with blue line, but they use win7. Did you see that, too?
Ah that's interesting, I don't have a windows machine to test on at the moment. I'lll try and dig into that some more...
One more insight: Actually the dotted blue line appears, when the mail window becomes active (click into the preview). Meaning, when I click somewhere else in OL, it vanishes. I think we could look for some kind of mso-element property which controls the border-style/display for the message-body in an active message window. My search was not successful yet.
could you use
<span>s for columns since they're inline elements?While I don’t yet have a moment to participate in the collaborative solution, I have some key feedback / requests.
Please keep in mind and advocate for a basic design principle that email does not (and arguably should not) need to appear the same in all email clients.
Please attempt to use semantic elements and avoid ambiguous ones like div and span.
100% agree with both statements Charles, absolutely key to what I'm trying to achieve đź‘Ť