Making Websites

A Guide to Responsive Web Design & Best Practices

Inka WibowoCai Ellis

By Inka & Cai

designing for responsive web design

Tooltester is supported by readers like yourself. We may earn an affiliate commission when you purchase through our links, which enables us to offer our research for free.

More people are now browsing the web with mobile devices than with desktops or laptops. Approximately 51% of website traffic now comes from someone on a mobile device.  With such a large number of mobile users, it’s crucial that online businesses ensure their website is using a responsive web design (RWD) and are up-to-date with the latest RWD best practices.

What Is Responsive Web Design?

Simply put, RWD consists in designing one website that fluidly adapts to any screen size – be it the latest 272 pixel wide Apple Watch or a plasma TV, with regular PCs, tablets, and mobile devices in between.

Responsive Web Design example

To help further explain, below as a fitting example of responsive web design on the Apple website. Below is a side by side comparison of a desktop and smartphone view of the website:

RWD comparison of a Desktop and Smartphone screenshot

The content is the same in both views, but the layout and user interface design are different. In the smartphone screen view, the website sections are stacked to facilitate vertical scrolling and the navigation menu is tucked away behind a now familiar hamburger icon. The clickable links at the bottom of the page are also wide and high enough to accommodate finger tap gestures.

At the core of RWD, is a deep concern for the web user experience. Most people today visit your website from different places using a multitude of different devices – the desktop computer at work, the smartphone when they’re on the subway, and the tablet at bedtime. Regardless of what device they’re using at the time they’re on your website, users expect it to just work. Using RWD the right way means the user experience on your website remains consistent and pleasant, no matter which device users are on.

Using Responsive Web Design to Its Full Potential

Although designing a website that looks good on all screen sizes is a great step in the right direction, it’s crucial you don’t stop there. For your business to fully take advantage of RWD, you need to place RWD inside a more comprehensive strategy with the multi-device consumer at its center. This means:

  • Don’t offer mobile users a stripped-down version of your desktop website where they have limited use. Tip: keep tracking mobile users’ actions on your website. If you notice users landing on your site but hardly consuming your content or not spending time on it, chances are they’re coming across some kind of roadblock.
  • Don’t cater for the mobile user in exactly the same way as the desktop user. Take full advantage of the potential a mobile device offers. For example, if you own a restaurant, make it super easy for mobile clients to locate your business or make a reservation by leveraging the power of technologies like HTML5 Geolocation and telephone number inputs in your website.
  • Be mindful of page speed. According to research by the Nielsen Norman Group, leading user experience consultants, 47% of visitors expect a website to load in less than 2 seconds, and 40% of visitors will leave the website if the loading process takes more than 3 seconds. This is even more so when it comes to mobile users, who are on the move and often have bandwidth limitations.
  • Be aware of unplayable content. Some technologies like Flash players don’t enjoy wide support on mobile devices. Therefore, it’s advisable that you don’t use them on your website and avoid linking to them from your pages. HTML5 video and audio are certainly a much better option over proprietary technologies. It’s also a good idea to add a transcript of your video content. In fact, a number of users may prefer written content to video or audio, some assistive technologies can only work on written material, and Google can better acquire data on what your video or audio content is about.
  • Avoid using dialogs and pop ups that prevent users from seeing or interacting with your content. These are sometimes also hard to close on mobile devices where screen real estate is limited, causing frustration for your customers.
  • Pay attention to touch! If your website relies on mouse hover events to reveal hidden content, this functionality won’t work on mobile. Mobile devices don’t operate with a mouse. Instead, users interact with content using touch gestures like tapping and swiping. Therefore, opt to reveal hidden content by clicking rather than mouse hovering. Also, ensure your website design accounts for the fact that fingertips are bigger than a mouse pointer by allowing for enough room to interact with links on your page comfortably and smoothly.

Benefits of a RWD Site

For one thing, Google explicitly recommends the RWD approach to a mobile-friendly website. Other benefits of RWD are:

  • A single URL makes it easier for users to share and link to your content;
  • Maintaining a single website is more cost-effective than maintaining multiple pages for the same content;
  • Redirections to a mobile site affects page load speed for users on a mobile device. Also, redirection based on the browser detection is prone to error, which can degrade your website’s user experience. Adopting RWD solves these issues simply because, by using the same website both for desktop and mobile views, you won’t need to redirect users to a mobile-specific website;
  • With a fast changing landscape of different devices, it’s next to impossible to create and update multiple versions of the same website specifically tailored to the screen size and features of each.

Is Your Website Responsive? Test it!

Use the Google Mobile-Friendly Test to quickly test if your website is responsive. Just copy & paste your website’s URL into the textbox and check out the result.

If it isn’t, you might consider a responsive website builder. Fortunately, RWD is the standard today. There are just a few exceptions, like Wix, but they have mobile-friendly templates that are essentially not much different from fully-responsive websites.

Conclusion

To better equip your website for the multi-device ecosystem, responsive web design is a must. However, simply installing a self-proclaimed responsive theme is not enough to ensure your website performs well and keeps your customers happy. You need to include RWD in your online business strategy with the multi-device consumer at its very core. Doing so will go a long way in making your online business a favorite among your customers and Google.

The authors

Learn more about us

Inka Wibowo

Content Manager

Hi, I'm Inka! I started using website builders and content management systems over 10 years ago, when I managed websites for clients in my first marketing role. Since then, I've worked on hundreds of web and digital projects. Now, at Tooltester, I'm happy to be able to use my experience to help users like you find the right website builder for your needs.

Cai Ellis

SEO Manager

Hi! My name is Cai. Over the years, I've used countless hosting providers, built innumerable ecommerce stores and picked up a bit of SEO know-how too. If you've got questions about these or any related subjects, I'll be happy to help!

Learn more about us

THE BEHIND THE SCENES OF THIS BLOG

This article has been written and researched following a precise methodology.

Our methodology

Comments

website creation ebook cover page

The Step-by-Step Guide to Website Creation

Are you keen to learn the basics before you get started? In our ebook, “Website Creation for Absolute Beginners” we’ll show you the steps you need to take to create your own business website.

Note: We will never share your email address with anyone except our email service provider. Of course, you can unsubscribe at any time.