Nach dem Relaunch der Homepage erstrahlt diese nun in „neuem Glanz“. Doch nicht das Design wurde überarbeitet - dies wurde größtenteils übernommen - sondern die Usability stand primär im Vordergrund. Die Seite passt sich nun nahtlos an die Größe des Gerätes an, mit dem sie betrachtet wrid - sei es der Desktop am Arbeitsplatz, das Handy unterwegs oder das Tablet zuhause auf dem Sofa, man erhält nun immer die optimale Darstellung.
Die Motivation zur Neugestaltung war die schlechte Darstellung auf mobilen Endgeräten. Der Inhalt war in der alten Version nur durch Vergrößern sinnvoll lesbar, doch dann fließt der Text links und rechts aus dem Bildschirm - insgesamt ein suboptimales Erscheinungsbild. Hier ein Vergleich:
Doch was ist eigentlich Responsive Web Design?
Unter Responsive Web Design versteht man Webseiten, welche auf die Eigenschaften des Gerätes reagieren, mit denen sie angezeigt werden. Besonders die Größe des Bildschirms beeinflusst die Darstellung und Anordnung einzelner Elemente wie der Navigation, Seitenspalten, Texte und Bilder. Aber auch die Nutzung unterschiedlicher Eingabemethoden ist von Bedeutung, am Desktop die klassische Maus, auf mobilen Geräten Touchscreens.
Die Anforderungen der Bedienung mit einer Maus unterscheiden sich drastisch von der an einem Touchgerät. Eine Maus bietet präzise Steuerung und man kann Elemente „überfahren“ (hovern) - Touch hingegen tippen, Gesten und eine natürlichere Interaktion. Somit müssen zum Beispiel Links so gestaltet sein, dass sie ohne den Einsatz von Hover-Effekten als solche erkennbar sind. Dennoch sollten Hover-Effekte für Desktop-Nutzer vorhanden sein. Ein weiterer Punkt ist die Größe von klickbaren Elementen. Da der menschliche Finger im Vergleich zu einem Mauszeiger geradezu monströs ist, müssen auf mobilen Geräten die interaktiven Flächen entsprechend groß angelegt sein und genügend Abstand zu nächsten Element aufweisen, um Fehler zu vermeiden. Ein guter Richtwert ist mindestens 8 mm in Höhe und Breite - so treffen über 99% das gewünschte Element.
Das Anordnen von Inhalten ist vergleichsweise einfach dank moderner Web-Technologien wie HTML 5 und CSS3. Das Zauberwort hier sind Media Queries mit welchen, abhängig von der Breite des Anzeigegeräts, verschiedene Styles angegeben werden können. So können die Container an die Breite angepasst und umgebrochen werden, sobald der Platz nicht mehr ausreicht. Vereinfacht sieht dies wie folgt aus:
Ein Element welches sich allerdings nicht so einfach verkleinern lässt, ist das Hauptmenü. Irgendwann ist der Punkt erreicht, ab dem nicht mehr alle Menü-Einträge nebeneinander in eine Zeile passen. Was dann? Mobile-Menü ist hier das Zauberwort. Das heißt im Grunde nichts anderes als das man für mobile Endgeräte ein eigenes Menü entwirft. Die Ausprägungen sind vielfältig, aber die Grundidee hinter allen ist gleich: möglichst wenig Platz verbrauchen und nur bei Bedarf die gesamte Navigation zur Verfügung stellen. Ein Vertreter ist das Drop-Down-Menü. Hier reduziert sich die Hauptnavigation auf ein einzelnes Wort oder Symbol, welches beim Tippen auf das Menü ausfährt.
Oder einfach auf verschiedenen Endgeräten selbst ausprobieren:
www.exensio.de.