Responsive Design: CSS Flexbox und Media Queries

Worum geht´s?

In diesem CSS Tutorial lernen wir, was eine CSS Flexbox ist, wie man sie nutzt, um ein CSS Flexbox Layout zu erstellen, und welche große Bedeutung sie für responsives Webdesign hat. Außerdem lernen wir über CSS media Queries, und was der Mobile First Ansatz bedeutet.

1. Was bedeutet Responsive Design?

Der Begriff Responsive Design bedeutet im Webdesign, dass eine Website so gestaltet wird, dass sie sich an verschiedenste Geräte und vor allem Bildschirmgrößen anpasst – und auch auf allen gut funktioniert und aussieht.

Dazu gab es in den letzten Jahren zwei größere Strömungen, wie das zu bewerkstelligen sei:

• Mobile Versionen von Websites
• Flexboxen bzw. Grid Layout und Media Queries

1.1 Responsive Design durch mobile Versionen von Websites

Vor einigen Jahren gab es noch die Idee, Websites für jede mögliche Bildschirmauflösung bzw. auch jedes Gerät zu gestalten. Auch gab es den Ansatz – meist mit Hilfe von JavaScript – zu versuchen zu erkennen, welches Gerät der Website-Besucher verwendet.

Als nächstes wurde der Webseiten-Besucher dann auf eine entsprechend gestaltete mobile Version umgeleitet, meist gekennzeichnet durch ein „m.“ vor der eigentlichen Domain. Die bekannteren Beispiele für dieses Vorgehen im österreichischen Raum waren wohl Facebook (m.facebook.com) und willhaben (m.willhaben.at).

Dieser Zugang hat jedoch zwei große Nachteile:

• Es kommen immer wieder neue Geräte und Bildschirmauflösungen auf den Markt. Die Erkennungs-Mechanismen müssen entsprechend ständig angepasst werden – und z.B. braucht es dann für Tablets noch eine dritte Version der Website.
• Das Aktualisieren der Website wird immer umständlicher, je mehr verschiedene Versionen man warten muss

Deswegen wird dieser Zugang mit den mobilen Versionen von Websites nicht mehr viel verwendet.

Stattdessen haben sich Flexboxen, Grid Layout und Media Queries weitgehend durchgesetzt.

1.2 Responsive Design durch CSS Flexbox, Grid Layout und CSS Media Queries

Die CSS Flexbox ermöglicht es, den zur verfügung stehenden Platz auf recht einfache Weise mit Inhalten zu befüllen und diese Inhalte anzuordnen.

Mit einigen verschachtelten CSS Flexboxen lässt sich so sehr leicht ein CSS Flexbox Layout erschaffen, dass sich an Veränderungen an der Bildschirmgröße weitgehend selbstständig anpasst.

Die CSS Media Queries ermöglichen es, sogenannte „Breakpoints“ zu setzen, ab denen bei Veränderungen in der Fenstergröße automatisch auch Veränderungen im Aussehen einer Website passieren.

Eine der bekanntesten Techniken ist z.B. jene, dass Inhalte, die auf einem Desktop-Bildschirm nebeneinander angeordnet sind, auf der Handy-Version untereinander angeordnet werden.

Das CSS Grid Layout wiederum ist eine Art Weiterentwicklung der CSS Flexbox, das das Anlegen von 2D-Layouts nochmal erleichtert.

Mit Hilfe dieser drei Techniken lässt sich mit relativ einfachen Mitteln eine Website erstellen, die sich an jede denkmögliche Bildschirmgröße automatisch und optimal anpassen kann.

Es ist dabei nicht notwendig zu wissen, um welches Gerät es sich handelt – einzig relevant ist, welche Bildschirmgröße es aufweist.

Und da die CSS Flexbox und CSS Media Queries nur vergleichsweise kurze „Anmerkungen“ auf der bestehenden Website sind, müssen auch nicht mehrere Versionen dieser Website erstellt und gewartet werden.

