Responsive Webdesign: eine Website, die auf jedem Bildschirm trägt

Responsive Webdesign ist der Ansatz, bei dem sich eine einzige Website automatisch an den Bildschirm anpasst, auf dem sie angezeigt wird, ob Telefon, Tablet oder breiter Monitor. Es gibt eine Fassung Ihrer Website, unter einer Adresse, mit einem Codestand, aber die Darstellung ordnet sich je nach verfügbarem Platz neu. Kurz gesagt: derselbe Inhalt, je Bildschirmgröße sinnvoll umsortiert. Der Wiki-Eintrag zum Responsive Design fasst den Begriff kompakt zusammen. In diesem Artikel geht es um das, was danach kommt: wie es technisch funktioniert, worin es sich von Mobile First unterscheidet und was Sie vor dem Livegang prüfen sollten.

Direkt anwenden: Prüfen Sie mit unserem kostenlosen Website-Geschwindigkeitstest, wie sich Ihre Seite auf einem mobilen Gerät verhält.

Wie Responsive Webdesign technisch funktioniert

Beim Responsive Webdesign bleibt Ihr HTML gleich, und CSS bestimmt, wie dieser Inhalt auf einem bestimmten Bildschirm aussieht. Das geschieht über Media Queries: Regeln, die sinngemäß sagen, dass bei einer Breite unterhalb eines bestimmten Werts eine Spalte statt dreier angezeigt wird. So bekommt ein Besucher am Telefon eine gestapelte, lesbare Ansicht, während dieselbe Seite am Schreibtisch in die Breite geht.

Zwei Bausteine machen das möglich. Erstens ein flexibler Aufbau, bei dem Elemente mitskalieren, statt feste Breiten zu haben. Zweitens die Viewport-Angabe im Seitenkopf, eine Zeile Code, die dem Browser sagt, die Seite in der tatsächlichen Bildschirmbreite darzustellen statt sie herauszuzoomen. Ohne diese Angabe wirkt selbst ein guter Entwurf auf dem Telefon wie ein verkleinerter Schreibtischbildschirm.

Ein dritter Punkt wird häufig übersehen: Bilder. Ein Bild, das für einen breiten Monitor ausgelegt ist und unverändert an ein Telefon ausgeliefert wird, sieht zwar richtig aus, kostet aber Ladezeit und mobiles Datenvolumen. Responsive im engeren Sinn betrifft das Layout, responsive in der Praxis betrifft auch die Frage, welche Bildgröße welches Gerät bekommt. Der Eintrag zur Ladezeit ordnet ein, warum das unmittelbar auf die Nutzung durchschlägt.

Warum Google diesen Ansatz empfiehlt

Google empfiehlt Responsive Webdesign ausdrücklich als bevorzugtes Entwurfsmuster. Der Grund ist praktisch: Responsive liefert dasselbe HTML unter derselben Adresse für jedes Gerät aus. Es gibt also keine separate mobile Adresse, die Sie getrennt pflegen müssen und die zu doppelten Inhalten oder Verwechslungen führt.

Für Ihre Auffindbarkeit hat das konkrete Vorteile:

• Eine Adresse zum Crawlen. Es muss nicht zwei Fassungen entdecken, zuordnen und getrennt bewerten.
• Ein Inhaltsstand. Sie vermeiden, dass die mobile Fassung versehentlich weniger enthält, was sich seit der Mobile-First-Indexierung unmittelbar auf Ihre Positionen auswirkt.
• Einfachere Pflege. Ein Codestand bedeutet weniger Arbeit und weniger Stellen, an denen etwas schiefgehen kann.

Diese Einfachheit übersetzt sich in Stabilität, und Stabilität ist genau das, was eine Website braucht, die verlässlich Anfragen bringen soll.

Responsive oder Mobile First: der Unterschied

Diese beiden werden regelmäßig verwechselt, sind aber verschiedene Dinge. Responsive ist eine Technik: wie sich Ihr Layout an die Bildschirmbreite anpasst. Mobile First ist eine Entwurfsreihenfolge: Sie beginnen beim kleinsten Bildschirm und bauen nach oben aus, statt eine Schreibtischfassung nachträglich zu beschneiden.

Sie brauchen beides, und sie verstärken sich. Mobile First zwingt Sie früh zu der Entscheidung, was wirklich zählt, also die Kernbotschaft und der eine wichtige nächste Schritt. Responsive sorgt technisch dafür, dass diese Entscheidungen auf jedem Bildschirm aufgehen. Responsive ohne Mobile-First-Denken liefert häufig eine technisch ordentliche, inhaltlich ausgedünnte mobile Fassung, bei der der Besucher an drei Menüs und einem Cookie-Hinweis vorbei muss, bevor er versteht, was Sie anbieten.

Was das für eine B2B-Website bedeutet

Auch im B2B orientiert sich ein erheblicher Teil Ihrer Besucher am Telefon: unterwegs, zwischen Terminen, oder abends bei einer ersten Sichtung. Eine Seite, die in diesem Moment unhandlich oder unleserlich ist, verliert diese Person, bevor sie Ihr Angebot verstanden hat.

Drei Stellen entscheiden dabei überproportional:

