Responsive Design – was ist das ?

Seit einiger Zeit ist das Buzzword „Responsive Design“ in aller Munde und wird von den Agenturen und Softwareentwicklern rauf und runter dekliniert. Letztendlich bedeutet es nicht mehr, dass sich das Design einer Website der jeweiligen Auflösung des Bildschirms, auf der diese Seite betrachtet werden soll, optimal anpassen sollte. Das betrifft Grafiken, Struktur, Inhalt und auch Menüführung.

Einige würden wohl behaupten, dass das alter Wein in neuen Schläuchen ist. Denn schon zu Beginn der 2000er hat man damals mit WML (Wirless Markup Language – eine Art XML Variante) versucht, auf die ersten internetfähigen Mobiltelefone die Darstellung von Internetseiten zu optimieren. Damals waren die Displays noch kleiner, hatten zumeist keine Farbdarstellung und die Herausforderung war, die Funktionalität und das Design so weit zu reduzieren, dass man auf dem kleinen Display noch einigermassen vernünftig agieren konnte.

Um die WML Seiten aus zu liefern, wurde auf ein Verfahren zurück gegriffen, dass man heute so schön neudeutsch als „Dynamic Serving“ bezeichnet. Basierend auf dem User bzw. dem Gerät, mit dem der User die Seite besucht, wurde eben entweder das „normale“ HTML oder WML zurück geliefert. Allerdings ist das natürlich ein aufwändiger und auch unter Umständen problematischer Weg. Denn jedes Gerät kam damals wie heute mit einer unterschiedlichen Bildschirmauflösung, so dass man auch noch die verschiedenen Geräte unterscheiden musste.

Das heute so moderne Responsive Design geht einen anderen Weg: Über sogenannte Media-Queries werden bestimmte Style-Regeln für die unterschiedlichen Geräte formuliert, ohne dass dafür der HTML-Code angefasst werden muss. So kann man über ein und die selbe URL verschiedene Versionen ein und derselben Website anzeigen. Mit flexiblen Containerbreiten und -höhen sorgt man für die optimale Textdarstellung auf allen Bildschirmauflösungen, ggf. sogar mit unterschiedlichen Schriftgrössen. Weitere Methoden sind z.B. bestimmte Grafiken oder Banner bei mobilen Geräten auszublenden oder deutlich kleinere Grafiken aus zu liefern.

Somit werden die verschiedenen Elemente entsprechend der Auflösung in der Grösse, der Anordnung und der Darstellung auf den jeweiligen Bildschirm optimiert. Grundvoraussetzung ist natürlich, dass man bereits ein Container-orientiertes (unabhängige Strukturelemente, die mit dem gewünschten Inhalt gefüllt werden) Design verwendet.

Wie aus der Beschreibung deutlich wird, kann man hier natürlich auch beliebig viel Aufwand investieren, vor allem dann, wenn man sich auch noch optimale Benutzerführung, Menüstrukturen und darzustellendem Inhalt auf den mobilen Geräten Gedanken macht. So kann man beispielsweise noch zusätzliche Breakpoints abhängig von der Bildschirmgröße, einbauen, um so eine noch genauer abgestimmte Darstellung z.B. auf Tablets zu erreichen.

Der Hauptvorteil dieser Methode ist, dass normalerweise der HTML Code und somit auch die Programmierung nicht mehr angefasst werden muss. Alle Anpassungen können über das CSS und ggf. noch ein paar Javascript-Implementierungen umgesetzt werden. Allerdings heisst das nicht, dass es deswegen weniger Arbeit ist. Zudem muss man auch hier im CSS für die verschiedenen Auflösungen, die man unterstützen möchte, verschiedene Definitionen vor sehen.

Beispiel aus einer CSS:

.header-container { padding:96px 0 43px 0; }
@media (max-width: 991px) {
	.header-container { margin-bottom:0 !important; }
}
@media (max-width: 767px) {
	.header-container { padding:20px 0; }
}
@media (min-width: 768px) and (max-width: 979px) {
	.logo { width:100%; }
}
@media (max-width: 767px) {
	.logo {
		text-align:center;
		float:none;
	}
}

Zudem hat Responsive Design auch seine Grenzen. Es gibt genügend Seiten, die entweder aufgrund ihrer Textmenge oder ihres generellen Aufbaus einfach nicht für mobile Geräte geeignet sind. Selbst wenn diese Dank Media-Queries “korrekt” dargestellt werden, ist das nicht immer die optimale Variante.

Wenn man heute über einen Relaunch einer Website nachdenkt, sollte man daher immer von Mobile zu Desktop denken. Sprich, man startet mit dem Design für die mobile Varianten und nimmt dann „mehr“ für die Desktop Variante hinzu. Das ist zumeist der einfachere und damit auch kostengünstigere Weg.