Kein Wunder, dass diese Technik sich mittlerweile fast überall durchgesetzt hat.

Aber wie funktioniert nun diese CSS Flexbox und die CSS Media Queries?

Beginnen wir mit der CSS Flexbox:

2. Responsives Webdesign mit der CSS Flexbox

Eine CSS Flexbox stellt immer eine Art Beziehung zwischen mindestens 2 HTML-Elementen dar.

Ein HTML-Element ist dabei immer das Eltern-Element, und alle anderen HTML-Elemente in der Beziehung sind die Kind-Elemente.

Ein HTML-Element kann immer nur dann ein „Kind“ eines anderen sein, wenn das übergeordnete ein HTML-Element ist, das ein öffnendes und ein schließendes HTML-Tag besitzt.

Ein <div>-Tag oder ein <p>-Tag kann damit als CSS Flexbox gut funktionieren, ein <img>-Tag nicht, weil man in ein <img>-Tag nirgends andere HTML-Tags als seine „Kinder“ hineinschreiben kann.

Nehmen wir für ein erstes Beispiel mal an, wir haben ein DIV mit der ID „mama“ und 3 andere DIVs darin mit der Klasse „baby“ in unserer index.html:

<div id="mama">
    <div class="baby"></div>
    <div class="baby"></div>
    <div class="baby"></div>
</div>

Außerdem geben wir unseren schönen DIVs noch eine Breite, Höhe, Hintergrundfarbe und einen Rahmen, damit wir besser sehen können, was passiert:

#mama {
  width: 50%;
  height: 300px;
  background-color: orange;
}
.baby {
  width: 30px;
  height: 40px;
  background-color: red;
  border: 3px solid purple;
}

Das Ergebnis sollte in etwa so aussehen:

Wenn wir nun bei unserem mama-DIV den Befehl display: flex; hinzufügen, so wird unser mama-DIV zu einer Flexbox. Im CSS-Code sieht das dann so aus:

#mama {
  width: 50%;
  height: 300px;
  background-color: orange;
  display: flex;
}

Dann werden unsere baby-DIVs nebeneinander angeordnet:

Das passiert deswegen, weil eine CSS Flexbox so voreingestellt ist, dass sie ihre Kinder-Elemente waagrecht – also von links nach rechts – anordnet.

2.1 Die CSS Flexbox Ausrichtung ändern mit flex-direction

Wenn wir unserem CSS den Befehl flex-direction: column; hinzufügen, ändert sich die Hauptachse der Flexbox von waagrecht zu senkrecht (die Breite wurde hier auch etwas auf 500px reduziert, damit man die Screenshots der Ergebnisse besser sehen kann):

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: column;
}

Das Ergebnis:

Mit flex-direction: row; lässt sich die Hauptachse der CSS Flexbox dann wieder auf waagrecht zurückstellen, falls gewünscht.

Sehen wir uns als nächstes an, wie eine CSS Flexbox auf der jeweiligen Hauptachse schön angeordnet werden kann:

2.2 Die Anordnung der Kinder einer CSS Flexbox auf der jeweiligen Hauptachse ändern mit justify-content

Mit dem CSS-Befehl justify-content: center; lassen sich die Kinder-Elemente einer CSS Flexbox auf der Hauptachse (row oder column) in die Mitte stellen. Die Hauptachse wurde hier mit flex-direction: row; wieder auf eine waagrechte zurückgestellt:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Die drei Kinder-Elemente verschieben sich entsprechend in die Mitte:

Mit dem Befehl justify-content lassen sich noch weitere Einstellungen treffen – hier die wichtigsten:

