Responsive design glossary

A11y is short for "Accessibility", the practice of making sure your site or app is accessible to all users, regardless of their device or impairments. Things you should keep in mind when designing a web site or application is to make sure that people with visual impairments can use your product, by making sure text sizes are large enough, colors have enough contrast and that you don't depend on color alone to communicate meaning (for people with color blindness).

When building a site, things you should keep in mind are making sure the site is accessible for people using just a keyboard or other types of input mechanisms, that buttons and links are large enough to be clicked or tapped, and that images or videos have alternative text content that provides the same information.

There are many more things to keep in mind if you want to make an accessible site or app. A good start is the WCAG, the Web Content Accessibility Guidelines. You can find a good intro on WCAG at MDN.

Polypane is filled with accessibility features. We wrote a full overview on our blog: Find and fix accessibility issues with Polypane.

Adaptive design refers to the practice of creating different sites that are adapted to a specific platform. The most well-known examples are mobile sites that are usually located at m.example.com. With adaptive design, you reduce the complexity of each site, but you are left maintaining multiple sites. Users visiting one of the site rather than the other could also be left with a bad experience.

A breakpoint, responsive breakpoint or CSS breakpoint is a width or height that you specify in a media query at which point you want to change the style or layout of a page. For example, to change text side, or to go from one to two columns.

This should not be confused with a JavaScript breakpoint, which you can use to pause your javascript code and inspect it.

"Content first" is a way of developing websites where you literally start with the content before you start the design. With Content first, you focus on the content and the structure of your site before anything else, leading to a more logical structure and layout.

In an ideal world, every project would have the entire content mapped out before the start of the design and before the start of development. Practically speaking though, this is almost never the case (and there is a point to be made about the content being created in tandem with the rest of the site). However, having some content ready will greatly improve your design, and having an idea of which content you want to write (for example, by creating a sitemap) will already improve your site's structure.

A fluid design or element is one that automatically fills out the width of the available space (like a fluid). Web pages without any styling are fluid: lines of text are automatically wrapped when they reach the edge of the viewport.

With fluid typography, you use viewport units for your font sizes, either alone or as part of a calc() value. This will let your font size grow along with the size of the screen, keeping the two in balance.

Because fluid typography sizes with the viewport, it's common to use a minimum and a maximum size to prevent text becoming too small or too large. There are various techniques for this, the easiest is to use media queries: up to a certain width, the size is fixed, after that, the size is either in vw, or in a calc(), for example, calc(1rem + 0.25vw), and at a certain viewport width, you define the maximum font size.

An upcoming method is clamp(), which will be introduced in browsers soon and lets you do this without media queries. For example clamp(1rem, 2.5vw, 1.75rem) can be used to get a font-size that's 2.5vw, with a minimum of 1rem and a maximum of 1.75rem.

Graceful degradation is the opposite of progressive enhancement. With graceful degradation, the "full" experience (on a desktop, with JavaScript enabled, with a mouse) is the default, and you add code and functionality to account for things that might miss.

Generally it's better to approach a project with progressive enhancement in mind, and graceful degradation should be reserved for improving legacy sites.

I18n is short for "internationalization" and refers to the practice of translating your site or app in multiple languages, making it available for international audiences.

L10n is short for "localization". This is slightly different from I18n. Where I18n only refers to translating, localization also means changing the content to make it fit a certain locale (country or area). Examples of this are webshops changing the currency to the local currency or sites changing the way phone numbers and values are formatted.

With a media query you can define CSS that is only applied when your media query is applicable, like when your screen is at least 500px wide:

@media (min-width: 500px) {
  ...
}

This lets you write CSS that only makes sense when your page is a certain (minimum) width or height. For example to move from one column to two columns of text. When using media query values, it's best to use min-width exclusively and work mobile first.

You can test for many values in a media query, such as test for dark mode with @media (prefers-color-scheme: dark) and target the styling when the page is printed with @media print.

