Responsives Webdesign beginnt bei der mobilen Site

Es gibt sie noch, die klassischen Webseiten mit gequetschtem Tabellen-Design und kleiner Schrift. Auf Mobilgeräten fühlen sich die Nutzer plötzlich ins Miniatur-Wunderland versetzt. Doch immer mehr Unternehmen setzen auf das so genannte responsive Webdesign.

Damit ist ein Seitenlayout gemeint, dass nicht versucht, so viel wie möglich in den sichtbaren Bereich („Viewport") des Browsers zu quetschen. Es arbeitet erstens mit größeren Schriften und mehr Weißraum. Zweitens ermöglicht es eine flexible Darstellung der Seitenelemente auf verschiedenen Displays.

Das Design der Startups

Eine recht ideale Verwirklichung dieser Designprinzipien findet sich auf den Webseiten zahlreicher Startups, die eine App anbieten und auf mobile Nutzer angewiesen sind. Die typische Startup-Website besteht aus einer einzigen, allerdings relativ "langen" Seite, auf der sich nur wenige Elemente finden.

Mithilfe einer Menüzeile werden die verschiedenen Informationsblöcke durch automatisches Scrollen angesteuert. Jeder einzelne Informationsblock passt ziemlich genau in den Viewport hinein und bietet dort unter Umständen Links zu weiteren Seiten. Weitere Menüpunkte verweisen zum Beispiel auf ein Blog, das weitere Informationen gibt oder auf Dienste wie GitHub, UserVoice und ähnliches.

Dieses Bauprinzip einer Webseite wird auch One-Page-Design genannt und ist ein Spezialfall des responsiven Webdesigns. Eine solche Website wird technisch und typografisch so gestaltet, dass sie mit sehr geringem Aufwand auf Smartphones, verschieden großen Tablets und dem Desktop-PC eine einheitliche Benutzererfahrung liefert.

Spätestens beim nächsten Relaunch der eigenen Website steht das Thema auf der Tagesordnung jedes Unternehmens. Vor allem Shops und andere Websites, die direkt von Privatkunden angesteuert werden, müssen heutzutage "responsiv" sein. Der Grund: Die Zugriffe über mobile Geräte wachsen enorm.

Damit sind nicht unbedingt Anwender gemeint, die von unterwegs auf eine Website zugreifen, sondern recht häufig "Sofasurfer". Sie nutzen Tablets oder größere Smartphones der Bequemlichkeit wegen oder haben erst gar keinen Desktop-PC.

Leider macht die hier notwendige Anpassung an die verschiedenen Display-Größen und -Auflösungen die Entwicklung einer Webseite nicht einfacher. In aller Regel müssen die gewohnten Abläufe stark verändert werden. So ist es zum Beispiel nicht mehr möglich, mit einem starren Designkonzept zu starten, das dann von einem Webentwickler in HTML umgesetzt wird.

Mobile Websites sind eher Apps

Im Gegenteil: An erster Stelle stehen jetzt konzeptionelle Überlegungen. Es geht darum, welche Elemente auf der Webseite so wichtig sind, dass sie auch auf dem kleinen Viewport eines Smartphones sofort angezeigt werden. Eine zweite Grundentscheidung ist die Reihenfolge der Elemente, die bei wachsender Auflösung hinzukommen sollen.

Eine weitere wichtige Frage ist die Entscheidung, auf welchen Ports bestimmte Elemente verändert oder unter Umständen gar nicht angezeigt werden sollen. So ist es zum Beispiel empfehlenswert, auf dem kleinsten Viewport längere Vorschautexte von Beiträgen auszuwählen, damit wenigstens zwei oder drei aktuelle Texte angezeigt werden.

Bereits diese kurzen Anmerkungen zeigen, dass es sich bei der Gestaltung einer wirklich guten responsiven Website eher um die Entwicklung einer Webapp handelt. Der Anteil von reaktiven und "geskripteten" Elementen steigt stark an und führt zu einem hohen Entwicklungsaufwand.

Ein letzter Punkt muss bei der Planung eines Relaunchs unbedingt berücksichtigt werden: Die Website muss nicht nur schick aussehen, sondern auch auf vielen Geräten funktionieren. Dies kann nur durch ausführliche Feldtests unter realistischen Bedingungen erreicht werden, wie sie in der Softwareentwicklung üblich sind.

Bei Webseiten mit hohen mobilen Zugriffen sollte dafür das Entwicklungsprinzip „Mobile First" genutzt werden. Konzeption und Entwicklung beginnt zunächst bei einer kleinen Auflösung. Zuerst müssen die Grundentscheidungen getroffen werden, welche Inhalte anfänglich angezeigt werden und wie der Informationsgehalt bei der Skalierung des Viewports steigen kann.

„Mobile First" beim responsiven Webdesign beschreibt weniger die technische Umsetzung als vielmehr einen strategischen Ansatz. Kommunikation, Marketing und die Content-Strategie müssen genau auf den möglichen Informationsgehalt ausgerichtet werden. Nur auf diese Weise wird die Webseite wirklich responsiv.

Bildquelle: Jorma Bork / pixelio.de