Responsive web design is the practice of building a single website that adapts gracefully to whatever screen it lands on — a phone held in one hand, a tablet in landscape, a laptop, or a large desktop monitor. Instead of maintaining separate "mobile" and "desktop" sites, you write one set of HTML and CSS that reflows, resizes, and reorganizes itself based on the available viewport. This introductory topic sets up the vocabulary and mental model you will use for the rest of the module: the multi-device landscape, the three core pillars (fluid grids, flexible images, and media queries), the mobile-first philosophy, and the viewport meta tag that makes any of it work on real phones.
Why does this matter in COP4813? Most of your users will reach your web applications from a mobile device first, and search engines, accessibility guidelines, and employers all assume responsive behavior as a baseline rather than a bonus. Understanding the "why" before the "how" will make the CSS you write later in the module — relative units, Flexbox and Grid, srcset, min-width media queries — feel like deliberate choices instead of memorized syntax.
As you watch the videos below, look for three things: how content is prioritized when space shrinks, how layouts are allowed to flex rather than being pinned to fixed pixel widths, and how designers think about breakpoints as content-driven decisions rather than device-specific ones. The first video is a hands-on tour of responsive layout mechanics in a visual tool; the two Apple sessions widen the lens to design thinking across an increasingly varied set of devices and form factors.
Part 7 of Webflow's ten-part introductory series, this video focuses specifically on responsive design: how content reflows and repositions across desktop, tablet, mobile landscape, and mobile portrait views. Based on its title and description, it should walk through adjusting a layout at different breakpoints and show visually what happens to elements as the canvas narrows. Expect a practical, demonstration-driven treatment of the same ideas you will later implement by hand in CSS.
Webflow is a mainstream web design platform and its 101 series is aimed squarely at beginners, which makes this a clear, accurate entry point for the "What Is Responsive Web Design?" and "Multi-Device Landscape" subtopics. Seeing breakpoints applied live in a visual editor helps you build intuition for fluid layouts before you write media queries from scratch.
This WWDC25 session from Apple Developer traces app design from an initial idea through to a finished interface, discussing how design choices make an experience feel clear, intuitive, and effortless. Based on its description, it should cover design foundations such as hierarchy, layout, and how visual structure supports functionality. While framed around apps rather than websites, the underlying reasoning about content priority and adaptable interfaces transfers directly to the web.
It comes straight from Apple's design team, a highly credible source on interface design, and it supports the "Why Responsive Design Matters" and mobile-first subtopics by showing how designers decide what matters most on a small, focused screen.
A recent Apple Developer video introducing the design principles behind iPhone Duo, Apple's folding iPhone, and the reimagined iOS that accompanies it. Judging from its description, it should explain how interfaces are expected to behave when a single device changes shape and screen dimensions mid-use. That makes it a concrete, current illustration of just how varied and unpredictable target screen sizes have become.
Folding devices are the sharpest possible argument for the multi-device landscape subtopic: a layout that assumes fixed dimensions simply breaks. This short, well-produced session gives you a real-world case for why fluid, adaptive layouts are the only sustainable strategy.
Together these videos build the conceptual foundation that the module outcomes depend on. The Webflow walkthrough demonstrates fluid layouts and breakpoint adjustments visually, previewing the core pillars named in MO1 and the proportional scaling you will build yourself in MO2 and MO3. The two Apple sessions reinforce the mobile-first reasoning behind MO4 — start with the constrained screen and progressively enhance — and give you concrete evidence for the trade-off discussion in MO5 by showing how many distinct form factors a single interface must now serve. None of these videos teaches the CSS syntax directly; they supply the "why" and the design judgment, while the module readings and labs supply the code.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.