Please select a page template in page properties.

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.

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.

Ziele

«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

Möchten Sie Ihrer derzeitigen Website nur einen moderneren, frischen Look verpassen?

Lassen Sie Ihre Website jetzt professionell und unverbindlich prüfen:

zum Website-Check ...