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 width: 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.

shuffling content on responsive resize
fig. a
interdigitating content on responsive resize
fig. b

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.

workflow

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!

Update: 7/26/12

Jordan Moore has a fantastic article and demo on using flexbox to choreograph content. You should check it out.

Ads by Fusion

66 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Michael Lynch

    Good observations. I’ll be sure to keep these in mind.

  • matthew carleton

    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.

  • Josh Long

    Beautifully written and explained. This is newer territory but necessary for the web to move forward. Thanks Trent! Beautiful work & site too...

  • Chad MacDonald

    Great article! There is so much to consider, content wise, with these new methods and technologies.

  • Scott Riley

    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.

  • Kevin Dee Davis

    Thanks for the article. Great stuff!

  • Chris Coyier

    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 (http://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.

  • Amanda Miller

    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! ;)

  • Espen Brunborg

    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.

  • Trent

    @Chris Coyier: Whoa. CSS Regions for the win...

    The CSS Regions module allows content to flow across multiple areas called regions. The regions do not necessarily follow the document order.

    and

    for more complex layouts, content needs to flow from one area of the page to the next without limitation of the areas’ sizes and positions.

    It’ll be exciting to see how this evolves. Thanks for posting that :)

  • James Beardmore

    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.

  • Chris Armstrong

    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.

  • Jared Fager

    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.

  • Ted Goas

    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.

  • Chris Wallace

    I’ve been a fan of regions since they were pointed out to me by a friend. Makes much more sense to me.

  • Frank Chimero

    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?

  • ArminC

    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.

  • Jim

    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. 

  • Christoph Zillgens

    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.

  • Daniel Curran

    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 (http://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.

  • Aurélien Foutoyet

    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.

  • Chris

    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.

  • Espen Brunborg

    @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.

  • Jim

    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!

    http://blog.andyhume.net/responsive-by-default

  • Stuart Robson

    @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

    http://alwaystwisted.com/backstage/css3-box.html

  • John Macpherson

    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?

  • Trent

    @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 :)

  • Theo

    This article is a kind of sledgehammer to me and that’s good, it’s time to wake up, thank you!

  • Jens Ahrengot Boddum

    Great article, Trent!

    Especially one of the arguments you make are spot on in my book:

    The sites design shouldn’t be fundamentally different when viewed a mobile device rather than a 27″ monitor. I think css-tricks.com is a good example of a mobile layout differing too much from the desktop version.

    By the way, the responsive layout on this site is one of the best ones I’ve seen so far. Nothing is ever lost when you resize and the visual hierarchy stays the same.

    Also, http://mediaqueri.es/ is a cool collection of responsive sites that comes in handy when you’re looking for inspiration.

  • Nicole Taylor

    Hi Trent. I teach at the Austin Art Institute and use your personal and company website for many topics of inspiration. Would you be available to come present to a group at our school this month? We would love to hear about your designs, inspirations, processes and overlook on our industry. Let me know if you are interested and we will find a time that fits your schedule. Thank you for producing such inspiring work!

  • Kevin Ohlin

    Good stuff here, Trent.

    So good, in fact, that I’m attempting to work your suggestions into the responsive realignment of my personal site (http://kevinohlin.com).

    Thus far I’ve got a couple of sidebar sections doing a disappearing act and the about section shifting from the bottom of the sidebar to the bottom of the whole page upon resizing below 767px wide.

  • Christian Krammer

    Great roundup, Trent. I also think there is no one-fits-all approach that works for every site. Maybe there are - or will shortly be introduced - some basic patterns, but basically you have to think about how to arrange elements again every time.

  • Missy

    While I think this is a good article, every UI designer worth his or her salt will know that it is the END USER who matters most. It doesn’t matter how fancy you get with your responsive layouts. What a designer may think is “sexy” may turn out to be downright annoying for the customer. So before you go showing off your newly-discovered responsive design skills, put yourself in the end user’s shoes first.

  • Trent

    @Missy: More or less, isn’t that what I’m saying in the article? :)

  • Robin Freelance webdesigner

    Great read and good point on rethinking around the table. If you take multiple devices and people in one room. A lot can be approved in 20 minutes.

  • Pen

    Love your website and really interesting article - well done!

  • Ron Webber

    Very nice post!

  • matt bridgeman

    Great article. In an Agency environment, The Paravel method of iterative design and build seems ideal. Pushing to change models of institutionalised production-line processes to cater for responsive web builds, even for one off projects, within agencies will be troublesome but most certainly worth it.

  • Paul

    This is a terrific article, as expected from you, Trent! I’ll be sure to keep all of this in mind and hopefully employ it in my current and future projects.

  • Seth Earley

    Hi Trent,

    Great stuff. We actually did a project for a customer this spring around Content Choreography from a metadata perspective. (“Content Choreography” is the term our consultant used to explain the concept of metadata flowing throughout the site - which is closely related to your ideas around adaptive design flow). I will post the slides after we sanitize them. Would enjoy chatting with you about our September call series where we will discuss these concepts. Perhaps we could have you contribute your thinking on the topic.

    - Seth

  • David Elison

    Another new technique for creating web sites is Timing Control for Script Based Animations. I recommend you guys incorporate it into your works.

  • Alan Houser

    So. Much. To. Learn.

  • Kevin M

    Brilliantious!

  • Nathan McGinley

    @matthew carleton: You make a good point, but for me when I look at websites on my phone I’m not looking for an extensive read. If I find something interesting I usually bookmark it and read it when I get home; I don’t want to read long articles on that tiny screen it kills my eyes!

  • Seth Earley

    Here is the promised blog post on our take on Content Choreography. Trent, please send a note to me if you would like to speak on our call series coming up next month.

    http://www.earley.com/blog/introducing-content-choreography

    Be sure to take a look at the slides at the bottom of the page or check them out here:
    http://www.slideshare.net/Earley/earley-associates-contentchoreographyapproach20110428?from=ss_embed

    - Seth

  • Michael Acevedo

    Thanks for this post, Trent. I have 2 responsive designs lined up and I am still trying to wrap this concept in my head. This is definitely a great start to helping me understand responsive design, thanks again!

  • Loubna

    There’s still a lot to learn for me, but I am starting to understand and use this concept. Great article.

  • Adam

    Brilliant stuff here, Trent. There are so many companies and brands out there throwing excess money at multiple designs. Responsive design doesn’t just enhance the end-user’s experience, it helps companies save money by eliminating the need to develop an entirely separate site (or app) for the ever-growing mobile market.

    Something else to consider - how can responsive design react not just to the user’s screen size, but to the user’s behavior?

    Services like Instapaper and Readability deal specifically with users interested in reading only - eliminating all the clutter around the copy.

    Your site is already designed to be read easily, but what about big media sites like NYTimes.com or even some of the larger blogs out there. Could their designs be so responsive that if a user begins a “slow scroll” as they read an article, all of the content surrounding the copy fades in order to enhance the reading experience and eliminate distraction? It might be counter-intuitive to some profit models, but users certainly might appreciate it.

    On a side note, have you or Paravel considered releasing your responsive designs as WordPress themes?

  • Brett Jankord

    I believe media queries are not enough to create a truly mobile optimized site, but that’s a whole different topic. My point is that there are issues with RWD that need solutions, like how to handle content structuring at different break points. I think this will become very important with sites that having a big dependency on advertising. One solution that came to my mind was using JavaScript to restructure the HTML at varying break points. Steven Bradley wrote an interesting article about this issue - http://www.vanseodesign.com/web-design/responsive-problem-solution/

    I’m glad to see people willing to experiment with RWD and share what they have learned and issues they have come across. RWD is still a fairly new concept and I believe it’s up to us to pioneer best practices and share what we learn. I look forward to reading more of your articles Trent.

  • Nkrumah

    Great article Trent. I love your Idea about changing the workflow on responsive builds. Content driven design is modular by nature so it makes sense that the process could be a production line for well choreographed widgets.

  • Brian

    Awesome article. I love responsive design and a great read ! Love your design btw..

  • Chris Coyier

    Less than a year later and CSS Regions are starting to ship.

    Here’s a little in-progress demo where a sidebar of advertisements fold into the main content at narrower screen sizes: http://css-tricks.com/examples/AdRegions/

    This kind of thing needs more experimentation so we can provide the spec writers with more feedback so they can really get it right. And eventually, so we can build sites with more thoughtfully chosen layouts in different screen sizes.

  • Trent

    @Chris Coyier: That is glorious! And yes, let’s all get to tinkering so we can have a say in (and contribute to) something we’ll probably be using a lot of.

    You know, someone out there should write a post about this demo and CSS regions usage ;)

  • Rudy Chou

    Very valid points. I’ve been dabbling into responsive web taking full advantage of media queries. Its a huge change in design philosophy.

    This forces every designer or project to focus on the purpose, and draft up a plan/brief/documentation before even putting any pixel in a graphic application.

    I agree the mobile first approach focuses on content and goals.

  • Steve VanHove

    Your first paragraph should read, “...is RAPIDLY becoming a thing of the past.” I am so disappointed when I go to a site on my phone that is not responsive. It seems old school already. We have created our first responsive site and are educating all our new clients to make any new site ready for tomorrow’s web.

  • Kevin I

    You have got some interesting points for sure. However I dont see why you dont just use a liquid design with max-width and min-width. I have tried and tested these type of design for years and found that in modern browsers they seem to work fine.

  • Sergey

    Thank your for sharing this info. Sure responsive design will help to build sites for all devices. I also find good resource with free responsive templates on: http://www.free-responsive-templates.com

  • Carlos

    Brillant article, a good site architecture is very important.

  • Warren

    Excellent! This was so needed. cheers!

  • Kennedy

    Great article, Content stacking is key!!!

  • Paul Christian

    Congrats! I saw WebdesignLedger chose you and specifically this post as Best Of Web Design 2012... Nice one!

  • Fiza Malik

    Great read and good point. Thank your for sharing this info. Sure responsive design will help to build sites for all devices.

  • Simon

    It has been damn nearly a 20 year haul to even dent the pernicious influence of “designers”. These are guys in pony tails, Amarni suits and equipped with Dreamweaver. As I see it that’s baloney. My client has content. That needs to be distributed as widely as possible in a platform independent way. That’s not “design”. That is a professional at work.

  • Stacy

    @Simon:
    Are you arguing that if “designers” would have just gotten out of the way 20 years ago we would have had sites that look and function as nicely as trentwalton.com years ago? Because that is not true.

    If anything... a new generation of developers are taking the time to educate themselves on important core principles of typography, visual design and layout and then work to establish technical solutions that can preserve rather than abandon the implementation of those principles.

    Whenever I hear a “developer” bash “designers” or vice-versa, I cringe a bit.

  • Esteban Perez

    Great article. You raise some great points as we all continue to learn while doing in this evolving world of web and screen resolutions. I can see how your approach to tight collaboration can greatly enhance the final product outcome. Thanks for sharing.

  • Justin Threlkeld

    I still read this article from time to time. Probably at least four times in the last year. With the never ending cascade of screen sizes, techniques for choreographing content are still one of the big areas for improvement in interactive design. Just thought I’d finally say thanks for writing this post (and all the others).

Leave a Reply