How To Maintain Hierarchy Through Content Choreography

Advertisement

One of the issues we need to be concerned with in responsive design1 is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post “Content Choreography2,” which showed how visual hierarchy gets lost when columns are dropped below one another.

While techniques exist to help with part of the problem, the solution also requires conscious thought in how you structure blocks of content3 in your HTML. You need to think about how you’ll want to rearrange blocks of content as your design moves from single to multiple columns.

What Is Content Choreography?

As a layout changes from a widescreen to a tablet to a smartphone, the number of columns is usually reduced from three or four down to one. The typical and easiest solution is to drop the columns one by one and stack them on top of each other.

Diagram showing how columns drop in a typical 3 column responsive design4
The figure above shows three columns of content. The lines below the two right columns indicate that each will drop below the main content as the screen’s width decreases.

Once you’re down to a single column, the layout is constrained by the source order of the content blocks in the HTML. Whichever column comes first in the HTML is displayed at the top; whichever column is next in the HTML goes right below; and so on down the stack.

Unfortunately, this means that information that is highly visible at the top of the page when multiple columns are present ends up being far down the page as one column drops below another. If content is important enough to show at the top of the page when viewed on a widescreen browser, do we want to bury it on a smartphone screen?

All of the information in your sidebar column probably isn’t as important as all of the information in your main content column, but some of the sidebar content is likely more important than some of the main content.

Two examples of single column responsive designs5
The left side of the figure above shows a single column layout, where each column drops in its entirety below the previous one. The right side shows elements from each column mixing with other elements.

The left side of the image above shows the typical column drop. As the design is reduced to a single column, the content inside each container or column is dropped below all of the content in another container.

Ideally, the visual hierarchy would be maintained, and the content in different columns would intermix as the design moves from three columns to two to one. We’d also like more control over the display order of content, beyond the HTML source order. Both scenarios are illustrated on the right side of the image above.

This greater control over the blocks inside containers is what’s considered content choreography. I assume Trent chose the word “choreography” as a metaphor for how we’d like to orchestrate the movement of blocks of content as our layout changes.

Our current development practices don’t make this choreography easy. What they do make easy is dropping entire columns one below the other, which means that everything inside one column must always end up in its entirety above or below everything in another column.

Two Problems in One

What I’ve described above are really two separate problems:

  • Source order
    In a single-column layout, blocks of content will display in the same order as they’re located in the HTML structure. Unfortunately, the best source order for one layout isn’t necessarily the best source order for another.
  • Intermixing content
    Instead of having to drop entire columns of content below one another, we’d like to mix blocks of content from the different columns in the single-column layout.

The first issue has some technical solutions on the way, one of which is just about here. The second issue will require that we change our thinking in how we develop layouts.

Solving The Source-Order Problem

In time, there will be several solutions to the source-order issue, in the form of new CSS specifications. Depending on which browsers you need to support and what you’re willing to do to support them, one of those specifications may already be here.

Three specifications that we’ll likely find ourselves using in the future are:

The second and third of these specifications have almost no support in current browsers. Surprisingly, Internet Explorer is leading the way with both. IE 10 supports regions and grid layouts with the -ms vendor prefix. No other browser offers any support at the moment, so we’ll have to wait on these specs a bit longer.

Flexbox, however, has pretty good support9. The spec has undergone some changes, and two versions are currently supported by browsers10. If you don’t mind mixing the old and new syntaxes11, you can get flexbox to work in the current versions of almost all browsers.

Opera mini and IE below version 10 don’t support any flexbox syntax. However, you can use the Flexie polyfill12 to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I’ll point you to some articles I’ve written showing the old syntax13 and the new syntax14, as well as one that walks you through the new syntax to set up a responsive layout15 that overcomes the issue of source order.

Suffice it to say that with a single CSS property, we can essentially tell our documents to display blocks of content in a different order than how the source code orders the blocks in the HTML. Jordan Moore has also written about flexbox and content choreography16, and he’s created a demo to illustrate17.

What you should take away from this section is that solutions to the source-order problem are coming soon — one of them very soon. It won’t be long before we can easily rearrange blocks inside a single container. However, rearranging blocks inside one container isn’t the same as rearranging them across several containers.

Solving The Intermixing Content Problem

Unlike the source-order problem, the issue of intermixing content across columns doesn’t have a technical solution. It’s up to us, and, ultimately, it means we need to wrap content in fewer HTML containers.

We’ll have to dig a little deeper into the problem to understand why this is so.

CSS Visual Formatting Models

CSS offers several visual formatting models18, such as the normal document flow, floated elements and positioned elements. Flexbox is part of another, the flexible box layout model19. In all of these models, elements are located relative to a containing element.

