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. Responsive design is about giving up control. To learned more about why web design sucked prior to 2015 - checkout Biggest Mistakes in Web Design 1995-2015. I also highly recommend you read Mobile WorkFlow by Andy Osmani.
Here is a list of articles and websites that I recommend you reading if you are interested in learning about the importance and mechanics of 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
- Designing for Large Screen Smartphones
- 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
- The Many Faces of ‘Adaptive Design’ | Brad Frost Web
- 9 Gifs that Explain Responsive Design
- Why do responsive sites have to be so tall?
What is the 'take away' from All those Articles?
Reimagining the Web Design process - take away: focus on mobile first.
But, on the other hand - mobile first may already be outdated, so where do we go from here?
Specific Concepts
4 reasons not to disable zoom in your responsive design
The Problem of CSS Form Elements
Design for Fingers and Thumbs Instead of Touch and Common Misconceptions About Touch
- 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.
Media Queries
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.
Using @media to bypass max-width » STYLECampaign
7 Habits of Highly Effective Media Queries | Brad Frost Web
Coding Q&A; With Chris Coyier: Responsive Sprites And Media Query Efficiency | Smashing Coding
Media Queries: A Look at Different Media Features
The Fab Four technique to create Responsive Emails without Media Queries
Cutting the Mustard with CSS Media Queries
Media Query Bookmarklet | Sparkbox
Simple CSS Media Query generator
Media Queries specifications by W3C
CSS Media Queries Generator - generate CSS media queries for hundreds of devices.
Tools
Screenfly Responsive screen testing on monitors, tablets, smart phones, and more.
Transactional HTML Email Templates
TinyNav - plugin to convert navigation to a dropdown
responsivepx - tool for testing your site at different sizes
This page contains information I gathered and thought were very useful. See more notes on the web.
Just to let you know, this page was last updated Friday, Dec 06 19