Webwissenschaften

In meinem Blogbeitrag ergänze ich inhaltlich den Beitrag von Judith Eibl und werde mich mit dem Thema Responsive Webdesign noch näher beschäftigen.

1.     Vorteile und Nachteile^{[1] [2] [3] [4] [5]}

Vorteile

+        Eine Version für alle Endgeräte und Formate ³

+        Einfache Wartung: Durch ein responsives Webdesign können alle Inhalte für alle Formate zentral gewartet werden.¹

+        Kostengünstiger als mobile Websites ³

+        Suchmaschinenoptimierung: Da für alle Formate eine einheitliche URL verwendet wird, ist dies vorteilhaft für die SEO-Politik im Unternehmen.²

+        Steigende Gerätevielfalt: Durch die Flexibilität der Website, ist diese auch für kommende Geräte, Bildschirme und Nutzerszenarien geeignet.⁴

Nachteile

-          Langes Scrollen: Bei Texten mit mehreren Spalten wird meist der Content untereinander dargestellt. Das bedeutet der Nutzer muss bei der mobilen Ansicht lange nach unten scrollen, um für ihn nicht interessante Inhalte zu überspringen.²

-          Zusätzliche Ladezeit: Obwohl Teile des Inhaltes nicht angezeigt wird, werden im Hintergrund oftmals dennoch der gesamte HTML-Code geladen.²

-          Lange Testphase: Die Webseite muss auf vielen verschiedenen Endgeräten, Auflösungen bzw. Browser-Versionen getestet werden.⁴

-          Usability: Umfangreiche Navigationsmenüs werden auf beispielsweise Smartphone-Displays sehr unübersichtlich dargestellt.⁵

2.     Lösungsansätze

Es gibt zahlreiche verschiedene Ansätze, wie man Responsive Webdesign umsetzen kann. In meinem Blogbeitrag möchte ich mich aber nur jenen widmen, welche am Häufigsten angewendet werden.

Liquid Layout

Bei einem Liquid Layout wird immer die gesamte Breite des Browsers genutzt. Die Elemente der Webseite ordnen sich dabei immer nach bestimmten Regeln an. Die Website besteht also aus verschiedenen Boxen („Tiles“) mit einer bestimmten Breite, die sich je nach Browser-Auflösung automatisch in einer Zeile anordnen.[6]

Das soziale Netzwerk  Pinterest nutzt beispielsweise die Form des Liquid Layouts. Die Beiträge der Nutzer sind in einzelnen Boxen angeordnet, je nach Bildschirmgröße wird eine unterschiedliche Anzahl von Boxen nebeneinander platziert.

Quelle: www.pinterest.com

Responsives Webdesign im Grid

Es gibt weiteres zahlreiche Webdesigns, denen Raster zugrunde liegen. Verschiedene Spalten werden so zusammengefasst und ergeben anschließend einen Block. Zahlreichen Webseiten liegt ein 12 Column Grid zugrunde. Bei geringeren Größen werden dann Spalten weggelassen. Beispielsweise werden im Tablet-Format lediglich neun Spalten angezeigt bzw. am Smartphone im Querformat nur noch vier.[7]

Quelle: http://www.pulpmedia.at/blog/wp-content/uploads/boston-globe.png

Folgende Grafik visualisiert nochmals, wie sich die Spalten bei unterschiedlicher Display-Größe verhalten können:

Quelle: http://static.konversionskraft.de/2012/02/ResponsiveWebdesign_kk-01-472x223.png

3.     Herangehensweise

Eine Responsive Website erfordet eine ständige Abstimmung zwischen den Abteilungen Konzeption, Grafik und Programmierung. Eine Online-Marketing Agentur empfiehlt daher folgende Schritte einzuplanen:

Zu Beginn sollten alle wichtigen Elemente in einer „Content Inventory“ gesammelt werden. Hierzu zählen beispielsweise Logo, Navigationsmenü und Standard-Content. Wichtig sind aber auch alle anderen Inhalte, die möglicherweise auf der Website ihren Platz finden sollen, wie beispielsweise News, Gästebuch, Videos etc. Im Anschluss sollte eine Wichtigkeit definiert werden, die später für Klarheit sorgt, welche Elemente bei welcher Auflösung noch angezeigt werden bzw. wie sie sich verändern. Als Beispiel kann hier die Website-Navigation dienen, die bei der Desktop-Auflösung übersichtlich in voller Breite angezeigt wird. Bei der mobilen Version wandert diese allerdings als Icon meist in die linke obere Ecke. Hierbei ist es auch noch wichtig festzulegen, ab welcher Breite die Inhalte umbrochen werden.

Die Einteilung der verschiedenen Elemente kann dann wie folgt aussehen:

Quelle: http://www.pulpmedia.at/blog/responsive-web-design-teil-3-herangehensweise/

In der Praxis hat sich weiteres der „Mobile First-Ansatz“  durchgesetzt. Das bedeutet, dass die Konzeption bei der Gestaltung der Mobilen Ansicht startet, um die wichtigsten Inhalte/Artikel unterzubringen. Auf diese Weise verringert sich die Gefahr, dass zu viele unnötige Elemente in die Mobile Version gezwängt werden. Weiters ist es wichtig, dass die Gestaltung bei der Mobile-Ansicht usabilitygerecht umgesetzt wird. Elemente sollten daher eine Mindestgröße von 44x44px haben, um mit den Fingern problemlos navigieren zu können.

Ein weiterer wichtiger Schritt stellt die Festlegung der „Above the fold-Inhalte“ dar. Hierbei geht es um jene Inhalte, die alle Nutzer ohne Scrollen beim Besuch der Website sehen. Dabei ist es wichtig, dass die grundlegenden Informationen zum Zweck der Website direkt ersichtlich sind.

4.     Beispiel

www.eurothemen.at