Responsive Design ist eines der gängigsten Schlagwörter im Bereich Webseiten der letzten Jahre. Dieser Begriff steht als Synonym erstmal für Webseiten, die sich dynamisch dem jeweiligen Endgerät anpassen.

War so etwas technisch bis vor einigen Jahren fast ausschliesslich über Skriptsprachen, wie z.B. JavaScript möglich, haben wir mit CSS unter Einsatz sog. “Media Queries” nun die Möglichkeit z.B. direkt die Ausgabe passend zum eingesetzten Medium (Print, Screen, etc) oder der Auflösung des jeweiligen Bildschirms.

Aber wie genau funktioniert das? Eigentlich ist das gar nicht kompliziert. Zuallererst formatieren wir unsere Seite wie gewohnt per CSS, ich bevorzuge hierbei ein Vorgehen von groß (Bildschirm mit 1920 * 1080 px) nach klein (Mobiltelefone). Manch einer arbeitet auch genau umgekehrt. Richtig oder falsch gibt es hier nicht, jeder muss einfach schauen, mit welcher Vorgehensweise er am Besten zurechtkommt.

Haben wir unsere Seite soweit fertig programmiert, geht es daran die entsprechenden Anpassungen für unterschiedliche Auflösungen vorzunehmen. Hierzu sollte man natürlich bereits im Vorfeld geplant haben, wie sich die Anzeige unterschiedlicher Elemente bei wechselnden Auflösungen verhält. Welche Elemente ändern ihre Größe, werden augeblendet, kommen hinzu, werden neu platziert, etc… Eines muss klar sein: Ohne ordentliche Planung geht hier nichts. Das Projekt zieht sich sonst ewig in die Länge.

Hier mal ein kleines, rudimentäres Beispiel:

HTML

<div class="container"> <header>Logo und Firmenname</header> <nav><ul class="hauptmenue"><li>Link</li><li>Link</li><li>Link</li></ul></nav> </div> <div class"container"> <div class="inhalt">Ich bin der Inhalt und kann aus Bildern, Texten und weiteren Elementen bestehen</div> <aside>Seitenleiste mit Zusatzinformationen oder weiterführenden Links</aside> </div> <footer> <div class="container">Fussbereich mit Links, Kontaktdaten, etc.</div> </footer>

CSS

body{ font-size:13px;
}

footer{ background:#444; color:#fff;
}

Damit haben wir eine kleine Seite unter Verwendung von HTML5 Selektoren erstellt. Diese sollte an Bildschirmen mit Breiten von mehr als 1024 Pixeln ordentlich dargestellt werden. Da wir für einige Elemente aber fixe Breiten verwendet haben, ist bei niedrigeren Auflösungen horizontales Scrollen erforderlich. Auf sehr kleinen Bildschirmen, z.B. bei Mobiltelefonen kommt dazu, daß die Standardschriftgröße recht eingeschränkt lesbar ist. Was also tun?

Abhhilfe schafft die Erweiterung der CSS Datei um Media Queries. Nehmen wir jetzt mal an, wir wollen die Seite auch auf Geräten mit einer max. Breite von 1024 Pixeln ordentlich aussehen lassen und auf noch kleineren Geräten mit max. 640 Pixeln für ordentliche Lesbarkeit sorgen.

CSS

@media only screen and (max-width:1024px){ .container{ width: 700px; } .content{ width:640px; } aside{ display:none; } }

Wirklich Sinn macht dieser Code nicht, aber er kann euch einen Eindruck davon verschaffen, wie wie Anpassungen für unterschiedliche Auflösungen vornehmen können. Generell wird der Container in unserem Beispiel schmaler. Da jeweils ein Tag mit dieser Klasse den eigentlichen Inhalt im Header, Content und Footer umschliesst, erreichen wir damit zuallererst, daß unsere Webseite horizontal (das gleiche wäre auch in der Vertikalen machbar, ob das sinnig ist, steht auf einem anderen Blatt) in keinem Fall über den sichtbaren Bildschirmbereich hinausragt. Gleichzeitig lassen wir die Seitenleiste verschwinden. Dadurch gewinnt der Content mehr Platz auf dem Bildschirm (wird breiter). Alternativ könnten wir auch einfach beide Elemente untereinander in voller Breite anordnen:

CSS

.content{ float:none; }

Das wäre beispielsweise notwendig, wenn die Seitenleiste eure einzige Navigation enthält. In diesem Fall wäre es natürlich denkbar ungünstig diese nicht mehr anzuzeitgen.

Ein Vorteil beim Einsatz von Media Queries im Vergleich zu anderen Möglichkeiten der Anpassung für Mobilgeräte ist die Möglichkeit die Änderungen direkt am Bildschirm zu testen, da Media Queries die Größe des Anzeigefensters (Viewport) ermitteln und sich daran orientieren. Man muss also nicht zwangsläufig unterschiedliche Geräte oder Entwicklungsumgebungen bereithalten, um seine Webseite oder Mobilapplikation in der Zielauflösung zu testen.

Alles selbst machen, oder fertige Framworks nutzen, was ist besser? Diese Frage kommt oft, lässt sich aber nicht pauschal beantworten. Es gibt Frameworks, wie z.B. gs960, die genau für diese Arbeiten entwickelt wurden. Sie arbeiten meist mit einem festen Raster (Grid), anhand dessen eine Ausgabe für unterschiedliche Aulösungen umgesetzt wird. Diese Frameworks sind mächtig und funktionieren gut, keine Frage. Dummerweise erfordern sie eine gewisse Gewöhnung, auch im Hinblick auf das umzusetzende Design. Hierbei muss der Designer innerhalb des Rasters und der vorgesehenene Abstufungen für die jeweilige Auflösung bleiben. Sein Design muss sich also horizontal in Streifen mit fixer Breite pressen lassen, will man ein Rastersystem wie vorgesehen nutzen.

So funktional diese Systeme auch sind, bin ich der Meinung, daß deren Einsatz nur für Webworker lohnt, die es häufig bei verschiedenen Projekten einsetzen. Für einzelne Projekte sind die Einschränkungen vergleichsweise stark und auch die Kennenlernphase eher lang. Auch für “kleine” Projekte, deren Ausgabe sich z.B. auf zwei oder drei bestimmte Auflösungen fokussiert, macht ein fertiges Rastersystem wenig Sinn, da man nicht vergessen darf, daß man, im Hinblick auf den CSS-Code, eine Menge “Ballast” mitschleppt. Klar könnte man das entschlacken bzw. modifizieren, hat dann aber wieder das Problem bei zukünftigen Anforderungsänderungen an die Webseite oder die Applikation im ungünstigsten Fall von vorne beginnen zu müssen.

Wenn es denn also im begrenzten Umfang responsive sein muss, dann sollte in jedem Fall abgewogen werden, ob selbst geschrieben wird, oder ein fertigs System eingesetzt werden soll. Gerade bei kleineren Projekten macht es eher Sinn sich selbst um die notwendigen Anpassungen zu kümmern. Denn damit habe ihr die volle Kontrolle über alle Anpassungen und müsst euch nicht auf andere Autoren verlassen. Ihr spart euch überflüssigen Code und seit frei, was die Gestaltung eurer Seiten angeht.