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
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.
- Ultimate Guide To Grid-Based Web Design: Techniques and Tools
- Grid Layouts in Modern Web Design
- Grid Based Web Design Resources
- 1140 CSS Grid
- Original Fluid Grids Article by Ethan Marcotte
- Ethan Marcotte’s Responsive Web Design Book