Terminology for Responsive Design

Below are several terms that you'll commonly hear when discussing responsive design. You should be able to explain what each of these means.

breakpoint

The specified browser widths and heights where the layout shifts to rearrange, collapse, or hide elements on the page in a responsive design. Major breakpoints define significant changes in the design (like shifting the layout from a single column to two columns.) Minor breakpoints define small adjustments to improve readability or usability (like increasing the font size or adding more padding around elements.) Going Responsive, p. 128

media queries

Enable the browser to test whether a device supports a particular media type and desired features, like a screen that has a minimum width of 780 pixels. In response, the browser loads different CSS which changes the way the content appears. Adding support for media queries to the CSS3 spec is what made responsive web design possible. Going Responsive, p. 131

mobile first

Using the constraints and capabilities of mobile devices to focus and prioritize. By starting with the most constrained smartphone form factor, teams are forced to make choices. It’s easier to start small and work up than to start with a desktop site and try to fit everything into a smaller view. Going Responsive, p. 131

progressive enhancement

Delivers a baseline of usable functionality to everyone, then layers on additional features or enhancements for browsers that can support them. By starting with the lowest common denominator and testing for support for enhancements before applying them, more capable browsers can deliver a better user experience while less capable browsers still deliver a functional experience. Going Responsive, p. 132

responsive images

Because screens have different sizes and pixel densities, different images often need to be sent to different devices. New HTML markup attributes srcset, sizes, and picture enable developers to scale image sizes appropriately and provide multiple image source files. Going Responsive, p. 132

viewport

The size of a webpage rendered in the browser window minus any browser chrome. Early mobile devices relied on two sizes of viewports: the visual viewport defined the visible screen real estate (say, 320 pixels), while the layout viewport was a larger virtual screen size (say, 980 pixels). This enabled existing desktop websites to be scaled and zoomed on smaller devices. Going Responsive, p. 132