Responsive Web Design Overview

Responsive web design (RWD) is an approach that helps ensure web pages render well across a range of screen sizes and resolutions.

Have you ever visited a site on your mobile device and noticed that some elements are too small, or that content disappears off the side of the screen? That's not a great user experience!

Most modern commercial sites are designed to be responsive by experienced web development teams. For example, visit the following pages and try resizing your browser window:

• EarthQuaker Devices
• GameStop
• Miami University

What did you notice about how the layouts changed at different window widths?

There are several aspects to RWD, but we will focus on the following:

1. Flexible grid layouts (using Flexbox or Grid)
2. Flexible images (discussed in Optimizing Images)
3. Mobile-first design enhanced with media queries