Modernes Webdesign – Responsive & Co.


Viele Wege führen den Nutzer auf eine Website, immer häufiger geht der Weg über mobile Endgeräte wie Smartphones. 
Die schlichte Erkenntnis: Die Informationen müssen für mobile Endgeräte angerichtet werden. Dabei gibt es verschiedene Möglichkeiten die Website mit gleichbleibender Benutzerfreundlichkeit für alle Endgeräte bereitzustellen.

01. Responsive Webdesign

Responsive Websites passen sich an die Eigenschaften des benutzten Endgerätes an. Das betrifft nicht nur die Anpassung an die unterschiedlichen Bildschirmgrößen sondern auch die unterschiedliche Bedienung der Geräte selbst. Statt auf Mausklick reagieren die Websites bei Tablets und Smartphones auf Gestensteuerung mit den Fingern.

Ein Layout, volle Flexibilität


Unterschiedliche Bildschirmgrößen gab es schon immer, aber die Herausforderung bei Responsive Websites liegt in der Anpassung des Designs an die extrem unterschiedlichen Darstellungsgrößen. Dies ist nur möglich, wenn sich die einzelnen Elemente des Designs anpassen können.

In unserem Beispiel oben gibt es ein "Basis"-Layout für Desktop Rechner. Dieses Layout verfügt über eine ganze Reihe flexibler Inhalte, die sich bei der Ausgabe auf weiteren Geräten (hier: Laptop, Tablets und Smartphone) in Größe und Anordnung anpassen.
Alle Geräte greifen auf dieselben Elemente zu, stellen sie aber jeweils so dar, dass eine optimale Benutzerfreundlichkeit für das Ausgabegerät gewährleistet wird.

Aktuellste Technik

Die Flexibilität der responsive Websites wird durch aktuellste Techniken wie HTML5 und CSS3 Media Queries ermöglicht.
Nach der Abfrage der Display- und Geräteeigenschaften, wird das jeweils zur Auflösung passende Design abgerufen.

Gleicher Inhalt, neues Layout

Beim responsive Design können alle Elemente einer Website, wie Navigation, Bilder und Textblöcke bei Bedarf neu angeordnet werden. Die Inhalte der verschiedenen Elemente bleiben dabei unverändert. So entsteht ein einheitliches Design der Webseite unabhängig ob der Nutzer diese auf dem Smartphone, Tablet oder Desktop aufruft.

02. Adaptive Webdesign


Auch eine adaptive Website kann auf vielen Endgeräten dargestellt werden.
Die großen Vorteile sind hierbei die geringeren Konzeptions- sowie Umsetzungszeiten.
Der Nachteil ist allerdings, dass die Website nicht auf allen Endgeräten mit gleichbleibend hoher Qualität dargestellt werden kann.

Viele Layouts, eingeschränkte Flexibilität

Im Gegensatz zum Responsive Design wird beim Adaptive Design nicht nur ein Layout erstellt, sondern für jede gewünschte Größe ein eigenes.
Auflösungsgrößen, für die kein Layout konzipiert und erstellt wurde, bekommen dann entsprechendes Layout zugewiesen.
Adaptive Design ist in der Konzeption und Umsetzung einfacher und reicht in vielen Fällen, um Websites auf den unterschiedlichsten Geräten darzustellen.

In unserem Beispiel wurden Layouts für den Laptop, ein kleines Tablet sowie für das Smartphone erstellt. 
Der Desktoprechner und das größere Tablet bekommen jeweils das Layout für das nächst kleinere Ausgabegerät zugewiesen.

Layoutvielfalt spart Entwicklungszeit

Beim adaptiven Ansatz wird jeweils eine eigenständige Version der Webseite für bestimmte Viewports von Smartphones, Tablets und Desktop-PCs entwickelt. Häufig wird mit einem komplett fixen Layout gearbeitet, so ist die Umsetzung einer solchen Webseite zeitsparend und unkompliziert.

Usability der Webseite

Die adaptive Webseite bietet diverse Möglichkeiten die Usability trotz harter Übergänge zu steigern. Für die unterschiedlichen Versionen können leicht Funktionalitäten hinzugefügt oder weggelassen werden, um auf mobilen Geräten das Layout zu entlasten.

Mobile First


Websites, die vorzugsweise auf mobilen Endgeräten aufgerufen werden, werden konsequenter Weise in erster Linie für mobile Endgeräte konzipiert.
Mobile First nennt sich das Paradigma, Websites für Smartphones zu optimieren und anschließend für größere Viewpoints zu adaptieren.

Das Smartphone als Ausgangspunkt

Der Fokus des Designs liegt auf Übersichtlichkeit und ausschließlich relevanten Informationen, ganz nach dem Grundsatz: es ist einfacher Informationen hinzuzufügen,
als sie wegzulassen.

Niedriges Datenvolumen, hohes Tempo

Ebenfalls im Vordergrund steht ein möglichst geringes Datenvolumen damit Smartphones und Tablets auch ohne lange Ladezeiten auf die Webseite zugreifen können.
Bei der Weiterentwicklung für größere Displays, werden die Eigenschaften der mobilen Version beibehalten um eine ideale Darstellung und bestmögliche Performance zu garantieren.
Christoph HakenbergAnsprechpartner für den Bereich Responsive Webdesign

Ist Ihre Website schon auf mobilen Endgeräten nutzbar?

Gerne können Sie sich bei einer Frage oder einer Anfrage direkt telefonisch, per E-Mail oder über unser Formular erreichen. Wir freuen uns über Ihren Kontakt!
+49 (0)202 430940