Prioritising Content with a Responsive Website

Posted Friday 21st Sep 2012 by Rob Bavington

Related Links from Video

Previous responsive web design video blog
Mobile SEO Guide

Hi and welcome to this weeks video blog with me Robert Bavington and my colleague Gavin Hoffman. Today we would like to take a look at prioritising content for devices with a responsive website.

Now as we know a responsive website changes layouts depending on the device that it is being viewed on. But as the content area is reduced on mobile devices such as smartphones and tablets, we need to look at the prioritisation of the websites content relative to device.

Real Life Example

So firstly lets look at a real life example which we could all relate to. OK so this evening for tea I’m thinking a nice chinese.

So I open up my desktop computer to find the restaurant for me. As I am sat at my computer the chances are that I’m in a relaxed environment with some time on my hands. So I search on google for chinese takeaways in Rugby and find a nice looking one.

I open up the desktop version of the site and am presented with 3 areas of content, the menu,  reviews section, then contact & location details.

So sat at my desktop computer I can browse through the menu, read some of the reviews and see the location. This information is laid out in a way that the menu takes priority at the top of the site and the restaurants location, contact and review information is of equal priority with each other as seen in the example.

Great stuff, so I have got all the information I need to make an informed decision that this is the chinese takeaway for me.

Now later on that evening I have got off the train and will be getting hungry very soon, so I pull out my smartphone and open up the takeaway restaurants site.

But now in the scenario of using my smartphone, this would imply that I am on the move being that I am using my phone, so, being on the move looking at a chinese restaurants website the priority of its content has changed.

Now I want quick access to the menu and contact details, the reviews section of the website isn’t very important anymore because I am on the move, all that on my mind is the whats on the menu and how do I order it, so the reviews section would now be lowered in priority and be placed lower down on the mobile version of the site.

Chances are that if the user cannot easily access the content they require, they will look somewhere else.

Now the websites content has been prioritised, the user will have had a seamless experience using the mobile version of the website having retrieved the content they were looking for quickly and will be happily enjoying their takeaway that night.

Some website content is of higher priority when the user has time to browse, whereas other content may take priority when the user is on the move.

Now this situation can apply to nearly all websites such as a cinema for example, sat at your computer you can view the movies, their showing times, read the reviews and watch the trailers… but on the move on your smartphone your most likely trying to find out what time the film starts and where the cinema is so this information is now placed at the top of the site.

Now heres the question…

Could the content of your website be prioritised based on the device the user is browsing your website on ?

If the answer to that question is yes, then maybe a responsive website is for you.

For more information on responsive web design please take a look at our previous blog post to which you will find the link below, or tweet us, our username should be on screen now.

So thanks for watching this weeks video blog and we hope you enjoyed our insight into just one of the advantages of having a responsive website.

By Rob Bavington

I am a great lover of the online design world and hold a passion for great passion for typography. I play the guitar and enjoy a spot of fishing on a relaxing Sunday afternoon

See all of posts.

Connect with Rob Bavington on Google+

Rob Bavington's latest tweets

  • RT @ashbyalan: Happy New Year Folks! 12 hours ago.
  • Happy new year to everyone and many happy returns 12 hours ago.
  • Arsenal Mike

    Hi guys again a great video as usual! I have one question though which Im getting a little confused on. With this instant there would be a case that based on a media query a div would be displayed in a different area based on the device the user has.

    However in the other video where you use 100% widths with divs so that the design can flow on a large screen inside a container and then reduce in size based on the users device. It wasn’t really changing the order of divs as such, just going with the standard stacking when the width was reduced.

    Is it a case that its one or the other? Content priority or layout that will reduce comfortably depending on device used?

    Thanks for any help you can offer and also the help you have already given with the videos!


  • Robert Bavington

    Hi Michael, I am glad you like the video!

    In regards to content prioritisation, this is something that when discussed at the point of planning your project, should be factored into the way that you structure the HTML of your DIVS on your website. By no means should there be limitations to content prioritisation or layout due to the structure of your DIVS.

    The case being that yes, if you have DIVS that span the full with of their parent you should use 100% widths, when having multiple content areas which say for example sit in 2 columns, these DIVS can be built in such a way that when carefully using floats correctly, will allow their horizontal stack position to bear no effect to their vertical stack position on smaller device screens.

    For example, if we have two DIVS parallel to each other, one would assume that the DIV to the right would file under the DIV to the left when the screen size is reduced, but if the second DIVS HTML appears before the first, and a float right is applied which converts to a float none on the smaller device, it would be the first DIV on the left that could file under the second vertically.

    I hope this has answered your question Mike and if there is anything else please feel free add a comment.