WebsitesModule 4: Quality and inclusionLesson 10 of 15
Course progress60%
12 min lesson · Updated August 2026
How do websites work across phones and computers?
A responsive website adapts content and layout to available space and device capabilities while preserving meaning, task access and usability instead of maintaining separate “desktop” and “mobile” truths.
What you will learn
By the end, you will understand:
Explain responsive layout and viewport concepts
Design for touch, keyboards and changing orientations
Test content and actions across a range rather than two devices
Visual explainer
See the idea clearly.
One semantic page rearranges from wide desktop columns to tablet and single-column mobile, preserving navigation, content order and primary action.
Responsive design is continuous
Layouts use flexible sizing, media/container queries and adaptable assets to respond to available space. Breakpoints should occur where content needs them, not only at famous device widths.
The same URL and core content simplify sharing and maintenance, though components may change presentation.
Mobile changes context and input
Factor
Need
Space
Prioritize hierarchy and let content reflow without clipping.
Touch
Adequate targets, spacing and no hover-only actions.
Keyboard
Fields remain visible when the on-screen keyboard opens.
Orientation
Avoid locking orientation unless essential.
Network/device
Control asset and script cost.
Environment
Readable contrast, simple actions and recoverable interruptions.
Content order must remain meaningful
CSS can visually rearrange content, but keyboard and screen-reader order usually follows the document. Large mismatches create confusion.
Start with logical HTML order and adapt layout around it. Do not hide essential content from mobile simply to make the page shorter.
Responsive audit checklist
Viewport configured
No page overflow
Text reflows/zooms
Images scale/crop safely
Navigation operable
Targets spaced
Focus not obscured
Forms visible above keyboard
Tables/diagrams adapt
Media controls usable
Safe-area/dock clearance
Landscape checked
Test ranges and real tasks
01
Resize continuously
02
Check 360/390/768/1024/wide
03
Use real mobile browsers
04
Rotate where relevant
05
Zoom text/page
06
Open keyboard
07
Run priority task
08
Throttle network
09
Check reduced motion
Real-world example
Example: desktop comparison becomes mobile steps
Example
A three-column pricing comparison cannot simply shrink. On mobile it becomes clearly labelled stacked options with the same facts, while a comparison summary remains available. Keyboard focus follows reading order.
Try this
Run a responsive sweep
Open one page at a narrow width and slowly widen it. Record the first point where content clips, labels wrap badly, focus is hidden, images lose meaning or actions become difficult.
Common questions
Questions beginners ask.
What is responsive web design?
An approach where content and layout adapt to available space and device capabilities.
Is responsive the same as mobile-friendly?
Responsive design is one important way to support mobile, but real usability, performance and input testing still matter.
What is a breakpoint?
A condition where layout rules change because the content needs a different arrangement.
Should mobile have less content?
It may prioritize presentation, but do not remove essential facts or functions solely because the screen is small.
What is viewport overflow?
Content extends wider than the visible page, causing unwanted horizontal scrolling or clipping.
How large should touch targets be?
Follow applicable accessibility guidance and leave enough size/spacing for reliable touch; WCAG 2.2 includes a 24 CSS pixel minimum criterion with exceptions.
Do I need every physical device?
Use responsive tools plus representative real devices/browsers; no lab covers every environment.
Why test the on-screen keyboard?
It changes the visible viewport and can cover fields, errors or buttons.
