Responsive Web Design 101

Responsive web design is one of the latest trends picking up steam online, and with more and more websites beginning to incorporate it into their design, we thought we’d fill you in on how this trend is changing the face of websites.

Responsive Web Design

Also known as fluid design, responsive web design centres on the notion that a website should look good on all devices, no matter their size.  So, rather than develop different websites for different screen sizes, responsive web design integrates adjustable screen resolutions and images so a website automatically changes to suit the size of the screen on which it is displayed.

With access to the Internet available on more than 400 devices, the screen sizes on which people are viewing websites have become extremely varied. Not only that, but devices such as the iPhone and iPad, allow users to instantly switch from viewing a screen in portrait to landscape layout, creating even more pressure on web designers.

Enter responsive web design.

Using a fluid grid system, websites can now include images, columns and text boxes that resize depending on screen size.  Not only that, but the design can change the actual layout of a page, moving things around to get the most out of the space available. This keeps the website looking good, but it also allows the user to get the most out of their visit by making information easily accessible.

For example, imagine visiting a website using a desktop computer.  Let’s say it has four images going across the top of the page with two columns of text below.  Now, imagine viewing the same website on an iPad. If it has responsive design, you may see the same images but perhaps they are smaller, as are the columns of text, but the whole site is there.  No scrolling to get to the other side of the page.  Using the touch features on the iPad you can zoom in on bits of the page you want to read. If you use an iPhone maybe those images would be stacked two on top of two, with one column of text on top of the other. The text could be shortened with “read more” options or maybe the page contains other app-like functionality.  Once again you’ve got the whole website on the screen and the layout has adjusted for easy viewing.

One recent example is the newly relaunched Boston Globe website which gives users a fantastic experience no matter what device they are using. This video shows just how responsive web design allows users to benefit while using different devices:

The technology behind the new BostonGlobe.com from jeff moriarty on Vimeo.

With over 85% of new mobile phones being able to access the Internet, and predictions of the mobile web becoming more popular than desktop Internet by 2015, responsive web design seems likely to become a standard feature in web design.  This is definitely one trend to watch.

Interested in creating a website with responsive web design? Give us a call today on 0116 254 9888.