Darstellung auf verschiedenen Endgeräten

Dieser Beitrag basiert auf dem vorangegangenen Artikel der sich mit Responsive Webdesign, der optimalen Darstellung von Webseiten auf mobilen Endgeräten, befasst.

Gesteigerter Gestaltungsaufwand durch verschiedene Layouts

Bei der Gestaltung von Responsive Webdesigns sind mindestens drei verschiedene Displaygrößen und Anordnungen durch unterschiedliche Layouts zu berücksichtigen. Es werden Smartphones, Tablets und normale Rechner jeweils mit einem eigenen Layout bedacht. Für diese drei Grundlayouts haben sich Pixelbreiten von 480px, 768px und 960px etabliert. Diese Pixelbreiten sind durch die Displayauflösungen aktueller Endgeräte bedingt, sie sind aber nicht fest vorgeschrieben und können auch beliebig variiert werden. Die gängigen Displaybreiten mobiler und nicht mobiler Endgeräte werden dabei immer beachtet. Zusätzlich können weitere Zwischenlayouts definiert werden. Wir achten bei der Umsetzung von reaktionsfähigen Webseiten auch auf höhere Auflösungen moderner Monitore, dazu wird ein viertes Layout mit einer Pixelbreite von 1200px erstellt.

Umdenken bei der Navigation erforderlich

Neben der Displaygröße muss bei der Gestaltung von reaktionsfähigen Webseiten auch die Bedienung der Webseite berücksichtigt werden. Auf mobilen Endgeräten muss die Menü- bzw. Navigationsstruktur, wie in der nachfolgenden Abbildung gezeigt, angepasst werden. Der zur Verfügung stehende Platz auf den Displays der Smartphones ist sehr begrenzt, sodass eine Darstellung, wie auf normalen Desktop-Rechnern nicht benutzerfreundlich ist.

Darstellung Mobiltelefon

Die Navigation auf Webseiten erfolgt in der Regel über Hyperlinks, Buttons und Navigationsmenüs. Bei der Gestaltung dieser Elemente für die mobilen Endgeräte sollte auf eine ausreichend große Gestaltung geachtet werden, da die Treffsicherheit mit dem Finger auf einem Touchscreendisplay nicht so hoch und präzise ist wie am Rechner mit einer Maus oder dem Touchpad. Aus diesem Grund werden Buttons und Navigationen immer in einer dem Anwendungsfall entsprechenden Größe gestaltet. Dabei können sich die Layouts zwischen den verschiedenen Ausgabegrößen bei der Präsentation des gleichen Inhalts in der Darstellung deutlich unterscheiden. Dies trifft ebenso auf Texte sowie deren Lesbarkeit durch die Schriftgröße und die Hervorhebung darin enthaltener Hyperlinks zu.

Gestaltungsraster auch für Webseiten

Grid Systeme, wie sie bei der Gestaltung von Drucklayouts zum Einsatz kommen, wurden bereits seit einiger Zeit auch von Webdesignern angewendet. Beispiele liefern hier Systeme wie das Grid System 960.gs. Die vorgegebenen Rastergrößen von Gestaltungsrastern erleichtern beim reaktionsfähigen Webdesign die Konzeption und Gestaltung. Diese Raster machen es einfacher die gleichen Inhalte, entsprechend der Anforderungen des jeweiligen Endgerätes, zu vergrößern, zu verkleinern, neu zu positionieren oder gegebenenfalls auch einfach auszublenden.

Gestaltung und Entwicklung von Websites wird zum iterativen Prozess

Neben der eigentlichen Nutzung des Internets durch die Anwender, hat sich auch die Gestaltung und Umsetzung von Webseiten für Grafiker und Webdesigner grundlegend verändert. Reaktionsfähige Webseiten werden nun in einem iterativen Prozess erstellt, bei dem Gestalter mit Programmierern kooperativ zusammen arbeiten müssen. Denn eine Trennung zwischen Konzeption, Gestaltung und Programmierung, wie dies bisher oft der Fall war, ist beim Responsive Webdesign nicht mehr möglich. Dieser Umstand führte zu neuen Herangehensweisen, zu denen der in diesem Artikel vorgestellte Ansatz, basierend auf der Umsetzung verschiedener Layouts, gehört.

Ein weiterer Ansatz wird als Mobile First bezeichnet, diesen stellen wir demnächst in einem eigenen Blogartikel vor.