Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries, an extension of the @media rule. – From Wikipedia
Our Magic Poster Discussion
For Beginners
- Responsive Web Design Post – by Ethan Marcotte
- Responsive Web Design Book – by Ethan Marcotte
- Beginner’s Guide to Responsive Web Design – By Treehouse
Inspiration
- Food Sense | Plant-Based Eating At Its Best
- The Boston Globe
- 50 Best Responsive Website Design Examples of 2013
- Responsive Web Design on Pinterest
- Media Queries
Design Principles
Remember, the web has ALWAYS been responsive…
- Choosing A Responsive Image Solution
- How to use IcoMoon and Icon Fonts
- How To Create A Responsive Navigation
- 5 Really Useful Responsive Web Design Patterns
- A Responsive Design Approach for Complex, Multicolumn Data Tables
- Style Tiles
- Style Tiles and How They Work -alistapart.com
- Typography designed (or refined) to be better on screens:
Responsive Design Workflow
Having integrated teams—UX, visual design, front-end, and back-end folks all working together—that can deliver this sort of documentation is crucial for the success of these types of projects.
- An Event Apart: Responsive Design Workflow
- 7 Responsive Design Tips to Revamp Your Workflow
- Responsive Design Workflow: The End of Photoshop?
- How to Design Responsively
Frameworks
- Foundation
- Bootstrap
- Compass
- Bourbon
- 320 and Up – Tiny responsive web design boilerplate
- Cool Kitten: A parallax scrolling responsive framework