What is responsive design?

Responsive design: definition and origins

The term responsive web design was coined in 2010 by web designer Ethan Marcotte. The idea: instead of building a separate version for every device, there is a single website whose layout responds flexibly to the available space.

Today, responsive design is the standard. A large share of visits come from smartphones, and Google evaluates websites predominantly based on their mobile version (mobile-first indexing). A site that only looks good on desktop therefore gives away reach and inquiries.

How responsive design works technically

Three building blocks form the foundation: flexible grids that divide space in relative units instead of fixed pixels, flexible images that never grow wider than their container, and CSS media queries that rearrange the layout at specific screen widths, known as breakpoints.

Modern techniques such as CSS Grid, Flexbox and container queries make layouts even more adaptable. The viewport meta tag is also important, so that mobile browsers don’t display the page as a shrunken desktop view.

• Mobile first: design for small screens first, then expand
• Buttons large enough to tap with a finger
• Easy-to-read font sizes without zooming
• Serve images in multiple resolutions
• Navigation that stays within reach when used with one hand

Benefits and limits

A responsive website means one codebase, one URL per piece of content and one maintenance effort. That saves costs compared with separate mobile versions and avoids duplicate content. Visitors get the same information on every device. Changes to content or features also only need to be made once and are immediately available on all devices.

The limits show up where usage situations differ widely. A complex table or an extensive dashboard can’t simply be squeezed down to phone width. These cases call for dedicated mobile solutions—such as expandable cards instead of tables—or a complementary Progressive Web App.

Real-world example: when responsive design matters most

A restaurant gets many visits from people on the go: guests look for opening hours, the menu and the phone number—usually on a smartphone. A responsive site puts this information right at the top on mobile, with a call button and directions at the tap of a finger, while the desktop version leaves more room for images and atmosphere. The same principle applies to the cart and checkout in online stores: the most important steps have to work effortlessly on mobile.

The website of Oki’s Knusperhähnchen in Germersheim, for example, was built this way, optimized for mobile. It is important to test not just in a browser simulator but also on real devices with different screen sizes. Nano Concepts builds websites and web apps to be responsive as a matter of principle and tests them on common devices and browsers.