Ein Webdesign, das sich dauernd ändert
Gestaltungsgruppen des Webdesigns, wie z. B. Spalten, Fotogalerien oder Boxen werden in verschiedenen Browsergrößen anders angeordnet. Grundsätzlich werden Hochformate und Breitformate unterschieden. Kann man in einem breiten Browserfenster noch zwei oder drei Spalten nebeneinander darstellen, so springt die zweite Spalte einer Website beim Zusammenschieben des Browserfenster bis zu einer Mindestbreite plötzlich in eine einspaltige Darstellung um. Die zweite Spalte wird in dem schmalen Browserfenster, z. B. auf dem Smartphone-Bildschirm ans Ende der ersten Spalte angehängt. Entsprechend länger muss man Scrollen, um ans Ende der Webseite zu gelangen. Aber nicht nur die Anordnung und die Größe der Gestaltungselemente passt sich an, auch die Bilder und die Schriftgrößen.
Der Browser fragt die Website, wenn's ums Aussehen geht
Das Umspringen passiert mit sogenannten Media Queries. Das sind Abfragen des Browsers an die CSS-Einstellungen im Code der Website. Hier wird unter anderem festgelegt, ab welcher Browserbreite welche Gestaltungsgruppen sich wo anordnen. Diese Befehle legt der Webdesigner im Html/CSS Code fest. Es können auch bestimmte Elemente in einem breiten Browser erscheinen, während sie in einem schmalen Browserfenster komplett fehlen. Dabei gilt zu beachten, dass auf einem großen Desktopbildschirm das Browserfenster selten die ganze Bildschirmgröße einnimmt. Die Anwender haben meistens mehrere Fenster nebeneinander oder überschneidend auf. Während auf dem Tablet und dem Smartphone die Browserfenster der User immer bildschirmfüllend angezeigt werden.
Responsive Webdesign und das Hamburger Menü
Sicher hast du schon bemerkt, dass manche Websites anstelle eines horizontalen Navigationsmenüs nur drei Striche in der oberen rechten Ecke anzeigen. Das ist das "Hamburger"-Menü. Oben und unten die Brötchenhälften und dazwischen die Frikadelle. Das Zeichen wurde schon 1981 von einem Designer bei Rank Xerox eingesetzt. Später tauchte es wieder beim iPhone auf und wurde schließlich als Icon für Optionen bei Facebook massentauglich. Da ein hochformatiger Smartphone-Bildschirm kein Platz für ein horizontales Navigationsmenü mit kleinen Linkeinträgen hat, versteckte man ein vollformatiges Navigationsmenü mit großer Schrift unter diesem Icon. Einige Webdesigner finden das Icon auch auf Webseiten in der Desktop-Darstellung viel cooler als die etablierte Navigationleiste.
Sinnvoll ist in breiten Browserfenstern die gelernte Navigationsleiste anzuzeigen und nur bei schmalen Browserfenstern aus Platzgründen zur Hamburger-Icon-Darstellung umzuschalten.
Auch Sabine hat mit ihrer Yoga Studio Website eine responsive Webiste. Dadurch, dass sie Wordpress nutzt und ein Design gekauft hat, welches so gebaut ist, dass es sich an die verschiedenen Bildschirmformate anpasst.
Das ist Sabines Website auf einem normalen Desktop:
Das ist die Yoga Studio Website auf der Table-Ansicht:
So sieht Sabines Wordpress-Seite auf der Smartphone:
Auf was soll ich bei meiner neuen responsiven Website achten?
Achte beim Testen darauf, dass sie auf dem Smartphone und auf dem Tablett im Hoch- und Breitformat gut aussieht. Vergleichen das Breitformat der mobilen Geräte mit der Darstellung auf deinem Desktop-Computer. Es sollten keine Fehler in der Darstellung entstehen.
Überlege dir, ob wirklich alle Informationen deiner Website auch auf den mobilen Geräten angezeigt werden sollen. Auf den kleinen Bildschirmen von Smartphones liest man ganz anders. Außerdem machen manche Bilder keinen Sinn, wenn sie zu sehr verkleinert sind. Kontrolliere, ob Buttons und verlinkte Wörter groß genug sind, um sie auch mit dicken Fingern präzise drücken zu können.
