Web developmentLesson 3 of 3 in the course HTML and CSS

Responsive Web Design: Core Techniques and Adaptive Layouts

5 flashcards · 5 quiz questions · 5 match pairs · 4 fill-in sentences · English

Save course
Lesson progress
0 / 5

Your progress is kept in this browser only.Sign up to save it

Summary

Responsive web design helps web pages remain usable and readable across devices and screen sizes. Instead of designing a separate fixed layout for every device, a responsive page adapts its layout to the viewing environment.

Responsive web design (RWD) is an approach to creating web pages that render well across a range of devices and viewport sizes, supporting usability and user satisfaction. A responsive layout can adjust for a desktop, laptop, tablet, or mobile phone.

All flashcards

Responsive web design
An approach that adapts page layout and presentation to different devices and viewing environments to preserve usability.
Core techniques of responsive web design
Fluid grids, flexible images, and CSS media queries.
RESS
Responsive web design with server-side components; it combines responsive techniques with server-side decisions.
Ethan Marcotte's contribution
He coined “responsive web design” in a 2010 article and described it through fluid grids, flexible images, and media queries.
User interface plasticity
The capacity of an interface to preserve usability as physical characteristics and environments change.

Quiz questions

  1. What is the main purpose of responsive web design?Answer: To adapt pages to different viewing environments while preserving usability.
  2. What did Google announce in 2015 as part of Mobilegeddon?Answer: Mobile-friendly sites would receive ranking boosts for searches made on mobile devices.
  3. Which approach can help check a responsive page at several viewport widths?Answer: Resize the viewport in browser developer tools and inspect the page at different widths.
  4. What distinguishes RESS from responsive techniques that rely only on the client?Answer: It combines responsive techniques with server-side decisions.
  5. What was notable about the layout of Audi.com, launched in late 2001?Answer: It adapted meaningfully to the browser viewport's width.

Based on the Wikipedia article Responsive web design, licensed CC BY-SA 4.0. Adapted into a summary, flashcards and quizzes.

More in Web development

All Web development lessons
Web developmentJavaScript Foundations: Language, Runtime, Asynchrony, and Security5 flashcards · 5 quiz questions · 4 gamesPlay free →Web developmentDOM Nodes, Standards History, and JavaScript Manipulation5 flashcards · 5 quiz questions · 4 gamesPlay free →Web developmentSingle-Page Applications: Architecture, Communication, and Trade-offs5 flashcards · 5 quiz questions · 4 gamesPlay free →Web developmentCSS Foundations: Selectors, Cascade, Layout, and Standards5 flashcards · 5 quiz questions · 4 gamesPlay free →Web developmentJSON: Data Model, Syntax, Standards, Interoperability, and Applications5 flashcards · 5 quiz questions · 4 gamesPlay free →Web developmentREST Foundations: Resources, Constraints, and the Uniform Interface5 flashcards · 5 quiz questions · 4 gamesPlay free →