Responsive design
Responsive design is an approach to building websites so that one set of pages adapts its layout, images and text to fit any screen, from a small phone to a wide desktop monitor.
With responsive design there is one website and one URL for every page, and the layout changes shape to suit the screen. It replaced the older practice of running a separate mobile site, often on an m-dot address, which duplicated content and drifted out of date. The term was coined by the web designer Ethan Marcotte in 2010.
Responsive is not the same as mobile-first design. Responsive describes the outcome, a layout that adapts. Mobile-first is one way of getting there, by designing for the smallest screen first and adding to it for larger ones.
How it works
Three techniques do most of the work. Fluid layouts use relative widths so columns stretch and shrink. Flexible images scale within their containers, and well-built sites send smaller image files to smaller screens. Media queries in CSS apply different rules at chosen widths, called breakpoints, for example switching from three columns to one. A viewport tag in the page head tells phones to use the device width instead of zooming out on a desktop layout.
Good responsive design is checked at every width between the breakpoints, not just at a few popular phone sizes.
Images deserve particular attention. With responsive image markup, the page lists several sizes of the same picture and the browser downloads the one that suits the screen, so a phone does not fetch a file meant for a large monitor. Text should use relative sizes so it respects the visitor's own settings. To check, zoom your browser on a computer to 200 percent: a responsive page reflows into fewer columns instead of overlapping or forcing sideways scrolling.
Example
A school's parent portal shows the timetable as a wide table, and parents on phones have to pinch and scroll sideways to find today. The responsive rebuild keeps the table on desktop but, below tablet width, shows one day at a time as a stacked list with the current day open. Same content, same URL, a layout that suits the screen.
Other parts of the portal need their own treatment. The navigation, a row of eight links on desktop, collapses into a menu button on phones. Forms switch from two columns to one, and the phone number field brings up the numeric keypad on mobile. PDF timetables, which cannot reflow, stay available as downloads but are no longer the only way to see the schedule.
Why it matters for your business
For many small businesses a large share of visitors arrive on phones, and a page that needs pinching and zooming loses them quickly. Google also uses the mobile version of a page for indexing and ranking, known as mobile-first indexing, so a poor mobile layout can hurt search visibility as well as enquiries. Responsive design is the expected default for any new site; the real cost lies in designing and testing the mobile versions properly rather than letting them happen by accident. A quick way to spot trouble is to compare conversion rates for mobile and desktop visitors in your analytics; a large gap often points to problems in the phone layout.
Common mistakes
- Hiding important content or features on phones instead of rearranging them.
- Testing only on the designer's own phone and a desktop browser.
- Sending large desktop images to phones, which slows pages on mobile data.
- Making buttons and links too small or too close together to tap accurately.
Questions people ask
How do I check if my website is responsive?
Open it on a phone, a tablet and a desktop and look for sideways scrolling, tiny text, overlapping elements and buttons that are hard to tap. On a computer, slowly narrow the browser window from wide to narrow, or use the device mode in the browser's developer tools to preview common screen sizes.
Is responsive design the same as a mobile app?
No. A responsive website runs in the browser and adapts to the screen, with nothing to install. A mobile app is a separate program downloaded from an app store and built for a specific operating system. Many businesses need only a responsive site; an app makes sense when customers use it frequently.
What are breakpoints in responsive design?
Breakpoints are the screen widths at which a layout changes, for example from one column on phones to two on tablets and three on desktops. They are set in the site's CSS with media queries. Good practice is to place breakpoints where the content starts to look awkward rather than at the exact widths of particular devices.
