Responsive design and breakpoints
Marcotte (2010) proposed responsive web design built on fluid grids, flexible images and media queries; breakpoints are where layouts change, for example one-column cards becoming two or three and bottom navigation becoming a sidebar. Because reading and navigation differ by screen size (Chae & Kim, 2004; Kim et al., 2015), simply stretching is not enough.
Content, not devices
Set breakpoints where content breaks: widen the browser slowly and note when lines get too long or cards stretch awkwardly. Following Wroblewski's (2011) mobile-first approach, write small-screen styles as the base and add min-width queries, which simplifies code and helps performance; this ties to mobile-first design and Core Web Vitals. MDN (Mozilla, n.d.) documents the syntax.
Container queries and testing
Nebeling and Norrie (2013) note component reuse issues: the same card in a wide body and narrow sidebar cannot be judged by viewport width. Container queries style by parent width instead. Check that visual hierarchy holds across breakpoints and test on real devices in landscape, with enlarged text and on foldables.
FAQ
- How many breakpoints?
- No fixed number; two to four content-based breakpoints usually suffice.
- min-width or max-width?
- Mobile first with min-width extensions is easier to maintain.
Sources reviewed: 2026-10-27
References
- Marcotte, E. (2010, May 25). Responsive web design. A List Apart. The article that defined responsive design via fluid grids, flexible images and media queries.
- Marcotte, E. (2011). Responsive web design. A Book Apart. Book-length treatment of responsive methods.
- Wroblewski, L. (2011). Mobile first. A Book Apart. The mobile-first strategy behind min-width breakpoints.
- Mozilla. (n.d.). Using media queries. MDN Web Docs. Technical reference for media query syntax.
- Nebeling, M., & Norrie, M. C. (2013). Responsive design and development: Methods, technologies and current issues. In Web Engineering: ICWE 2013 (pp. 510–513). Springer. Tutorial on responsive methods and open issues.
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. Reading behaviour differs by screen size.
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. Small screens demand simpler structures.