Responsive Web Design

By Pete | @kingpetey | 22 Jan 2012

Responsive design is the idea that web site layouts should change based on the users choice of device. Depending on the users environment the design may adapt to the screen size, platform or orientation. 

I've put together an example that you can use in your own web sites. Look what happens when you resize the page horozontally in your web browser or on your mobile.

View now - Responsive Design

Feel free to inspect with Firebug and copy into your own project where suitable.

It uses a condition to tell the web browser which stylesheet to include:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 660px)" href="1col.css" />

In the above example we are saying to include 1col.css when the media is a screen and the maximum width is 660px.

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px) and (max-width: 1200px)" href="2col.css" />

Here we are saying to display 2col.css when the media is a screen, the minimum width is 1000 pixels and the max-width is 1200 pixels.

Any questions I will try to answer in the comments.

Update: When setting the viewport you might want to detect the device with PHP first otherwise the viewport will be set too small on the iPad.

 

Comments

One of my colleagues found this http://five3.me/features/ - try scrolling and resizing.