Mobile First

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mobile First bezeichnet ein Vorgehen bei der Erstellung eines Layouts per CSS. Dabei wird erst das Layout für Mobilgeräte (bzw. Geräte mit einem kleinen Bildschirm) angepasst und erst danach die Anpassungen für Geräte mit größerem Bildschirm als letztes im CSS in einer Media Query notiert.

Dieses beruht auf folgenden Tatsachen:

  • Inhalte im Layout für kleine Bildschirme werden meist untereinander dargestellt.
  • Dies ist auch das Verhalten eines jeden Browsers bei einem HTML-Dokument ohne jegliches CSS.
  • Die Inhalte für einen großen Viewport werden oft nebeneinander angeordnet werden.

Es ist also zweckmäßig, als erstes die allgemein gültigen Definitionen und die für kleine Bildschirme ins CSS zu schreiben und dann erst in einer Media Query das CSS für große Bildschirme. Ansonsten bräuchte man entweder zwei komplett unterschiedliche Stylesheets oder würde erst alles für große Bildschirme in Spalten anordnen und dies dann für Geräte mit kleinem Bildschirm alles wieder rückgängig machen.

Mobile First bedeutet also keinesfalls, dass mobile Endgeräte bevorzugt werden, sondern, dass das Layout für mobile Geräte aus praktischen Gründen vor den Anpassungen für den Desktop in der CSS-Datei liegt.

Der Vorteil dieses Vorgehens liegt aber auch darin, dass ältere Browser ohne Unterstützung für Media Queries die Seite nicht gänzlich ungestylt darstellen, was der Fall wäre, wenn in separaten Media Queries das komplette CSS notiert wäre. Allerdings erhalten diese älteren Browser dann immer das Mobil-Layout, da sie keine Media Queries verstehen und die in einer solchen notierten Anweisungen ignorieren, was wiederum kein Problem ist, da der Anteil dieser Browser stetig sinkt und die Seite auch in diesen Browsern benutzbar ist, zumal sich unter diesen alten Browser auch Mobil-Browser befinden.