Das Formular. Im B2B ist das Kontakt- oder Anfrageformular der eigentliche Übergabepunkt. Ein Formular mit vielen Pflichtfeldern, das am Schreibtisch zumutbar wirkt, ist am Telefon eine Zumutung. Prüfen Sie jedes Feld daraufhin, ob Sie es wirklich brauchen, bevor jemand mit Ihnen spricht.

Tabellen und Preislisten. Vergleichstabellen, technische Datenblätter und Leistungsübersichten brechen auf schmalen Bildschirmen als Erstes. Sie brauchen entweder eine eigene mobile Darstellung oder einen horizontal scrollbaren Bereich, nicht eine Tabelle, die aus dem Bild läuft.

Der Kontaktweg. Eine Telefonnummer, die nicht anwählbar ist, und eine Adresse, die nicht in die Karte springt, sind kleine Details mit unmittelbarer Wirkung auf mobile Anfragen.

Wie stark der Unterschied ausfallen kann, zeigt unser Fall zur mobilen Conversion-Rate bei Adventure Valley Durbuy, wo die mobile Fassung getrennt gedacht wurde statt als Nebenprodukt.

Seien Sie ehrlich zu dem, was Responsive nicht löst. Es macht Ihre Website auf jedem Bildschirm benutzbar, aber es ersetzt keine scharfe Botschaft und kein überzeugendes Angebot. Eine technisch einwandfreie Seite ohne klaren Wert und ohne erkennbaren nächsten Schritt erzeugt weiterhin keine Anfragen. Responsive ist eine Voraussetzung, kein Hebel: Es nimmt die Hürde weg, die Überzeugung muss aus Ihrem conversionorientierten Webdesign und Ihren Inhalten kommen.

Was Sie vor dem Livegang prüfen

Diese Liste gehört in jede Abnahme, egal wer die Website baut.

• Jede Vorlage auf drei Breiten. Telefon, Tablet, breiter Monitor. Nicht nur die Startseite, sondern auch Leistungsseite, Beitrag, Übersicht, Formular und Fehlerseite.
• Die Viewport-Angabe ist gesetzt. Ohne sie funktioniert nichts von dem, was darüber steht.
• Kein horizontales Scrollen. Wenn sich die Seite seitwärts schieben lässt, läuft ein Element aus dem Raster.
• Bedienelemente sind treffbar. Schaltflächen und Verweise brauchen genug Fläche und Abstand, damit sie mit dem Daumen zu treffen sind.
• Text bleibt lesbar ohne Zoom. Kleine Schriftgrößen aus dem Schreibtischentwurf wandern erfahrungsgemäß unbemerkt in die mobile Fassung.
• Inhalt ist vollständig. Kein Abschnitt, der auf dem Telefon vollständig entfernt statt eingeklappt wird.
• Bilder werden in passender Größe ausgeliefert. Sonst zahlen mobile Besucher mit Ladezeit für eine Auflösung, die sie nicht sehen.
• Ladezeit und Stabilität. Die Core Web Vitals werden auf mobilen Geräten gemessen, nicht auf Ihrem Arbeitsrechner.
• Bedienbarkeit ohne Maus. Der Eintrag zur Barrierefreiheit beschreibt, was hier zusätzlich gilt.

Wenn Sie eine Website ausschreiben, gehören diese Punkte in die Anforderungen. Der Leitfaden zum Website-Briefing zeigt, wie Sie das formulieren, ohne technisch zu werden.

Häufige Fragen

Ist Responsive Design dasselbe wie mobilfreundlich?

Fast, aber nicht ganz. Responsive ist die Technik, die Ihre Website mitskalieren lässt. Mobilfreundlich ist das breitere Ergebnis: lesbar, schnell und bedienbar auf einem kleinen Bildschirm, wovon Responsive ein großer Teil ist.

Braucht jede Website Responsive Design?

Ja. Seit die Bewertung anhand der mobilen Fassung erfolgt und ein großer Teil der Besucher mobil einsteigt, ist eine nicht responsive Website sowohl schlechter auffindbar als auch schlechter im Ergebnis.

Ist Responsive Design aufwendiger zu bauen?

Nicht zwangsläufig. Eine responsive Website ist in der Regel günstiger zu pflegen als getrennte mobile und stationäre Fassungen, weil Sie nur einen Codestand verwalten. Der Mehraufwand liegt im Entwurf, nicht in der Wartung.

Was ist die Viewport-Angabe?

Eine Zeile Code im Seitenkopf, die dem Browser sagt, die Seite in der tatsächlichen Bildschirmbreite darzustellen. Ohne sie funktioniert Responsive Design nicht, und Ihre Website wirkt auf dem Telefon wie ein herausgezoomter Schreibtischbildschirm.

Reicht es, wenn die Startseite mobil gut aussieht?

Nein. Besucher steigen über Suchergebnisse häufig direkt auf einer Leistungs- oder Beitragsseite ein. Prüfen Sie jede Vorlage, nicht nur die Seite, die Sie selbst am häufigsten aufrufen.

Wollen Sie eine Website, die auf jedem Bildschirm Anfragen bringt?

Responsive ist die Grundlage, der Ertrag entsteht aus der Kombination von Technik, Geschwindigkeit und einer Botschaft, die überall überzeugt. Vereinbaren Sie Ihr kostenloses Erstgespräch, und wir sagen Ihnen ehrlich, was sich in Ihrer Situation lohnt und was nicht.