Zum Inhalt
Startseite » Glossar » Responsive Design

Responsive Design

    Responsive Design ist ein Ansatz der Webentwicklung, bei dem sich Layout, Schriftgrössen und Bildelemente einer Website automatisch an die Bildschirmgrösse des Endgeräts anpassen. Eine einzige Website funktioniert dadurch gleichermassen gut auf Smartphones, Tablets und Desktop-Rechnern — ohne dass separate mobile Versionen gepflegt werden müssen.

    Was bedeutet das für Ihr KMU?

    Über 60 Prozent aller Website-Aufrufe erfolgen heute über mobile Endgeräte. Bei lokalen Suchen («Restaurant in der Nähe», «Zahnarzt Zürich») sind es noch mehr. Wenn Ihre Website auf dem Smartphone nicht gut funktioniert, verlieren Sie diese Besucher direkt — und Google merkt sich das. Seit 2021 bewertet Google mit Mobile-First Indexing primär die mobile Version Ihrer Website. Das heisst: Was Google beim Ranking als «Ihre Website» sieht, ist die mobile Darstellung.

    Die drei technischen Säulen von Responsive Design

    • Flüssige Layouts (Fluid Grids): Statt fixer Pixel-Breiten arbeiten moderne Websites mit prozentualen Angaben und flexiblen Grid-Systemen. Elemente schrumpfen und wachsen proportional mit der Bildschirmgrösse.
    • Flexible Bilder: Bilder werden nicht in einer fixen Grösse geladen, sondern passen sich an den zur Verfügung stehenden Raum an. Moderne Techniken wie srcset laden je nach Bildschirmgrösse unterschiedlich grosse Bild-Varianten, was die Ladezeit optimiert.
    • Media Queries: CSS-Regeln, die je nach Bildschirmgrösse unterschiedliche Layout-Anweisungen geben. Auf dem Smartphone wird aus einem Drei-Spalten-Layout ein gestapeltes Ein-Spalten-Layout, Menüs verwandeln sich in Hamburger-Menüs, Schriftgrössen passen sich an.

    Responsive Design vs. Mobile Version

    Vor Jahren war gab es Website-Betreiber, welche zwei separate Websites betrieben: eine «normale» unter www.beispiel.ch und eine mobile unter m.beispiel.ch. Diese Praxis ist technologisch überholt und SEO-schädlich. Google muss zwei Versionen crawlen, es entstehen Duplicate-Content-Probleme, und die Wartung ist doppelt so aufwändig. Eine einzige responsive Website ist heute der Standard.

    Responsive Design und SEO

    Eine nicht-responsive Website hat 2026 praktisch keine Chance mehr auf gute Google-Rankings. Neben dem Mobile-First Indexing fliessen auch Core Web Vitals direkt in das Ranking ein — und diese werden primär auf mobilen Geräten gemessen. Eine auf Desktop schnelle, aber auf Mobile langsame Website wird von Google abgestraft.

    Ein häufiger Fehler: «Mobile-tauglich» ≠ «Mobile-optimiert»

    Viele KMU-Websites sind zwar technisch responsive, aber trotzdem schlecht bedienbar auf dem Smartphone: winzige Buttons, zu viel Text, wichtige Informationen erst nach viel Scrollen erreichbar, Formulare unangenehm auszufüllen. Responsive Design ist mehr als die technische Möglichkeit zur Skalierung — es ist die bewusste Gestaltung der Benutzererfahrung für jede Bildschirmgrösse.

    Wie ich das für Sie umsetze

    Websites, die ich entwickle, sind Mobile-First gedacht. Mit Neve Theme und Gutenberg Block Editor habe ich eine technische Basis, die Responsive Design von Haus aus solide umsetzt. Bei der Qualitätssicherung teste ich jede Seite auf mindestens drei Viewports: Smartphone, Tablet und Desktop.

    → Verwandte Begriffe: Core Web Vitals | On-Page SEO | Barrierefreiheit | Webdesign | WordPress
    → Mehr erfahren: Webdesign für KMU
    → Externe Ressourcen: Google Search Central – Mobile-First Indexing | Wikipedia – Responsive Webdesign

    Zurück zum Glossar