Module 16: Responsive Websites
Why responsive design matters
🏠The everyday picture
A tailor who sews one size of shirt for everyone. It fits a few people and hangs badly on everyone else. Responsive design is a shirt that adjusts to whoever wears it.
📘What it really is
- Responsive design means one website that adapts its layout to the screen it's shown on.
-
In India, most people use the internet on phones. Many of your visitors will never see your site on a laptop.
-
The things that break on small screens:
- text too small to read, or wider than the screen;
- buttons too small to tap;
- side-by-side columns squashed into thin strips;
-
pages that scroll sideways.
-
Search engines also check whether a site works on phones and rank it accordingly.
- Developer tools have a device mode (the phone-and-tablet icon at the top of the panel) that shows your page at phone sizes. It's a good first check, but always try a real phone too.
🖱️Try it
Open your site in developer tools' device mode and choose a phone size. Note everything that looks wrong: text size, the menu, the cards, the form. Then open a site you use every day in the same mode and compare.
✅Quick check
Most of a site's visitors use phones. Which screen size should be designed and tested first?
Show the answer
The phone.
Is device mode in developer tools enough testing?
Show the answer
It's a good start, but real phones differ (touch, speed, browser bars), so test on at least one real phone.