What is Responsive Design?

What is Responsive Design?

By Steve on February 20, 2012

What is responsive design?

One of the most talked about trends in web design for 2012 is responsive design. What is this relatively new buzz phrase, and what does it mean for your website? Read on!

Responsive design is nothing new, in fact the technology used has been with the CSS standard for some time, but browsers are just starting to accept the standard. With the steady increase in mobile devices being used to surf the web, there is little excuse to any company now to assume that most or all web traffic comes from people sat in front of a PC/Mac with a standard 4:3 monitor.

The main technology used in “responsive design” is CSS media queries.  CSS media queries basically allow you to gather data about your visitor and their browser/device capabilities (mainly screen size) and use that to apply specific CSS styles best suited to their screen size.

The Traditional Way

Web design of the past few years when targeting both traditional desktop and mobile users was to approach them as separate entities – either have separate websites for more traditional browsers on desktops and laptops and to have a dedicated mobile version usually on a separate sub domain (such as http://mobile.yourdomain.com), or to have separate style sheets dependant on the user agent (what device) that is viewing the site, i.e. is it an iPhone – use iphone.css.

Design to maximum widths, not devices

The new shift to responsive design takes the ideas from the second option above, but applies differing CSS rules (or CSS style sheets) depending on the users’ screen width.  This allows for more flexibility with the increased varying dimensions of devices which may visit your site.  You are no longer restricted to either desktop.css or iphone.css for example.  This logic is done within the CSS using media queries.

Example of CSS media query

The idea is now to design your website knowing that the end users’ browser width could vary in size, and to style up the content accordingly.  If a user is on a mobile phone, chances are their width dimension is no more than 450-480px, so you need to think about how the page would look at that size.  Static boxes of set widths when viewed on a desktop now need to shown at full width to maximise the screen real estate. And navigation links need to be more natural when viewed as a narrow and long website.

Become fluid, not rigid

A second part to responsive design is a fluid structure to your site.  In order to utilise the media queries and design for differing device resolutions your site needs to be designed to be fluid – with each section capable of moving left or right, and becoming small and larger depending on the browser width.  Ideally you need to chop up your site into sections such as a header, navigation, sidebar, content and footer and utilise some kind of grid system to allow each section to able to change in width, height and visibility depending on your viewers width – to best suit to their needs.

Responsive design is handy for Windows 7 users too

A very handy hint and a great example why sites built with responsive design are cool is if you are using Windows 7 and you “Window Key + LEFT/RIGHT Arrow” a browser window or “woosh” it to the left or right of the screen it will snap at 50% screen width.  With a static site you will then have to scroll horizontally, however, with a responsive design site, the content, images and design will have “responded” to your new width and adjusted accordingly, allowing you to still read the site at half the width of your monitor without having to scroll side to side.

Example of responsive design on Windows 7 split screen

Example of BBC and Smashing Magazine when viewed split screen on a single monitor.  Smashing Magazine is still easy to read and fully viewable, but the BBC now has horizontal scroll bars to get to the other side of the site.

Responsive design is design only, not delivery

A word of warning about using responsive design is that you are only affecting the look and feel of the site.  You are still delivering the same content, images and data to the user, so if you are designing a site intended for mobile use then you would also need to think about mobile delivery considerations too – to reduce the amount of data needed to send to the remote device over possible 3G speeds, reduce final image dimensions before downloading them and not displaying content if it is not relevant and/or not needed.

Think of YouTube’s default site and it’s mobile site as an example…

YouTube full website

YouTube mobile website

The mobile version of Youtube is stripped down to it’s bare essentials which allows the site to load quickly and more efficiently on mobile devices over slower connections.  This is done by having a separate site (m.youtube.com) to it’s main site.

The use of media queries and/or separate sites would need to be taken into consideration when developing for mobile audiences and be dependant on your specific requirements.

Using Media Queries for Web Apps

With the increasing popularity of mobile phone web apps for portable devices it is even more important to know your target user, and with web apps being written to be cross-device compatible to capitalise on different device markets – CSS media queries are a great technology to use to adjust to slightly different variations in screen widths.

Practice what you preach?

You may or may not have checked if the Falkon Digital website responds to you stretching your browser window back and forth, but at this current time our design is not 100% responsive yet… but keep coming back and checking, as we intend to roll out a new theme to our site, incorporating a fully fluid responsive design!

A Step by Step Tutorial Guide to Responsive Design

In the next few weeks we will be releasing a step by step guide to help you better understand responsive design and how to implement it.  After the final part of the tutorial, you will be able to take what you have learnt and implement it into existing websites you may have, or apply the techniques to new projects which you think may or may not need a better mobile presence.

Step 1 of the tutorial coming soon…