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%.
Some of the techniques of responsive design include:
foo | bar | baz | |
---|---|---|---|
First Entry | alpha | beta | gamma |
Second Entry | delta | epsilon | zeta |
And on a mobile screen the layout would be arranged like so:
First Entry | |
foo | alpha |
bar | beta |
baz | gamma |
Second Entry | |
foo | delta |
bar | epsilon |
baz | zeta |
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:
Another way to make sites responsive (albeit less responsive), is to use responsive JavaScript libraries. A few examples of those include:
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.
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: