LESSON 8.1

Responsive Website Design

Design once, look great on every screen

Learn what responsive web design means and how you can see your website in various screen sizes using Chrome Developer tools. Responsive design is essential in a mobile-first world, and the core principles behind building sites that adapt to any screen size.

💡 The Concept

If you’ve ever visited a website on your phone and had to pinch, zoom, and scroll sideways just to read a sentence, you’ve experienced a non-responsive website. Over 50% of all web traffic now comes from smartphones, so building websites that adapt to every screen size is no longer optional. In this lesson you’ll learn what responsive design is, why it matters, and how to start testing it right in your browser.

What Is a Responsive Website?

A responsive website is one that automatically adapts its layout, images, and content to fit the screen it’s being viewed on; whether that’s a widescreen desktop monitor, a laptop, a tablet, or a smartphone. Instead of building separate versions of a website for different devices (which was the old approach), responsive design uses flexible grids, fluid images, and CSS media queries to create a single site that works beautifully everywhere.

To make websites look good on both mobile and desktop, these features are generally incorporated:

  • Columns on desktop are stacked vertically on mobile: a three-column layout becomes a single column on a phone.
  • Unnecessary decorative images are removed on mobile: saving bandwidth and reducing clutter.
  • Navigation is simplified: the full desktop menu is replaced with a hamburger menu or a single button on smaller screens.

In the early days of smartphones, web designers created two completely different views, often in separate files, one for mobile and one for desktop. The code detected the screen width and loaded a different page entirely. That clunky approach has been replaced by the elegant stacking and reflowing of content that responsive design provides.

Want to see how your own website looks across multiple devices? Try an online tool like Am I Responsive? to get a quick visual preview.

Why Responsive Design Matters

If the practical arguments haven’t convinced you yet, here are the key reasons responsive design is non-negotiable in modern web development:

  • User experience: Visitors who have to pinch and scroll to read your site will leave. A responsive site keeps them engaged.
  • SEO: Google uses mobile-first indexing, meaning it primarily uses the mobile version of your site for ranking. A non-responsive site will suffer in search results.
  • Maintenance: One responsive codebase is far easier to maintain than separate mobile and desktop versions.
  • Reach: With over 50% of web traffic coming from mobile devices, a non-responsive site is invisible to half your potential audience.
  • Professionalism: A non-responsive site looks unfinished to mobile visitors, who now make up more than half your audience.

Before we get into the how, it helps to understand why responsive design matters so much — and then see it in action. Watch the video below for an overview of what responsive design looks like from a real developer’s perspective.

🎬 Video Demonstration

Exercise: Try It Yourself

Testing Responsive Designs with Chrome Developer Tools

You don’t need a drawer full of devices to test responsive layouts. Google Chrome’s built-in Developer Tools make it easy to simulate different screen sizes right from your browser.

Step 1. Open Chrome and navigate to any website — or open a page you have already built.

Step 2. Right-click anywhere on the page and select Inspect to open Chrome Developer Tools.

Step 3. Click the smartphone/tablet icon in the top-left corner of the DevTools panel to enter device simulation mode.

Chrome Developer Tools mobile view
Chrome Developer Tools lets you preview your site on various device sizes without leaving your browser.

Step 4. Use the device dropdown at the top to preview the site on an iPhone, iPad, Pixel, or other device.

Another quick trick: simply drag the edge of your browser window to make it narrower and wider. You’ll immediately see how your layout responds at different widths. If you want to see all the screen sizes at one time, try Am I Responsive? to see a quick side-by-side preview across desktop, tablet, and mobile.

❓ Frequently Asked Questions

How do I know if my website is responsive?

The quickest way is to open your site in Chrome, right-click and choose Inspect, then click the smartphone icon to enter device simulation mode. Switch between device presets or drag the viewport edge to make it narrower. If your layout breaks, text becomes too small to read, or you have to scroll sideways, the site is not fully responsive. You can also use Am I Responsive? to see a side-by-side preview across desktop, tablet, and phone.

Does my website need to look exactly the same on every device?

No, and it shouldn’t. The goal is that your content is readable and usable on every screen, not that it looks identical everywhere. A three-column layout on desktop might stack into one column on a phone. Navigation might collapse into a menu button. Images might resize or be hidden. What matters is that visitors on any device can find what they need without frustration.

Will my website look bad on older phones that don’t support modern CSS?

Modern CSS features like media queries are supported by all current browsers, including mobile browsers on older phones. As long as your site has the viewport meta tag and well-written CSS, it will display correctly on any reasonably current device. Extremely old browsers may not support every feature, but those represent a very small fraction of visitors.

Why not just build a separate mobile website?

That was a common approach before modern CSS, when companies often built two versions of a site: one for desktop and a stripped-down one for phones. The trouble was that the mobile version usually left things out, and visitors got frustrated when they could not do something on their phone that they could do on a computer. A responsive site solves this by using one set of pages that adapt to the screen. The mobile view might show fewer images or move the navigation into a menu button, but the functionality should stay essentially the same. The only time it makes sense to do something different is when a feature genuinely does not fit a small screen, such as a large spreadsheet or a complex data table, and even then you want a sensible mobile alternative rather than a dead end.

★ Key Takeaways

A responsive website looks good on any screen, from a small phone to a wide desktop monitor. This lesson explained what responsive design is and why it matters for every site you build today. Next, you will learn about the viewport meta tag and media queries, the tools that make a site actually respond to different screen sizes. These are core skills for modern web development.

Next Lesson: The Viewport Meta Tag and Media Queries

← Back to Responsive Design Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons