What a responsive website is
A responsive website is one HTML page that reflows for every screen. Fluid grids, flexible images, and CSS media queries change columns, type, and menus at set widths, so phones, tablets, and desktops share one URL. A viewport meta tag tells the browser to use the device width instead of a desktop shrink-to-fit.
- One URL and one HTML document for a phone, a tablet, and a desktop.
- Columns, type, and the menu change with the screen instead of a second site.
- Images shrink to their container and do not force sideways scrolling.
- The same page stays readable when the window is dragged narrower.
A static website can still be responsive. Static only means the HTML is stored as a file, not built per visitor. That is a different question from whether the layout fits the screen. A new build that should ship this way is part of WebJi® website design services.
How a responsive website uses the viewport, grids, and queries
Three pieces do the work. The viewport meta tag tells the browser to use the device width. Fluid grids size columns in percentages so they share the row. CSS media queries then change the layout at widths you choose.
Put this in the head of every page: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, a phone often pretends to be a desktop and shrinks the page, so text starts tiny and the user has to pinch.
Size containers with max-width and percentage widths, not a fixed 1200px box. Set images to max-width: 100% and height: auto so they scale down and do not grow past their file size. For art that should change by screen, the picture element or srcset serves a smaller file to a small screen.
A breakpoint is a width where the layout changes, not a rule from the browser. A query such as max-width: 768px is a common phone cutoff, and you add others only where the design actually breaks. Between those widths the fluid grid does the stretching.
Responsive design versus adaptive layouts and a separate mobile site
Responsive design is one fluid layout. Adaptive design is a set of fixed layouts that swap at chosen widths. 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 as the screen changes. | 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 an m. subdomain. | Two sites, two updates, and split links. |
Most business sites should be responsive. Adaptive fits when a page must look exact at two known widths. A separate mobile site is the older pattern and splits the address people share and search engines crawl. Design work is quoted by email before any payment.
Why a responsive website matters for search and for readers
Google's mobile-first indexing treats the mobile layout as the main version of the page. One responsive URL keeps the content, links, and title on a single address. A separate mobile URL means two copies to maintain and can split those signals.
Readers leave a phone page when they must scroll sideways, pinch to read, or hunt for a menu built for a mouse. Many people open a site on a phone first. A responsive layout is still the usual approach because new screen sizes keep appearing and one fluid page covers them.
How to check whether a website is responsive
Narrow the desktop window slowly. A responsive page stacks its columns, keeps text readable, and does not show a sideways scrollbar. The address stays the same. If the site jumps to an m. address, that is a separate mobile site, not a responsive layout.
- In Chrome or Edge, open DevTools and toggle the device toolbar. Check a phone width and a tablet width.
- Look at the menu, the first heading, and the main button. Each should be usable without zoom.
- Load the same URL on a real phone over mobile data. Do the main task: read the offer, find a price, or send the form.
- If anything sticks out past the screen, or the text is too small to tap, that width is not finished.
How to make an existing website responsive
Start with the viewport tag, then replace fixed pixel widths with a max-width container and percentage columns. Collapse the navigation into a compact menu at the phone breakpoint, and let images use 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. Review free WordPress themes before you add custom CSS. If the theme fights the layout, a rebuild is cleaner than dozens of overrides, and that build is scoped as WordPress website design.
Common mistakes on a responsive website
These faults show up on a phone even when the desktop looks finished: a 1200px container or a wide image that forces sideways scroll; type set only in pixels that never scales; tap targets smaller than about 44 pixels; content hidden on mobile instead of reflowed; a hero slider that pushes the main button below several screens; and a multi-megabyte photo on a slow connection.
Test on a budget Android phone over mobile data and do the main task: find the price, fill the form, or place the request. Whatever fails that test is the fix list. Do not hide the failure by serving a second, thinner site.
Frequently Asked Questions
What is a responsive website?
A responsive website is one HTML page that changes its layout for the screen it is on. Phones, tablets, and desktops share the same URL. Columns, images, type, and the menu adjust with CSS instead of a second site.
What is the difference between responsive and adaptive design?
Responsive design uses one fluid layout that reflows as the width changes. Adaptive design swaps between fixed layouts at set breakpoints. Both can share one URL. A separate mobile site is a third option, with its own address.
How do I check if a website is responsive?
Narrow the browser window or use the device toolbar in DevTools. Columns should stack, text should stay readable, and there should be no sideways scrollbar. Then open the same URL on a phone and complete the main task.
Why is responsive design important for SEO?
Google's mobile-first indexing reads the mobile layout as the primary page. One responsive URL keeps content and links together. A layout that only works on a desktop gives phone visitors a poor page, and that is the version search sees first.
What are breakpoints in responsive design?
A breakpoint is a screen width where the CSS layout changes, written as a media query. Breakpoints are choices you make, not browser defaults. A common example is a phone cutoff near 768px, with others added only where the design breaks.
Do I need a separate mobile website?
No, for almost every business site. A separate mobile site means two HTML copies and two URLs to update. A responsive page covers phones and desktops from one address. Use a separate site only when the phone task is a different product.
Is responsive web design still used?
Yes. Phones, tablets, and foldable screens still need one layout that adapts. The working parts are a viewport tag, fluid widths, flexible images, and media queries. A fixed desktop-only page is the pattern that no longer fits.