# Responsive design

> Building one web page that rearranges itself to fit any screen size.

- Level: Basic
- Topics: Software
- URL: https://tidbit.legios.com.ar/responsive-design/
- In Spanish: [Diseño responsive](https://tidbit.legios.com.ar/es/responsive-design/)

**Responsive design** is the practice of making a single website that adapts to the screen it is shown on. On a wide monitor a news site might show three columns side by side; on a tablet, two; on a phone, one long column you scroll with your thumb, with a bigger font and a menu tucked behind an icon. Same address, same content, different arrangement.

It works mostly through CSS. Layouts are built with flexible widths (percentages instead of fixed pixels), images that shrink with their container, and **media queries**: rules like "if the screen is narrower than 600 pixels, stack these boxes". Modern layout tools such as Flexbox and Grid make this much easier than it used to be. Many teams design **mobile-first**: start with the phone version and add columns as space appears.

The term was coined by Ethan Marcotte in 2010, just as smartphones took off. Before that, companies often built a separate "m." mobile site. Today more than half of web traffic comes from phones, and search engines rank pages partly on how well they work on mobile, so responsive design is simply the default.

## An analogy

Water poured into different glasses. It is the same water, but it takes the shape of whatever it is in, without anyone having to prepare a special version for each glass.

## Keep in mind

- One site, one URL, a layout that adapts to each screen width.
- Built with flexible grids, scalable images and CSS media queries.
- Mobile-first means designing the small screen first and growing from there.
- Replaced the old practice of separate mobile sites.

## Go deeper

- [Responsive design (MDN)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)
- [Responsive Web Design, by Ethan Marcotte (A List Apart)](https://alistapart.com/article/responsive-web-design/)
- [Responsive web design on Wikipedia](https://en.wikipedia.org/wiki/Responsive_web_design)

## Related terms

- [Website](https://tidbit.legios.com.ar/website/): A set of web pages under one address, stored on a server and opened in a browser.
- [Tablet](https://tidbit.legios.com.ar/tablet/): A computer that is just a big touchscreen, between a phone and a laptop.
- [CSS](https://tidbit.legios.com.ar/css/): The language that decides how a web page looks: colors, fonts, spacing, layout.
- [Container](https://tidbit.legios.com.ar/container/): A sealed box with a program and everything it needs to run anywhere.
- [Smartphone](https://tidbit.legios.com.ar/smartphone/): A pocket computer that also makes phone calls.
- [URL](https://tidbit.legios.com.ar/url/): The full address of something on the web: protocol, site and path.
- [Scalability](https://tidbit.legios.com.ar/scalability/): How well a system keeps working when it has to handle much more.