Responsive Web Design Resources

Responsive Web Design has been the hottest topic in the web design world lately, essentially it allows webpages to resize to fit whatever device is displaying the content. The means no more ‘mobile sites’ and can reduce the amount of whitespace and deadspace on larger resolutions. Currently responsive design and fluid designs are still hard to work with but the future is bright with possibilities to display content across all devices in a consistent manner.

Media Queries

At the heart of responsive web design are “Media Queries” – these allow you to serve different CSS files based on different criteria. Most commonly, these are used to load different CSS files based on browser width. Narrower screens will load a CSS file tailored to a smaller screen.

CSS3 Media Queries

Web Designer Wall has a great tutorial (with demo pages) about CSS3 Media Queries – Check it out!

Frameworks and Templates

15 Responsive CSS Frameworks Worth Considering

Good list (though slightly out of date, responsive web design is evolving quickly) of available frameworks and grids for use in responsive web design. Speckyboy also has an excellent post with 40 examples of well done responsive layouts and designs.

Books and Articles

Responsive Web Design Techniques, Tools and Design Strategies

Smashing Magazine has posted a large list of Responsive Web Design links, resources and examples – this is definitely worth checking out.

Responsive Web Design (Book)

From the author who started it all – Responsive Web Design is an e-book or physical book published by A Book Apart, the publishing arm of the always respected A List Apart.

Examples

Mediaqueri.es

Mediaqueri.es is a website with a great list of example websites that use media queries and responsive design – browse away and find some great examples!