Responsive Design: Die Definition und wie es funktioniert

Zum ersten internetfähigen Endgerät, dem Desktop-PC, sind inzwischen zahlreiche weitere Geräte, wie Notebook, Smartphone, Tablet oder auch Smart-TV hinzugekommen. Alle Geräte warten zudem mit einer Vielzahl an verfügbaren Bildschirmgrößen und Auflösungen auf, sodass Webanwendungen wie Apps und Websites heutzutage flexibel gestaltet werden. Nur so werden sie jedem User wie vorgesehen angezeigt und gewährleisten volle Funktionalität. Für diese Weise der Gestaltung etablierte sich im Webdesign die Bezeichnung Responsive Design. Mehr zur Definition und alles Wissenswerte lesen Sie im folgenden Beitrag!

Responsive Webdesign als Definition moderner Webstandards

Webentwickler nutzen zur Umsetzung des Responsive Webdesigns einerseits das HTML 5 meta-tag “viewport”, das Inhalte einer Website zur Auslieferung an verschiedene Endgeräte skaliert. Andererseits kommen Media Queries in CSS 3 zum Einsatz, die die Abfrage von Informationen vom Endgerät ermöglichen. Das sind beispielsweise Merkmale wie:

Display-Größe
Auflösung
Format (hoch / quer)
Eingabemöglichkeiten (Tastatur, Maus, Touchscreen, Sprache)

Mit diesen Informationen kann die responsive Website jederzeit in optimaler Darstellung und Funktionalität auf jedem Gerät angezeigt und genutzt werden. Die Elemente von Webseiten bzw. ihr Layout werden je nach Größe skaliert, bei kleineren Bildschirmgrößen außerdem neu angeordnet.

Motivation für responsives Webdesign

Das responsive Design ist nach Definition insbesondere deshalb wichtig, da sich die Nutzung des Internets immer stärker auf mobile Endgeräte verlagert. Deshalb gilt seit einiger Zeit auch die Regel “mobile first”, etwa zur Gestaltung von Websites für eine gute Suchmaschinenoptimierung (SEO) für Google und Co. Ähnlich dem UI/UX-Redesign bei Software, das beispielsweise im Zuge einer Anwendungsmodernisierung für eine moderne grafische Benutzeroberfläche sorgt, geht es hier also darum, das User-Erlebnis mit einer Website nach aktuellsten Standards für Geräte unterschiedlicher Größe positiv zu gestalten.

Sie interessieren sich für Anwendungsentwicklung und Softwaremodernisierung? Neben diesem Beitrag zum Thema Responsive Design finden Sie weitere Erläuterungen und Begriffsklärungen in unserem IT-Glossar!