• flex-start: Kinder-Elemente am Beginn anordnen
• flex-end: Kinder-Elemente am Ende anordnen
• center: Alle mittig platzieren, wie im Bild oben
• space-between: Möglichst viel Platz zwischen den Kinder-Elementen
• space-evenly: Möglichst gleichmäßige Platzverteilung zwischen und um die Kinder-Elemente
• space-around: Möglichst gleichmäßige Platzverteilung zwischen und um die Kinder-Elemente (außen weniger Platz wie dazwischen)

Besonders nützlich ist unter Anderem der Wert „space-between“, vor allem wenn man nur 2 Kinder-Elemente hat (entferne dazu das mittlere Kinder-Element aus deiner .html-Datei!). Dann werden diese nämlich links und rechts am Rand angeordnet – praktisch z.B. wenn man im Header-Bereich links ein Loge und rechts Menüpunkte haben will:

Was aber, wenn wir z.B. mehrere Links auf der rechten Seite haben wollen?

Dann geben wir diese Links in ein einziges HTML-Element, das als Container dient, z.B. eine <ul>-Liste – was übrigens der Standard für Menü-Links ist.

Achtung: Wenn die flex-direction: column eingestellt ist, verändert justify-content nicht die waagrechte Aufteilung, sondern die senkrechte. Es wird immer die Hauptachse verändert.

2.3 Die Anordnung der Kinder der CSS Flexbox auf der Nebenachse ändern mit align-items

Unsere wunderbaren CSS Flexboxen ermöglichen es uns freundlicherweise auch, die Anordnung auf der Nebenachse zu verändern.

Der Klassiker dabei ist align-items: center; und sieht in unserer style.css dann z.B. so aus:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

Als Resultat sehen wir die Kinder-Elemente vertikal zentriert angeordnet:

Auch hier gibt es wieder einige Möglichkeiten, die wir treffen können:

• flex-start: Am Anfang der Achse, also in unserem Fall ganz oben
• flex-end: Am Ende der Achse, in unserem Fall ganz unten
• center: In der Mitte, siehe Bild oben
• stretch: Strecke das Kind-Element, so dass es alles (in unserem Fall von oben nach unten) ausfüllt
• baseline: Ordne alles so an, dass der Text in den Kinder-Elementen auf einer Linie ist (interessant bei verschiedenen Schriftgrößen)

Am häufigsten wirst du wahrscheinlich flex-start, flex-end und center verwenden.

Achtung: Wenn die flex-direction: column eingestellt ist, verändert align-items nicht die senkrechte Aufteilung, sondern die waagrechte. Es wird immer die Nebenachse verändert.

Was, wenn wir die Kinder-Elemente zentrieren wollen, aber mit einem Abstand dazwischen?

Das führt uns zum gap-Befehl

2.4 Abstände zwischen Kinder-Elementen in der CSS Flexbox definieren mit gap, row-gap und column-gap

Wenn wir z.B. mit justify-content: center; gearbeitet haben, sind unsere Kinder-Elemente doch sehr eng zusammen.

Wollen wir einen Abstand einfügen, so können wir das mit den CSS-Befehlen gap, row-gap und column-gap tun:

• gap: Fügt Abstände zwischen Kinder-Elementen in beiden Achsen ein
• row-gap: Fügt nur zwischen Zeilen Abstände ein (Abstände auf vertikaler Achse)
• column-gap: Fügt nur zwischen Spalten Abstände ein (Abstände auf horizontaler Achse)

Hier der Codeblock dazu:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}

Und hier das Ergebnis:

2.5 Die Größe von Kinder-Elementen einer CSS Flexbox bestimmen mit flex-basis, flex-grow und flex-shrink

Man kann innerhalb einer CSS Flexbox zwar auch mit dem CSS-Befehl width arbeiten, aber es gibt da noch etwas besseres: flex-basis.

Mit dem CSS-Befehl flex-basis kann eine ursprüngliche Breite eines HTML-Elements festgelegt werden. Basierend auf dieser ursprünglichen Breite, den Einstellungen, was Wachstum und Schrumpfen von CSS-Elementen angeht und der zur Verfügung stehenden Größe, wird dann vom Browser die tatsächliche Breite errechnet.