Want to learn more?

Our complete guide to CSS Media Queries will tell you everything there is to know about CSS Media Queries.

Mobile first refers to the practice of starting a responsive design or implementation with the smallest view first. Because of the limited available space, the smallest version is often simpler than the (larger) desktop version. This forces you to prioritize the important parts of a page. It then becomes easier to design or develop for larger screen sizes, as opposed to designing or developing for desktop first and trying to fit everything in on mobile.

PWA is short for "Progressive Web App", a term for web applications that use the modern capabilities of (mobile) browsers, like offline availability and the ability to add themselves to a home screen like a regular app. They are often given as a more lightweight alternative to "real" apps.

With Progressive enhancement, you make sure that everyone can access your site or app. You do this by making sure the information or functionality is available in the simplest of technologies (often just HTML) and testing for support for additional features and complexity before adding them.

For example, a form should work with just the HTML available, but could submit without a page refresh using JavaScript if that is available. You can also use a progressive enhancement approach for design by making sure the site works on all browsers, but adding additional non-vital CSS effects (like backdrop-filter) to make the site more visually appealing in browsers that support it.

Responsive design in general refers to the practice of making a web page that responds to a browser's viewport and other settings. Usually this is the size of the screen people are using, but it can also include their preference for a dark mode, or the fact that they use a touch device and not a mouse (in which case larger buttons are easier to hit). With responsive design, the goal is to make the website look good and work well regardless of the device people are using to access the site.

For a sharp picture on a desktop you need a much larger image than on a mobile phone. If you just add images for the desktop size, your mobile users will end up downloading large images, wasting their bandwidth and slowing your site down. With responsive images, you can offer a set of images at different sizes and quality (and even content), and the browser will decide which is the best to show to the user.

You can do this by using the srcset and sizes attribute on an <img> element, or by using the <picture> element and adding <source> elements to it. With this, you can vary the size of images you send, the pixel density (so mobile phones with sharper screens get sharper images), the type of image (you can send a webp to browsers that support it, and a jpg to browsers that don't) or even do art direction, where on smaller screens you zoom in to a specific part of the image.

A really good overview of how to apply these techniques can be found on MDN: responsive images on MDN.

UI is short for "User Interface" and refers, in our context, to the design and interactions of a website or app, or more general, to how the user interacts with your site or app. UI Design is the creation of the user interface, by designing and building it.

UX is short for "User Experience" and is the overall experience of a user using a product or interacting with a website. The focus is on making a good user experience, where interacting with a website is pleasing and easy. A good design, clear content, fast load times and nice interactions with appropriate animations are all part of a good user experience. In common usage, "the UX" of a site or app often refers to the design and interaction combined.

A User Agent refers to a browser or other application that can view or access web pages. (these apps are 'agents' that visit the site on a user's behalf). In the early days of the web, the only reliable way to detect which feature were supported by a browser was "user agent sniffing", or reading out the user agent string. Nowadays, we can use feature detection in both JavaScript and CSS instead. Because of this user agent sniffing, these strings contain many bits of text that mimic other, older browsers, to make sure the sites using this user agent sniffing continue to work properly.

The viewport is the size of the part of your site that's visible in the browser.

Viewport units are values you can use in your CSS to size elements. 1 viewport unit is equivalent to 1% of a viewport dimension. There are four viewport units that you can use in your CSS: vw, vh, vmin and vmax.

• 1vw is 1% of the width of the viewport.
• 1vh is 1% of the height of the viewport.
• 1vmin is 1% of whichever is smaller, the width or the height of the viewport.
• 1vmax is 1% of whichever is larger, the width or the height of the viewport.

WCAG is short for "Web Content Accessibility Guidelines". These are guidelines for web content creators (people that make websites and web apps) on how to make sure that their content or application is usable and accessible by everyone. A good intro on WCAG can be found at MDN. In some countries, it's even mandatory for certain sites to adhere to these guidelines.