We can make it look as though elements are not bound by their containers, but they still are. For example, you could float an element that’s inside one column and give it a negative margin so large that it appears to be located in another column, however, elements in that other column won’t reorient themselves. To these elements, the floated element is still in the first column.

Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won’t. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won’t get out of the way. We need them to get out of the way, though, if we’re going to intermix page elements.

With a little thought and CSS, you can usually figure out some way to rearrange elements inside one container however you like. With a little more thought, you can even make elements in one container appear to be located inside another, although you’ll usually have to position the elements in that other container with more complex CSS and with what Harry Roberts refers to as “magic numbers20.”

If the term is new to you, magic numbers are those numbers we use to make something work in a single particular instance. They typically stop working as soon as some other value changes, and, given the nature of responsive design, other values are always changing. Magic numbers in CSS are best avoided.

We Need to Give Up Containers

For the last few years, whenever we’ve wanted to move a group of adjacent elements to a certain part of a layout, we’d wrap those elements in a container and write CSS to display the container somewhere in the design. I’m sure you’ve used CSS selectors like #wrapper and #container more than once.

We need fewer of these HTML containers and more CSS virtual container classes that we can apply to different elements as needed.

In other words, instead of this…


<div id="container">
  <div>Content here</div>
  <div>Content here</div>
  <div>Content here</div>
</div>

… we need more of this:


<div class="container">Content here</div>
<div class="container">Content here</div>
<div class="container">Content here</div>

In the latter block, each division might have a different class name or perhaps different additional classes applied. This allows for greater flexibility in rearranging them in the layout. In the first block of code, the three content divisions will always reside inside their parent container.

I’m not suggesting that the first block of HTML above should never be used. There will absolutely be times when wrapping several divisions of content with a container makes sense. However, if you want some of those blocks to intermix with elements in other columns, then you’ll have to think more in terms of the second block of HTML above.

With CSS, we have the ability to rearrange blocks inside a container. We don’t have the ability to break content out of one container and move it inside another container. If you want more mixing of blocks, then you’ll need fewer containers.

Examples

While there are currently far more instances of websites that are dropping columns wholesale, there are certainly websites that mix content in one column with content in another column.

Let me first offer a detailed look at my own website, since I’m most familiar with it. I’ll follow this up with a few other websites that intermix content in slightly different ways.

A Personal Example

Around the time that Trent coined the term “content choreography,” I was working on a redesign of my website and was trying to figure out how to mix content blocks21 as the layout changed.

The image below shows the top of a typical blog post on my website when the browser is wide enough to accommodate two columns. Click the image to see the live post.

Meta information such as my name and the publication date are in a column to the left, while the article’s title, main text, images, headings and so on are in a column to the right.

Screenshot of post from Vanseo Design with two-column layout22
My website when the browser is wide enough to accommodate two columns.

Seeing the layout, you might instinctively think each “column” is wrapped in its own container and that I’ve floated both columns left or right; it’s how I would have developed this layout a few years ago. But doing that leads to the problem of one of the columns being forced to drop below the other on small screens.

Below is the same page as a single column on a narrower screen. The meta information from the left column sits below the article’s title from the right column but above everything else in that right column. Both “columns” of content have actually been inside the same container all along.

Screenshot of post from Vanseo Design with single column layout23
My website as a single column on a narrower screen.

The image below presents a more abstract view of what’s going on. On the left, you see the layout as it appears when displayed as a single column. On the right is the two-column version of the layout.

Every element is its own unique block and serves as its own container. The page’s main heading is its own contained block. All of the meta information is inside another container directly below it. After that, every paragraph, subheading and image is also its own self-contained block of content. The same goes for anything else that might end up in a post, such as a block quote or code block.

Abstract diagram showing content on Vanseo Design with single and 2 column layout24
A more abstract view of what’s going on.

On small screens, all of the blocks display in the source order. On wider screens, I shift this entire single “column” to the right by adding a left margin to each individual block. In the CSS, I have a long list of selectors with a single line of declarations. When I want something to appear in the “left column,” I float it left and reset its margin to zero.

The solution is hardly perfect. Blocks pulled into the virtual left column won’t slide up or down. They simply move to the left. This solution doesn’t enable me to display something from the bottom of the article at the top of the left column. But, hopefully, this illustrates how rethinking containers can help us intermix content from different columns into a single column.

The Next Web

The Next Web25 mostly drops columns down as it rearranges from three columns to one, but it does intermix elements at the top of the page.

Screenshots of The Next Web26

