What is Responsive Web Design?

It may be a relatively new approach to websites, but responsive web design (RWD) has become increasingly important over the past few years and it’s only going to increase in importance and popularity, and this is largely thanks to growth in the amount of people who use their mobile devices to browse the web. In fact, in 2016 mobile web usage overtook desktop for the first time prompting Google to prioritise mobile-friendly sites in its search results algorithm.

Responsive web design, therefore, is an approach that suggests website design and development should respond to a user’s environment and behaviour, based on the platform they’re using, the size of the screen and its orientation.

 

The backstory

When the first iPhone was launched back in 2007, there began a trend of building separate sites for desktop and mobile. Although this tended to be easier for web developers, unsurprisingly, it did come with several drawbacks. These included higher maintenance costs, the promotion of separate sites for SEO rankings and the necessity to build different mobile sites for different types of mobile devices.

In 2010, web designer Ethan Marcotte created a discussion about how the building of separate sites for different devices is completely unsustainable. Instead, he proposed the concept of “responsive design” whereby layouts built would always be flexible and fluid, allowing them to adapt to almost any screen. Thus, the three key development principles of responsive web design are fluid grids, media queries and flexible images and media.

  1. Fluid grids

Regardless of the device or the size of its screen, a fluid grid will ensure that the website’s layout will always adapt to the user’s environment. The word “grid” may be misleading, as the content is actually positioned using CSS based on percentages, rather than traditional pixel-based designs. This is because a pixel on one device may equate to six pixels on another, making the site illegible to users.

  1. Media queries

Media queries (sometimes referred to as breakpoints) are required to apply different styles that adhere to the capabilities of the device. If you’re using a mobile device, for example, these will allow the website to detect that and adapt to the size of the screen.

  1. Flexible images and media

This technique must be used to allow images and other media to load correctly and it is done by scaling or via the CSS overflow property. By setting the media element to 100%, the web browser will shrink or expand to fit the screen correctly.

 

The facts

According to a report by Ofcom, two-thirds of people in the UK now own a smartphone. 33% of them use it as their main device for browsing the web, spending twice as long on their phone as their desktop or laptop. This could be attributed to the availability of 4G, with subscriptions continuing to grow year after year.

In response to this, Google introduced ‘mobile friendliness’ as a ranking signal in search results, updating not only its preferences but the way that it now looks at websites. Essentially, this powerhouse is rewarding websites that have been optimised for mobile platforms, and with a 67% search market share, developers need to listen. In fact, Google has even gone so far as to say that responsive web design is the best industry practice.

 

The importance of responsive web design

Responsive web design isn’t just about changing screen resolutions or automatically resizing images, however. Developers and designers must adapt to this new, albeit abstract, way of thinking. A site that is responsive will improve user experience, giving them optimal viewing, ease of navigation and minimum scrolling or resizing. Essentially, by giving users this kind of positive web experience, they’re more likely to return.

Such an approach won’t only benefit your users, however. By ensuring that your site is responsive, you therefore only need one website instead of two. Of course, this is much more cost-effective, and SEO campaigns will be easier to maintain. Although a mobile-specific SEO strategy might allow you to optimise for certain keywords, responsive sites have only one URL and the same HTML, making it much easier for search engines to crawl, index and organise content. All in all, you’ll find it much easier to manage.

As mobile-friendly websites only continue to increase in importance, take a moment to consider whether your website is performing the best it possibly can be on ALL devices. If not, get in touch with us to see how we can help.