Der CSS-Befehl flex-shrink legt fest, ob ein HTML-Element schrumpfen darf, und wenn ja, in welchem Verhältnis.

Der CSS-Befehl flex-grow hingegen legt das Gleiche fürs Wachsen fest.

Wenn wir z.B. wollen, dass die Kinder-Elemente zwar wachsen dürfen, aber niemals schrumpfen, können wir das so erreichen:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}
.baby {
  height: 40px;
  background-color: red;
  border: 3px solid purple;
  flex-basis: 30px;
  flex-grow: 1;
  flex-shrink: 0;
}

Im Ergebnis sehen wir, dass unsere baby-DIVs nun den ganzen verfügbaren Raum einnehmen, weil sie wachsen dürfen – außer den im mama-DIV eingestellten gap:

Wollen wir, dass eines der baby-Elemente 3x so schnell anwächst wie das andere, so können wir das so erreichen:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}
.baby {
  height: 40px;
  background-color: red;
  border: 3px solid purple;
  flex-basis: 30px;
  flex-grow: 1;
  flex-shrink: 0;
}
.baby:nth-child(2) {
  flex-grow: 3;
}

Das rechte Kinder-Element ist nun definit größer als das linke, wie wir im Ergebnis sehen können:

Warum aber ist die rechte Box nicht genau 3x so groß wie die linke?

Das liegt daran, dass beide ja die gleiche flex-basis von 30px hatten. Ausgehend von dieser gleichen Basis durften beide im Verhältnis 1:3 wachsen.

Wollen wir, dass das rechte Kinder-Element wirklich genau 3x so groß ist als das linke, müssen wir auch die flex-basis entsprechend anpassen:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}
.baby {
  height: 40px;
  background-color: red;
  border: 3px solid purple;
  flex-basis: 10px;
  flex-grow: 1;
  flex-shrink: 0;
}
.baby:nth-child(2) {
  flex-basis: 30px;
  flex-grow: 3;
}

Der Unterschied ist nicht groß, aber sichtbar:

Das gleiche Prinzip mit den Verhältnissen lässt sich auch bei flex-shrink anwenden.

Da eine CSS-Flexbox unidirektional funktioniert, das heißt es gibt immer eine Hauptachse, wächst sie nur auf dieser mit flex-direction eingestellten Hauptachse.

2.6 Eine CSS Flexbox über mehrere Zeilen gehen lassen mit flex-wrap

Standardmäßig versucht eine Flexbox, ihre Inhalte immer in einer Zeile zu belassen – alle Kinder-Elemente bleiben also in einer einzigen Zeile.

Wollen wir das ändern, so können wir den CSS-Befehl flex-wrap dazu benutzen – der gehört allerdings dann wieder zum Eltern-Element, in unserem Fall dem mama-DIV:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}

Für flex-wrap können mehrere Werte eingesetzt werden:

• wrap: erlaube mehrere Zeilen
• nowrap: erlaube auf keinen Fall mehrere Zeilen
• wrap-reverse: erlaube mehrere Zeilen, und drehe die Reihenfolge der Kinder-Elemente um

Ist also flex-wrap: wrap; eingestellt, so „springen“ Kinder-Elemente in die nächste Zeile, wenn für sie sonst kein Platz mehr in der einen Zeile ist.

2.7 Die Reihenfolge der Kinder-Elemente einer CSS-Flexbox anders anordnen mit dem CSS-Befehl order

Für den Fall, dass man die natürliche Reihenfolge der Kinder-Elemente innerhalb einer Flexbox verändern will, kann man den einzelnen Kinder-Elementen mit dem CSS-Befehl order eine alternative Reihenfolge zuweisen:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.baby {
  height: 40px;
  background-color: red;
  border: 3px solid purple;
  flex-basis: 10px;
  flex-grow: 1;
  flex-shrink: 0;
  order: 3;
}
.baby:nth-child(2) {
  flex-basis: 30px;
  flex-grow: 3;
  order: 1;
}

