Achieving wanted layout for e-mail template

Question

I'm having some issues with structuring the e-mail template, more precisely with centering and especially with its responsivness due to the table layout... it's very frustrating and I just don't have a clue how to structure it properly. This is the kind of layout I wish to achieve - so kind of letter-like:

https://sketch.io/render/sk-4a22c73a977287e074193d5573e6db95.jpeg

Could anyone please help a bit with this if he/she has some experience?

This is my current code and Codepen link: https://codepen.io/anon/pen/rvKPex

<style>
    @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }

        .templateColumnContainer{
            display:block !important;
            width:100% !important;
        }

        .columnImage{
            height:auto !important;
            max-width:480px !important;
            width:100% !important;
        }

        .leftColumnContent{
            font-size:16px !important;
            line-height:125% !important;
        }

        .rightColumnContent{
            font-size:16px !important;
            line-height:125% !important;
        }
    }

    #main {
        background: url(img/bg.png);
        background-position: center;
        background-size: cover;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<table id="main" border="0" cellpadding="0" cellspacing="0" width="960" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="http://placekitten.com/g/480/150" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="http://placekitten.com/g/60/30" width="150" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left">
            <h1>Lorem ipsum</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
            </p>
        </td>
    </tr>
    <tr>
        <td align="center" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <img src="http://placekitten.com/g/200/50" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent" align="center">
                            <a href="www.google.com"><h2>Link here</h2></a>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Thanks a lot for any help!

I thought the email has to be in table design..? – Smithy May 14 '18 at 07:23 — Smithy, May 14 '18 at 07:23
Flexbox has almost zero support within emails – gj-wes May 14 '18 at 08:09 — gj-wes, May 14 '18 at 08:09

score 2 · Answer 1 · answered May 14 '18 at 08:27

You're on the right track. You need to look at 'nesting' your tables as your current layout is adding another table cell in next to your copy.

<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!--Another td will be inserted here by browser/email rendering -->
</tr>
<tr>
<td></td>
<td></td>
</tr>

Nesting tables will help you combat this, yes it's a lot more code but it works. Your table layout should look something like this. Each row then only has a single td cell with a table inside that where you can add 1/2/3 columns without the other container rows being effected.

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

And just a side note, margin/padding on h and p elements in Outlook can be difficult. I'll often just set margin:0 and add padding to the <td>.

thanks a lot I'll try..this is highly illogical way to build stuff. Is there a way to test this somewhere online..? Also, do you Know is there a recommended width for the main container, is 960px too large? — Smithy, May 14 '18 at 08:52
600px is seen as the standard width for a desktop email, as this ensures content won't be cut off by webmail/Outlook preview pane views. As for testing there is Litmus or Email on Acid but they aren't cheap. A free alternative is to use Putsmail and send a test to yourself or any available email accounts you have. — gj-wes, May 14 '18 at 09:54

Achieving wanted layout for e-mail template

1 Answers1