The case for responsive design

The shift towards mobile web browsing has driven the need for responsive websites.

A Google study this year uncovered that a surprising 65% of Australians own a smart-phone, and that 68% of owners use their phones to research products and services online. Of this 68%, two-thirds said they made an online purchase on their phones. Yet many Australian companies do not have a mobile-friendly web presence. With Morgan Stanley predicting mobile web browsing to overtake desktop web browsing by 2015, its time for businesses to start considering the needs of the growing mobile web-browsing population. Hence the need for responsive websites.

So what is a responsive website anyway?

A responsive website 'responds' to the needs of the user, creating an optimal user experience across a range of devices from large formats i.e. widescreen desktop screens, through to small formats i.e. smart-phone screens.

A responsive design will resize and/or reformat its content to suit the user's device, platform and browser.

What goes into a responsive website?

There are several technical considerations in the development in a responsive website. The key to a successful responsive website design is not to compromise the user experience - the website should be easy and pleasant to use on all devices.

Fluid vs fixed layout

The designer must firstly decide whether to use a fluid website layout or a set of fixed-sized layouts. A fluid layout is percentage based which scales with the size of the screen, whereas with fixed layouts , the layout will change based on device being used. A set of fixed-sized layouts will usually contain 3 definitive layouts: one for mobile phones, one for tablets, and one for desktops.

Sometimes a responsive website will be a combination of both fluid and fixed-sized layouts: fixed sizes for larger devices and fluid sizes for smaller mobile-sized devices.

Flexible images

Images need to resize in relative to screen size and resolution. If a website user is using a mobile device, the website should only download images optimised for that device, rather than downloading large images intended for desktop users. This allows your website to load quickly in the user's mobile device, which is great for users on the mobile broadband network

HTML5 + CSS3

The designer should try and use lightweight HTML5 + CSS wherever possible. This makes the web page faster to download as there are less images. This is particularly important with mobile devices for reasons discussed in point 2.

Menu design

The designer has to consider sizes of menus in responsive layouts, and may need to design an alternative menu system specifically for mobile devices that is more gesture-orientated, such as Responsive Nav.

Media Queries

All of these considerations would be useless without CSS media queries. CSS media queries display a set of CSS rules based on the size of the displaying browser.