How it works
The page uses flexible grids, images that resize, and CSS media queries that change the layout at certain screen widths. A three-column desktop layout might stack into one column on a phone. The content and URL stay the same.
Where the idea came from
Designer Ethan Marcotte coined the term in a 2010 article for A List Apart. Before that, many companies built a separate mobile site, often on an 'm.' subdomain, that was harder to keep in sync.
Responsive vs. adaptive
Responsive layouts flow smoothly across all sizes. Adaptive design serves a few fixed layouts for set screen sizes. Responsive is more common today because it's simpler to maintain.
Why Responsive Design matters
Most people browse on phones, and Google now uses the mobile version of a page for indexing and ranking. Google recommends responsive design as the easiest setup to get right. A site that's hard to use on a phone loses visitors and leads.
A quote form nobody could finish
A contractor's site looked fine on a laptop, but on phones the quote form ran off the screen and the submit button was hidden. After a responsive rebuild, the form fit every screen and mobile quote requests became the main source of leads.
Common mistakes
Hiding content on mobile
Since Google indexes the mobile version, content cut from phones may not count for ranking. Keep the important content on every screen size.
Tiny tap targets
Buttons and links squeezed close together are hard to tap. Give them enough size and space for a thumb.
Huge images on small screens
Sending desktop-sized images to phones slows pages down. Serve sizes that match the screen.
Where we work on this