Responsives Webdesign

Mit responsivem Webdesign sind flexible Layouts gemeint, die sich den verfügbaren Bildschirmgrößen automatisch anpassen. Auch der Content Bereich, Texte, Bilder und Videos werden dementsprechend skaliert und richtig positioniert. Das Webdesign reagiert also auf die Gegebenheiten des Endgeräts und liefert ein dementsprechend angepasstes Layout aus.

Seit wann gibt es responsives Webdesign?

Erst seit der Einführung der CSS Media Queries ist dieses Thema stark in die Öffentlichkeit getreten. CSS Media Queries sind das Herzstück eines erfolgreichen responsiven Webdesigns. Mit diesen kann man verschiedene Bildschirmauflösungen ansprechen und auf diese mithilfe von entsprechenden Styles reagieren. Dadurch kann ein flexibles Layout ausgegeben werden, das auf die Gegebenheiten des Endgeräts abgestimmt ist.

Warum das Ganze?

Über die letzten Jahre kamen immer größere Desktop Monitore und neue Endgeräte mit unterschiedlichsten Bildschirmauflösungen auf den Markt. Ein Layout, welches auf eine Auflösung von 1024 x 768 Pixeln optimiert ist, sieht auf einem mobilen Endgerät wegen der kleineren Auflösung anders aus. Mit einem responsive Webdesign wird dem Chaos der Bildschirmauflösungen entgegen gewirkt und Ordnung in die Vielfalt aus Geräten und Bildschirmauflösungen gebracht.

Auf was muss geachtet werden?

Es ist klar, dass ein Layout, das auf eine 1024 x 768 Pixel Bildschirmauflösung optimiert ist, nicht auf ein mobiles Endgerät passt. Am besten stellt man auf mobilen Endgeräten nur die wichtigsten Elemente dar und versteckt den Rest. Zum Beispiel zentrale Elemente wie eine Navigation oder das Logo sollten möglichst schnell ins Auge fallen. Andere Elemente, die nicht zwingend notwendig sind, sollten versteckt werden. Idealerweise sollte sich der Benutzer auf einem mobilen Endgerät genauso schnell zurechtfinden können wie auf einem Desktop PC.

Datenmenge

Mobile Geräte haben oft keine schnelle Internetverbindung und deswegen zählt jedes geladene Kilobyte. Daher sollte man auf einen schlanken und ordentlichen Code viel Wert legen, um die geladene Anzahl von Kilobytes zu minimieren. Große oder hochauflösende Bilder sollten auf mobilen Endgeräten auch nicht mit geladen werden.

Fazit

Ein responsives Webdesign passt sich den entsprechenden Endgeräten sehr gut an und sollte eine Anforderung sein, die in der Zukunft unbedingt erfüllt werden sollte. Besonders die User mit Smartphones profitieren von einer optimierten Darstellung.
Natürlich verursacht ein responsives Webdesign einen Mehraufwand, der sich jedoch lohnt, da Ihr Internetauftritt bei Besuchern mit neuartigen Geräten glänzen kann.

David Wisniowski, Auszubildender Fachinformatiker Anwendungsentwicklung im ersten Ausbildungsjahr