Responsive Webdesign: Was es ist und warum es Pflicht ist

Das Prinzip

Eine einzige Website passt sich an: Auf dem Handy stehen Inhalte untereinander, auf dem Rechner nebeneinander. Das Menü wird kompakt, Bilder skalieren, Schaltflächen sind groß genug zum Tippen.

Woran Sie gute Umsetzung erkennen

• Kein seitliches Scrollen, kein Zoomen nötig
• Lesbare Schrift (mindestens etwa 16 Pixel im Fließtext)
• Große, gut erreichbare Schaltflächen
• Wichtige Aktionen (Anrufen, Anfragen) sind ohne Suchen auffindbar
• Bilder laden in passender Größe
• Tabellen und Formulare funktionieren am kleinen Bildschirm

Warum es zählt

Besucher verlassen Seiten, die mobil schlecht funktionieren. Außerdem bewertet Google vor allem die mobile Fassung, siehe Mobile-First-Indexierung.

Testen

Was technisch dahintersteckt

Drei Bausteine tragen das Prinzip. Erstens der Viewport-Hinweis im Kopf der Seite, der dem Handy sagt, dass es die Seite in Gerätebreite darstellen soll. Fehlt er, rendert das Gerät eine Desktop-Breite und verkleinert sie, sodass alles winzig wirkt. Zweitens flexible Maße: Spalten und Bilder richten sich nach der verfügbaren Breite statt nach festen Pixelwerten. Drittens Umbruchpunkte (Breakpoints), an denen das Layout sich ändert, etwa von einer Spalte auf zwei. Sinnvoll sind Umbrüche dort, wo der Inhalt eng wird, nicht an den Maßen bestimmter Geräte, denn Gerätegrößen ändern sich ständig.

Typische Fehler

• Menü nur per Mauszeiger: Aufklappmenüs, die beim Darüberfahren erscheinen, funktionieren auf dem Touchscreen nicht, weil es kein Darüberfahren gibt.
• Zu dicht gesetzte Links: Tippflächen sollten in der Regel etwa 44 bis 48 Pixel messen, sonst trifft der Daumen den falschen Eintrag.
• Pop-ups, die den Bildschirm füllen: Auf dem Handy lassen sie sich oft kaum schließen und verdecken den Inhalt.
• Riesige Desktop-Bilder: Sie laden mobil unnötig lange, siehe Bilder optimieren.
• Text als Bild: Er skaliert nicht mit und ist weder durchsuchbar noch für Vorleseprogramme lesbar.

Mythos gegen Fakt

Mythos: Eine eigene Mobilversion unter separater Adresse sei besser, weil sie genau passt. Fakt: Zwei Fassungen bedeuten doppelte Pflege, und schnell weichen Inhalte voneinander ab. Eine responsive Seite hält alles an einem Ort. Das gilt für Unternehmenswebsites in der Regel als der sinnvollere Weg.

Praxisbeispiel: Friseursalon

Ein Salon hat eine hübsche Startseite, aber die Telefonnummer steht nur als Bild im Kopfbereich. Mobil ist sie schwer lesbar und nicht antippbar. Die Korrektur ist klein: Nummer als echter Text mit Telefon-Link, ein fester Anruf-Knopf am unteren Rand, Öffnungszeiten direkt darunter. Am Layout ändert sich wenig, aber die häufigste Handlung der Besucher geht in einem Tipp statt in drei Schritten.

Prüfschritte

1. In den Entwicklerwerkzeugen des Browsers die Geräteansicht öffnen und Breiten von etwa 360, 768 und 1280 Pixel durchgehen.
2. Das Handy quer halten: Bricht etwas aus dem Rahmen?
3. Schrift im Browser auf 200 Prozent vergrößern und prüfen, ob Text abgeschnitten wird.
4. Ein Formular wirklich ausfüllen, mit der Bildschirmtastatur.
5. Auf dem echten Gerät im Mobilfunknetz laden, nicht nur im WLAN.

Entscheidungshilfe: Neu bauen oder nachrüsten?

Ist Ihre Seite älter und nur mit fest definierten Breiten gebaut, lässt sie sich oft nicht mit einzelnen Korrekturen retten. Prüfen Sie drei Dinge: Funktioniert die Navigation per Touch? Lässt sich der Text ohne Zoomen lesen? Brechen Tabellen und Bilder aus dem Rahmen? Trifft mehr als eines davon zu, ist ein Neuaufbau des Layouts meist wirtschaftlicher als viele Einzelkorrekturen, weil sich alte feste Maße durch den gesamten Code ziehen. Betrifft es nur das Menü oder einzelne Bilder, genügt häufig eine gezielte Überarbeitung. Wie ein solcher Schritt in einen größeren Neustart passt, zeigt Website-Relaunch.

Öffnen Sie Ihre Website auf dem eigenen Handy und versuchen Sie, Ihre Hauptaufgabe zu erledigen (anrufen, Termin anfragen). Schaffen Sie das nicht in wenigen Sekunden, besteht Handlungsbedarf. Mehr unter Websites.