Quick answer: Responsive web design is a way of building websites so that one set of pages adapts its layout to any screen size, from a small phone to a wide desktop monitor. It uses flexible layouts, CSS media queries and images that scale. Every business site needs it because a large share of visitors browse on phones, because Google now indexes and ranks sites mainly based on their mobile version, and because a site that is hard to use on a phone loses enquiries and sales. A responsive site also means one site to maintain instead of separate desktop and mobile versions.
Where responsive design came from
The term was coined by web designer Ethan Marcotte in an article for A List Apart in May 2010. At the time, many companies built a separate mobile site, often on an “m.” subdomain, alongside the main desktop site. Marcotte proposed a different approach: build one flexible site that responds to the screen it is shown on.
The idea quickly became the standard way to build websites. Today, a new business site that is not responsive would be unusual, but many older sites still are not, or only partly are.
How responsive design works
Responsive design rests on three main techniques.
1. Fluid layouts
Instead of fixed widths in pixels, layouts use relative units such as percentages, so columns grow and shrink with the screen. Modern CSS layout tools, especially Flexbox and CSS Grid, make fluid layouts much easier than older float-based methods.
2. Media queries
Media queries are CSS rules that apply only when certain conditions are true, usually screen width. They let a layout change at set points, called breakpoints. A three-column layout on desktop might become two columns on a tablet and one column on a phone.
.services {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.services { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
.services { grid-template-columns: 1fr 1fr 1fr; }
}
This example starts with the phone layout and adds columns as the screen grows, which is the mobile-first approach.
3. Flexible images and media
Images must scale within their containers instead of overflowing. Setting a maximum width of 100 percent is the basic step. The srcset and sizes attributes go further, letting the browser download a smaller image on a phone and a larger one on a high-resolution desktop. Our guide to responsive images covers this in detail.
The viewport meta tag
One small line in the page head tells mobile browsers to use the device’s real width instead of pretending to be a desktop screen:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it, phones show a tiny zoomed-out version of the page, and media queries do not work as expected.
Why every business site needs it
Your customers are on phones
For many businesses, more than half of website visits come from mobile devices. Local businesses often see even more, because people search on their phones when they need a service nearby. Check the device report in Google Analytics to see your own numbers.
A site that needs pinching and zooming, with tiny buttons and text, frustrates those visitors. Many will leave and try a competitor.
Google ranks the mobile version
Google started labeling mobile-friendly pages in search results in 2014 and made mobile-friendliness a ranking signal for mobile searches in April 2015, an update many called “Mobilegeddon.” Our article on the mobile-friendly update covers what changed.
Since then, Google has moved to mobile-first indexing, which means it mainly uses the mobile version of a page for indexing and ranking. Google has said it plans to switch all remaining sites to mobile-first indexing by March 2021. If your mobile pages are missing content or hard to use, that affects how you rank everywhere. The mobile-first indexing guide explains what to check.
Google has also announced page experience signals, including Core Web Vitals, which it plans to start using in rankings in 2021. A fast, stable, responsive layout puts you in a good position.
Conversions depend on it
Calls, form fills and purchases from phones depend on a layout that makes them easy. Buttons need to be large enough to tap, phone numbers need to be tappable, and forms need the right keyboard for each field. Our guide to mobile conversion rate explains the common problems.
One site is easier to maintain
Running separate mobile and desktop sites means two sets of content, two sets of bugs and two sets of updates. Content often gets out of sync. A responsive site has one set of URLs and one place to make changes, which is simpler for your team and for search engines.
Responsive vs adaptive vs separate mobile sites
- Responsive: One layout that flexes continuously, with breakpoints for major changes. The most common approach.
- Adaptive: The server or the page picks from several fixed layouts based on the device. Can be tuned precisely but is harder to maintain.
- Separate mobile site: A different site, often on an m. subdomain. Now generally discouraged unless you have a specific reason.
For almost every business site, responsive is the right choice. Google has recommended it as its preferred configuration for years.
Designing responsively, not just shrinking
Responsive design is more than making things smaller. Good responsive sites rethink content for each screen:
- Prioritize content. On a phone, put the most important information and the main call to action first.
- Rethink navigation. Large menus need a mobile pattern, such as a menu button that opens a panel.
- Use readable text. Body text around 16 pixels is a sensible minimum on phones.
- Make tap targets large. Buttons and links need enough size and spacing for fingers.
- Check tables and wide content. Tables may need to scroll sideways or be restructured for small screens.
- Test both orientations. Many people rotate their phones to watch video or view images.
Starting with the smallest screen and working up, known as mobile-first design, makes these decisions easier.
How to test your site
- Google’s Mobile-Friendly Test. A quick free check of individual pages.
- Search Console’s Mobile Usability report. Lists pages with problems such as small text or clickable elements too close together.
- Browser developer tools. Chrome and Firefox can simulate many screen sizes.
- Real devices. Nothing replaces testing on real phones and tablets, on real connections.
Test your most important pages: home, services, product pages, contact and checkout.
Common responsive problems
- Text or images wider than the screen, causing sideways scrolling
- Popups that cannot be closed on a phone
- Menus that do not open or close properly
- Forms with tiny fields
- Embedded maps or videos that overflow their containers
- Fixed headers that take up half the screen
Questions business owners ask
My site looks fine on my phone. Is it responsive?
Check it on several devices and screen sizes, and run Google’s Mobile-Friendly Test. A site can look fine on one phone and break on another.
Can an old site be made responsive?
Sometimes, with CSS changes. Often it is more practical to rebuild the theme, especially if the layout uses fixed widths throughout.
Does responsive design slow a site down?
Not by itself. Problems come from loading desktop-sized images and scripts on phones. Responsive images and careful loading fix that.
The bottom line
Responsive web design is no longer optional. Your customers use phones, Google ranks the mobile version of your pages, and a site that works well on every screen converts better and is easier to maintain.
If your site does not work well on phones, see how we build responsive sites under Turn visitors into customers.
