If you are planning a mobile responsive site (or converting your existing site to be responsive) it will be tempting to do a quick Google for a few examples of good responsive websites, looking for guidance on how to deal with layout and navigation issues.
The results will be a number of blog posts and articles offering 'top 10' list of the 'best responsive sites’. Unfortunately on closer examination most of these prove to be examples of small 5 page websites, generally for boutique design agencies.
Whilst these all look lovely, the reality is that these are generally nice simple site structures and the design patterns do not translate to larger more complex structures. It is actually quite difficult to find good examples of complex mobile responsive sites.
Making responsive work in the real world
There is an even bigger challenge if you are trying to convert an existing site which was not designed from the ground up to be appropriate for mobile.
Whilst responsive principals can technically work, there are a number of challenges and decisions which may not translate nicely from desktop to mobile.
Large number of top level sections - takes up too much visual space.
Multiple or split navigation bars - making it hard to collapse into draws.
A deep multi level site structure - more than three levels can be awkward.
Homepage is long, consisting of 3 or 4 screens of content in a desktop browser which will become a very long page on the mobile.
Large sites which have not been designed for mobile can be made responsive, however they
will not automatically translate into an optimised mobile experience due to a number of architectural limitations.
So, when trying to ‘retrofit’ responsiveness onto an existing website you are going to need to evaluate the site and make a number of key decisions.
Option 1: Display your primary navigation items/sections
- Works for sites with 3 to 5 top level sections, however broader site architectures will not work so well.
- This does not answer the question of what to do about lower level navigation.
- A downside of this approach is that navigation gets in the way of your actual page content.
Option 2: Use a Show / Hide Navigation draw
- A neat solution which works well for sites with a larger number of top level sections.
- This approach can also be used to provide secondary level navigation, however this only works for small to medium sized sites.
- The downside of this approach is key routing and navigation is hidden at first view.
- The upside is that content is prioritised and navigation items are not the first thing you see.
Option 3: Routing in content
An alternative approach for navigation is to make sure your content provides routing to child pages at every step.
The benefit of this approach is that content and navigation are combined.
The downside is that routing pages can quite formulaic.
This approach will however only work if the sites content is structured appropriately.
Lower Navigation Levels
Following on from these questions, you then need to consider how you will deal with lower level navigation.
How much navigation do you show -
If using a collapsible navigation draw, can secondary navigation work, or do you need to restrict the levels of items shown? How many levels can this go?
Will you use a secondary level Drop-down -
Will each page have a list of child pages at the top and does this get in the way of content? Might you therefore collapse the list into a drop-down?
Content or navigation first -
Will you prioritise content and put the navigation at the bottom of the page?
Breadcrumb as Navigation -
Will you use a breadcrumb as a navigation device to help users locate themselves and navigate back up the site tree.
The reality is that there are no 'one-shoe-fits-all solutions'. Depending on your site structure and the nature of your content, you will use a combination of these approaches to develop your navigation methodology.
What to do about content overload?
Many websites suffer from either long reams of content or large numbers of items on the screen - often a combination of both.
Whilst the designers job is to ensure the right messages and “Calls To Action” are communicated in an elegant and visually appealing manner, there can often be a struggle to present all the required content elements on screen at the same time.
This issue of content overload really becomes apparent when you translate this to the mobile - if it was a struggle to make something work on a large 1024px layout which can scroll, then translating this to 3.5 inch display is in many ways missing the point.
So the questions are -
Do you accept that the mobile display of content will be overloaded, requiring a lot of scrolling?
Do you start to hide content elements, potentially creating “content apartheid” between devices?
Do you rework all your content making it shorter, so it is more appropriate to a small mobile device?
Or do you just give up and make a dedicated mobile site?
Obviously these are polarised views and you will probably be more pragmatic...just remember that retrofitting responsive web design principals onto an existing website does require the original site to be made more appropriate - do not be too precious and remember that many responsive principals will actually help improve your desktop website as they really force you to optimise your content and messages.
When retro-porting responsiveness onto an existing website, one of the most frustrating issues is finding content elements that will not translate well onto mobile....the items are too wide, or too long or too detailed to be readable when shrunk down. A large table with 5+ columns, or a detailed diagram etc will simply not display or be usable on a mobile phone.
There are obviously tricks you can use such as making tables responsive (serialising the display), however this only works for simple tables, as a complex table will become unreadable.
Here you will need to decide whether you will:
accept that some content will not be viewable on a mobile device.
or whether you can adapt the content to be more appropriate.
Again you will probably take a mix and match approach here, adapting content where possible, trying some clever displays techniques and accepting some content will not work on a mobile.
Retrofitting mobile responsiveness onto a website has the benefit of improving the mobile users experience without creating a new website from scratch. However it is not always as simple as it may seem to make an existing website responsive, and compromises will always need to be made when balancing the needs of the desktop user versus the needs of mobile users.
If you have anything to add to this discussion please get in touch, we’d love to know your thoughts.
Finn is a founding director of Liquid Light, and he still (after 22 years of web design) likes to get involved in projects. When he is not worrying about the clients, he is studying Chinese medicine, working with young criminals and doing spartan challenges.