Responsive Web Design - Helpful Links

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

• CSS Media Queries

  • CSS Media Features

    • width
    • height
    • device-width
    • device-height
    • orientation
    • aspect-ratio
    • device-aspect-ratio
    • color
    • color-index
    • monochrome
    • resolution
    • scan
    • grid

Useful Queries

• Media Queries for Standard Devices (css-tricks.com)

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.

• 960.gs
• Ultimate Guide To Grid-Based Web Design: Techniques and Tools
• Grid Layouts in Modern Web Design
• Grid Based Web Design Resources

Fluid Grid

• 1140 CSS Grid
• Original Fluid Grids Article by Ethan Marcotte
• Ethan Marcotte’s Responsive Web Design Book

Fluid Images

• Portion of Ethan Marcotte’s Book on Fluid Images
• Fluid Image Replacement Techniques
• Fluid Images by Ethan Marcotte