Was ist responsive Design?
Eine Webseite ist responsive, wenn sie durch HTML und CSS3 Media-Queries in der Lage ist, die Inhalte von Webseiten auf verschiedenen Endgeräten darzustellen, ohne dass es zu unschönen Verzerrungen kommt.
Endgeräte sind in diesem Zusammenhang beispielsweise Notebooks, Smartphones und Tablets. All diese Geräte zeichnen sich durch unterschiedliche Display-Größen aus, an die sich das Responsive Webdesign anpassen muss. Diese Funktion wird auch als „Form follows function“ bezeichnet.
Vorteile von Responsive Design
Responsive Design spielt mittlerweile eine zentrale Rolle bei der Erstellung von Webseiten. Kaum eine professionelle Internetseite verzichtet heutzutage noch darauf. Der Grund hierfür: Das spezielle Webdesign bringt eine Reihe von attraktiven Vorteilen mit sich. Hierzu gehören:
- Gleichbleibende Benutzerfreundlichkeit
- Gute Wahrnehmung der Inhalte
- Anpassung an unterschiedliche Auflösungen und Displaygrößen
Benutzertrend: Mobile Endgeräte
Wer denkt, dass Webseiten immer noch vorrangig über Laptops oder PCs aufgerufen werden, irrt sich. Der Trend geht klar zu mobilen Geräten, sprich Smartphones und Tablets. Sie sorgen dafür, dass eine Internetseite responsive sein muss, wenn das Nutzererlebnis positiv sein soll.
Passt sich eine Internetseite nicht automatisch der Bildschirmauflösung des Endgerätes an, wird sie automatisch als minderwertig und unprofessionell eingestuft. Responsive Webdesign ist im Zeitalter der mobilen Endgeräte daher unverzichtbar.
HTML und CSS3 Media-Queries
Um die bereits erwähnten HTML und CSS3 Media-Queries führt kein Weg herum. Die Queries beeinflussen das Design der Website in Abhängigkeit zum Ausgabemedium. Diese Anpassung erfolgt automatisch und muss nicht auf jedes Gerät einzeln angepasst werden.
Eigenschaften, die durch die HTML und CSS3 Media-Queries beeinflusst werden:
- Größe (Breite und Höhe) des Browser-Fensters
- Bildschirmauflösung
- Orientierung
- Menü-Anzeige
- Anordnung von Bildern
- Größe von Boxen
- Eingabe-Möglichkeiten (Touch, Tastatur, Sprache)
Durch diese stets individuelle und automatische Anpassung unterscheidet sich das Responsive Design von der mobilen Webseite. Mobile Pages besitzen verschiedene eigenständige Templates, die genau an die Eigenschaften eines speziellen Endgerätes angepasst werden. Diese nicht responsive-fähigen Webseiten müssen aufwendiger gepflegt werden und werden daher immer seltener genutzt.
