Responsive Web Design for Dummies

…or at least, the uninformed.

What is Responsive Design? Well, imagine you just opened a blog, a website, or this article on your iPad, mobile phone or desktop. With Responsive Design, you will see the layout of the article automatically adjusted so that it fits the width of your browser. Even on a thin mobile phone the resolution is clear, and the entire page can be viewed – no scrolling or manual resizing required.

The entire spectrum of screen sizes and resolutions has widened since the advent of small hand-held devices like iPads and cell phones that act like mini-computers. In the other direction, computer screen sizes have become larger and more “cinematic”; with wide screen images as large as suitcases.  For web designers, creating a different version for each individual device is not practical; but now, Responsive Web Design essentially sizes itself to adjust to your device automatically.

Responsive web design is not a single piece of technology, but rather a collection of techniques.

The idea behind a “responsive design” is what’s known as a “fluid grid”; a “‘liquid layout” that expands with the page.  Traditional layouts have fixed widths with a fixed number of pixels across and centered on the page. But the number of different screen resolutions today makes “liquid layouts” a necessity.

Fluid grids are an important part of a responsive design, but can only go so far. A complex three-column layout isn’t going to work on a small mobile phone, but responsive design can deal with that. It’s called “media queries”, or “CSS3 media queries” that allows you to gather data about the site, and, in that time-honored tradition of trouble shooting: “then a miracle happens!”

Don’t worry about it. It’s magic, and it works.  That’s good enough for me.