With the growing popularity of smart phones, tablets, and other mobile devices, our websites are increasingly being viewed from devices with vastly different screen sizes. Responsive Web design is a new approach to web design that focuses on building sites that can easily adapt to different screen sizes. Using CSS media queries, flexible images, and a flexible grid system, it is possible to create a single site that looks great and functions well on smart phones and desktops (along with everything in between).
The basic idea is to create a flexible layout using Ems and percentages rather than pixels. Then, use media query blocks to alter the design of the site at different “break points.” Your breakpoints could be whatever you want, but it is probably a good idea to include smart phone (portrait and landscape), tablet (portrait and landscape), and desktop versions.
Responsive Web design is growing in popularity, and there are quite s few good resources for getting started. Here are a few of my favorites:
Responsive Web Design
This book, published by aBookapart.com, is an excellent getting started resource. The author takes you through the creation of a single page website and covers all the basic techniques in less than 150 pages. My one gripe is that the book starts with a desktop site and converts it to a mobile site, while I would have preferred a Mobile First approach. Still, it an awesome book that is extremely well written and definitely worth many times the $9 price of the electronic version!
Articles and podcasts
- Responsive Web Design – A List apart
- Responsive Web Design: What It Is and How To Use It – Smashing Magazine
- 24 Excellent Examples of Responsive Web Design – Web Design Ledger
- The Web Ahead – Episode 2 – 5by5.tv
Do you know of any other useful resources missing from this list? Let me know in the comments …