Als Ergebnis werden die Kinder in unserem Fall in der Reihenfolge umgedreht:

Ein kleiner Tipp noch: Die Website CSS-Tricks bietet eine – wie wir finden – sehr gelungene Zusammenfassung des CSS Flexbox Themas unter diesem Link.

3. Wie man CSS Flexboxen zu einem CSS Flexbox Layout zusammenbaut

Im Grunde lässt sich das komplette Layout einer Website relativ einfach mit einigen ineinander verschachtelten Flexboxen umsetzen – manche davon waagrecht, andere senkrecht angeordnet.

Der Footer einer Website mit mehreren Spalten könnte z.B. aus einer waagrechten Flexbox bestehen, in denen die einzelnen Spalten jeweils senkrecht angeordnet sind. Mit Hilfe von justify-content: space-around; und column-gap: 100px; sehen die Spalten schonmal recht gut aus.

Du möchtest im Haupt-Bereich deiner Website einen Text-Teil und daneben eine Art Sidebar, wo man sich zum Newsletter anmelden kann? Die CSS-Befehle flex-basis, flex-grow und flex-shrink ermöglichen es dir, unabhängig von der Fenstergröße z.B. ein 2:1-Verhältnis aufrechtzuerhalten.

Diese relativeMeister-Seite z.B. basiert zu ca. 80% auf CSS Flexboxen – damit dir klar wird, wie mächtig und hilfreich diese tatsächlich sind.

Für bestimmte Arten von Layouts kann es auch Sinn machen, statt CSS Flexboxen (bzw. zusätzlich zu ihnen) das CSS Grid Layout zu verwenden. Es funktioniert recht ähnlich, nur ohne Haupt- und Nebenachse, sondern von vornherein 2-dimensional. Aber das soll Inhalt eines weiteren Tutorials sein.

Was uns jetzt noch fehlt, um eine wunderbar responsive Website zu erstellen, sind CSS Media Queries:

4. Breakpoints im Responsive Design setzen mit CSS Media Queries

Unsere CSS Flexbox ermöglicht uns zwar schon einen großen Teil unseres Responsive Designs, aber etwas fehlt noch: Die Möglichkeit, direkt auf verschiedene Fenster-Größen zu reagieren.

Das ermöglichen uns sogenannte Breakpoints mit Hilfe von CSS Media Queries.

Im Grunde funktionieren sie ähnlich wie IF-Statements aus anderen Programmiersprachen, also nach dem Prinzip WENN (Bedingung erfüllt) DANN { mach dieses }.

Lass uns z.B. mal eine Media Query anlegen, die die Hintergrundfarbe des mama-DIVS von vorhin ändert, sobald die Fensterbreite kleiner als 700px wird:

#mama {
  width: 500px;
  height: 300px;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.baby {
  height: 40px;
  background-color: red;
  border: 3px solid purple;
  flex-basis: 10px;
  flex-grow: 1;
  flex-shrink: 0;
  order: 3;
}
.baby:nth-child(2) {
  flex-basis: 30px;
  flex-grow: 3;
  order: 1;
}

@media only screen and (max-width: 700px) {
  #mama {
    background-color: blue;
  }
}

Das Ergebnis, wenn das Fenster klein genug wird:

Das Prinzip dabei funktioniert so, dass die Zeile mit dem @media sozusagen das IF mit der entsprechenden Bedingung darstellt („ist die maximale Breite nicht mehr als 700px?“).

Ist die Bedingung erfüllt, so wird alles, was innerhalb der {}-Klammern zu finden ist, ausgeführt.

Am besten kopierst du den obigen Code in deine style.css und probierst selbst aus, was passiert, wenn du das Fenster kleiner machst.

