For the uninitiated, responsive design allows websites to work from a single set of code that resizes itself to fit whatever screen a particular visitor is using, thereby negating the need for a separate mobile site.
We previously investigated the benefits of the technology in our posts looking at why Google loves responsive design and this roundup of 10 brilliant examples of responsive design in ecommerce.
But as with any new technology there are also potential downsides that businesses need to consider.
I should note at this point that I am an advocate of responsive design, so this is meant to be a point of discussion rather than a backwards-thinking attack on a new method of design.
Nonetheless, here are six potential problems that site owners should be aware of before they decide to embrace responsive design…
1. Slow loading time
Responsive design uses a single set of code so mobile users have to download the same amount of content as a desktop user.
However, a lot of the content that would load on desktop is set to “display: none” through the mobile media query, so the user is downloading a lot of unnecessary content that they won’t even see.
2. Development time and resources
It’s a fairly obvious one, but will still be one of the key considerations for businesses toying with the idea of building a responsive site.
Glance over at your overworked tech team – do they have the time and budget to undertake the project and all of its complexities?
It’s likely that it will require new hires or training of existing staff to build a responsive site, which is likely to be a major issue for most businesses.
If you have an existing mobile site that caters to your customer’s needs, there needs to be an extremely good reason to start from scratch with a responsive site.
3. Catering for different user behaviours
Smartphones, tablets and desktops are different devices that encourage very different visitor behaviour.
Tablet and desktop users expect a ‘lean back’ experience where they can conveniently browse websites and spend time viewing content or researching a purchase.
In contrast, smartphone users are impatient and expect websites to give them exactly what they’re looking for with a minimum of fuss and clicks. In general they don’t want to be bothered with all the content that one would expect to see on a full desktop site.
Most of the best mobile sites available today have been designed specifically for mobile screens, taking into account user behaviour, navigation and usability.
Catering to these different expectations is difficult when using one set of code, and could possibly result in a compromised user experience on all devices.
Rescaling desktop images for a mobile screen is a tricky challenge that is made more important when you consider the impact on third-party adverts.
There are established sizes for display ads, and rescaling them for a 320×480 screen could result in distorted images and unhappy advertisers.
5. Keep on scrolling
This may be an issue with poor design rather than responsive design, but rescaling desktop pages for mobile screens often results in very long pages that require a lot of scrolling.
This obviously isn’t a great user experience, as one of the key design features of mobile optimised sites is that they don’t require a great deal of pinching and scrolling.
6. More coding and testing
Though having a single set of code is supposed to make things simpler, it will have an impact on how quickly you can roll out updates and redesigns.
The reason being that if you decide to adopt responsive design then you can no longer update the desktop site in isolation, you have to consider the impact on all other devices.
This will require a lot more testing and may impede your ability to react quickly to problems.
This is one of the main problems that mobile developers are battling with at the moment.
The basic issue is that an image that suits a 27” desktop screen probably isn’t what you’d choose for a 3.5″ smartphone screen.
For example, say you’re showing off a brand new product – on a desktop screen you might show an image of somebody using the product, but on a smartphone screen where space is tight you’d probably choose a more functional, close up image.
You’re also wasting bandwidth scaling down a hi-res desktop image for a smartphone screen.
There are several hacks that attempt to get around the problem, but none of them works every time and all have potential problems.