This post looks at the basics of Responsive Web Design (RWD) and takes you on a tour around the web of some helpful links about the three principles of RWD: CSS Media Queries, Fluid Grids, and Fluid Images and Media. I hope you find these useful.

There’s tons of great things on the internet regarding RWD, so obviously I can’t include everything here. Did I miss something you wrote or that you found helpful? Let me know in the comments.

CSS Media Queries

W3C Spec For CSS Media Queries

Useful Queries

Fluid Grid Layouts

Grid layouts for webpages have become a popular web design approach. The goal is to have a solid visual and structural balance on a page.

What’s a Grid?

Table based markup was popular in the past, but it’s a poor approach.

There are many reasons why tables are bad for layout, with one of them being that the semantics are wrong. Note that semantics are an important part of HTML5.

Grids give a page structure and consistency like tables, but without the rigidness.

Fluid Grid

Fluid Images