Columns Design

Got two or more columns of content in your responsive email design, but find them stacking in the wrong order when viewed on mobile devices? This simple coding technique will put them in their place.

When coding emails, there are likely times when you wish you had a little more control. For example, when creating layouts with the intent of stacking multiple columns (or technically, table cells) for easy reading on mobile displays, the natural order when using % column widths is left on top of right. But, how about if you wanted an image in a right-hand side column to stack on top of some text in a left-hand column? The answer is something quite unlikely – the dir attribute.

Quite simply, dir allows you to change the ordering of any HTML elements, although its original purpose is to adjust content for right-to-left text (as you likely know, the browser default in places that use Romanized text is left-to-right). It’s also supported in every email client that we know of.

Here’s the natural order when using % column widths:

By applying dir=”rtl” to a table (thus changing the order in which nested cells stack) and dir=”ltr” to the cells within (to ensure the text reads left-to-right instead of, well, backwards), you can reverse the browser/email client defaults and reliably stack content when it’s viewed on small viewports. Here’s the simplified code:

/* Media query for mobile*/
@media only screen and (max-width: 480px) {
.full {
display:block;
width:100%;
}
}

/* HTML */

To help you see the difference, compare:

And that’s a wrap. Huge thanks go to Brett DeWoody for documenting this technique and providing a solid starting point for our own example. If you’d like to read more about creating responsive layouts that fare well in (almost) every email client, I recommend checking out Creating a centered, responsive design without media queries. With an understanding of these techniques, you can take control of your content flow on any device.