CityHero

Responsive Design

Responsive Design bezeichnet eine Website, die sich automatisch an jede Bildschirmgrösse anpasst – vom grossen Desktop-Monitor über das Tablet bis zum Smartphone. Inhalte, Bilder und Menüs ordnen sich flexibel neu an, sodass die Seite überall gut lesbar und bedienbar bleibt.

Technisch beruht Responsive Design auf drei Bausteinen: flexiblen Rastern (die Breiten werden in Prozenten statt in festen Pixeln definiert), skalierbaren Bildern und sogenannten Media Queries im CSS, die je nach Bildschirmbreite andere Layout-Regeln aktivieren. Auf dem Smartphone rutscht das Menü zum Beispiel in ein aufklappbares «Burger»-Icon, Spalten werden untereinander gestapelt und Schriftgrössen angepasst. Es gibt also nicht zwei Websites, sondern eine, die sich verwandelt.

Heute ist Responsive Design Pflicht, nicht Kür. Über die Hälfte des Web-Traffics in der Schweiz kommt vom Handy, und Google bewertet Websites nach dem Prinzip «Mobile First» – also primär anhand der mobilen Version. Eine Seite, die auf dem Smartphone schlecht funktioniert, verliert dadurch sowohl Besucher als auch Sichtbarkeit in der Suche.

Beim Umsetzen achtet eine gute Agentur auf ausreichend grosse Tippflächen für Finger, kurze Ladezeiten auch im Mobilfunknetz, gut lesbare Schriften ohne Zoomen und darauf, dass keine Inhalte auf kleinen Geräten verschwinden. Getestet wird auf echten Geräten und in verschiedenen Browsern, nicht nur am Entwickler-Bildschirm.

Einen separaten Preis hat Responsive Design bei seriösen Anbietern nicht – es ist bei jeder modernen Website inbegriffen. Wer noch eine ältere, nicht-responsive Seite hat, muss für den Umbau je nach Umfang mit grob CHF 2'000 bis 8'000 rechnen; eine komplett neue KMU-Website liegt meist bei rund CHF 3'000 bis 15'000 (ohne Gewähr).

Beispiel

Ein Restaurant in Luzern hat eine Website mit Menükarte und Reservationsformular. Auf dem Desktop stehen Speisekarte und Öffnungszeiten nebeneinander. Öffnet ein Gast die Seite unterwegs auf dem Handy, stapeln sich die Inhalte untereinander, die Telefonnummer wird zum antippbaren Anruf-Button und die Karte lässt sich mit einem Finger zoomen – ohne dass eine zweite App oder Seite nötig wäre.

Anbieter & Preise vergleichen

Finde passende Anbieter und vergleiche Preise:

Häufige Fragen

Kostet Responsive Design extra?

Bei jeder modernen Website ist es standardmässig inbegriffen. Nur der Umbau einer alten, nicht-responsiven Seite verursacht Zusatzkosten von grob CHF 2'000 bis 8'000 (ohne Gewähr).

Was ist der Unterschied zwischen Responsive Design und einer App?

Eine responsive Website läuft im Browser und passt sich allen Geräten an, ohne Installation. Eine App muss aus dem Store geladen und installiert werden. Für die meisten KMU reicht eine gute responsive Website.

Warum ist mobile Darstellung so wichtig?

Über die Hälfte der Besucher kommt vom Smartphone, und Google bewertet Seiten nach der mobilen Version zuerst. Eine schlechte mobile Darstellung kostet Besucher und Ranking.

← Alle Begriffe im Glossar