Bei Unternehmenswebsites liegt das größte Problem responsiver Seiten nicht in der technischen Umsetzung, sondern in der durchdachten Anordnung der Inhalte. Viele Seiten wirken auf dem Desktop vollständig, werden auf dem Smartphone jedoch zu einer langen Abfolge gestapelter Module, sodass Besucher lange scrollen müssen, um Kontaktinformationen zu finden. Um dies zu vermeiden, sollte man bei der Planung zuerst Breakpoints festlegen, dann die Reihenfolge der Module bestimmen und abschließend auf echten Geräten Bildschirm für Bildschirm prüfen.
Zuerst Breakpoints festlegen, nicht die Mobilversion zeichnen
Breakpoints sind Bildschirmbreiten, bei denen sich das Layout ändert. Bei Unternehmenswebsites ist es üblich, einige Hauptbreakpoints für Smartphone, Tablet und Desktop festzulegen und je nach Inhalt ein oder zwei Übergangspunkte zu ergänzen. Die Anzahl der Breakpoints sollte nicht zu hoch sein, da jeder zusätzliche Breakpoint den Aufwand für Wartung und Prüfung erhöht.
Bei der Festlegung der Breakpoints empfiehlt es sich, zunächst die Zugriffsdaten zu betrachten: Wenn im Backend die Geräteverteilung sichtbar ist, sollte man vorrangig die Gerätekategorie mit dem höchsten Anteil optimieren. Liegen noch keine Daten vor, kann man zunächst Mobile-first und Desktop-second vorgehen. Nach der Festlegung sollten die Breakpoints in der Designbeschreibung oder im Entwicklungsdokument festgehalten werden, damit nicht verschiedene Seiten unterschiedliche Standards verwenden.
Module nach Inhalts priorität anordnen, nicht nach visueller Reihenfolge des Desktops
Desktop-Seiten sind oft in linke und rechte Spalten oder mehrere Spalten unterteilt, während auf dem Smartphone nur eine vertikale Anordnung möglich ist. Dann muss entschieden werden, welcher Inhalt zuerst erscheinen soll. Eine praktische Methode: Man listet die Module der Seite auf und fragt sich, was Besucher beim Öffnen der Seite zuerst sehen möchten.
Für typische Seiten einer Unternehmenswebsite kann die Anordnung beispielsweise so aussehen:
- Startseite: Eine kurze Beschreibung von Marke oder Geschäft, Einstiege zu Kernprodukten oder -dienstleistungen, Kontakt- oder Beratungseinstieg nach vorne; Unternehmensvorstellung, Neuigkeiten etc. können nach hinten.
- Produkt- oder Leistungsseite: Produktname und Schlüsselinformationen, Anwendungsszenarien oder Spezifikationen, Beratungseinstieg; detaillierte Parametertabellen können weiter hinten stehen und bei Bedarf aufklappbar gestaltet werden.
- Referenzseite: Branche oder Typ des Projekts, Problem des Kunden, Lösungsschwerpunkte, dann Bilder und Details.
- Über uns: Unternehmenspositionierung, Hauptgeschäft, Team- oder Qualifikationsinformationen, Kontaktmöglichkeiten an gut sichtbarer Stelle.
Diese Reihenfolgen sind keine festen Vorlagen, aber das Bewertungskriterium ist einheitlich: Der erste Bildschirm auf dem Smartphone sollte Besuchern zeigen, worum es auf dieser Seite geht und was sie als Nächstes tun können.
Bilder, Tabellen und lange Texte – die problematischen Inhalte behandeln
Probleme bei responsiven Seiten treten häufig bei drei Inhaltstypen auf.
Bei Bildern unterscheiden sich die Anzeigegrößen auf Smartphone und Desktop erheblich. Bei der Planung ist darauf zu achten, ob wichtige Bildbereiche auf schmalen Bildschirmen abgeschnitten werden, insbesondere bei Bannern mit Text. Wenn das Bild wichtigen Text enthält, sollte dieser besser als echter Text auf der Seite stehen statt im Bild eingebettet zu sein.
Bei Tabellen lassen sich breite Tabellen auf dem Smartphone schwer vollständig darstellen. Man kann vorab entscheiden, ob die Tabelle horizontal scrollen soll oder ob die Spalten in untereinander angeordnete Einträge aufgeteilt werden. Bei vielen Spalten sind aufgeteilte Einträge meist besser lesbar. Diese Entscheidung sollte vor der Umsetzung mit der Entwicklung abgestimmt werden, nicht erst nach dem Launch.
Bei langen Texten passen auf dem Desktop viele Zeichen in eine Zeile, auf dem Smartphone weniger, wodurch Absätze länger wirken. Man sollte die Absatzlänge begrenzen, große Textblöcke in mehrere kleine Absätze aufteilen und bei Bedarf Zwischenüberschriften verwenden, um den Lesedruck auf dem Smartphone zu verringern.
Navigation und Handlungseinstiege auf schmalen Bildschirmen
Die horizontale Navigation auf dem Desktop wird auf dem Smartphone meist in ein Menü-Symbol zusammengefasst. Hier ist zu prüfen, ob die Menüebenen nach dem Ausklappen klar sind und ob Besucher die Zielseite finden, ohne zur vorherigen Ebene zurückzugehen. Bei tiefen Menüstrukturen kann man die Ebenen im Mobilmenü reduzieren und häufig genutzte Einstiege nach vorne holen.
Handlungseinstiege wie Beratungsbuttons, Telefonnummern oder Formularabsendungen sollten auf dem Smartphone klickbar bleiben und nicht von anderen Elementen verdeckt werden. Die Klickflächen der Buttons müssen ausreichend groß sein, damit benachbarte Buttons nicht zu nah beieinander liegen und Fehlklicks verursachen.
Vor dem Launch auf echten Geräten Bildschirm für Bildschirm prüfen
Nach Fertigstellung der Seite empfiehlt sich folgende Prüfreihenfolge:
- Die Seite auf Smartphone, Tablet und Desktop öffnen, von oben nach unten scrollen und die Inhalte jedes Bildschirms notieren.
- Prüfen, ob der erste Bildschirm das Seitenthema erklärt und ob es bedienbare Einstiege gibt.
- Prüfen, ob Bilder wichtige Informationen abgeschnitten haben und ob Tabellen normal angezeigt werden.
- Prüfen, ob das Navigationsmenü nach dem Ausklappen vollständig ist und ob die Menübezeichnungen mit den Seiteninhalten übereinstimmen.
- Prüfen, ob Beratung, Telefon, Formular und andere Einstiege auf schmalen Bildschirmen nutzbar sind.
- Gefundene Probleme seitenweise dokumentieren und nach der Korrektur auf denselben Geräten erneut prüfen.
Wenn die Website mehrere Seitenvorlagen hat, z. B. Startseite, Kategorieseite, Detailseite, sollte man mindestens eine repräsentative Seite pro Vorlage prüfen und nicht nur die Startseite.
Responsive Planung in die tägliche Wartung integrieren
Responsive Seiten sind nicht mit dem Launch festgeschrieben. Bei späteren Inhaltsaktualisierungen müssen neue Bilder, Tabellen und Texte nach denselben Kriterien geprüft werden. Eine zeitsparende Methode ist, in den Content-Freigabeprozess einen Schritt einzufügen: Neue Module zunächst in Mobilbreite ansehen und bestätigen, dass keine Überläufe, Verdeckungen oder Reihenfolgefehler auftreten, bevor sie veröffentlicht werden. So lassen sich die meisten Probleme vor der Veröffentlichung abfangen und spätere Nacharbeiten reduzieren.
