Responsive WebDesign heisst mobile optimiert.

Responsive Webdesign

Die heutigen «Mobile Devices» (Tablets, Smartphones & Co.) haben Kommunikationsverhalten und Infomationsbedarf bereits nachhaltig verändert.

Responsive Webdesign bedeutet eine Website so zu programmieren, dass das gewählte Webdesign Geräte-übergreifend optimiert wird. Im Gegensatz zu den statischen Websites kann sich die «responsive» aufgebaute Website an den verschiedenen Auflösungen eines Bildschirms anpassen. Durch dieses Vorgehen erübrigt sich für mobile Geräte eine komplett eigenständige Website oder CSS aufzubauen und zu entwickeln. Alles geht problemlos mit TYPO3.

Zum Responsive Webdesign gehört nicht nur das Layout der Website. Wichtig ist, dass eine Website, die auf einem mobilen Gerät angesehen wird, möglichst wenig grosse Bilder und Daten aufweist.

Besonders Bilder (Logos, Banner, Portraits) benötigen sehr viel Datenvolumen. Mit Responsive Webdesign will man grosse Datenpakete vermeiden und die Website trotzdem auf allen Geräten optimal darstellen. Durch diese Optimierungen verkürzt sich die Ladezeit und vermittelt dem Besucher ein besseres Erlebnis.

Per Definition bedeutet also «Responsive Webdesign» angepasstes Wiedergeben von sämtlichen Webseiteninhalten.

Interessiert? – Wir freuen uns auf Ihr Echo.

Das versteht man unter Responsive Webdesign

Responsive Webdesign basiert auf flexiblen Layouts die sich an die verfügbare Bildschirmauflösung anpassen und Inhalte (Texte, Bilder, Slider und Videos) dementsprechend skaliert. Das Webdesign reagiert also auf die Gegebenheiten des Gerätes (Device oder Monitor) und liefert das dementsprechend angepasste Layout aus.

Richtig eingeschlagen hat das Thema erst durch die Implementierung und Unterstützung von CSS3-Media-Queries. Mit Hilfe von Media-Queries können Parameter wie zum Beispiel die Auflösung oder dessen Orientierung des Gerätes bestimmt werden und so können verschiedene Layouts innerhalb einer Datei erzeugt werden. Die Website kann also auf einer Auflösung von 800 x 600 Pixel anders aussehen als auf einem HD Monitor mit 1920 x 1080 Pixel, wobei der Quellcode genau der gleiche ist.

Responsive Webdesign Entwicklungstrends

Datenmenge

Gerade bei mobilen Geräten zählt oftmals die kleinste Datenmenge, welche geladen werden muss. Aus dem Grund sollte man auf einen schlanken Quellcode achten. Wer sich denkt er könnte mit dem CSS-Befehl «display;none:» das Datenproblem lösen, irrt sich. Das Element wird zwar ausgeblendet, die Daten werden jedoch geladen.

Die grösste Menge an mobilen Daten werden für Bilder verbraucht. Nach dem Motto «Gutes Responsive Webdesign sollte auch Bilder anpassen», bietet dafür Adaptive Images eine passende Lösung an.

Ziel

«Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild ist in der Regel, aber nicht nur, die Anzahl der Pixel, die der Browser in der Breite zur Verfügung hat.» – Wikipedia

Responsive Webdesign Geräte

Trend-Entwicklung

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, welche Webdesigner immer wieder vor neue Herausforderungen stellen. Zum einen werden die Auflösungen der Desktop Monitore immer grösser, sodass wir in einigen Fällen schon mit einer Inhaltsbreite von 1280 Pixel arbeiten. Andererseits nimmt auch die Nutzung vom Internet auf mobilen Endgeräten zu.

Durch die stetig weiterentwickelnde Technik nimmt die Vielfalt der Bildschirmauflösungen immer weiter zu. Alleine bei mobilen Geräten reichen die möglichen Bildschirmauflösungen von 240 x 320 Pixel (iPhone 3G/S) bis 720 x 1280 Pixel (Samsung Galaxy S3 / Nexus 4). Die heutige aktuellen Geräte Samsung Galaxy S6 und iPhone6 weisen Bildschirmauflösungen von 2‘560 x 1.440 Pxel, resp. 1334 × 750 Pixel auf. Das heisst also, dass eine Website auf einem 1920 x 1080 Pixel Monitor anders aussehen wird, als auf einem iPhone, einem Nexus Tablet, welches mit einer Auflösung von 2560 x 1600 Pixel arbeitet oder einem iPad 3 mit 2048 x 1536 Pixel.

Responsive Webdesign versucht also Websites auf verschiedenen Auflösungen so zu gestalten, dass sie ohne individuelle Anpassungen auf dem jeweiligen Gerät gut aussehen. So könnten hoch auflösende Desktop Monitore beispielsweise mit einem 4-spaltigen Inhalts-Layout bedient werden, während der Inhalt für mobile Geräte in ein 1- oder 2-spaltiges Layout gepackt wird.