3 Tipps für responsive Webseiten

Das Responsive Webdesign mittlerweile bei vielen Webentwicklern angekommen ist, dürfte kein Geheimnis mehr sein. Trotzdem gibt es meines Erachtens noch immer viel zu viele Entwickler, die den Vorteil einer für Mobilgeräte optimierten Webseite nicht erkennen. Im Rahmen dieses Beitrags möchte ich euch drei kleine Tricks vorstellen, mit denen ihr eventuell noch mehr aus dem Trendthema „Responsive Webdesign“ herausholen könnt.

Was ist Responsive Webdesign überhaupt?

Vor wenigen Tagen habe ich einen sehr interessanten Satz auf Twitter gelesen, an dessen Autor ich mich leider nicht mehr erinnern kann. Die Aussage war aber ungefähr die folgende:

„Das Web war schon immer responsive, bevor wir angefangen haben, es in Container mit fester Breite zu verpacken.“

Diese Aussage trifft es natürlich auf den Punkt. Kein HTML-Element besitzt von Haus aus eine in Pixeln definierte Breite. Standardmäßig sind Inline-Elemente so breit wie ihr jeweiliger Inhalt; Block-Elemente hingegen besitzen immer eine Breite von 100%. Erst in dem wir Elementen über CSS eine feste Breite zuweisen, zerstören wir ihre Dynamik.

Natürlich konnten Webentwickler in der Vergangenheit nicht ohne das Definieren fester Breiten auskommen: Designs mussten „Pixel Perfect“ umgesetzt werden, ein 960 Pixel breiter „wrapper“ war Quasi-Standard.

Heute hat sich diese Situation geändert. Durch CSS-Eigenschaften wie „max-width“ oder Media Queries können wir Webseiten ausliefern, die zum einen wieder auf ein fluides Layout als Basis zurückgreifen und trotzdem auflösungsspezifische Eigenschaften besitzen. Auf dieser Grundlage ist es möglich geworden, Webseiten mit identischem HTML-Quellcode auf diversen Endgeräten vollkommen unterschiedlich darzustellen.

1. Tipp: Elemente verstecken

Der erste Tipp ist nicht einmal großartig technischer Natur. Vielmehr geht es darum, sich bewusst zu machen, dass Besucher von verschiedenen Geräteklassen auch durchaus andere Ansprüche an die zu besuchende Webseite stellen.

Ein gutes Beispiel dafür ist die klassische Restaurant-Webseite. Besucher, die die Seite mit einem Smartphone aufrufen, sind in der Regel nach konkreten Informationen: Öffnungszeiten, Wegbeschreibung, Speisekarte. Grafische Elemente und große Bilder sind hier eher unerwünscht.
Anders sieht es bei Besuchern aus, die über einen Desktop Browser kommen: Diese befinden sich nicht selten noch im Entscheidungsprozess. Es ist also auch wichtig, einen Eindruck über das Restaurant zu vermitteln, wofür sich der Einsatz von großen Slidern und Bildergalerien anbietet.

Als Webentwickler muss man sich und dem Kunden also bewusst machen, dass nicht alle Elemente, die eine Desktop-Variante beinhaltet, auch auf der mobilen Webseite Platz finden. Mut zum Kürzen lautet in diesem Fall die Devise.

Technisch lässt sich das ganze über die CSS3 Media Queries recht einfach umsetzen:

2. Tipp: Fluides Layout mit fester Breite

Die Basis für fast jedes responsive Webdesign sollte ein fluides Layout sein. Hier macht es aber durchaus Sinn, wieder auf feste Pixelgrößen zurückzugreifen um eine Maximalgröße zu definieren.

Stellen wir uns vor, wir besuchen eine fluide Webseite mit einem 27 Zoll iMac, der eine Auflösung von 2560 x 1440 Pixel besitzt. Würde sich der textuelle Inhalt nun über die gesamte Breite erstrecken, hätten wir ellenlange Wortreihen. Die Folge wäre, dass sich niemand mehr zwischen den Absätzen zurechtfinden beziehungsweise das Lesen extrem erschwert würde.

Um dies zu verhindern, macht es durchaus Sinn, dem Hauptcontainer („wrapper“) oder einzelnen Elementen eine maximale Breite mitzugeben. Technisch ist das ganze wieder schnell implementiert:

Der Schlüssel zum Erfolg ist in diesem Fall eine Kombination aus den CSS-Eigenschaften width und max-width. Dem Container geben wir eine Breite von 100%, wodurch er sich natürlich über das gesamte Browserfenster erstreckt. Über die Eigenschaft max-width definieren wir zusätzlich eine maximale Breite in Pixeln und margin: 0 auto sorgt dafür, dass der Container mittig zentriert wird, falls das Fenster breiter ist als der unter max-width angegebene Wert.

3. Tipp: Mehrspaltige Layouts untereinander anzeigen

Die meisten Webseiten-Layouts sind zwei- oder dreispaltig. Was bei Desktop-Auflösungen durchaus Sinn macht, ist bei kleineren Bildschirmen jedoch irgendwann störend. Stellen wir uns vor, wir haben einen Hauptinhaltsbereich mit 65% und eine Seitenleiste mit 35% Breite. Entspräche dies bei einer Fenstergröße von 1000 Pixeln noch angenehmen 650 zu 350 Pixeln, sähe die Situation bei einem Smartphone schon anders aus.

Eine Standardauflösung bei vielen Mittelklasse-Smartphones ist beispielsweise 480 x 800 Pixel. Dementsprechend wäre der Hauptinhaltsbereich ungefähr 310 Pixel und die Seitenleiste 170 Pixel breit. Hier würde es also definitiv mehr Sinn machen, beide Spalten auf 100% Breite zu bringen und untereinander anzuzeigen.

Mit Hilfe der CSS3 Media Queries stellt auch diese Implementierung kein Problem dar:

Responsive Webdesign: Nur ein Trend?

Ich hoffe ihr seht, dass man mit wenigen Kniffen und etwas Quellcode auch bereits bestehende Desktop-Webseiten um mobile Komponenten erweitern kann. Wer allerdings plant, einen Relaunch oder eine neues Projekt in Auftrag zu geben, sollte auf eine Agentur zurückgreifen, die responsive Webdesignes bereits anbietet; zum Beispiel ein HTML Webdesign von der Kreativagentur GSDH.

Denn die Zugriffe über mobile Endgeräte nehmen kontinuierlich zu, auf der anderen Seite wird die Gerätespanne und damit auch die unterstützten Auflösungen immer größer. Zwischen 360 und 2560 Pixeln ist heutzutage so ziemlich alles möglich. Fluide Layouts und Responsive Webdesign sind also keine kurzfristigen Trendthemen, sondern die Techniken der Zukunft und Gegenwart.