Zeit, dass sich was bewegt und was Responsive Webdesign bedeutet

Gespeichert von wmfacti am Mo., 29/01/2018 - 21:17
lauren-mancke unsplash

Die Website auf dem Smartphon
Mit der Präsentation des iPhones, dem ersten Gerät mit großem Touchscreen 2007, das zudem mit einem voll funktionsfähigen Webbrowser ausgestattet war, begann ein neues Zeitalter - für Nutzer von Webangeboten und Webentwickler. 
Dieses Gerät konnte nun also auch Websites wie auf einem Desktop-Browser anzeigen und sorgte erstmals für ein akzeptables Surferlebnis auch auf mobilen Handgeräten. Seither schritt die Entwicklung mit Sieben-Meilen-Stiefeln voran, andere Hersteller zogen nach und schon wenige Jahre später konnte man sich ein Mobiltelefon ohne Touchscreen und Internetzugang nicht mehr vorstellen.
Die Zahl der Aufrufe von Websites über das moblie Internet liegt in Europa 2017 bei circa 40%  seit Jahren mit steigender Tendenz.
Experten prognostizieren: Ein für das Handy oder Tablet nicht nutzerfreundliches Webangebot, wird in Zukunft bedeutungslos sein.

Es lohnt der Blick zurück, um die grundlegenden Veränderungen zu verstehen:
Bis dato wurde Webangebote meistens über "Schreibtisch"-Computer und Bildschirme, bzw. Laptops mit mitllerweile diesen ebenbürdigen Displays besucht. Die Websites hatten meist eine fixe Seitenstruktur, basierend auf einem Raster, ausgehend von einer festen Breite von ± 960 Pixeln.
Auch wenn es schon immer möglich war, Websites für Endgeräte mit anderen Bildschirmen flexibel zu gestalten, wurde diese Möglichkeit jedoch nur selten genutzt, entweder aus Bequemlichkeit oder aber weil kein großer Bedarf an flexiblen Designs bestand. Die gängige Arbeitspraxis der Webdesigner, Websites in einem Bildeditor »statisch« zu entwerfen und anschließend das Ergebnis programmtechnisch genauso statisch 1:1 umzusetzen, trug ihr Übriges dazu bei.

Und was ist nun »Responsive Webdesign«?
Übersetzt könnte von »reaktionsfähigem Webdesign« gesprochen werden. Der Begriff wurde 2010 vom amerikanischen Webdesigner Ethan Marcotte. Er bezog sich dabei auf einen recht neuen Bereich der Architektur namens »Responsive Architecture«, der es sich zum Ziel setzt, reaktionsfähige Gebäude bzw. Gebäudeelemente zu entwerfen, die in der Lage sind, auf äußere Einflüsse zu reagieren.  Nicht nur wir Menschen sollen uns an unsere Umgebung anpassen, eine reaktionsfähige Architektur sorgt eher für eine wechselseitige Beziehung, in der Mensch und Gebäude aufeinander reagieren.
Dieser Gedanke gefiel Ethan gut: Die bisher üblichen statischen Websites waren nicht in der Lage, auf die steigende Anzahl verschiedener Display-Größen und Geräte angemessen zu reagieren.

Und wie funktioniert Responsive Webdesign?
Das anpassungsfähige Webdesign basiert auf HTML5 und CSS3. Mittels der sogenannten "Media Queries" werden die Eigenschaften und Fähigkeiten der Geräte abgefragt und das Layout reagiert darauf. Bilder skalieren sich entsprechend, die Schriftgrößen passen sich dem Gerät an und vermeintlich unwichtigere Elemente weichen je nach Priorisierung der Inhalte. Das Layout erkennt auch, ob ein Gerät im Hoch- oder Querformat gehalten wird. Ein zweispaltiger Text fließt beispielsweise bei einer Drehung ins Hochformat in eine Spalte und ist somit auf einem kleinen Display besser lesbar.

Neben der technischen Umsetzung gewinnt ein weiterer Aspekt große Bedeutung: Die Content-Planung.

  • Am PC werden Websites in der Regel statisch, gezielt, in Ruhe und ohne Zeitdruck wahrngenommen. Mobile Nutzung kennt hingegen selten eine feste räumliche Konstante. Sie findet oft beiläufig, schnell, spontan und sogar in der Bewegung statt. Ablenkungen aus dem Umfeld sind die Regel.
  • Überschriften und Texte, müssen auf die Größe des Displays hin ausgerichtet sein, um gut lesbar zu sein. Gleiches gilt für die verwendeten Schriftarten.
  • Teaster (Anrisstexte) müssen schnell und klar auf den Punkt kommen. Sie sollten maximal das Display ausfüllen. Meist entscheidet sich schon hier, ob ein User weiterscrollt.
  • Unübersichtliche Menüs, die nicht schnell an gewünschte Ziele führen, sind ob­so­let.
  • Ergänzende Videos, Animationen, Bildergalerien oder Infoboxen steigern auch mobil den Mehrwert für den Nutzer und dessen Verweildauer.
  • Entscheidend sind jedoch - wie auch für den sonstigen Contentz - möglichst kurze Ladeszeiten. Mobiles Internet ist oft langsam und störanfällig.

 

Neuester Inhalt

sosystems | webmanufacture
münzstrasse 37 & körnerstrasse 13
19055 schwerin