Responsive Design

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. 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.

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

Multi-Device Layout Patterns

Media Queries specifications by W3C

CSS Media Queries Generator - generate CSS media queries for hundreds of devices.