Responsive web design is the art of optimising a website for usage on a variety of devices. Any device with a web browser can be used to visit your website. People usually surf the web with desktop PCs, tablets and mobile phones making these the most essential devices to optimise for. Websites are also sometimes viewed on smart watches, game consoles, eBook readers, smart TVs  and more.

Responsive web design has been important ever since the release of the iPhone in 2007 but the design approach wasn’t coined until 2010 by a designer called Ethan Marcotte. The month Ethan wrote that article, 2.3% of web browsing was performed on a mobile device. At time of writing (October 2016), the figure is now 48.8%.

Responsive Design Techniques

Some of the techniques of responsive design include:

• Fluid design grids and code which allow the layout of the page to automatically rearrange and resize itself to match the size of the screen.
• Speeding up load times for mobile devices by forgoing complex features.
• Using different types of navigation menu. A mobile version of a navigation menu will need to be suitable for touch screens.
• Ensuring buttons are sufficiently large on mobile touch screens. Google thinks buttons should be at least 7mm on the screen.
• Rearrangement of tables. For example, a table on a desktop screen might look like:

And on a mobile screen the layout would be arranged like so:

Responsive Design Tools

The single most important tool in the responsive toolkit is the CSS media query. Media queries detect the width of the screen and allow you to set visual properties for certain widths.

The media query is a low-level technique and setting them up over and over is pointless. To get responsive websites off the ground quickly we use CSS frameworks. There’s loads of them available. A few popular examples include:

• Bootstrap – By the developers of Twitter.
• Foundation
• Skeleton

Another way to make sites responsive (albeit less responsive), is to use responsive JavaScript libraries. A few examples of those include:

• jQuery Mobile
• enquire.js

While developing responsive websites, it’s good to be able to view the website in different screen sizes without having a bunch of different devices at hand. A great tool for that is Screenfly and the Firefox browser developer responsive design mode. Another useful too is Google’s Mobile Friendly Test which will analyse your web pages for issues pertinent to mobile users.

Separate Mobile Site

An alternative to building a responsive website is to build a separate website for mobile browsers. Typically, with this approach there will be a site with an address like example.com for PCs and a site with an address like m.example.com for mobile devices.

This approach was popular in the beginning of the mobile revolution but has slowly fallen out of vogue. Generally, we recommend designing a single site responsively for the following reasons:

• Creating a mobile and a desktop site means you need to maintain content in two sites rather than one.
• Search engine optimisation becomes more difficult as you’ll need to tell Google which version has the definitive content. It is possible by setting up canonical links, but is quite a painful process.