M² Blog

Content Strategie und andere Rätsel

6 Fakten zum Thema Responsive Webdesign

Jeder hat mittlerweile tagtäglich mit Smartphones oder Tablet-PCs zu tun. Daher ist es auch schon selbstverständlich für uns, dass die Darstellung von Webseiten auch auf mobilen Endgeräten ohne Probleme funktioniert. Ein gewisses Know-How sollten dennoch alle Content Strategen zum Thema Responsive Webdesign aufweisen, welches ich in 6 Punkten zusammenfassen möchte.

Um die gut 50% der Smartphone- und Tablet-Nutzer auf einer Webseite nicht zu verlieren ist eine passende Ansicht entscheidend. Dafür gibt es ein paar Fakten, die man wissen sollte.

1) Arbeiten mit Grids

Responsive Webdesign wird in der Programmierung grundsätzlich per CSS umgesetzt. Vor allem mittels „media queries“ wird es möglich gewisse Darstellungen nur für bestimmte Auflösungen wiederzugeben.
Um eine Webseite so einfach wie möglich responsive zu machen, wird anhand eines Gitters (Grids) designed und programmiert. Dabei orientiert man sich an einer Aufteilung in Spalten und Zeilen auf der ganzen Webseite. Somit kann per CSS von vornherein festgelegt werden, ab wann eine Spalte 100% breit ist etc. Folgendes Beispiel verdeutlicht die Funktionalität.

Grid Desktop

Grid Desktop

Grid Mobile

Grid Mobile

2) Mobile first!

Diese Methode ist meiner Meinung nach die bessere, im Gegensatz zu der meist (noch immer) bevorzugten Vorgehensweise „Desktop first“, bei der man mit der Desktop-Variante startet und für kleinere Geräte immer mehr Elemente weglässt.
Bei „Mobile first“ versucht man zuerst die optimale Darstellung für mobile Geräte umzusetzen und dann nach und nach die größeren Auflösungen zu optimieren. Dabei kann der zusätzliche Platz genützt werden und mit weiteren, nicht so essentiellen Informationen ausgeschmückt werden.

3) Einschränkungen

Durch die Verwendung von responsive Webdesign treten allerdings auch vermehrt Schwierigkeiten mit den unterschiedlichen Endgeräten auf, da diese verschiedenste Features aufweisen, die den Entwicklungsprozess der Webseiten komplizieren und verlangsamen. Vor allem spielt die Bildschirmgröße der Geräte eine maßgebende Rolle, da die absolute Größe von mobilen Endgeräten, insbesondere die der Smartphones begrenzt ist. Deshalb müssen die Inhalte der Webseiten optimiert und reduziert werden, damit dem Nutzer eine entsprechende Bedienbarkeit geboten werden kann.

4) App vs. mobile Webseite

In den letzten Jahren wurden vermehrt unterschiedliche Applikationen für mobile Endgeräte entwickelt, die eine gute Alternative zu Webseiten darstellen sollen, da beispielsweise die Internetverbindung nicht dringend nötig ist und die Webseiten, die für Standard Rechner entwickelt wurden, nicht umständlich bedient werden müssen.
Mittlerweile ist es allerdings durch responsive Webdesign möglich, eine Webseite zu erstellen, die für mehrere Endgeräte nutzbar ist und sich dementsprechend anpasst. Daher wird sich meiner Meinung nach die Erstellung von Webseiten-Apps immer mehr verabschieden. Im Verhältnis ist der Mehraufwand durch die individuelle Programmierung einer App wesentlich höher als eine durchdachte responsive Umsetzung. Außerdem ist eine automatisch angepasste Webseite definitiv benutzerfreundlicher.

5) Orientierung an momentanen Trends

Flexibilität und Einfachheit stehen an erster Stelle. Der Nutzer soll sich auf Anhieb zurechtfinden und die gesuchten Informationen auf unkomplizierte Weise entdecken
Vor allem die Tendenz zur Einfachheit wird in den letzten Jahren immer stärker ersichtlich. Im Vergleich zu vorher, als versucht wurde, den Webseitenelementen durch 3D-Effekte und Schatten eine gewisse Räumlichkeit zu verleihen, wird nun probiert, alles flacher und simpel wirken zu lassen. Dieser Stil wird als Flat Design bezeichnet und verzichtet weitgehend auf jegliche Elemente, die nicht unbedingt vorhanden sein müssen und nur viel Platz einnehmen würden, der für anderes gebraucht werden könnte. Mittlerweile gibt es auch schon die Richtung Flat 2.0. Hierbei wird wieder vermehrt mit Schatten und dezenten 3D-Effekten gearbeitet. Dennoch weiterhin sehr reduziert im Vergleich zu früher.

6) In-Browser Design

Beim „In-Browser Design“ soll direkt mit Code im Browser gestaltet werden und somit wird von Beginn an näher an den tatsächlichen Möglichkeiten gearbeitet. Durch frühzeitiges Testen kann man dem unterschiedlichen Verhalten von Browsern entgegenwirken und das Design entsprechend optimieren. Natürlich erfordert das eine neue Denkweise im Designprozess und die Anforderung an die Designer, sich mit den neuen Technologien auseinanderzusetzen. Diese Vorgehensweise wird auch gerne als Crealopment bezeichnet.

Referenzen

Mitter, M. (2013). Responsive Webdesign – von der Konzeption bis zum Finaldesign am Beispiel cleverleben.at. Abgerufen unter http://www.melaniemitter.at/documents/Responsive%20Webdesign.pdf

Felberbauer, P., Schuller, C. (2016). Responsive Web Design für Content Strateginnen. Abgerufen unter http://oer.fh-joanneum.at/contentstrategy/responsive-web-design-fuer-contentstrateginnen/

Weiter Beitrag

Zurück Beitrag

Antworten

© 2019 M² Blog

Thema von Anders Norén