What is Responsive Web Design?

Responsive web design is the concept of designing a website that scales to various screen sizes.  With the increase in web surfing from tablets and mobile devices a website needs to work at different screen dimensions and resolutions.  The choice is to either build a mobile version, or have a website that scales responsively!

click image to enlarge

Currently the main "sizes" can be categorised as:

• 960px to 1024px (tablet landscape to standard desktop)
• 768px to 959px (tablet portrait to desktop)
• 480px to 767px (mobile landscape to tablet portrait)
• Less than 480px (mobile portrait)

So how do you create a website that is fluid and scales to fit these different sizes?
The secret lies in CSS3 media queries.
Media queries allow you to serve up different CSS styles depending on the current screen size.  The great thing about this is that new devices (mobiles and tablets) will be able to use media queries, and old devices will just see the standard desktop web site.

Using media queries
Based on the above sizes we can write our CSS in the following order:
/* all styles for standard desktop here */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* styles for tablet portrait here */ }
 @media only screen and (max-width: 767px) {
/* styles for mobile portrait here */}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles for mobile landscape here */}

And that's all there is too it!

Hiding elements in Mobile views
What if you decide there are some elements you just don't want to show in mobile views? (like flash elements or slideshows).
We can simply use CSS to hide that element in the correct portion of the above code using:
#divname {display: none;}

Scaling images
There are a number of solutions for flexible images so that they scale for the correct device:

1. Use the media queries above to load different sized background images into div tags based on the screen size.
2. Use width and height attributes to scale images, but this doesn't optimise the size of the image (same image is downloaded)
3. Use the overflow property in CSS to crop images
4. Javascript solutions that resize your images

If you're interested in mobile web design, check out the following articles about mobile phone website development:

Viewport size vs screen size

Mobile screen sizes

HTML link to call a phone

What is Responsive Web Design?