How to make content stack on a mobile device

There are 2 key methods to shift the layout of your mobile email using media queries. Here we illustrate and explain both with advantages and disadvantages.

What is stacking?

Making more than 1 column elements split out and appear in portrait alignment vs landscape.

What are elements?

In HTML email terms think of “blocks”, usually holding tables.

So:

phase_1_stack

Becomes:

phase_2_stack

OK I know all this, I’m very impatient so just show me the code already and I’ll figure it out myself: http://codepen.io/actionrocket/pen/taqci

 1: The Table Align method

Sit tables of content (elements or blocks) next to each other and align them inline, trigger the move with media query.

Align the first table left and so on, until the end table which can be left to float or forced right depending on cumulative px width and aesthetics.

Use a media query rule to then trigger the elements to expand as the container constricts. This then forces the tables to stack below each other using the left hand side block as a “pivot”.

So:*

<table>      <table>       <table>
 <tr>         <tr>          <tr>
  <td></td>    <td></td>     <td></td>
 </tr>        </tr>         </tr>
</table>     </table>      </table>

Becomes:*

<table>
 <tr>
  <td></td>            
 </tr>             
</table>

<table>
 <tr>
  <td></td>            
 </tr>             
</table>

<table>
 <tr>
  <td></td>            
 </tr>             
</table>

* this is an attempt to “visualise the code shape” not literally what happens.

So the size of the element is triggered by the media query, but where the elements gravitate towards is hardwired.

ADVANTAGES
Huge advantage here is that it works everywhere that media queries are supported, so fewer bugs e.g. in android devices.

DISADVANTAGES
Huge disadvantage is that all versions of MS Outlook do not like it at all in one way or another. They do things like add padding around the tables (this can be addressed using hacks) which means that it can cause the elements to look misaligned. Worse it can push the last element off the edge so it appears underneath. A 1px line appears between the tables in Outlook 2013, which can make a mess if the design has not taken this into consideration already. When padding is used inside the block it can crop a few px off text – generally this method can cause pretty serious MS Outlook related headaches depending upon the design.

2: The Column Splitting method

Code the email more like you normally would, then use the CSS float/display block attributes to make the table layout display change.

So:*

<table>
 <tr>
  <td></td> <td></td> <td></td>
 </tr>
</table>

becomes:*

<table>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td></td>
 </tr>
</table>

* this is an attempt to “visualise the code shape” not literally what happens.

So email code structure is more usual, one table with multiple columns; but each column gets a rule which tells it to behave like a block. Very handy.

ADVANTAGES
Preserve the perfect obsession with alignment for desktop versions (the ones that clients sign off after all). No Outlook headaches. Less code and quicker, also very handy for certain layouts. Doesn’t rely on fixed widths, more flexible.

DISADVANTAGES
This method doesn’t work as universally. So on some devices (notably some Samsungs) we find partial optimisation occurs. The rest of the email will work and behave responsively, but the “stacking” of elements wont happen. The reason for this is that the doctype gets stripped in some instances and “quirks mode” or equivalent wont accept making the td elements behave like blocks. We have a solution for this retaining this coding style, but it’s far from perfect.

Worth highlighting that you can use either float: left (or indeed right) or display: block or could choose to double up for security. There are other variants of this using table layout which we will look into further in other blog posts.

Have a look at both of these examples in practice: http://codepen.io/actionrocket/pen/taqci

Do you have any other ways? Do you use floating <divs>? Do you use <p> tags to make blocks? Do you use display: table-cell? Email code is a crazy place to call home, let us know what you think.