The image above shows the website displayed as two columns (on the left) and a single column (on the right). The blue outline shows the container around elements at the top of the page. You can see that the secondary stories to the right of the top story drop below it but remain above the other stories, due to the way the containers have been set up.

In the single column, the images in all of the first three stories are now physically the same size, so the hierarchy has changed. However, the second and third stories are still seen as “less important” because they come after the top story.

This intermixing is achieved by thinking in advance of which elements will shift columns and by placing elements that need to be rearranged in the same container, separate from other containers of content.

Time

Time27 magazine intermixes content across columns and containers. Notice how the “Latest Headlines” section (in the green container) moves from the right column at the top to just below the main image and story links in the single column.

Screenshots of Time Magazine website28

While not shown in the image above, the row of four images on the left follows the “Latest Headlines” in the single column. The remaining content in the right column drops much further down. You can see this by viewing the website directly.

The website achieves this intermixing by ignoring most of what I’ve said in this post about using fewer containers. Instead, it uses JavaScript to rewrite the HTML, moving elements in and out of different containers as the layout changes. It is another solution to this issue, although better planning up front is preferable.

Enoch’s Fish & Chips

The navigation on Enoch’s Fish & Chips29’ website integrates with the logo and company blurb when the layout is a single column:

Screenshot of Enoch's Fish and Chips with single column30

The navigation (and the tagline further down) moves to the right column when the browser is wide enough to accommodate multiple columns.

The website rearranges these elements similar to the way I rearrange elements on my own website; the logo, navigation, blurb and tagline are each a separate container. To move them around, the website uses positioning instead of floats, but otherwise, the principle is the same.

Screenshot of Enoch's Fish and Chips at 2 columns31

Closing Thoughts

Many of us have, understandably, been taking the easy way out with responsive layouts. When the width of a screen cannot accommodate a column, we’ve been dropping the column in its entirety below other columns. In some cases, this is perfectly fine. In others, it breaks the carefully designed hierarchy.

We face two issues in maintaining the hierarchy. The first is having to follow the HTML source order when the layout is a single column. The solution to this problem is a technical one and is coming in the form of new CSS specs that will allow the display order and the HTML source order to be different.

The second problem is less technical and more a challenge to how we think about structuring our HTML, particularly to how we use containers. Elements can’t move from one container to the next. We can fake it with complex CSS, or we can rewrite the HTML with JavaScript; but, ultimately, if we want to intermix elements, we’re best of using fewer HTML containers to create columns. Instead, we should leave more of our content blocks in their own containers and use CSS to create virtual columns in the layout.

This solution doesn’t confine our elements to structural containers and instead enables us to more easily rearrange the elements in different layouts.

(al)

