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.

  • Jaina

    I use the table alignment method – the top version. With some dirty bits of coding in an attempt to get it working universally. Notably this method from EmailonAcid – http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010 (Step 3) However I’ve found this doesn’t work perfectly in the Gmail App for android with more than 2 columns. But I’m sure it’s something I can figure out eventually.

    I’ve tried the float method, but that is harder to get to work universally. Damn floats.

  • Graeme Watt

    I’ve found that by adding the float: left to my columns (to counteract display:block not being supported in Samsung devices) doesn’t actually do anything :S Been testing for a while now to figure out a solution to the Samsung S4 issues. To make matters worse, it seems like the latest version of Android will roll out similar problems across all Android devices…

  • Pingback: Take the pain out of the Table Align method… | #ActionRocketLabs

  • Mike Ragan

    Hi Graeme, thanks for commenting! Yes, me too – believe it’s because of stripping doctype. Table align method gave us much more luck over the floats, but you are 100% correct the very latest version of android mail apps seem to be bugging out on some devices, notably the S4. Let us know if you find a reliable fix for the S4! We have an alternate partial solution involving background positioning which will post soon. Maybe that will be of some interest, although far from perfect right now sadly…

  • Mike Ragan

    Hi Jaina, I know the feeling! The Gmail app is a special source of pain for us all… As you use the table align method, perhaps this post will be of use to you: http://labs.actionrocket.co/make_mobile_email_work_in_outlook we’d love to hear how you get on, especially with gmail app optimisation…It feels like a never ending mission sometimes!

  • Jaina

    Thanks for the post – really helpful. When I have a spare moment, will try one of those other methods.

    The Gmail app for Android is a huge source of pain. It’s fine for iOS though. Just for Android. Managed to get past the whole issue I used to have with the zoom level, but there’s always a new curve ball by Gmail thrown.

  • Graeme Watt

    Yeah it’s a pain, I’ve mainly noticed it on the S4 but I’m worried with the new Android update that things are going to get a lot more tricky! If I find a solution I’ll let you know! One thing I’ve figured out recently is how to re-order columns – i.e. the right column on desktop goes above the left column, rather than the left column going first. I’ll post a link to the article I’ve written about it once it’s live!

  • Pingback: How to make content reverse stack on mobile | #ActionRocketLabs

  • stevenc

    I have been using in place of . Since is not dependant on the presence of a doctype, I can retain the common HTML email structure AND repsonsive functionality. It requires some additional CSS, and stacked content within the must be contained in a single table element for AOL.

    table th { margin:0 !important; padding:0 !important; vertical-align:top; font-weight:normal; }
    @media only screen and (max-width: 640px) {
    *[class].block { display:block !important; }
    }

    The left column becomes the top row
    The middle column becomes the middle row
    The right column becomes the bottom row

  • http://labs.actionrocket.co/ Mike Ragan

    Hi Steven – thanks so much for the comment! That is really interesting. On the face of it, it is exactly the thing I was looking for a little while ago but couldn’t find! Really excellent stuff. I will look into shaping this method and seeing if it can go further. Do you have a twitter account or something I can use to reference you?

  • stevenc

    Cool Mike! Give it a try! It works nicely with table-footer-group, table-header-group, and table-header-caption, too. Just be aware of the inline element.

  • Pingback: td or not to td? That is now a question. | #ActionRocketLabs

  • Pingback: Email design resources you don't want to ignore - Mailixir