Die wesentliche Voraussetzung für ein responsives Webdesign findet sich im CSS, welches unterschiedliche Designs in Abhängigkeit des Ausgabemediums ermöglicht. Im Zusammenspiel mit speziellen Logiken des CMS können maßgeschneiderte Lösungen entstehen.

Geräte-Breite hat besondere Bedeutung
Am häufigsten werden responsive Websites auf die unterschiedlichen Breiten und Höhen des jeweiligen Browserfensters optimiert. Es können aber auch die Bildschirmauflösung, die Darstellung im Hoch- oder Querformat sowie die verschiedenen Eingabemöglichkeiten wie Tastatur oder Touch berücksichtigt werden.

CSS Frameworks spielen bei der Umsetzung eine wichtige Rolle, da diese bereits zahlreiche Funktionen für variierende Größen und Auflösungen mitliefern und somit zum einen den Implementierungsaufwand minimieren und zum anderen auf standardisierte Open-Source-Lösungen basieren.

 

Check-Mobile-Tag bei 4T3 und goliath
Bei der Verwendung von unterschiedlichen CSS-Definitionen ist zu beachten, dass Browser grundsätzlich alle verfügbaren Stylesheets herunterladen, auch wenn sie den angegebenen Bedingungen nicht entsprechen. Dies bezieht sich auch auf Bilder, die gegebenenfalls durch CSS-Anweisungen für mobile Geräte ausgeblendet werden. 

Ein responsives CSS spielt am besten mit einer responsiven Schablone (Templates) im verwendeten CMS zusammen. Durch den Check-Mobile-Tag der 4T3-Extension für TYPO3 können z. B. für mobile Endgeräte angepasste CSS und Grafiken an Stelle der Desktop-Version bereitgestellt werden. Dies führt zu schnelleren Ladezeiten und somit zu einer besseren User-Experience.

Nachteil bei B2B-Websites oder Intranet-Anwendungen
Leider können ältere Browser wie der Internet Explorer (kleiner 9) kein responsives CSS interpretieren. Gegebenenfalls ist es zwar möglich die fehlende Browser-Funktionalität durch JavaScript nachzurüsten, ein Verzicht auf entsprechende Optimierungen ist jedoch zu empfehlen.