What is responsive design?
"Responsive" means "reacting." It's a design approach where font size, images, and layout change automatically based on screen width. Ethan Marcotte introduced the concept in 2010, and it's now the standard in web development. Japan's Ministry of Internal Affairs surveys confirm that smartphone internet usage has overtaken PCs by a wide margin — a site that doesn't handle mobile will lose visitors immediately.
How it works: switching by screen width
The switching is done by a CSS rule called a "media query." For example, you can write "only when the screen is 767px wide or less, narrow this margin."
The basics of writing responsive CSS
In your HTML's <head>, always include <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, smartphones show the PC layout scaled down and text becomes unreadable. Then in CSS, write @media (max-width: 767px) { ... } and put your mobile-specific styles inside.
Conceptually, it's less error-prone to "first design for the small screen" than to "shrink a large design." This is called mobile-first. Start with a single column for mobile, images that fill the screen width, and tap-friendly button sizes. Then layer on tablet and desktop enhancements — side-by-side layouts and extra whitespace — from there.
Key responsive techniques
Recommended learning path for teens
Start with just two breakpoints: desktop and mobile. Tablet support can come later. The F12 developer tools have a "device mode" that lets you simulate a mobile screen. Use it to check where your site breaks at smartphone widths and build the habit of fixing those issues.
Once you're comfortable, try a framework like Tailwind CSS. It lets you specify screen-size variations with class names like sm:, md:, and lg:, so you don't have to write media queries every time.
When checking, look beyond appearance — ask "can I read it?", "can I tap it?", "does it make sense?" Is text too small? Is there horizontal scroll? Are images too heavy to load quickly? Does the form run off-screen? In web development, usability comes before pretty design.
Common pitfalls
- Forgetting the viewport meta tag. Without it, smartphones show the desktop layout scaled down and text is unreadable.
- Horizontal scroll appearing. Usually caused by a fixed-width element wider than the screen.
- Buttons too small to tap. Apple and Google both recommend a minimum of 44×44px for tappable elements.
How will this help you in the future?
Responsive design is a fundamental skill for web designers, coders, and frontend engineers. Corporate sites, school sites, booking systems, online stores — any page that's hard to read on mobile loses users. When you learn HTML/CSS and can also handle responsive design, you demonstrate that you can build pages that real people can actually use.
What you can do today
- Check that your site's HTML includes the viewport meta tag.
- Press F12, switch to device mode, and see how your site looks at mobile width.
- Write
@media (max-width: 767px) { ... }and use it to add tighter spacing on mobile.