Responsive web design has fundamentally improved the web. I was so glad when responsive design started - I was so tired of the old system of web design. To learned more about why web design sucked prior to 2015 - checkout Biggest Mistakes in Web Design 1995-2015.
Here is a list of articles and websites that I have found useful in learning responsive design.
- Responsive web design: the war has not yet been won
- Responsive Web Design Patterns | This Is Responsive
- The Principles of Adaptive Design
- Designing Responsively
- Complex Navigation Patterns for Responsive Design
- Clown Car Technique: Solving Adaptive Images In Responsive Web Design
- Responsive Table
- A Responsive Design Case Study – David Bushell – Web Design & Front-end Development
- Progressive Viewports – David Bushell – Web Design & Front-end Development
- How we make RWD sites load fast as heck
- List vs. Grid View: When to Use Which on Mobile
- Why you shouldn’t ignore the bigger breakpoints in Responsive Web Design
- Responsive Navigation Patterns | Brad Frost Web
- Responsive Web Design Sketch Sheets | MightyMeta
- The Designer's Guide to Responsive Logos
- Responsive Design Testing
- Responsive Web Considered Harmful
- Mastering Responsive Web Design: The Dos and Don'ts
- A Book Apart, Responsible Responsive Design
- “Responsive Design Mode”, designed to make it easy to test multiple layouts real quick
- Responsive design is failing mobile UX
- 12 Essential Responsive Design Tools
- A handy site to help you Embed Responsivly YouTube Videos, Google Maps, and other things
- BreakpointTester | Test Your Responsive Design By Breakpoints, Not By Device Width
- Emmet Re:view — fast and easy way to test responsive design in multiple viewports
- Responsify - A responsive template generator
- Responsive Navigation Patterns
- This Is Responsive | Tips, Resources and Patterns for Responsive Web Design
- Smart Responsive Design Patterns, Or When Off-Canvas Isn't Good Enough – Smashing Magazine
- Design patterns often have a bad reputation. They are often considered to be quick, lazy, off-the-shelf solutions that are applied blindly without consideration of the context of a problem. Solutions such as the almighty off-canvas navigation, the floating label pattern or carousels for featured products are some of the prominent ones. This article isn’t about these patterns, though. This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction. Please note that this article isn’t technical; it explores interesting UX patterns out in the wild, rather than code samples. Beware: You will not be able to unsee what you are about to see, and that’s probably a good thing.
Understanding media queries and when to use them is key to making a proper responsive site. Here are some media query specific sites that I found particularily helpful in understanding media queries.