Blog:

Warum Responsive Webdesign und wie funktioniert es?

Warum Responsive Webdesign?

Das mobile Internet hat das gute alte Festnetz längst überholt: Die meisten Zugriffe auf Webseiten erfolgen heute von unterwegs. Schnell wird etwas unterwegs gegoogelt, schnell noch einmal eine Information von einer Webseite abgerufen. Das mobile Internet wird somit immer häufiger und überall genutzt. Das bedeutet: Idealerweise sollte eine Webseite auch auf jedem Tablet oder Smartphone angezeigt werden können. Ein erster Lösungsansatz könnte sein, eine bestehende, für das Festnetz programmierte Webseite einfach noch einmal in zwei oder drei weiteren Versionen auch für verschiedene mobile Endgeräte zu erstellen. Doch diese Lösung wird kaum mit dem technischen Fortschritt mithalten. Denn das mobile Internet entwickelt sich rasend schnell und es kommen immer neue Endgeräte in immer neuen Varianten auf den Markt. Da stoßen diverse, jeweils für unterschiedliche Geräte programmierte Webseiten ganz schnell an ihre Grenzen.

Wie funktioniert Responsive Webdesign?

Eine mit Responsive Webdesign gestaltete Webseite nutzt als Basis ein flüssiges Raster, mit dessen Hilfe die Ansicht für das jeweilige Endgerät angezeigt wird. Die Breite der Seite wird dabei durch Prozentwerte festgelegt. So passt sich die Breite der in Responsive Webdesign programmierten Webseite in Relation zur Größe des jeweiligen Browserfensters an. Die einzelnen Elemente der Webseite sind ebenfalls flexibel und erkennen, welcher Platz jeweils zur Verfügung steht. Nicht nur die Webseite wächst oder schrumpft mit dem Endgerät, auch die Größe von Texten, Bildern oder Videos ändert sich entsprechend. Durch sogenannte Breakpoints im CSS-Code werden bestimmte Auflösungen definiert, an denen sich das Design ändert. Der jeweilige Gerätetyp und die spezifischen Geräteeigenschaften werden durch sogenannte Media-Queries abgefragt. So erkennt die Webseite das Endgerät und den zur Verfügung stehenden Platz. Die Webseite reagiert somit auf das Endgerät, um Größe und Anordnung der Webseite und ihrer Elemente zu variieren.

Blogbeiträge die zu diesem Thema passen