Responsive Webdesign Teil 1: Grundlagen

Responsive Webdesign ist ein Begriff, auf den Webdesigner heutzutage immer häufiger stoßen. Doch auch für den „Amateur“ kann Responsive Webdesign zukünftig immer mehr zum Thema werden. Dieser Artikel soll dir dabei die Grundlagen mit an die Hand geben. Ich zeige hier, was man unter Responsive Webdesign versteht und wie man es grundsätzlich einsetzt.

 

Was ist Responsive Webdesign?

Als Responsive Webdesign bezeichnet man ein Design, welches sich an der Größe des verwendeten Bildschirm oder Gerätes orientiert. Mit Hilfe von Media Queries kann man entsprechend unterschiedliche Stylesheets laden. Andersherum kann man auch innerhalb eines Stylesheets verschiedene Media Queries ansprechen.

So stellt man sicher, dass der Browser für unterschiedliche Geräte unterschiedliche Stylesheets heranzieht. Diese passen das Webdesign schließlich an, um den Seitenbesucher die Inhalte so optimal wie möglich darstellen zu können.

Auf der nachfolgenden Grafik sieht man dabei den Unterschied. Links ist die Website auf dem Desktop zu sehen, rechts hingegen auf dem Smartphone.

 

Responsive Webdesign bildlich dargestellt.
Unterschied zwischen Desktop- und Mobilvariante der Website (klicken zum Vergrößern).

 

Warum ist es sinnvoll, Responsive Webdesign zu betreiben?

Früher war alles viel einfacher. Websites wurden in Tabellen-Layouts aufgezogen und die maximale Breite einer Seite betrug 768 Pixel. Das lag dran, da 1024×768 Pixel mitunter die Standard-Auflösung auf vielen Monitoren war. Größere Monitore waren viel teurer als heute. So konnte man davon ausgehen, dass nur die wenigsten Besucher der eigenen Website größere Bildschirme hatten. Daher war das Webdesign vor einigen Jahren hauptsächlich starr aufgezogen, ohne jeglichen Spielraum für die einzelnen Elemente.

Auch das mobile Internet war noch vor nicht allzu langer Zeit meist von speziell angepassten Webseiten geprägt. Die mobile Variante einer Webseite war darüber hinaus um etliche Funktionen erleichtert und nur relativ eingeschränkt bedienbar. Man hat Inhalte für die Desktop- und Mobilvariante doppelt geschrieben.

Doch dank iPhone, iPad und Android hat sich diese Sichtweise geändert. Denn das mobile Web ist heutzutage allgegenwärtig. Und es ist – gerade dank Android – auch sehr vielfältig, was Breite und Höhe der Bildschirme in Pixel angeht. Und genau das ist der Punkt, an dem Responsive Webdesign einspringt. Denn hier erzeugt man für die verschiedensten Medien ein optimales Layout.

 

Praxisbeispiel:

Nehmen wir als Beispiel mal das Navigationsmenü. Auf einer klassischen Webseite befindet sich das Navigationsmenü meistens rechts oder links am Rand des Bildschirms. Der eigentliche Inhalt hingegen steht in der Mitte. Betrachtet man die gleiche Website nun auf einem Smartphone wird schnell klar, dass das Navigationsmenü an der Seite eher stört. Denn es nimmt unnötig Platz vom Inhalt weg. Der Browser stellt den eigentlichen Inhalt der Seite dann verkleinert dar.

Mit den Media Queries in CSS könnte man das Navigationsmenü anpassen. So wandert es auf kleinen Bildschirmen auf den oberen oder unteren Rand der Website. Auf Desktop-Bildschirmen hingegen bleibt es am Seitenrand stehen. Auch wäre es möglich, dass man statt des klassischen Navigationsmenüs eine Auswahlliste auf dem Smartphone einblendet.

Als Live Beispiel kannst du Webmasterparadies.de heranziehen. Betrachtest du es auf dem Desktop, kannst du das Browser-Fenster kleiner ziehen. Je nachdem, wie klein du es ziehst, verschwinden mehr Elemente am Rand und das Navigationsmenü verändert sich. Betrachtest du anschließend die Seite auf dem Smartphone wirst du feststellen, dass die Seite gleich aussieht.

 

Wie man das Responsive Webdesign grundsätzlich verwendet, erläutern die folgenden Punkte genauer.

 

Schritt 1: Keine festen Layouts verwenden

Wie bereits erwähnt, ist die Vielfalt der verschiedenen Auflösungen in den letzten Jahren stark gewachsen. Große Monitore sind günstig zu haben, passen aber nicht unbedingt in jedes Wohnzimmer. Ein Laptop hat in der Regel eine andere Auflösung als ein kleineres Netbook. Ein Tablet wiederum hat in aller Regel eine höhere Auflösung als ein Smartphone. Was die Auflösung angeht, ist Smartphone nicht gleich Smartphone. Das hat jeder selbst schon selbst feststellen können. Während High-End-Modelle mit Quad-HD werben, haben die Displays der Low-Budget-Phones nur sehr geringe Auflösungen.

Daher ist es sehr wichtig, sich von festen Layouts zu loszusagen und stattdessen lieber auf flexible Layouts zu setzen.

 

Schritt 2: Schriftgrößen flexibel gestalten

Damit der Fließtext auf deiner Webseite auch auf den unterschiedlichsten Geräten lesbar bleibt, sollte dieser ebenfalls flexibel gestaltet sein. So kann man Schriftgröße, Zeilenhöhe, Wortabstand, etc. im Responsive Webdesign per %-Angabe oder in der Einheit em angeben. 100% entspricht dabei 1em, was wiederum ca. 16 Pixel entspricht – je nach Einstellung im Browser des Benutzers.

 

Schritt 3: Media Queries

Damit Responsive Webdesign überhaupt funktioniert, kommen so genannte Media Queries zum Einsatz. Media Queries kennt man eigentlich schon seit Jahren. So kann man etwa die Druck-Ausgabe der Webseite über das gebräuchliche media-Tag steuern. Allerdings sind Media Queries viel flexibler, so dass mit Ihnen nicht nur bestimmte unterschiedliche Geräte angesprochen werden können. Mit den Media Queries lassen sich ganz bestimmte Einstellungen vornehmen. Nachstehende Features unterstützen die Media Queries dabei:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid

 

Media Queries werden von allen modernen Browsern unterstützt. Älteren Browsern kann man ebenfalls den Umgang mit Media Queries über ein JavaScript beibringen.

Ich hoffe, ich konnte Ihnen einen ersten Einblick in das Responsive Webdesign und dessen Bedeutung verschaffen. Aufgrung der Komplexität des Themas kann man natürlich nicht alles mit einem Artikel sagen. Daher habe ich zum Thema Responsive Webdesign eine Artikelreihe geschrieben. Im zweiten Teil der Reihe dreht sich alles um Media Queries.

Apropos Praxisbeispiele: Eine nette Galerie verschiedener Webseiten, die heute schon Responsive Webdesign einsetzen, findet man auf http://mediaqueri.es/. Wenn du dich also ein wenig inspirieren lassen möchtest, solltest du dort unbedingt mal reinschauen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.