‘Responsive design’ is what all the cool kids are talking about at UX and ecommerce shows around the globe, but is it really as good as we were led to believe? What’s beyond the hype, a silver bullet or a double-edged sword? I met up with our own team of developers for a look under the hood of mobile-friendly web design and to moan about why responsive design really sucks.
Wait, what is responsive design?
Put simply, responsive web design (RWD) means coding your website so that it can adapt to provide a viewing experience that is best suited to the user’s device.
What, why, how?
Designing for multiple devices and different web browsers has always been a headache, but with mcommerce firmly on the agenda and webmasters seeing a persistent rise in tablet /mobile traffic, it’s even trickier to ensure your online content works for all your website visitors. ‘Mobile-first’ is your new mantra (because it can be a lot harder to make things fit a smaller screen size if you designed the content for a larger layout initially). Apart from the obvious variety in screen sizes, website owners must also consider limitations around input methods, viewing distance and changes in browsing environments (including light levels) when designing a multi-channel customer experience. For example, how will navigation react to a finger swipe versus a mouse click and how do your product images look when a user tries to pinch and zoom?
Most ecommerce platforms now offer a selection of responsive templates and themes which you can apply to your content. When building a new website for Postcode Anywhere, our web team chose the Twitter ‘Bootstrap’ route – referred to on getboostrap.com as “the most popular framework for developing responsive, mobile first projects”. Whilst it has successfully delivered a website that works well for a wide range of devices, it has not been without pain.
The bad and the ugly
- Control over text
Any self-respecting typesetter will want to protect readers from widows and orphans, this is easily solved with a line break but with RWD you must resist the temptation as an innocent line break put in for visual appeal can look pretty ugly when the layout adapts for a smaller screen. The solution? Compromise; re-wording your sentence, while maintaining keywords for SEO is your best option if you can’t bear to leave it be.
- Old browsers
Mobile-first is the easiest way to approach RWD, the problem with that though is old browsers. If the user’s web browser is too old to support media queries (such as IE 8) then you could end up displaying a very stretched version of your mobile site.
- Input – guesswork
RWD doesn’t cover input types; you can’t detect a touch screen device, you just have to assume it is likely for the detected screen size. There are touch events, but because you can now get touchscreen laptops it still doesn’t provide a bulletproof detection method to inform appropriate input options. Because you can’t reliably detect if a user is likely to use touch or a mouse you’ll really need to support both.
- Background images
Image sprites aren’t so bad, but overlaying text on an image can be a pain because the background image doesn’t resize like a normal image will on a responsive page. If the image or area to be used has a fixed size it’s fine, but if it’s supposed to be dynamic it doesn’t really work.
- How high?
Vertical centering is pretty tough but gets harder when you don’t know the height of the parent element. Working out the height of a row is practically impossible using Bootstrap. You’ll have to find some workaround for forcing heights to make sure things fit properly.
- Resizing images
If you’re dynamically resizing images to fit into resized columns, the images can start to look blurry when they resize. Images have to be created at the maximum size they could be viewed at, even though they’re smaller on the original design.
RWD gets a bit tricky when you start throwing in animation of elements, we found it can cause the page to resize unexpectedly. With a fixed-width page you don’t have to worry about what happens if an element disappears, but with dynamic sizing it does make a difference as the content can be thrown about as a result.
- Progressive enhancement
Bear in mind progressive enhancement from the start, it becomes really awkward if a design is done desktop-first rather than mobile-first, because you then end up doing the opposite (whatever that is – progressive worsening)?
- Page load times
Of course, showing the same content to a user on a mobile device as your desktop audience is good AND bad – it means having to wait for the same elements to load (HTML, CSS, product content, etc.) which can have a negative impact on your website speed for mobile – customising the experience and tailoring it to a smaller screen and/or slower connection is often a no-brainer and a reason why many opt for a dedicated app. After all, ecommerce giants Amazon state that each additional 100ms in load time reduces their conversion rate by a whole percent.
- Poor checkout experience
At the key stage of the shopping journey, third party checkout elements often leave mobile ecommerce pages failing mobile visitors. Payment providers are a little behind to the RWD party, failing to optimise their UI for mobile devices. You may need to give these sections of your site some extra attention.
Don’t get me wrong, I totally agree that the world is a better place with the advent of responsive web design (and smartphones). But, in order to get it right on your site, it’s nice to weigh up the pros and cons and to know your enemy before you start work.
Responsive web design doesn’t necessarily answer all your problems; designing for multiple devices is complex. Like we learnt at UX London earlier in the year, ‘sooner or later you’ve got to smoke the complexity, it’s just about how you choose to do it’! You can either make a series of different sites to cater for different screen sizes, or you can create a single responsive site and try to make it work on as many screens as possible. There are downsides either way, maintaining multiple sites is time consuming but so is getting a site to respond properly and fixing all the niggles. Templates like bootstrap give you a good grid to start from, but sooner or later you’re going to have to start wiggling bits here and there to make it fit.
As we’ve seen from these examples, with responsive design you sacrifice a certain amount of control over what the user sees, you can’t know that your user will see exactly what you intended, you lose a lot of control and that can be really unnerving for a web designer. Of course, a good and experienced developer will always find a way to create a workable solution.
Finally, users don’t care about responsive design, they just want to get things done and for technology to provide a better, easier way to do it! Always check your projects on a range of devices and leave adequate time not just for testing but to listen to the feedback.
I’d like to thank Max, JB and Henry at Postcode Anywhere for sharing their insights. If YOU have any tips or stories relating to responsive web design, I’d love to hear your thoughts.