Reverse layout stacking in HTML email.

Before jumping into the trick, first we have to get the same idea that there are 3 kinds of a responsive email code that we’re using this day. (as far as I know)

  1. <table> stacking
  2. <td> stacking
  3. Hybrid

<table> stacking

This method widely used in the past couple year seems to be less and popular by time but still the easiest way to create a responsive email. By create a block of <table> and using align attribute to positioning the elements.

here some example. of what you see in the live preview

1/2 module from my template “Koble”

The idea is using 3 <table> structure that contains within a parent container and aligns the first<table> block to the left and the text <table> block to the right.(as everything is float left by default)

the spacing <table> also align=”left”

If we want a reverse layout in desktop view to have the image on the right and text on the left while in responsive view still showing the image on top. The same code stacking still works by just switching the align no need to switch the <table> place.

spacing <table> align to the right as well

When <table> are stacking in responsive view it will be…

easily done!


<td> stacking

This structure is combine all content into a single <table> and divide each element into <td> column. It look nice when view in the code or design view in Dreamweaver and easy to understand when start to layout the template structure.

We use CSS class to expand <td> to 100% in media query to achieve responsive view.

a code example how we divided element in 2/2 column with 1 space using <td> method.

<table align=”center” width=”600" border=”0" cellpadding=”0" cellspacing=”0">
<tr>
<td width=”295" align=”center” class=”column”>column 1</td>
<td width=”10" height=”10" class=”column”></td>
<td width=”295" align=”center” class=”column”>column 2</td>
</tr>
</table>

Here the visual image. Column 1 + Spacing + Column 2 = Table width

295+10+295=600

As you can see there is no align indicate with this structure type. So in order to reverse layout, we use a dir attribute to re-align our layout.

dir="rtl"
this will align element from right to left.
dir="ltr"
this will align element from left to right(normal).

By place dir=”rtl” at the parent <table> will make element inside to reverse alignment in the same structure, but it not done yet. This will also cause the text inside <table> to reverse as well.

So we need another dir=”ltr” at the <td> column to reverse text content back to normal.

The result might look the same(in the code editor) between 2 layout but only the reverse that included dir=”rtl”

This also easy right? the last one will be a Hybrid.


Hybrid

This coding style for HTML email became more popular recently due to some email app that not support media query.(Gmail) and the variety of screen size to view email.

this’s what is look like in design view of Dreamweaver not actually the layout that show in the browser

Basically, this style mainly aligns all element inside to center by default like a mobile first design. So there’s nothing are align left or right just with one come first goes left and next one to the right. That’s how it work.

So, we can use the dir to the parent <table> container spacify align element inside from right to left and reverse back to normal for text element with dir again.

Ok, that’s pretty much how I do the reverse layout in responsive HTML email. This my first blog and English it not my native, my apologies. I hope this help people to understand more about how HTML email structure work.


About The Author
Teeravit is the email template designer selling HTML email template at Themeforest since 2013. You can connect with him on Facebook, Twitter.

If you interest to see how I implement to my work here my portfolio at Themeforest.