Why Responsive Web Design Is Essential

Imagine for a moment that you owned a boutique on a popular high street -- a nice place with a beautiful interior designed by a professional and built by master craftsmen. You've conducted studies on consumer behavior and have placed popular items at the front of the store to draw people in, and you have optimized a path through your retail space to bring them to higher priced and higher margin items at the back. Perhaps you've even loaded up the counter beside the checkout with impulse buys to boost the average spend per customer. Then imagine that for some reason you decided to put every one of your products on shelves about five feet off the floor.

For any customers over six feet tall, your display would not present a problem. For those under six feet, it would become challenging to view your range of wares. And for anyone shorter than about five feet tall, it would be virtually impossible to shop in your boutique. Unless your customers used stilts to boost their height, they would be out of luck. How many customers would make the effort to grab a ladder, or to strap on stilts and wobble around your store precariously?

“…without a website that works on mobile, you are potentially turning away at least one in three visitors, and possibly even more.”

Now imagine that in the same high street there were a hundred other shops selling the exact same thing as yours, except they had all adopted a more conventional approach to merchandising, placing their products below the shoulder height of the average consumer. Now how many of your customers would bother with the stilts in order to see what you had to offer, and how many would simply turn around and go to the store next door?

Obviously, nobody would seriously consider setting out a store in such a way as to alienate half their potential customers. But if your website has not been designed and optimized for smartphone users first and foremost, if it is not responsive, then that is exactly what you are doing.

The Rise Of Mobile

The days of consumers only using their smartphones for the internet while out and about are long gone. In 2017, website traffic originating on phones tipped over into accounting for the majority of all traffic, at 50.3 percent (source: Statista). By early 2018, that figure had already risen to 52.2 percent. Given the clear trend of the last few years, it's only likely to increase further.

There are some regional differences of course. In Asia in April 2018, mobile accounted for 65.18 percent of all traffic. North America and Europe are a bit behind the curve at 39.56 percent and 37.39 percent respectively. South America has the lowest mobile penetration at 33.51 percent, but that's still a third of all traffic happening on phones.

As mobile use has rocketed, so apps have become more common. Many website owners believe that a mobile app is a better solution for reaching customers than a website, but research shows that in the US at least, 76 percent of initial interactions with a company happen via its website (source: Statista). An app might be a great way to encourage enduring engagement, but without a website that works on mobile, you are potentially turning away at least one in three visitors, and possibly even more. That's one person in three who won't see your ads, or buy your products or services, or download your app, or do whatever else it is you hope they will do when they land on your homepage.

There's another reason to optimize for mobile -- Google. The world's most popular search engine might be tight-lipped about exactly how its ranking algorithm works, but it has been very open about the fact that it gives a boost to sites that are tuned for mobile. So having a well-designed responsive site can actually help you get more visitors through the door by being more visible in the search results.

The Problem With Mobile

Why does a website need to be designed for mobile? After all, modern smartphone browsers are highly capable, easily matching their desktop counterparts for functionality and speed.

The problem is that people have shockingly short attention spans -- just eight seconds on average according to study carried out by Microsoft in 2016. If a visitor to your site can't find what they are looking for or at least see how to get there, within eight seconds, there is a high risk they will give up and go elsewhere. Unlike shoppers on the high street, web surfers only have to lift a finger to try one of your competitors.

Desktop sites may work on mobile, but they don't work well. Pinching, zooming, and scrolling sideways to find information can be slow and frustrating. It demands mental effort as the user has to hold a map of your site's layout in their mind while they navigate. Controls designed to be clicked with a mouse can work in unpredictable ways, or break entirely on phones, sometimes rendering entire sections of a site inaccessible.

There is a better way. One of the greatest things about the world wide web, and in particular about the technologies on which it is built, is that it is adaptable. It's perfectly possible to have a website that changes its appearance according to the device being used to view it. Flexible re-sizeable and reflow-able design like this is called responsive because it responds to its environment.

