Jordan Moore Intuition-led Designer

Building with Content Choreography

Responsive Web Design allows us to change layouts and element appearance based upon the width and/or height of the destination device. It’s the ideal scenario for users, coders and content coordinators alike - same site, same code, same content, just optimised for your experience depending on the display properties of the device you are using.

There can be stumbling blocks along the way to a beautiful unified site that runs perfectly on all platforms, which I’ll not go into as they are well documented (think, responsive images, page weight and so-on). The one that has been teasing me for a while is Content Choreography. Trent Walton wrote a great article on the matter. My key takeaway from his article was that when it comes to the narrow width single column view, content stacking is unavoidable and the approach the majority of us take is to simply stack the page elements in the order they appear in our document order.

What happens when this order isn’t ideal for a narrow single column viewport but it works as we want it to for others? We want to make the most of the confined space and let key content and components flourish, but sometimes our hierarchy of elements can prevent that from happening. Say for example we want to present an article in the narrow single column view, but before the article appears in the stacking order we have: a header (containing site name etc), navigation, maybe even a banner advertisement, then the article. The heart of the page is buried beneath items that may be less important in this context. Rather than brutally hiding these items with a display:none property we can reorder them using another CSS property - flexbox.

The flexible box layout module allows us to do more interesting things than our current box model allows for producing layouts, including the ability to reorder elements. Sounds exactly like what we wanted to do with the article example mentioned earlier, right? The flexbox property box-ordinal-group let’s us reorder elements based on a group number assigned to elements in our CSS. They appear in the order you specify starting from 1. So in our example we would priortise the elements on the page:

  • Header (1) - Contains the site name, most important
  • Navigation (4) - While a key element, it’s not crucial in our example - we just want to present an article
  • Banner advertisement (3) - Important for our advertisers, we are compromising for our example and dropping them below the article
  • Article (2) - The second most important thing on the page apart from the site’s name.

When we apply those values to box-ordinal-group for each of the elements, the browser would render them in this order:

  • Header (1)
  • Article (2)
  • Banner advertisement (3)
  • Navigation (4)

All this happens with minimal fuss - in your single column media query you apply display:box to the parent container which houses the elements you wish to re-order, assign the box-ordinal-group values according to the order in which you want them to appear, save, refresh and - ah-ha! They appear as if they have been floated horizontally, what happened? Flexbox arranges elements horizontally by default, because we only want to apply this at the single column view (I’ll explain why later), we need to add one more property to the container alongside display:box, and that property is - box-orient:vertical. Now we are working with our familiar stacked block-level elements only this time we have the delicious power to re-order them as we please.

I mentioned briefly that we would only want to do this when our layout is viewed in a single column, allow me to explore this a little further - there are advantages to applying flexbox at a single column level. One is that it is easier to get your head around moving objects up and down rather than horizontally moving and stretching and filling and stacking. Another is that by aiming to do this at a single column media query (I hate associating devices with viewport widths but for the sake of illustrating this point this would be the mobile view) we can enjoy the incredible support for flexbox on mobile devices. In addition it is (arguably) mobile devices that feel the pain of the need to re-arrange elements for optimal presentation in that context. Also if a mobile browser can’t recognise flexbox (IE9 Mobile is the only major one missing from the list so I’m assuming it can’t), then it will simply fallback to the default document order which isn’t the worst outcome.

So unless anybody points out some fundamental flaws in this technique, and please feel free to do so if there are any, then I plan to use this a lot when building responsive sites. I can see it causing some extra foresight when building for mobile first although I don’t think that’s an entirely bad thing, you would essentially build for mobile fallbacks and the larger context’s document order first, then re-order to the ideal choreographed scenario when finished. To be honest, I’m still figuring that part out, the best way to approach this, as with everything else in responsive web design is to build and refine and repeat.

View demo (resize your browser window to see the narrow column reordering) View explanation demo

Update

Thanks to the good work of Stewart Curry and Stuart Robson, this technique has a mixin for your favourite CSS pre-processor: