Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

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.

Fluides Layout auf einem 1920px Monitor: So macht Lesen nicht wirklich Spaß!

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.

Dieser Artikel wurde am 03.12.2012 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. Der Tipp mit dem Verstecken ist eine heikle Sache. Es gibt berechtigte Kritik in der „responsive Szene“ vor genau dieser Technik.

    Damit macht man es sich auch oft einfach nur einfach. Das Problem gerade bei (großen) Bildern bleibt, dass sie ja trotzdem geladen werden und Bandbreite kosten. Sie sind halt nur nicht sichtbar.

    Man kann das sicher in Einzelfällen machen, aber gerade bei Bildern halte ich es nicht gerade für best practice.

    • Hallo Michael,

      wer bei Bildern auf Nummer sicher gehen will, sollte den Media Query einfach umdrehen. Das bedeutet zum Beispiel, Hintergrundbilder erst AB einer bestimmten Breite zu definieren.

      Dann werden sie auf kleineren Geräten nicht vorgeladen :)

      Viele Grüße,
      Torben

      • Bei Hintergrundbildern ist das eine gute Möglichkeit, aber bei normalen img-Tags natürlich nicht. Wie „schlimm“ ein paar unnötig geladene Bilder sind und ob sich eine alternative Lösung lohnt, hängt aber wie immer vom Einzelfall ab.

  2. Die Idee mit den umgedrehten Media Queries halte ich für eine sinnvolle Lösung, da gerade die großflächigen Hintergrundbilder viel Bandbreite fressen und nicht unbedingt vonnöten sind (siehe Abschnitt 1). Normal als img eingebundene Bilder hingegen haben i.d.R. schon einen recht wichtigen Informationsgehalt und sind nicht nur „Kosmetik“, von daher sollten diese i.d.R. auch angezeigt werden.
    Im Zweifelsfall muss man eben serverseitig im CMS eine Weiche stellen und herunterskalierte Versionen der img-Bilder für Smartphones ausgeben.
    Oder per Javascript bei Desktop PCs die niedrig aufgelösten Bilder durch höher aufgelöste austauschen lassen.
    VG
    Oliver

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.