What is responsive web design?

08.07.2021
Development | Web Design

Responsive web design is an approach that seeks to make a website look and perform its best on all mobile devices. This includes tablets, mobile phones, laptops, and computer screens.

In today’s blog, we’ll look at why responsive web design has never been more important for a business to succeed online, and how to implement it.

Table of Contents

  1. The statistics on responsive web design
  2. Website speed
  3. Clean page layout
  4. Text that’s easy to read
  5. Optimised images
  6. Effective use of pop-ups

1. The statistics on responsive web design

Consumer’s access and search the internet in multiple ways and across a range of devices. The statistics below by Google and Sweor give us some insights into the impact that responsive web design has on these consumers worldwide:

  •  When they visited a mobile-friendly site, 74% of people say they’re more likely to return to that site in the future
  • 67% of mobile users say that when they visit a mobile-friendly site, they’re more likely to buy a site’s product or service
  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 52% of users said that a bad mobile experience made them less likely to engage with a company
  • 79% of people who don’t like what they find on one site will go back and search for another site
  • 57% of internet users say they won’t recommend a business with a poorly designed website on mobile
  • 85% of adults think that a company’s website when viewed on a mobile device should be as good or better than its desktop website
  • Nearly 8 in 10 customers would stop engaging with content that doesn’t display well on their device

So, what are some of things you could do to tackle responsive web design? Let’s take a look.

2. Website speed

Website speed is an important element to ensure that your website performs well, particularly if you have an ecommerce store through which you’re selling your products and services. Conversion rates are severely impacted if shoppers are having to deal with pages that load too slowly. They’ll inevitably leave your site and get what they need elsewhere.

Website speed also determines how your site will rank in SERP’s, with those performing badly being penalized. But it’s not only Google and other search engines that will penalize you. Visitors to your site will either stop coming back, bounce or simply not buy – resulting in lost sales and traffic.

3. Clean page layout

As Adobe says in this article, you want to optimise the few seconds you have to grab (and hold) user attention. This requires a simple design layout which is what works better on smaller screens. This is how according to Adobe:

  • Use one-column layouts to structure information for mobile because multiple columns can introduce more noise and make it harder for users to comprehend information.
  • Don’t use horizontal scrolls as they not only create poor UX (because it’s just not intuitive to scroll horizontally), but it also fails the Google Mobile-Friendly Test.
  • Use a minimalist approach for the layout so that mobile users are not overwhelmed with a lot of information at once. Follow the minimalist approach to create clean layouts—use succinct copy and get rid of purely decorative elements so that your users can enjoy a clean and highly-focused mobile experience. Remember that every text or image you use should bring value to your visitors.

4. Text that’s easy to read

Be mindful of screen size when creating or editing content. According to Yoast:

  • Don’t use too many long sentences
  • Keep your paragraphs to around four sentences
  • Break up text using bullet points, lists and headings
  • Keep headings short (too long and it comes off looking aggressive)
  • Check content on a smartphone to see how it looks and what needs to be improved

Other issues to think about in responsive web design includes the following:

  • Optimise meta descriptions and titles for mobile
  • Add Schema structured data so that search engines better understand every element of your mobile site
  • Fix your font size and make buttons big enough for fingers
  • Ensure there’s enough space between clickable elements
  • Don’t make users have to pinch and zoom to see or use your site

5. Optimised images

Image optimisation is a critical factor in responsive web design. You want to be able to serve high quality images without compromising on load speed. Anything more than 3 seconds and your audience will already be abandoning your site and moving onto another.

“39% of people will stop engaging with a website if images won’t load or take too long to load” [SWEOR]

So how do you optimise your images to avoid increased bounce rates, bad user experience and loss of business?

  • Choose the right file format, be this PNG, JPEG or GIF.
  • Compress images enough to not compromise on quality
  • Scale all images to the correct sizes and serve accordingly
  • Defer image loading (see more on this here)

6. Effective use of pop-ups

Pop-ups are still a popular way of grabbing a person’s attention on your site. With mobile, screen space is an issue however so pop-ups must be properly configured. This is not only to ensure a better user experience but also to not incur any penalties from Google. DreamHost suggests these guidelines to follow:

  • Pop-ups must be as non-obstructive as possible. On mobile devices, pop-ups should only cover a small fraction of the screen.
  • Pop-ups must be easy to close. It should be clear how a mobile users can dismiss the pop-up, usually via a clearly visible, decently sized button.
  • Pop-ups containing necessary information are exempt. The above guidelines do not apply to login dialogs, age verification forms, or other pop-ups that display essential information (such as cookie notices).

At Qobo we test every single page on your website to ensure that it works properly, regardless of device. Contact us and let our team of web designers and developers help you build a responsive website that will drive lead generation and conversion, and turn enquiries into customers.

 

responsive web design