Principals Australia Institute Learning. Leading.

Responsive Design

Setting the highest standards
If you're like our clients, you want your website to be mobile-friendly. You may even have heard the term "responsive design" tossed around in tech-savvy business circles.

Smartphones, tablets, and other mobile devices are rapidly becoming a primary web content platform for many people. Web developers are responding to these changes by designing content that can be easily viewed on any device, an approach known as "responsive design."

Websites that are built to be viewed on mobile devices and widescreen monitors as well as traditional PCs are referred to as having "responsive design," because the site design "responds" to the size of the browser display in which it is being viewed.

A traditional static website with a multi-column format may become unreadable on a mobile device, because the page will simply zoom to fit the screen. A responsive website, on the other hand, can be designed to shift those columns into a single long column, so the reader could simply scroll down to view the whole site on a smartphone.

To see this in action adjust the size of this browser window in several directions to watch the elements of the site adjust and even move around on the page.

Responsive design represents a fundamental shift in the way websites are created, and it will only become more prevalent as web-enabled mobile devices become more common and accessible.

In the words of VIEO's Lead Designer Paul Gibson, "Responsive design is the most logical way to approach the problem of the broad range of screen sizes on the market today. This is one reason we recommend responsive design to many of our clients"

Cisco, the multinational manufacturer of networking equipment, reports that global mobile data traffic grew by 70% in 2012, and projects that by 2013, web-enabled mobile devices will exceed the world's population.
"By 2013, web-enabled mobile devices will exceed the world's population"

Many sites are seeing larger portions of their web traffic coming from mobile devices; in December 2012, reported that 30% of its web traffic came from mobile devices, and they anticipate reaching 50% by the end of 2013.

If you want to know more about responsive design or are looking for some basic technical information (e.g. about fluid grids, flexible images, and media queries), there are some great resources out there. As usual, the Wikipedia entry is a good place to start, but here are a few useful blog posts on the topic as well:

Why 2013 is the Year of Responsive Design (Mashable)

Beginners Guide to Responsive Web Design (Treehouse)

Responsive Web Design: What It Is and How to Use It (Smashing)