Tackling responsive re-designs for content-heavy websites

November 15th, 2013

How do you take a tired-looking, unresponsive, content-heavy website and turn it into a product that works beautifully and seamlessly across multiple devices?

We’ve recently been thinking about a less glamorous side of the web: how to re-imagine a tired-looking, unresponsive, content-heavy website from the ground up, resulting in a product that works beautifully and seamlessly across multiple devices. During our research and conceptualisation a few key questions arose, so let’s take a look at what got us thinking.

How much content should you display up-front?

Our first conundrum was around information architecture. In a site that may go as deep as four levels of content, with as many as 100 pages by the final level, how far in do you allow the user to delve right from the homepage?

The first consideration to make is that a busy homepage can have a knock-on effect when displaying that same information on other screen sizes. To maintain a consistent experience across devices, our view is to settle for a quantity of information on every page that can be conveyed comfortably, and in its entirety at every viewport size.

Our solution was to boil the main nav elements down to the core elements of the site. This should allow the homepage to breathe, leaving the majority of content before the fold to be dynamic and manipulable CMS-friendly media elements.

How can you coherently navigate multiple levels of expansive content?

This is a multi-faceted question. Firstly, we feel it’s important for the user to be aware of the overall depth of a site from as early as possible in the journey. If users are indiscriminately clicking into various sections of the site in the hope of stumbling across the piece of information they’re looking for, they will not persist with the site for long, and may never return. If, however, they have access to a visualisation of the overall tree of content from the outset, the user should benefit from a much more streamlined user journey.

Also to be taken into account is the idea of setting aside one or two areas of before-the-fold real estate for links or panels of lower-level content that has been proven to be seeked out by users regularly, for instance opening hours or key venue information. This could take the form of a super-nav at the very top corner of the page, or a sidebar widget depending on the aesthetic of your site.

With all this considered, our solution was to implement a main nav that allowed the user to access almost all of the site’s pages within the first two clicks. This consisted of three or four main nav items along the top, revealing a tall expanded panel that listed out every main nav item’s sub-pages. On top of this, we implemented a more unassuming super-nav with three of the less hierarchically significant pages that have been proven to garner a large amount of site traffic.

How do you make sure all of the content is equally accessible on mobile?

A personal grievance when it comes to responsive is when huge swathes of content are hidden from the mobile user compared to the desktop user. For me, this is invariably a case of lazy user experience design. Granted, it’s much more difficult to convey the same amount of information in an easily digested fashion when the viewport width is so dramatically limited, but it is entirely possible. The key is to remember that where mobile clearly constricts in one dimension, it offers much more in another.

With the advent of touch screens, users have been more prepared than ever before to scroll through a high volume of vertically stacked content, swiping their thumb or forefinger up and down the screen without a second thought. With this development has come a much more fluid notion of ‘the fold’ and of informational importance based on proximity to the top of the screen.

We are therefore able to take advantage of this second-nature scrolling by creating seemingly very tall pages without hindering the mobile user experience in the slightest. For instance, say you have a panel on desktop with four columns of content and three rows of info in each column. This creates twelve ‘blocks’ of information that need to be displayed coherently on each viewport size and in the narrowest viewport, it is generally accepted that these will have to be stacked one on top of the other.

At first glance, this may seem risky as the resulting layout of content may take up 6, 7 or possibly more screens worth of page height. The height of such a page may seem absurd when visualising it in its entirety as a wireframe or in photoshop, but as soon as it becomes a scrollable page on a mobile, suddenly the usability improves and the overall height of the page almost stops being an issue at all. Users will instinctively flick their finger and fly down the page without feeling as if they are looking and progressively less relevant content as they scroll.

Conclusions

All of the info, all of the time — What the user can or can’t have access to from the device of their choice is not your call. Find a way of displaying all of the information across every device. It may not be easy, but it’s always possible.

Know the strengths and limitations of each screen size and exploit them — Build to maximum width for desktop, maintaining as much information above the fold as possible. Don’t be afraid of tall pages for mobile devices, the user loves to scroll.

The best place for info is where the user needs it the most, not where it fits the neatest — The whole point of user experience design is to provide as clear and hassle-free a user journey as possible. Just because certain information might appear to fit neatest within a certain category, user evidence might suggest otherwise. If this is the case, move that information. If you ever want your users to visit your site more than once, put the most pertinent information where that user expects to see it.

p5rn7vb