CityHero

Responsive Design

Responsive design describes a website that automatically adapts to any screen size – from a large desktop monitor to a tablet to a smartphone. Content, images and menus rearrange flexibly so the site stays readable and usable everywhere.

Technically, responsive design rests on three building blocks: flexible grids (widths defined in percentages rather than fixed pixels), scalable images and so-called media queries in the CSS that activate different layout rules depending on screen width. On a smartphone the menu collapses into an expandable «burger» icon, columns stack on top of each other and font sizes adjust. So there aren't two websites but one that transforms.

Today responsive design is a must, not a nice-to-have. More than half of web traffic in Switzerland comes from mobile phones, and Google evaluates websites on a «mobile first» basis – primarily using the mobile version. A site that works poorly on a smartphone loses both visitors and search visibility.

When implementing, a good agency ensures tap targets are large enough for fingers, loading times are short even on mobile networks, fonts are readable without zooming and no content disappears on small devices. Testing happens on real devices and across different browsers, not just on the developer's screen.

With reputable providers responsive design has no separate price – it is included in every modern website. If you still have an older, non-responsive site, expect roughly CHF 2,000 to 8,000 for the conversion depending on scope; a completely new SME website usually costs around CHF 3,000 to 15,000 (without guarantee).

Example

A restaurant in Lucerne has a website with a menu and a reservation form. On desktop, the menu and opening hours sit side by side. When a guest opens the page on the go on a phone, the content stacks vertically, the phone number becomes a tappable call button and the map can be zoomed with one finger – without needing a second app or page.

Compare providers & prices

Find matching providers and compare prices:

Frequently asked

Does responsive design cost extra?

It is included by default in every modern website. Only converting an old, non-responsive site adds costs of roughly CHF 2,000 to 8,000 (without guarantee).

What is the difference between responsive design and an app?

A responsive website runs in the browser and adapts to all devices without installation. An app must be downloaded and installed from a store. For most SMEs a good responsive website is enough.

Why is mobile display so important?

More than half of visitors come from smartphones, and Google evaluates pages using the mobile version first. Poor mobile display costs both visitors and rankings.

← All glossary terms