Planning for Better Responsive Design

Now because of these two conflicting facts, you have a problem. Because mobile users can connect to your website and because they want to, Google now expects you to facilitate that experience for these users. You may be thinking this lamentation is pointless because now we have responsive design to allow any site to cater to any device, right? Well… not quite. Unless it is handled in a very clever way (which most designers are not doing), responsive design is a placebo, not a panacea. It won’t cure every problem in the quest for the perfect UX, but it can make users happy enough that they don’t know what they’re missing.

If you’re a perfectionist, this placebo approach will simply not do. The situation now is that most designers are taking the attitude that one design fits all, and this is not really a good approach to design when it doesn’t create a high quality UX because you’ve used a single UI that just scales and squashes without adapting its layout.

Responsive Design vs Adaptive Design

If we could travel back in time a few years, we’d land back in the days of adaptive design, which was so complex that the majority of sites actually avoided bothering with it all-together. Adaptive design was too device-specific, and at that time there was a huge range of devices and interfaces to support, so it was expensive to attempt an all-inclusive approach. Prior to all this taking place, web design had become an ultra-competitive field with prices crashing down dramatically as time advanced. In fact web design is one of the few things that runs opposite to inflation. With that precedent of low prices, many designers felt uncomfortable to even suggest the possibility of adaptive design to a small business client, knowing there was a good chance the client would balk at the cost, and they’d maybe lose the entire deal.

Responsive design offered a cheap way to deal with the problem of extreme variations in screen real estate, so designers and clients have embraced it in a big way. But there’s a problem with the way most designers are implementing it. They’re just too lazy or they’re being too cheap. Either way, the UX that results from the typical responsive design approach is positively lousy. Nobody complains very much because they’re largely unaware that you could be doing better. But for somebody who cares about doing a great job, the fact that you know you could be doing better is enough to make you want to do that.

Now, for all the headaches of adaptive design, it does provide some good advantages. So how do you decide which approach to use? Do you base the decision on budget? Well, to paraphrase a certain famous little girl from Old El Paso, why can’t we have both?

Getting responsive results from an adaptive philosophy

We can sort of replicate the adaptive philosophy in responsive design, but it does come with overheads. Because all the decisions with responsive design are made on the client side, it means the server has to provide every version of the page and then let the browser render the correct version. So if you have 20 large thumbnail images that are only supposed to be displayed on a PC or tablet, phone users will still be downloading that content even though they can’t see it. True adaptive design doesn’t have that problem. On the other hand, adaptive design isn’t usually so good at recognizing changes on the client side, such as if the user reorients the screen or changes the size of a window.

Currently there’s no perfect compromise, but when responsive design is structured to simulate adaptive design instead of simply defaulting to a single column on small displays or otherwise scaling the entire UI, then you’ll at least get closer to a universally good UX result, though if your full layout uses a lot of images, there will still be a bandwidth penalty.

Planning the design requires attention to detail on every level

To plan the perfect responsive website, you need to create specific layout design for each break point. You need to decide what will be shown and won’t be shown in each case. You can find here some top notch responsive WP themes. The really cool thing is that if the user makes any change to the display environment, a responsive design will respond to that change, and it will respond instantly. Ideally everything on the display looks like it was planned to be in exactly the position that it’s in, not that these items have simply collapsed into position. It helps users make a more positive connection to the site.

What it really means is your website doesn’t look the same on every kind of display, because really if you think about it, that’s a silly thing to do. It should have a familiar look and feel across different display types, but it doesn’t have to be a duplicate and you can drop some things if they interfere with the user experience. Really what we must always be asking ourselves is the purpose of each element that is displayed. Who does it serve? The needs of the user, or our needs?

Quite a bit of what gets displayed on a typical web page doesn’t really need to be there in order to help the user to achieve their task (finding information, making a reservation, getting in touch) and it’s just there for our gratification (brand identity, feel-good fluff, decoration, advertising). With each drop in available screen real estate, those items that serve our needs should assume less and less importance.

The image below shows a mock-up design for a corporate site at different resolutions and orientations (shown to scale). The only components considered essential to retain are the logo, navigation buttons, and one information panel. Navigation buttons don’t normally need to be shown in a responsive display, but in this case they are not merely navigation but perform specific functions, so the site is more like an application than a traditional site and thus the buttons must be shown.

Most of the content for the larger display has no direct benefit to the user, but it’s good for the company to display it. Dropping down to a display that’s only half as wide and half as tall means there is some rearrangement and reshaping of the elements, but they can mostly still be retained. Reorienting that smaller display without changing the dimensions means we can can retain most of the content, but the two smaller boxes that were on the right side under the logo won’t fit there any more, so if we still want to display them, they may have to go under the other content and the user might have to scroll down to see them. Reducing the width of that reoriented page by half, we drop everything that’s not essential, displaying only what the user really needs to see.

Give priority to user needs even if there’s a cost involved

It may be that by prioritizing user needs in this way you miss out on lucrative marketing opportunities or even ad revenues if your site depends on those. You should swallow that loss with a smile, because you’re preserving your precious Google rank and avoiding the inevitable backlash that would come from putting your own needs first. It’s simply a better investment to take care of that small number of users with minimal display capability than to risk alienating them.

header image courtesy of Thibaut Vanden Dorpe


Originally published at on August 1, 2016.