↑ Back to topShare on Twitter

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles. He's a web designer and WordPress developer who moved to Boulder, Colorado to be near the mountains. He blogs at Vanseo Design and owns and operates a small business forum helping people learn how to run and market their business better.

  1. 1

    Great article Steven. But what if approaching this problem from a different angle could save the headache? There are great advantages to having side-columns, such as readability for the main passage (narrower text field), space for promotional material etc. But perhaps we do not need them. Especially if we are to design using mobile-first approach or if we are no longer desire to copy print layout and are striving for something new (like Pinterest). I.e. design screens, not columns. An example to consider is a floating box approach that I use on my site (though still not perfect) http://www.artsocket.com – you can see it once you scroll down and try resizing your browser.

    To keep this short: have a look, hopefully it will help you with your future designs.

    -5
    • 2

      This site breaks on a 27″ iMac. While I agree with the mobile first approach, lots of people still use bigger screens and the content still needs to be able to accommodate for that.

      3
    • 4

      Thanks Dmitri. Interesting approach. I guess the main thing for me is that we need to start rethinking our basic approach. Whether it’s less containers or a floating box, the way we had been doing things leads to column drops and I think we’re realizing it’s not the best way to go about this. It’s easy to drop columns, but it’s usually not the best option.

      1
  2. 5

    Great stuff, Steven. Thanks for writing about this. I really like that you separated source order from intermixing content—a smart way to outline what’s possible and what’s to come.

    8
    • 6

      Thanks Trent. Yeah, the more I’ve thought about this, the more they both stand out to me as different issues. An ability to have source order and display order is great, but it only solves one part of this.

      And thanks for writing the original content choreography article. I was struggling with the problem at the time and then your article came out and crystalized a lot for me.

      1
  3. 7

    Michael Kennedy

    April 25, 2013 3:48 pm

    a must read for anyone looking for a clear indication of the next right step in responsive development. Great article, Steven

    0
  4. 9

    I Love how you’ve worked out your Blog, but for myself, I’m not very keen on dropping the idea of containers completely. It seems to me that the problem of maintaining the hierarchy of content from top to bottom can also be tackled by constructing pages from horizontal sections that each contain columns (i.e. a Grid).

    In my general layout for DotNetNuke, I tend to allow a banner, followed by 3 content areas, with the obligatory header and footer areas top and bottom. Clearly by applying important panels to the top left, and lesser to the bottom right, the layout would fold in a zigzag pattern – across the first line, then the second, third, fourth and so on. (low priority items can be marked so that they disappear completely on mobile).

    Long story short, the net result is the same.

    Mark Rabjohn
    Integrated Arts (http://www.ia.uk.com)

    1
    • 10

      I hope I didn’t imply you can never wrap things in containers. I think you definitely can. It becomes a problem when you want certain things two columns to mix with each other when you only have a single column.

      What I think we need to do is more planning up front. When we want mixing we should think less columns, but when we have a few elements we want to stay together in different layout configurations then by all means wrap them in a container.

      0
  5. 11

    Thak you for this great information. Great tips!

    0
  6. 13

    Hey Bradley, it sounds like you are looking to internet explorer to give you solutions that you could find with the zurb foundation CSS framework and the like… without wasting time on the most annoying browser (s) series ever to be imposed on Web designers. IE just needs to quit or learn how to update itself better.

    0
  7. 14

    Yes, Foundation by Zurb have a nice coreography hack for the grid, with push/pull classes.
    http://foundation.zurb.com/docs/components/grid.html

    1
  8. 15

    im shocked the article didn’t mention anything about using better SEMANTIC HTML 5 when there are so many more tags than div to use. That helps write and organize your CSS better.

    section, aside, header these are all things we should be using to describe content.

    Also the use of the BluePrint grid layout framework build into Compass is awesome in figuring out column sizes without using container divs

    -3
    • 16

      That’s because the article’s not about element semantics, it’s about organising content, and whether you use a div, section, article, aside, or main, it’s got no bearing on where or how it’s going to appear on your screen. Going off on a tangent about what the correct tags to use are is a completely different message which has been covered in other articles on SM already.

      3
    • 17

      I’m equally shocked at how you missed the entire point of the article. No amount of new HTML5 tags will solve the problems described in this article. It’s a conceptual problem that applies to any HTML markup.

      3
  9. 18

    I think the jury is out, but for many sites, RWD just doesn’t make sense. We are at the front end of a whole “write once, read everywhere” development effort with RWD, and it could end up being just like Java, which didn’t live up to the “write once, run everywhere” mantra it was supposed to espouse. Java is brilliant, but super top-heavy, has a high barrier to entry, and creates as many problems as it solves in some usages.

    Look at the top 10 websites at Alexa. No responsive sites. The top 30 sites for US – not a single RWD there. It’s not that they can’t do it – the content just doesn’t lend itself to the RWD form factor. If you take a complex site, like say Amazon, how could you develop rules about what content to order where as the viewport resizes? And not lose your mind? RWD does not make sense for all content and usage types. Sometimes, the best experience is the full desktop site on your mobile or tablet device.

    On the other hand, looking at just about any standard website on my iPhone or the wife’s Galaxy II, is a pleasure. The device just works. Pinch and tap to zoom are mature user interactions that are so natural they don’t need improvement. I like the full website experience, and apparently most people do, for some of the most popular sites.

    I think after the hype cools off, RWD will be just another, albeit excellent, solution for the right content and context. Issues like content ordering and the complexity of code and level of HTML savvy to solve them are legitimate barriers to entry. It’s certainly useful, but certainly advanced, and very certainly very complex to manage complex content using this method.

    0
  10. 20

    Thanks for writing this! I’m trying to solve the same issue of intermixing content, but in an HTML email. While I’m working with tables instead of divs, seeing you spell out your thinking on the issue has helped me get a clearer idea of the issues and made me feel more confident of my current angle of attack!

    0
  11. 21

    Great article, thanks for writing it.
    There’s a very simple way for tracking the interaction of a user with rearranged elements in a responsive layout. Check the article at http://maigruen.netzkern.de/responsive-web-design-and-google-analytics-introducing-responsive-tracking/

    0
  12. 22

    Sometimes in a responsive site there really isn’t a way to reshuffle the layout with pure CSS. I’ve resorted to Jquery and Modernizr to achieve this.

    For example on my site tiebarclips.co.uk I had some social media links in the top-right of the header (desktop) but for a mobile device, I didn’t want them to be so prominent. So I did this…

    if(Modernizr.mq(‘screen and (max-width: 480px)’)) {
    $(‘#social-media-links’).insertAfter(‘#footer’);
    }
    else {

    }

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top