What Is a Responsive Website?
A responsive website is one HTML page whose layout adapts to every screen width. A viewport meta tag, fluid grids, flexible images and CSS media queries rearrange columns, text and menus, so phones, tablets and desktops share one URL. Google indexes the mobile version first, so responsive layout matters for search as well as readers.
For business owners and beginners who want to know what makes a site responsive, how to test one, and how to fix an older layout.
knowledge
- Read time
- 4 min
- Sections
- 7
- Updated
- 14 Nov 2026
- Written by
- WebJi® team
Last editorial update: 14 November 2026.
What is a responsive website?
A responsive website is one HTML page whose layout adapts to every screen width — through fluid grids, flexible images and CSS media queries — so phones, tablets and desktops share the same URL and content. The term was coined by Ethan Marcotte in an A List Apart article in May 2010.
- One URL, one HTML document for every device.
- Columns, type and menu change with the screen instead of a second site.
- Images shrink to their container and never force sideways scrolling.
- The page stays readable when the window is dragged narrower.
A static site can be responsive too; "static" only means the HTML is stored as a file rather than built per visitor. A new build that ships this way is part of WebJi® website design services.
How does responsive design work?
Three pieces do the work: a viewport meta tag tells the browser to use the device's real width, fluid widths let columns share the row, and media queries change the layout at the widths you choose.
<meta name="viewport" content="width=device-width, initial-scale=1">
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
img { max-width: 100%; height: auto; }
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; } /* stack columns on phones */
}Without the viewport tag, many phones render the page at a desktop width and shrink it, so text starts tiny and users must pinch. A breakpoint such as 768px is a design choice, not a browser rule; add one only where the layout actually breaks. For images, srcset or the <picture> element serve a smaller file to a smaller screen, and modern CSS container queries let a component adapt to the space it sits in rather than the whole window.
Responsive, adaptive or a separate mobile site: what is the difference?
Responsive design is one fluid layout, adaptive design swaps between fixed layouts at set widths, and a separate mobile site (often on an m. subdomain) is a second HTML document with its own URL.
| Approach | What the visitor gets | What you maintain |
|---|---|---|
| Responsive | One URL; the layout reflows continuously | One set of HTML and CSS |
| Adaptive | One URL; a fixed layout snaps in at each breakpoint | Several fixed layouts in one codebase |
| Separate mobile site | A different URL, often m.example.in | Two sites, two updates, split links |
Most business sites should be responsive. A separate mobile site is the older pattern and splits the address people share and search engines crawl.
Why does a responsive website matter for SEO and visitors?
Google uses mobile-first indexing, meaning it crawls and ranks the smartphone version of each page, so a layout that only works on a desktop is the weaker version Google sees first. One responsive URL keeps content, links and title on a single address.
Visitors leave a phone page when they must scroll sideways, pinch to read or hunt for a menu built for a mouse. Layout shifts caused by images without set dimensions also hurt Core Web Vitals (Cumulative Layout Shift). Mobile layout is one part of a wider checklist in how to make a website mobile-friendly.
How do you check whether a website is responsive?
Narrow the desktop window slowly: a responsive page stacks its columns, keeps text readable and never shows a sideways scrollbar, while the address stays the same. If the site jumps to an m. address, it is a separate mobile site.
- In Chrome or Edge, open DevTools (F12) and toggle the device toolbar (Ctrl+Shift+M); check a phone and a tablet width.
- Check the menu, first heading and main button work without zooming.
- Open the same URL on a real phone over mobile data and complete the main task: read the offer, find a price or send the form.
- Run Lighthouse in DevTools for mobile performance and accessibility hints.
How do you make an existing website responsive?
Add the viewport tag, replace fixed pixel widths with a max-width container and fluid columns, collapse navigation into a compact menu at the phone breakpoint, and give images max-width: 100%. Change one rule at a time and recheck that width before the next.
On WordPress, a current theme usually includes these rules already; review free WordPress themes before writing custom CSS. If the theme fights the layout, a rebuild is cleaner than dozens of overrides, and that work is scoped as WordPress website design, quoted by email before payment.
What are common responsive design mistakes?
The usual faults show only on a phone: fixed-width boxes that force sideways scrolling, tiny tap targets, hidden content, and heavy images on slow connections.
- A 1200px container or wide table with no wrapper, causing horizontal scroll.
- Tap targets smaller than WCAG 2.2's 24×24 CSS pixel minimum; 44×44 is the stricter AAA level and a safer goal for main buttons.
- Content hidden on mobile instead of reflowed, which also hides it from mobile-first indexing.
- A hero slider that pushes the main button below several screens.
- Multi-megabyte photos served to phones instead of resized versions; see how to decrease image file size.
Frequently asked questions
What are breakpoints in responsive design?
A breakpoint is a screen width where the CSS layout changes, written as a media query such as @media (max-width: 768px). Breakpoints are your choice, not browser defaults; add them where your content starts to look cramped rather than copying device sizes.
Do I need a separate mobile website?
No, for almost every business site. A separate mobile site doubles the updates and splits links between two URLs. A responsive page serves phones and desktops from one address and is what Google recommends.
Is mobile-first design the same as responsive design?
Mobile-first is a way of writing responsive CSS: you style the small screen first, then add min-width media queries for larger screens. The result is still responsive; it just tends to load less CSS on phones.
Does responsive design make a site slower?
Not by itself. Slowness comes from sending desktop-sized images and scripts to phones. Use srcset for images, lazy loading below the fold, and avoid loading hidden desktop-only content on mobile.
Last editorial update: 15 November 2026.
Ready to get started with WebJi®?
Join 12,000+ businesses across India and overseas. INR pricing, 18% GST shown before payment and 24/7 email support in Hindi and English — average first reply under 60 minutes.