Reading multi-column emails on a small screen can be difficult: you have to scroll horizontally. Reading on small screens generally works better when it’s done linearly, from top to bottom. Using media queries, we can change the multi-column layout to a single-column layout, which will make the email easier to read. Here, we’ll look at two methods for creating responsive columns, each with its own pros and cons.
Method 1 — Block-level td elements
The first method uses the same column structure that is typically used in most cases:
<table border="0" cellpadding="0" cellspacing="0" width="600" 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/300" 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/480/300" width="280" 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>
</table>The default styling for the columns isn’t very important here, so let’s move straight to the media query styles:
<style type="text/css">
@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;
}
}
</style>At the beginning of the media query stylesheet, we set the table width templateColumns to 100% so that it adapts to different screen sizes or orientations. Next comes a crucial step in switching the layout: by setting each templateColumnContainer <td> block-level elements and reinforcing this with a width declaration 100%, the right column ends up below the left one, and we get a single-column layout. After that, the image is given a smooth style, and the text is enlarged.
As we’ve already mentioned, every method has its pros and cons. This method is the most stable; thanks to the use of standard, proven coding conventions, the columns work in every client’s desktop view. However, there are a couple of drawbacks. First, setting <td> as a block-level element contradicts how they’re actually supposed to be used. Second, you won’t be able to change the order of the columns or make other changes to the layout without resorting to CSS float or position — properties that aren’t widely and consistently supported across all email clients.
So, if stability is more important to you than flexibility, this option will work for you.
Method 2 — Aligned </table> elements
Method 2 is the opposite of the first: its strength is flexibility, but it isn’t very stable. The columns are coded slightly differently:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" 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>
<table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" 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>
</table>Each column <table> is now contained within a single <td>, and each has a fixed width 300px. The most important difference is the presence of the align for each table; this attribute mimics CSS functionality float, but in reality, it has been well supported by email clients since the inception of the HTML specification.
In HTML, we moved the class name templateColumnContainer from the elements <td> shown in the first example to the two aligned elements <table> that make up the left and right columns. Since each element <table> is essentially a float, they automatically wrap when a media query is triggered. In the media query style for templateColumnContainer requires only one change: we now target the element <table> rather than the element <td>.
<style type="text/css">
@media only screen and (max-width: 480px){
.templateColumnContainer{
display:block !important;
width:100% !important;
}
}
</style>By setting the width of each column to 100%, you can fill the entire available screen space, just like in the first example. So, what’s wrong with this method? Instability. Since the columns are essentially floating, they tend to wrap under each other if there are any deviations in the layout.
You’ll most likely run into this problem if the column elements <table> “touch” each other—for example, if you place two columns of equal width 300px side by side within the space 600px. It all depends on how the email client renders tables or calculates width. Sometimes you can make the columns slightly narrower than the total width of the space they occupy, but this isn’t a 100% reliable solution.
Despite these issues, the flexibility inherent in this method and the way it allows you to switch between layouts are among the reasons to use it.
