Responsive Webdesign stark auf jedem Gerät

Was responsive heißt

• Eine Seite
• Jede Breite
• Ein Inhalt

Responsive heißt: Dieselbe Webseite passt sich der Breite des Bildschirms an. Spalten rücken untereinander, Bilder werden kleiner, und das Menü klappt zu einem Zeichen zusammen. Es gibt eine Adresse und einen Inhalt für alle Geräte, keine eigene Handyseite.

Das ist heute der übliche Weg und auch der, den Google empfiehlt. Eine getrennte mobile Seite müsste doppelt gepflegt werden und weicht leicht vom Original ab.

Vom Handy aus planen

• Mobile zuerst
• Das Wichtigste
• Google

Auf dem Handy ist am wenigsten Platz. Wer dort beginnt, muss entscheiden, was wirklich zählt, und genau das hilft auch der großen Ansicht. Man nennt das „Mobile First“.

Google bewertet für die Suche vor allem die mobile Fassung einer Seite. Was am Handy fehlt oder schwer zu finden ist, hilft deshalb auch nicht dabei, bei Google gefunden zu werden.

Lesbar ohne Zoomen

• Große Schrift
• Klarer Kontrast
• Kein Querwischen

Text muss am Handy ohne Vergrößern lesbar sein. Als Faustregel gelten für Fließtext rund 16 Pixel, dazu ein deutlicher Kontrast zwischen Schrift und Grund.

Nichts darf seitlich über den Rand ragen, sonst müssen Besucher quer wischen. Kurze Absätze und genug Zeilenabstand machen auch längere Texte auf kleinen Bildschirmen angenehm.

Bedienen mit dem Daumen

• Große Tippflächen
• Klares Menü
• Direkt anrufen

Am Handy wird getippt, nicht geklickt. Knöpfe und Verweise brauchen deshalb genug Fläche und Abstand, damit der Daumen sie sicher trifft. Die Richtlinien für barrierefreie Webseiten (WCAG 2.2) nennen 24 mal 24 Pixel als Mindestmaß, bequemer sind größere Flächen.

1. 01Das MenüEs öffnet sich mit einem Tippen, zeigt die wichtigsten Seiten und schließt sich ebenso leicht.
2. 02Das TelefonEine Nummer, die beim Antippen den Anruf startet.
3. 03Die FormulareFelder, die die passende Tastatur öffnen, etwa Ziffern für die Telefonnummer und das @ für die Mail.
4. 04Ohne MausNichts Wichtiges erscheint nur beim Überfahren mit der Maus, denn am Handy gibt es keine.

Bilder für jede Größe

• Passender Ausschnitt
• Passende Breite
• Schnell geladen

Ein breites Bild, das am Rechner wirkt, wird am Handy winzig oder schneidet das Wichtige ab. Gute Webseiten zeigen deshalb je nach Bildschirm einen passenden Ausschnitt in passender Breite.

Das spart zugleich Daten, denn ein Handy lädt nicht das große Bild für den Monitor, sondern eines in seiner Größe. Warum das für Anfragen zählt, steht im Beitrag über schnelle Webseiten.

Tablet und großer Bildschirm

• Zwischengrößen
• Hoch und quer
• Kurze Zeilen

Zwischen Handy und Rechner liegt das Tablet, hochkant oder quer gehalten. Gerade diese Zwischengrößen werden beim Planen leicht vergessen, und genau dort rutschen Spalten oft ungünstig zusammen.

Auch der große Bildschirm braucht Grenzen: Textzeilen, die über die ganze Breite laufen, lesen sich schwer. Eine gute Seite hält Zeilen in angenehmer Länge und nutzt die Breite für Bilder und Raum.

Auf echten Geräten prüfen

• Eigenes Handy
• Entwicklerwerkzeuge
• PageSpeed

Am verlässlichsten ist der Test in der Hand: Öffnen Sie Ihre Seite auf dem eigenen Handy, drehen Sie es quer und probieren Sie Menü, Knöpfe und Formular aus. Ein Tablet oder ein Handy mit einem anderen Betriebssystem zeigt oft noch mehr.

Am Rechner zeigen die Entwicklerwerkzeuge von Chrome, Firefox oder Safari jede Seite in vielen Bildschirmbreiten. PageSpeed Insights von Google prüft zusätzlich, wie schnell die mobile Fassung lädt und wie gut sie sich bedienen lässt.