Was ist Responsive Web Design (RWD)?

Mit dem Begriff »Responsive Web Design« (RWD) ist meist die Anpassung einer Website für unterschiedliche Displaygrößen gemeint. Geschaffen wurde der Begriff am 25.10.2010 durch den gleichnamigen Artikel von Ethan Marcotte auf der Website »A List Apart«. Kurz danach wurde beim Verlag »A Book Apart« das ausführliche Buch zum Thema veröffentlicht.

In seinem Artikel hat Ethan Marcotte drei Grundkriterien für das Konzept Responsive Design definiert:

• Flexible Medieninhalte
• Flexibles Gestaltungsraster
• Media Queries

Alle drei Zutaten waren 2010 recht neue Technologien bzw. konzeptionelle Ansätze und haben Designer und Entwickler zum Umdenken gezwungen. In den nachfolgenden Jahren wurde das Thema zum globalen Trend und hat die Art und Weise wie Websites gestaltet und entwickelt werden langfristig verändert.

Responsive Design 2010 – heute

Insbesondere in den frühen Jahren von Responsive Design wurde das Konzept meist als Anpassung für populäre Displaygrößen wie iPhone und iPad verstanden. Aus heutiger Sicht ist das zu kurz gedacht – auch, da die Anzahl der verschiedenen Smartphones, Tablets und Computer eine spezielle Optimierung unmöglich gemacht hat.

Responsive Design wird heute als Optimierung der Anwendungssituation für einen Menschen begriffen. Die Optimierung für Geräte ist hier inbegriffen und wird um benutzerdefinierte Einstellungen, Bedienkonzepte und Situationen erweitert.

Folgende Aspekte sollten berücksichtigt werden:

• Unterschiedliche Displaygrößen und Form-Faktoren – das Layout muss flexibel reagieren können und Inhalte sollten auf allen Geräten verfügbar sein. Der Mobile First-Ansatz kann helfen. Mikrolayouts steuern den Platzbedarf innerhalb von Layouts.
• Unterschiedliche Browser – Das Layout muss mittels »Progressive Enhancement« verschiedene Technologien bedienen können
• Unterschiedliche Displayqualitäten – Das Layout muss auf niedrigauflösenden, monochromen, normalen und hochauflösenden Displays gut aussehen. Auf modernen Displays können Farbräume mit deutlich mehr Farben (z.B. im P3-Farbraum) angesprochen werden.
• Unterschiedliche Bedienkonzepte – Die Website muss mit Cursor, per Touch, per Tastatur, per Stift, per Sprache (in Zukunft per VR etc.) bedienbar sein
• Unterschiedliche Anwendungssituationen (Bandbreite/Offline, Licht, Standort, Sprache, Zeitzone etc.) – Das Layout muss durch die Wahl geeigneter Schriftgrößen, Farbkontraste etc. zugänglich sein. Damit ist auch ein wichtiger Grundstein für Barrierefreiheit gelegt.
• Unterschiedliche Hardware-Faktoren (Performance, Batterie, Datenvolumen) – Das Layout muss nachhaltig mit Ressourcen umgehen.
• Unterschiedliche Systemkonfigurationen (Dark Mode, Reduzierte Animationen, Reduzierte Transparenzen, Zoom etc.) – Das Layout sollte Wünsche der User respektieren und auf Einstellungen im Betriebssytem entsprechend reagieren.