Content Choreography
The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past.
Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.
As I step into my 3rd responsive project with Paravel, I’ve made a habit out of picking apart media-queried sites I happen across, noting how things get rearranged at various widths. At times, it seems as though all of the site architecture & planning goes out the window as content reflows. I’ve also found that what might work very well for one type of content or site might not work so well for another.
Content Stacking
This is unavoidable. Take a 4 column site at full as the view narrows, 4 will become 3, then 2, and 1. The most common solution is to stack them on top of each other in chunks (fig. a). Simple enough, but what happens if the first column is really tall? Is the content in column 2 less important than all of the content in 1? It probably is for something like a full-length article, but I can’t help but think that in some cases, this method throws off the hierarchy.
Another approach could be to interdigitate content by folding elements into each other as the view narrows (fig. b). In real terms, what happens if a main column is a tall grid full of product thumbnails, and the sidebar features a coupon or promotion? When those columns are combined, it might be nice to slide the promo in between two product rows instead of shuffling that important piece to the bottom of the main column.
The Content Change-up
Another thing I’ve noticed is that media queries are being used to significantly redesign pages. I’ve seen background colors change and top-level elements move from left to right. If critical thought is applied here those choices may be spot on. But what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying—like someone rearranging the groceries in your pantry every time you closed the door. The power of media queries can be intoxicating, but just because you can doesn’t mean you should.
De-compartmentalize the Workflow
The production model of passing a site down the assembly line from design to development to launch seems to be an inefficient approach for responsive & adaptive site design. I think the Paravel method of gathering around a table & slugging every decision out until launch lends itself to the level of reiteration necessary for these projects. We’ve found that the best way forward is to pull all members of a team together to design, build, test and then evaluate in multiple quick rounds.
Of course, the alternative would be to create designs for every media query you plan to include, but that kind of thinking seems inefficient and fails to take advantage of the device-agnostic approach that responsive web design offers. In my mind, it’s best to build something that works on any possible width or device instead of something that works on all current widths and devices.
Balancing all of these new facets of the web designer’s role may seem overwhelming, but that’s the nature of the profession and one of the reasons why I love it. Honing the craft of content choreography will help us to orchestrate the best experience possible at any screen size or resolution. In time, I believe knowing what works best will become second-nature to us—just like designing progressively enhanced CSSed pages without tables or superfluous markup is now. The best thing for us to do? Practice! Jordan Moore has a fantastic article and demo on using flexbox to choreograph content. You should check it out.Update: 7/26/12
62 Responses
Leave a comment or contact me via Twitter @TrentWalton
Good observations. I’ll be sure to keep these in mind.
You make some good points here, its something I have been thinking alot about since I read Ethan Marcotte’s Responsive web design book. I have caught myself rethinking content altogether for my sites. Its very easy to cut sections out now for mobile users, but if it’s not necessary for them why do desktop users need the content? Thanks for the article Trent, great as always.
Beautifully written and explained. This is newer territory but necessary for the web to move forward. Thanks Trent! Beautiful work & site too...
Great article! There is so much to consider, content wise, with these new methods and technologies.
Great stuff Trent. Your approach to your blog posts and responsiveness has proven really inspirational to my new blog design, it’s always great to read your thoughts on such matters.
I think the key part here “De-compartmentalize the Workflow” – an approach to design and development that is almost essential in this new-ish paradigm of device-agnostic sites and web apps.
Brilliant read man.
Thanks for the article. Great stuff!
Part of the enemy here is float based layouts. They are better than table based layouts in that they are slightly less markup-order-dependent, but still are to a fairly high degree.
The reason a sidebar drops down below a main content area when screens are narrower is because they are both big rectangles that all stick together and they have nowhere else to go.
I’m not sure future layout techniques like flexbox will help us here, but CSS Regions (dev.w3.org/csswg/css3-regions/) sound like a mighty nice solution. Combined with media queries I’m sure we’ll be shuffling around modules of content much more efficiently. In like 50 years or whatever.
Great post! The idea of constant evaluation is indeed a smart choice when it comes to the web platform. If you meet often you have more of a chance to fine-tune layout, messaging, and determine overall if the project is successfully reaching the objectives it’s aiming for.
I totally agree Matthew. It’s the question everyone asks: If people can only retain 4-6 items at a time why even present a user with more information? It’s because people “want” more information than they can retain so they “feel” as if they have options. People don’t like being told, they like exploring.
I just finished reading 100 Things Every Designer Should Know About People and it thoroughly explained what people want and how people perceive content. I highly recommend reading the book! ;)
Another good post, Trent. It seems you’ve got responsive on your mind for real. I like it.
Regarding the issue illustrated by Fig. A/B, I think we’re about to see an explosion of good (and not so good) ideas over the next months on how to solve this, surely it is one of the core challenges with responsive.
We’ve been thinking about the sidebar on our blog – I know the blog’s not fully responsive yet, will let you know when it is ;) – where does it go when it no longer fits on the screen? At the moment we’re moving and reorganising the whole thing to the very bottom of the page, but this seems counter-intuitive if a particular post gets a lot of comments. That’s a long way to scroll to get to the sign-up area for example. On the other hand it might be that this “where do I go now” type of information benefits from being at the end of the content, serving as a natural next step for the reader.
A different approach would be to hide the whole thing off the right hand edge of the screen, and encourage people to click (like the contact tab on primate.co.uk) – or even better, swipe – to see more. This will probably see a lot of visitors leave without ever seeing the sidebar, but perhaps the ones who do will be more inclined to actually absorb the information in it once it’s been swiped in.
Who knows what the best option is? Hope to run a test to figure it out soon.
@Chris Coyier: Whoa. CSS Regions for the win...
and
It’ll be exciting to see how this evolves. Thanks for posting that :)
Nicely put. I think something we need to keep in mind when building responsive sites is that every project is different. One method of re factoring a layout in project A might make no sense implemented in project B. We have a tendency when using a new approach to create rigid rules that can restrict us later on.
Well said! I’ve found that starting with the single column state and then deciding how it should grow, rather than designing a multicolumn layout and trying to squish it together into one, helps get the DOM hierarchy right.
I love the idea that in a device agnostic design neither the single or multicolumn state is more important than the other.
I’ve been thinking about this a lot lately as well, especially the content stacking interdigitation; and would be really interested in hearing about what kind of approach one might take to make some content blocks behave outside the context of the normal flow.
I can tell you’ve thought about this quite a bit. I had to read the “Content Stacking” section a few times until I could wrap my head around the concept.
As other mentioned, very nice write-up. The last two paragraphs summarize very well.
I’ve been a fan of regions since they were pointed out to me by a friend. Makes much more sense to me.
Lots of smart comments here! I’ve always thought of responsive design as being reflexive in quality. I guess the easiest way to explain this is to imagine one of those pendulum ball toys that executives have on their desks. Imagine that there are three balls: on the left, there’s the content, in the middle, there’s the design, and on the right, there’s the format or device.
Responsive design is reflexive, meaning that the influence on the presentation is bidirectional, changes coming from both the needs of the content and the context of the device. This dual influence, however, creates some hiccups, when the shift in presentation created by the format doesn’t match what’s required by the hierarchy of content.
So, those pendulums swing around and clink and go back and forth, and I’m left wondering: what if we make all the parts of this little machine move, content included, so it can properly swing?
Good points.
I would like to add that while we are seeing more optimisation for smaller sizes, big screens are still being left out. Here I am not suggesting more content to be squeezed in (we already see too many clutered pages) but rather to better utilise the it, a trivial example would be larger, easier to read font-size.
p.s.: The part about coupons in content stacking could be achived using plain old margins.
I find this article (and the whole idea of responsive web design) very intriguing.
Perhaps it is just me getting excited, but responsive web design is REVOLUTIONARY! Can you think of any other medium in the history of man where content has been adaptive to the proportions of it’s medium in this way? For the longest time we had paper. All design was on paper and it was static. You knew your final proportions. Sure, sometimes you’d have one design that would be intended for different paper sizes, but you still knew the end product was a tangible, measurable format you could hold in your hands. And sure, the early web may have had responsive design as it’s goal, but we never travelled there like we are now! And to think, we are molding this future- blazing the trail! for with the ever increasing prevelency of digital devices, responsive design in all aspects of content( not just in HTML form) is going to become the new standard!
Thanks for the thoughts Trent.
I found that responsive Webdesign and cases like you describe here require much more planning ahead. The planning phase get’s much more important. As long as regions aren’t ready to use and we are stuck to floats we need to carefully think about our markup to solve those problems only with CSS and media queries. And for me, starting with mobile makes it a bit easier than the other way around.
I am so enamored with responsive web design, it’s very exciting to see more and more sites implementing this and finding new ways to rearrange content. When I designed my first responsively designed site (risingsunjeans.com) there wasn’t much around for inspiration, and it was especially tricky because the client wanted such a graphic heavy site. For the most part I don’t like to remove any content for small screen devices, and I like the idea of laying out the small screen design first, and then adapting it to fit larger screens. I think it’s possible we’ll be doing things very differently in a few years but until then this seems like the best way to go! Someone needs to start a site collecting the best/most interesting responsively designed sites.
I love hearing your thoughts, keep writing.
Thanks for this new clever article Trent.
I just wanted to add something concerning css region. I’ve downloaded few examples few monthes ago on Adobe Labs. There are some good examples to figure out what are the possibilities. I personally like the “hidden costs pie chart” and the Bonneville speedway diaporama.
At this time I haven’t gone much deeper in this (not enough time) but I follow your thoughts concerning css region...should probably be a good solution.
Spot on. I just finished my fifth responsive site and I don’t have any delusions that they are perfect.
A specific example where I’ve scratched my head considering content flow is sub navigation. Relative to the content of the page does this belong at the top or the bottom. It’s easy to think of use cases where either placement is ideal.
To me, this whole responsive or device independent approach is forcing us to consider design and development more thoughtfully. There’s no doubt I was very comfortable with fixed width layouts and had become complacent.
Thanks for sharing your thoughts and process.
@Jim: Although I couldn’t agree more that responsive web design is revolutionary, I do actually have an example of an equally revolutionary idea in design: Jan Tschichold. He’s the guy who told us print design doesn’t need to be centrally aligned, amongst other things. Though I’m scared to stick my neck out, @beep might just have written himself into history by coining this new term.
I recently read this article about responsive design and I couldn’t help but remember Trent’s article here. I think they go hand in hand with each other. A great read!
blog.andyhume.net/responsive-by-default
@Trent:
I’ve got a little something cooking, not sure if it really fits in with what you discuss. But using the (older) CSS3 box-ordinal-group to re-appropriate content depending on screen size
alwaystwisted.com/backstage/css3-box.html
Very well written piece both in content and language.
I read responsive web design last week and its a brilliant little book. I’m really looking forward to getting going fully with these media queries.
Very interesting you say you don’t design for every screen size. What i was considering was large 1600+, 1024 and iphone in some kind of PSD. But with little experience intrigued to hear your thoughts on this?
@ArminC: That’s a good point! I don’t think a larger font-size would be a trivial example, but an excellent one. For this particular site, I stuck with a 960px max-width simply because the resolution of images utilized in my art directed posts sorta topped-out there. Maybe that ought to change. Maybe taking my 18px font size to 20 on 1000px + widths would be cool.
@Chris: I can definitely see how sub-navs could be difficult to prioritize. I’ll have to come up with a solution myself here for an upcoming project. Maybe a good practice would be to place sub links in a drop down? Dave Rupert did that on the main nav for his ATX Webshow redesign.
@Jim: Thanks for sharing that! :) Andy published another article I found useful about responsive containers.
@Stuart Robson: Very interesting. I’ll to have to dig into & learn from your CSS soon.
@John Macpherson: The current Paravel workflow is to start at the 960ish width and go from there when it comes to design. If we want to take the site wider, we’ll probably just make sure the image resource that will continue to increase in size are exported at a resolution that can support it. Though, these days it seems like our workflow changes on a monthly basis :)
This article is a kind of sledgehammer to me and that’s good, it’s time to wake up, thank you!