4.1 Was die einzelnen Begriffe bei den CSS Media Queries bedeuten (Syntax-Erklärung)

Hier eine kurze Begriffs-Klärung:

• @media: Signalwort, das hier eine CSS Media Query beginnt
• only: Falls ein Website-Besucher noch den Internet Explorer benutzt, werden CSS Media Queries ignoriert, weil der Internet Explorer die nicht beherrscht.
• screen: Nur für Bildschirme (hier könnte auch „print“ stehen, wenn man z.B. ein seperates CSS für Druckversionen haben will).
• and: Verknüpfung von Bedingungen. Es ist auch „or“ möglich, und man kann mehrere Bedingungen verknüpfen
• (max-width: 700px): Die Bedingung, dass dieser Teil nur angewendet wird, wenn das Fenster maximal 700px breit ist. Es gibt u.A. auch:
  • max-height
  • min-width
  • min-height
  • orientation (mit „portrait“ oder „landscape“)
• {}: von hier bis hier wende an, was kommt

4.2 Wie CSS Media Queries funktionieren

Innerhalb des CSS Media Queries kann ein oder können mehrere CSS-Selektoren stehen. Was also auch möglich ist:

@media only screen and (max-width: 700px) {
  #mama {
    background-color: blue;
  }
  .baby {
    background-color: green;
  }
}

Es ist möglich – und sinnvoll – mehrere CSS Media Queries zu benutzen, um sogenante Breakpoints zu setzen. Ein Breakpoint bestimmt, ab welcher Breite/Höhe einer Fenstergröße Veränderungen im Aussehen einer Website passieren sollen.

Ein sehr häufig benutzte Methode in Kombination mit einer CSS Flexbox ist die, die Hauptachse einer Flexbox zu verändern, wenn das Fenster zu klein wird, um die waagrechte Hauptachse schön anzeigen zu können:

@media only screen and (max-width: 700px) {
  #mama {
    background-color: blue;
    flex-direction: column;
  }
  .baby {
    background-color: green;
  }
}
@media only screen and (max-width: 1000px) {
  #mama {
    flex-direction: column;
  }
}

4.3 Wo du CSS Media Queries in deiner .css-Datei setzen solltest

Das Wo ist bei CSS Media Queries nicht ganz unwichtig – setzt du sie an der falschen Stelle, kann es sein, dass sie nicht richtig funktionieren.

Am besten ist es, du fügst sie am Ende deiner .css-Datei ein.

Einerseits hat das technische Vorteile (sie funktionieren mit größerer Wahrscheinlichkeit), andererseits auch Vorteile in der Übersicht. Wenn deine .css-Dateien mal mehrere Hunderte oder sogar Tausende Zeilen haben, ist es gut zu wissen, dass man zumindest manches schnell wiederfindet 😉

4.4 Wie finde ich die besten Breakpoints für meine CSS Media Queries?

Für lange Zeit war es üblich, sich hierbei an Bildschirmgrößen der am häufigsten verwendeten Geräte zu orientieren, z.B. 1024×768.

Mittlerweile hat sich aber der Ansatz durchgesetzt, die Breakpoints auf den Inhalten zu basieren.

Sobald beim Verkleinern des Browserfenster ein Teil des Inhaltes nicht mehr gut aussieht (z.B. weil er einen anderen Inhalt zu überdecken beginnt), wird ein entsprechender Breakpoint mit CSS Media Queries erstellt.

So kann das entsprechende Element dann z.B. mit display: none; auf unsichtbar gestellt, in seiner Größe verändert oder in der Hauptachse verändert werden.

4.4.1 Breakpoints für CSS Media Queries finden mit dem Webseiten-Inspektor

Du kannst den Webseiten-Inspektor deines bevorzugten Browsers verwenden, um die jeweiligen Größen des Browserfensters herauszufinden, ab denen deine Website „Probleme bekommt“. Einfach groß starten, und das Browserfenster immer kleiner werden lassen.

