WebWissen: Responsive Webdesign

Wer letzte Woche unseren Feierabend und damit auch meinen Vortrag verpasst hat, dem möchten wir heute die Möglichkeit geben das nachzuholen und sogar noch etwas mehr in die Tiefe des Themas einzusteigen.

Was bedeutet das überhaupt?

Der Begriff „responsive Webdesign“ wurde erstmals von Ethan Marcotte im Mai 2010 ins Leben gerufen und hat sich seitdem als Branchenstandard festgesetzt. Wortwörtlich übersetzt bedeutet responsive nichts anderes als reagierendes Webdesign. Das beschreibt es auch ganz gut wie ich finde und bedeutet, dass sich die Website an gewisse Umstände anpasst und reagiert. Genauer gesagt wird auf die Breite und Höhe des Browserfensters reagiert und Inhalte dementsprechend unterschiedlich dargestellt. Fälschlicherweise wird manchmal auch die Breite und Höhe des Endgerätes als Faktor genannt, das stimmt jedoch nur bedingt, nämlich wenn man das Browserfenster auf diesen Geräten nicht anpassen kann, wie zum Beispiel auf Smartphones oder einigen Tablets. Jedoch kann man auf vielen Geräten sein Browserfenster beliebig größer oder kleiner ziehen und darauf reagiert eine responsive Website.

Wozu brauche ich das?

Ganz einfach: mittlerweile gibt es zig verschiedene Geräte mit den unterschiedlichsten Auflösungen. Mit dem responsive Webdesign kann man eine grobe Einteilung in verschiedene Kategorien (Smartphone, Tablet, Desktop) und erreicht somit ein gelungenes Nutzererlebnis der Website für jede Zielgruppe.

Außerdem zeigt folgende Statistik, dass es nicht mehr lange dauert, bis die mobilen Endgeräte mit niedrigeren Auflösungen als deren große Geschwister bald die Überhand gewinnen. Im Jahr 2010 erfolgten ca. 97% aller Zugriffe auf das Internet vom Desktop aus, lediglich 3% stammen von Smartphone und Tablet. Doch seitdem nimmt die Bedeutung der Smartphones und Tablets stetig zu. Bereits in diesem Jahr erfolgen ein Drittel aller Zugriffe durch mobile Endgeräte. Es dauert nicht mehr lange bis die mobilen Endgeräte den Desktop PC überholt haben.

Responsive Webdesign: Statistiken
Quelle: http://gs.statcounter.com/#all-comparison-ww-yearly-2010-2015

Betrifft mich das überhaupt?

Ganz allgemein gesagt, betrifft das Thema jeden, der im Internet surft. Dabei gibt es zwei Sichtweisen:

Sicht des Nutzers

Aus Sicht des Nutzers muss eine Website optimal, egal von welchem Gerät aus, bedienbar sein und mir alle Informationen liefern, nach welchen ich suche. Es dürfen keine Informationen fehlen, nur weil mein Browserfenster nicht breit genug ist oder die Rechenleistung zu langsam für ein Feature ist. Wenn diese und andere Faktoren erfüllt sind hat die Website eine gute User Experience (UX).

Sicht des Website-Betreibers

Abgesehen von zufriedenen Besuchern durch gute User Experience sollte jeder, der eine Website betreibt und damit erfolgreich bei Suchmaschinen gefunden werden will, das Thema schleunigst in Angriff nehmen und seine Website mobil optimieren. Denn seit dem 21. April ist die mobile Optimierung bei Google auch ein Rankingfaktor.

Wie sieht das denn überhaupt aus?

Als Beispiel nehme ich einfach unsere eigene Seite:

Screenshot
Für alle Endgeräte optimiert: netzstrategen.com

Somit gewähren wir euch eine optimale Nutzererfahrung und werden auch bei mobilen Suchergebnissen besser gefunden.

Wie funktioniert das?

Mithilfe von CSS kann man sogenannte Media Queries angeben um bei bestimmten Größen des Browserfensters Elemente anders zu gestalten. Ein einfaches Beispiel:

h1 {
  text-transform: uppercase;
  font-size: 30px;
}
@media screen and (min-width: 500px) {
  h1 {
    font-size: 50px;
  }
}

Hier wird die Schriftgröße für eine Überschrift festgelegt, diese beträgt 30px. Wenn das Browserfenster jedoch mindestens 500px breit ist, dann beträgt die Schriftgröße 50px. Die Eigenschaft text-transform: uppercase; sagt aus, dass die Überschrift immer in Großbuchstaben dargestellt wird. Diese Reihenfolge ist auch wichtig und folgt dem Mobile First Prinzip. Hierbei werden zu erst die Eigenschaften für alle Geräte festgelegt, die ohne Media Query gelten und erst danach werden gegebenenfalls Eigenschaften überschrieben, wie in unserem Beispiel die Schriftgröße.

Fazit

Ich hoffe wir konnten euch das Thema ein wenig näher bringen und falls ihr Fragen habt, könnt ihr uns diese gerne in den Kommentaren stellen!

Alle Beiträge von Timo

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.