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)
- <table> stacking
- <td> 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
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)
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.
When <table> are stacking in responsive view it will be…
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">
<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>
Here the visual image. Column 1 + Spacing + Column 2 = Table width
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.
this will align element from right to left.
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.
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.
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.