Sobald etwas seltsam aussieht, schaust du nach, wie groß das <body>-Tag ist, und setzt einen entsprechenden Breakpoint.

4.4.2 Breakpoints für CSS Media Queries finden mit der mobilen Ansicht des Webseiten-Inspektors

Alternativ kannst du auch mit Hilfe der Mobile-Ansicht im Webseiten-Inspektor die entsprechenden Breakpoints finden.

Klicke dazu im Webseiten-Inspektor auf das entsprechende Icon (siehe Pfeil in orange im Bild):

Es gibt auch noch einen anderen, radikalen Ansatz, den du kennen solltest: Mobile first.

5. Der Mobile First Ansatz, und warum du ihn kennen solltest

Es gibt seit vielen Jahren einen deutlichen Trend hin zu mehr Website-Besuchern, die eine Website über ihr Handy bzw. teilweise auch Tablet besuchen (wobei letzteres noch relativ vernachlässigbar ist).

Die allgemeinen Statistiken zu dem Thema sagen, dass die mobile Website-Nutzung die am Desktop mittlerweile deutlich überholt hat, und auch die langfristigen Statistiken unserer anderen Website, www.bunterrichten.com, zeichnen ein ähnliches Bild: 53% Smartphone-Besucher vs. ca. 43% Desktop-Besucher (der Rest, ca. 4%, sind Tablets, Phablets und sonstige Geräte).

Das bedeutet, dass es mittlerweile wichtiger ist, dass deine Website auf dem Handy gut aussieht und funktioniert, als auf dem Desktop-Computer.

5.1 Was bedeutet also Mobile First? Was sind die Vorteile von Mobile First?

Der Mobile First Ansatz setzt genau da an.

Er sagt, dass man Websites in Zukunft in erster Linie fürs Handy designen sollte. Und dann, wenn diese Version gut funktioniert, kann man sich überlegen, was man für die Desktop-Version noch zusätzlich anbieten will.

Man hat zwar mehr Platz auf einem größeren Bildschirm, aber nicht immer ist der besser genutzt.

Der Mobile First Ansatz hat den nicht zu unterschätzenden Vorteil, dass die Chance geringer ist, sinnlosen Ballast auf die Website zu packen.

Außerdem sind Websites, die mit dem Mobile First Ansatz designed wurden, oft leichter zu warten, und laden oftmals schneller (eben weil weniger Ballast).

Es gibt aber auch Ausnahmen.

5.2 Ausnahmen, bei denen der Mobile First Ansatz eher kontraproduktiv ist

Wer beispielsweise programmieren lernen will, wie viele Besucher dieser Website, wird das mit großer Wahrscheinlichkeit eher nicht auf einem Handy tun.

Entsprechend sehen die Statistiken derzeit aus: Smartphone-Besucher machen derzeit noch <10% aller Besucher dieser Website aus.

Hier macht es durchaus Sinn, zuerst für den größeren Bildschirm zu designen.

Es kommt also zuallererst auf die Zielgruppe an, die unsere Website am wahrscheinlichsten nutzen werden.

Wer sind diese Menschen? Was sind ihre Gewohnheiten? Was ihre Hindernisse, was ihre Stärken?

Anfangs kann man da oft nur Vermutungen treffen und hoffen, dass man richtig liegt.

Dann aber geht es darum, mit Hilfe von Website-Statistiken herauszufinden, ob man richtig lang – und wenn nicht, seine Fehler zu korrigieren.

Stellt sich beispielsweise heraus, dass mit der Zeit überraschend viele Website-Besucher die relativeMeister-Seite über ihr Handy besuchen, wird es wichtig sein, die Handy-Version stark in den Fokus zu legen.

Responsive Design ist immer auch ein fließender Prozess – aber auch sehr spannend 🙂

Diskussion zum Tutorial