Web Design Forum: Responsive Web Design: What is it, and why is it important? - Web Design Forum

Up until the last few years, cross-browser testing was a relatively simple affair. Sites had to be tested in three or four major browsers across PC and Mac with the major screen sizes and resolutions catered for.

Then came the explosion of the mobile web, which has changed things for ever.

Now there is an enourmous (and ever growing) range of screen sizes and resolutions on an equally huge array of devices - many of which have a portrait oriented screen.

So - how can web designers make sure their sites render properly on all of these devices?

So - you could have multiple versions of your site for different devices. Doable - yes. Practical - not very!

That's where Responsive Web Design is here to save the day.

What is Responsive Web Design?

Responsive Web design is a web design approach using the latest standards to enable sites to respond to user environment (i.e. the device they're using) and also behaviour.

Instead of creating multiple site designs, responsive web design techniques allow designers to create one site design that is suitable for users on all devices, adapting to a range of variables like screen size, platform and screen orientation. It does this using flexible layouts, flexible images and CSS techniques such as media queries.

Using responsive web design techniques, websites can adjust themselves to users – rather than the other way round.

Responsive Web Design uses HTML5 and CSS3, so the techniques are not compatible with all browsers just yet - but as more and more users upgrade to modern browsers, we'll start to see it used more and more.

Responsive Web Design Considerations

Screen Resolution

Web designers now have to remember that their sites could be rendered on anything from a 1 inch mobile screen to an enormous widescreen monitor - and as we've mentioned, some of these are in portrait orientation, not landscape - as illustrated here:



So just having a page that resizes isn't enough any more. You need a fully responsive design that will adapt to all of the browser variables.

How can this be acheived?

Flexible Layouts

OK - go and take a look at this site.

Try looking at the site on a desktop machine and also a mobile device, and you'll find that it renders perfectly on both. Resize the browser on your desktop on see what happens. The grid adjusts, the images re-size - you don’t have to scroll horizontally to see content off the right hand side.

This site uses flexible grids, and fluid images.
Fluid images will take more time to explain than I've got room for here - but here's a useful tutorial for those who are interested

Custom Layouts

So, fluid designs that automatically resize are one solution - but won't fit all requirements.

However using clever CSS commands, the responsive web designer can have a different version of their layout display for different browser sizes.

This doesn't mean using a completely different page for different sized browsers. Rather, the CSS stylesheet will contain all of the the page elements needed for the page including the content, footers, sidebars, navigation elements and so on…

Once you've got these, you can set up sub stylesheets for different browsers, which contain the same elements, but arranged in such a way as to display more elegantly for a different screen size or orientation - so whilst your desktop stylesheet gives one page layout, your mobile version (e.g mobile.css) will show the same elements, laid out differently.

But how can your site tell which version to use? Enter...

CSS3 Media Queries

CSS (and to an even greater extent CSS3) can use Media Queries to determine browser size and orientation.

In its simplest form, a media query can detect the browser width, and load the stylesheet that best suits it.

CSS3 goes even further, and has a range of new tags that can detect and adjust to minimum and maximum browser widths, orientation (e.g, when someone tips their iPhone over!), number of colours, etc... and load the a version of the page that will look the best.

In short - dead clever!

You can read more about CSS3 Media Queries here

CSS3 offers even more flexibility, and has a range of new tags including min-width, max-width, device-width, orientation and color to detect even more about the user’s browser capabilities and load in different stylsheets to deal with this.
The orientation tag especially is invaluable for detecting which way round someone is using their device.
You can read more about CSS3 Media Queries here.

JavaScript and jQuery

As we've mentioned, CSS3 isn't supported by all browsers yet. However there are also ways of achieving the same functionality using JavaScript and jQuery, which can be used instead or or alongside media queries.

JavaScript has its own CSS3 Media Queries Library.

Check out this tutorial on combining media queries with JavaScript too.

The Skills Needed for Responsive Web Design

If you're a web designer looking to get in to Responsive Web Design, there are a number of key skills you're going to need.

If you want to get really in-depth and learn these techniques hands-on, Silicon Beach Training offers a range of web design training courses in Brighton, Sussex:
HTML5 Training – 1-day: £325 + vat
CSS3 Training- 1-day: £325 + vat
You can book HTML5 and CSS3 together for £495 + vat
JavaScript Training – 2-days: £495 + vat
jQuery Training – 3-days: £750 + vat

Call 01273 622272 or e-mail info@siliconbeachtraining.co.uk for more details