Responsive design is at the heart of modern standards like HTML5 and CSS3, and with new elements like Flexbox and CSS Grid being introduced, it's never been easier to cater to small screen users. There's simply no excuse not to have a site that works equally efficiently on a phone, or a tablet, or a huge multi-monitor display.

Designing For Mobile

So you've decided to optimize your website for half of all visitors who are using their phones to reach it. How exactly do you make the site responsive? What needs to be changed to make your web experience mobile-first?

The good news is that if you are using a popular content management system like Wordpress or Ghost, or a well-known site builder like Squarespace or Wix, or a market-leading e-commerce solution like Shopify or Magento, then there is a good chance your site's theme is already responsive and mobile-ready.

If on the other hand, your website or theme was custom-designed, you may have more work to do.

Here are the most common problems with desktop-first websites when viewed on a mobile platform.

• No viewport configured, or a fixed-width viewport. The viewport tells the browser how to scale content for the available screen size. If one has not been set, the browser will simply scale everything down, which can result in tiny and unreadable text. Setting a viewport to an unsuitable fixed scale is just as bad, as is setting it to not permit scaling. Giving users a great default experience and the ability to size content to meet their needs is the optimal solution.
• Non-responsive text sizes. Setting text in points worked great on paper, and in the old days of desktops it worked pretty well too. But when we have to consider screens varying in size from a few inches to a couple of feet, the old units are far from optimal. Instead, the text should be set in relative sizes. CSS3 has nine relative size units, making it possible to size not just text but images and entire sections of a page relative to just about anything else on the page, or relative to the size of the screen real estate available.
• Poor spacing. Mice and track pads are precision pointing devices; fingers are not. Putting touchable elements like buttons, menu items, check boxes, text boxes, or even humble links too close to each other can lead to a frustrating 'fat fingered' user experience. A responsive design should keep these elements well-spaced so they are easy to hit.
• Using Flash. This aging Adobe tech that just won't die is not supported on mobile devices. It's been superseded by more modern and more efficient means of doing the same thing (most things Flash could do can now be done in native HTML and CSS), so there's simply no need for it.

“The good news is that if you are using a popular content management system then there is a good chance your site's theme is already responsive and mobile-ready.”

Making The Change

The first step in planning for a responsive redesign should be to test the existing website on a mobile device. It seems obvious, but so many business use laptops and desktop computers in working hours that it never occurs to them to try out the lowest common denominator device. If you have any analytics installed on your site, it will be able to tell you the types of phone OS and browser that visitors are using to reach you, and therefore where to start your testing. Don't stop there though, test for all the most common OS and browser combinations to see how your site works -- or doesn't.

In most cases, it's quite easy to make an existing site responsive. Typically, the job will involve making menus collapsible, moving sidebars to the top of the screen or hiding them all together, and then ensuring the rest of the content can resize and reflow itself to best utilize the remaining space. If the site was well designed and well-structured in the first place, the required modifications may be easy to put into effect.

Finally, the new design should be tested again, not just on actual devices but also in Google's Mobile-Friendly Test tool which is part of their Search Console product. The tool is free and very easy to use. Simply enter a URL, hit the Run Test button and wait for the result. It will return a headline result ("Page is mobile friendly" is the one you want), and a more detailed analysis of any issues it encountered. The Google utility fetches your page under the guise of the Googlebot, so if your Robots.txt file inhibits the crawler, you won't be able to use it.

Conclusion

Half the visitors to your website could be viewing it on mobile phones. Modern web standards make it relatively easy to serve them a page that is highly optimized for the device in their hand. Any site that doesn't cater to this huge and growing audience is effectively putting its wares on five-foot-high shelves. It's turning away business, whether that business is serving ad views or selling products or services. With mobile now the most popular way to surf the web, and with Google favoring sites that are made to cater to phone users, responsive web design shouldn't be an afterthought when it comes to building a website. Mobile should be front and center of the whole web design process.