Mobile First Ansatz erklärt – Mit Beispiel.

Das Beispiel befindet sich hier. Bootstrap Beispiel befindet sich hier.
Der Quellcode kann auf der GitHub Repository angeschaut werden. Die Erklärungen befinden sich am Ende dieses Blogbeitrags.

Als Frontend Entwickler im Bereich Web erlebe ich immer wieder, dass Begriffe wie Mobile First, Responsiv oder Progressive Web Apps in falscher Kontext verwendet werden. Das liegt größtenteils daran, dass die Zugehörigkeit und die Zusammenarbeit der genannten Ansätze nicht ganz klar ist.

Es befinden sich im Netz ausreichend Informationen zu den einzelnen genannten Begriffen. Die Abhängigkeiten und Schnittmengen werden vergleichsweise gar nicht oder nicht ausreichend behandelt; und das, obwohl Responsivität und Progressive Web Apps direkt in die Hände von Mobile First Ansatz spielen.

Historische Entwicklung

Warum Ansätze wie Mobile First notwendig wurden, kann sehr kurz zusammen gefasst werden: Mobile Endgeräte wurden wichtig. Laut einer Studie von StatCounter stammen 55% der weltweiten Seitenaufrufe in Jahr 2018 von mobilen Endgeräten (Tablets & Handies).¹

Die Langform lautet: „Ganz früher“ waren die Webseiten auf Desktop zugeschnitten. Da es viel Platz gab und dazu das Internet vergleichsweise auch schnell war, neigten die Betreiber dazu, die Seiten zu überladen.

Mitte 2007 stellte Steve Jobs iPhone vor. Andere Hersteller folgten den Trend (oder auch nicht, R.I.P Ericson) und führten ihre eigenen Smartphones in den Markt ein. Das Internet wurde zugänglicher. Diesmal aber in Kleinformat. Die Webseitenbetreiber haben also die vorhandenen Webseiten versucht, auf Handybildschirm zu reduzieren. Beim Verkleinern wurde allerdings bemerkt, dass die Seiten zu überladen waren. Einige Inhalte mussten weggeschmissen werden. So erlebten aber die Seitenbesucher auf den mobilen- und Desktopversionen der Webseiten (m.hostname.de) erheblich differenzierenden Benutzererfahrung.

Anschließend haben die Betreiber sich entschieden, die gleiche Seite für Desktop und Mobile zusammen zu verwenden. Durch Breakpoints haben die Elemente je nach Endgerät unterschiedliche Attribute bekommen. Das löste zwar das Problem, dass die User Experience in Mobile und Desktop unterschiedlich waren. Trotzdem blieb es dabei, dass Mobile User Experience durch überladene Desktopseiten leidete.

So entwickelte sich iterativ Mobile First Ansatz.

Was ist Mobile First Ansatz?

Zunächst ein mal, Mobile First bedeutet nicht, dass Desktopvariante ignoriert/vernachlässigt wird. Das ist tatsächlich ein sehr verbreiteter Irrglaube. Viel mehr werden in Mobile First Ansatz die Arbeitsschritte des Designs, der Entwicklung und des Testings zuerst auf mobile Ansicht einer Applikation angewendet wird.

Mobile First Design

Da in Mobile der Platz begrenzt ist, müssen sich die Web-Designer auf die essenziellen Elemente konzentrieren. Sonst passiert genau das, was verhindert werden sollte: dass die Webseite überladen wird und die Usability darunter leidet. Somit beschäftigen sich die Designer mit folgenden Fragen²:

• Was ist der zentrale Aspekt meiner Seite?
• Welche Elemente meiner Website sind für das Webdesign unbedingt nötig?
• Welche Bereiche sollen unbedingt auf Desktops und mobilen Endgeräten funktionieren?
• Für welche Bildschirmgröße sind meine Inhalte ausgelegt?

Mobile First Entwicklung

Die Anwendung von Mobile First auf ihre Webseite hört nicht bei Design auf. Auch die Frontend Entwickler müssen einige Schritte in ihrem Arbeitsablauf aufnehmen. Primär gehören dazu:

• Umsetzung der Designdokumente von Mobile auf Desktop.
• Beachtung der Bedienungseigenheiten in Mobile Welt
• Optimierung der Ressourcen

Umsetzung der Designdokumente

Als Frontend-Entwickler bekommen wir häufig von den Agenturen eine PDF-Datei pro einzigartige Seite geliefert. Beispielsweise würde eine Agentur für stefankosker.com die Startseite und Blog-Seite in einzigartigen PDF-Dateien liefern. Diese Dateien sind allerdings Projektspezifisch. Aus diesem Grund darf ich keine der PDFs, die mir zur Verfügung stehen, hier teilen. Für das Verständnis aber sehen sie ungefähr so aus:

So ungefähr sehen die Inhalte der PDF-Dateien aus. Wenn wir Glück haben, stehen die einzelne Viewports auch nebeneinander und sind ausreichend detailliert. Die Qualität dieser Dokumente variieren nämlich je nach Designagentur sehr stark. Alternativen und Arbeitsweise mit solchen Dokumenten werde ich später tiefer erläutert.

Konsequenterweise setzen die Entwickler bei der Mobile First Ansatz zuerst die mobile Version der Seite um. Für größere Bildschirme passen die Entwickler lediglich die Styleattribute der Elemente in dazugehörigen CSS Dateien an (Siehe Beispiel)

Bedienung in Mobile Welt

Wir Entwickler müssen uns bei der Umsetzung von responsiven Seiten auf einige Usability-Regeln einhalten. Diese Regeln sind historisch durch die Gewohnheit der Benutzer auf kleineren Geräten gewachsen.
Dazu gehören Beispielsweise:

• Auf mobilen Endgeräten existiert (in der Regel) keine Hover, Focus oder ähnliche Effekte.
• Mobile Benutzer sind daran gewöhnt, Vertikal zu Scrollen. Keiner erwartet aber ein horizontaler Scrollverhalten. Dementsprechend müssen die Entwickler bei der Vergabe der Elementbreiten darauf achten.
• Call-to-Action Buttons, die rechts unten platziert sind, werden häufiger geclicked. ³ Das fällt bei mobilen Endgeräten wegen der Positionierung der Daumen der Rechtshänder noch schwerer ins Gewicht. Nicht umsonst schreibt Apple in MacOS Guideline diese Positionierung vor ⁴
• Der rechte Mouseclick ist in Web nicht intuitiv. Auf mobilen Endgeräten ist dieser noch weniger verbreitet, da die Benutzer die Taste lange gedrückt halten müssen. Zusätzlich dazu ist das gedrückt halten sowohl auf iOS als auch auf Android reserviert.

Optimierung der Ressourcen

Die Optimierung der Webseite ist in Mobile First Projekten sehr wichtig. Trotzdem vernachlässigen Entwickler diesen Punkt sehr häufig (oder müssen vernachlässigen, da das Projektbudget oder -zeit nicht ausreicht)

Auf Webseiten mit sehr vielen Bilder ist die Skalierung der Bilder enorm wichtig. Einige CMSe komprimieren und skalieren die Bilder automatisch und liefern je nach Endgerät die optimale Bildgröße. Eine weitere etablierte Methode ist die sogenannte Lazy Loading. Dabei werden Inhalte nur dann geladen, wenn sie wirklich angezeigt werden sollen. Diese asynchrone Lademethode wird primär bei Bildern verwendet.

Zuletzt trennen manche Entwickler die Style (CSS) und JavaScript Dateien nach Viewports, somit sie je Endgerät kleiner werden. Anschließend werden die fehlenden Dateien für die dazugehörige Bildschirmgröße nachgeliefert. Das ist allerdings nicht weit verbreitet, da diese beide Ressourcen in der Regel recht klein sind (WordPress-Seiten mit manchen Themes ausgenommen, die sind teilweise riesig)

Mobile First Testing & SEO

Es ist nur konsequent, die Webseiten, die mobile first umgesetzt wurden auch auf der mobilen Port zu testen. Dabei sind die Frontend-Tests und E2E Tests gemeint. Neben der Einhaltung der Hierarchie gibt es aber ein weiterer wichtiger Grund: SEO.

In April 2018 hat Google bekannt gegeben, dass die Indexierung der Seiten nicht mehr über den Desktopversion laufen wird⁵. Der Grund war simpel: Die Mobilvarianten der Webseiten haben häufig weniger Funktionalität angeboten als ihre Desktopvariante.

Damit es sichergestellt werden kann, dass die Indexierung auch die richtigen Inhalte bekommt, ist es sinnvoll, die Frontend Tests auf die mobile Variante der Seite laufen zu lassen. Dadurch werden die Fehler auf der Seite abgefangen, ehe Google eine fehlerhafte Seite indexiert und diesen für die Suche bereitstellt.

Vorgehensweisen für die Entwickler

Frontend-Design Export Tools

Fakt ist, dass die PDF-Dateien keine sonderlich gute Möglichkeit darstellen, die Spezifikation der Masken den Entwicklern lückenlos mitzuteilen (Trotzdem unendlich mal besser als die telefonischen Mitteilungen der Kunden / Agenturen, wie die Elemente aussehen sollen — Leider gar nicht mal so selten). Aus diesem Grund etablierten sich Tools wie Adobe XD, Zeplin.io oder Sketch. Hier können die Designer eine interaktive Version des Designdokuments für die Entwickler zur Verfügung stellen. Diese Dokumente können ebenfalls eine CSS Datei exportieren, ich rate aber sehr stark davon ab! (Insbesondere bei Mobile First Projekte). Die Wartung des generierten Codes ist nicht intuitiv. Viel mehr aber sind die generierten CSS Dateien übermäßig Groß (Bei einem Kundenprojekt in 2018 generierte Adobe XD eine CSS Datei für eine Single-Page-Applikation eine CSS Datei mit der Größe um die 4 MByte)

Viewport

Viewport ist die sichtbare Bereich des Benutzers auf einer Webseite. ⁶ Stand Heute werden die Webseiten-Masken für vier verschiedene Viewports definiert. Diese Viewpoints sind gültig innerhalb der definierten Breakpoints. Diese werden in Pixelanzahl angegeben und beschreibt in der Regel die Breite des Bildschirms, kann aber beliebig wie folgt definiert werden.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wenn ein Breakpoint überschritten (oder unterschritten) wird, tretet der für diese Größe definierte Design Inkraft. Der Wert der Breakpoint kann beliebig angegeben und nach Bedarf angepasst werden. Responsive Design Frameworks wie Bootstrap und Material (Material UI für React und Angular Material für Angular) geben folgende Breakpoints vor:

^{7 8}

Es existiert, wie oben geschildert, keine einheitliche Definition der Breakpoints. Beispielsweise definiert Material Extra Large Viewports als Bildschirme, die mehr als 1920 px Breite haben. Bei Bootstrap fängt die Definition von XL schon bei 1200 px an. Ebenfalls können die Entwickler nach Belieben die Breakpointgröße auf ihre Bedürfnisse anpassen. Von Entwickler definierte Breakpointgrößen kommen häufig in Intranets oder gerätabhängige Anwendungen zum Einsatz.

Media Queries

Media Queries sind Selektoren, die innerhalb der CSS verwendet werden können. Durch die Anwendung von Media Queries können die Entwickler die Darstellung in unterschiedliche Ausgabemedien manipulieren.⁹ Dabei kommen häufig Attribute wie Höhe und Breite, Pixeldichte (dpi) und Auflösung zum Einsatz.

In responsiv Design werden sie häufig verwendet, um die CSS Attribute der Elemente, je nach Viewport, anzupassen.

@media only screen and (min-width: 768px) {
.my-element {
display: none;
}
}

• @media beschreibt die Media Query aufruf
• only screen sagt an, dass diese Änderungen lediglich auf Bildschirmanzeige übernommen werden sollten. Weitere Möglichkeit wäre print welches bei Druckvorgängen in Kraft tretet.
• (min-width: 768px) beschreibt, dass diese Änderungen lediglich bei Bildschirmgrößen auftreten soll, die über 768 px breit sind.

Beispiel und dessen Erkärung

Das Beispiel befindet sich unter folgenden GitHub Repository. Das ganze Responsivität spielt sich innerhalb der index.html und dazugehörige CSS Dateien.

In index.html wird in head zunächst der Viewport definiert.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Unterschiedliche Inhalte für Viewports

Die Kombination von Media Queries und CSS Klassen sorgt dafür, dass der Inhalt unterschiedliche Attribute je nach Viewport bekommt. Es ist dadurch möglich, die Inhalte vollständig auszublenden, die Textgröße anpassen und noch viel mehr.

### index.html ###
<p class="small">Visible for Mobile People</p>
<p class="medium">Visible for Tablet People</p>

### content.css ###
.small{
display: block;
}
@media only screen and (min-width: 768px) {
.small {
display: none;
}
}

Unterschiedliche Darstellung der Elemente

Die Variation der Designelemente zwischen einzelner Screens kann durch die oben beschriebene Methode umgesetzt werden.

Szenario: Zwei Blöcke, die auf Desktop nebeneinander stehen aber auf Mobile untereinander platziert sind. (Sehr weit verbreitetes Beispiel — insbesonders in Footer Bereich)

### index.html ###
<div class="outer-container">
<div class=block>
Left Block
</div>
<div class=block>
Right Block
</div>
</div>

### block.css ###
.block {
width: 100%;
}
@media only screen and (min-width: 768px) {
.block {
width: 49%;
float: left;
}
}

Auf Zeile 3 wird angegeben, dass die CSS Klasse block 100% der Breite annehmen soll. Auf Zeile 7 wird dann entschieden, dass das Element nur noch 49% der Breite annehmen soll. Mit der float: left wird dafür gesorgt, dass die Elemente sich je nach Breite nach links reihen.

Responsive Web Design Frameworks

Die oben angezeigte Methode schreiben die Entwickler nicht mehr selber. Es existieren gerade für solche Use-Cases sogenannte „Responsive Web Design Frameworks“ wie Bootstrap oder Material-UI. Der Code aus dem oberen Beispiel würde in Bootstrap wie folgt aussehen:

### index-bootstrap.html ###
<div class="row">
<div class="block-bt col-12 col-md-6">
Left Block
</div>
<div class="block-bt col-12 col-md-6">
Right Block
</div>
</div>

Solche Frameworks bringen die CSS-Eigentschaften schon mit. Bootstrap hat eine Aufteilung in 12 gleich große senkrechte Schnitte. Durch die Verwendung von col-12 wird also mitgeteilt, dass das Element 12/12 Breite hat.

col-md-6 beschreibt, dass die Breite des Elements ab der Größe md 6/12 ist.

Seitenoptimierung

Insbesonders helfen an dieser Stelle die HTML 5 Elemente. Für Bilder ermöglicht zum Beispiel das <picture> Element die responsivität.

### index.html ###
<picture>
<source srcset="xl-image.png" media="(min-width: 1200px)">
<source srcset="la-image.png" media="(min-width: 1024px)">
<source srcset="medium-image.png" media="(min-width: 768px)">
<img src="xs-image.png" alt="image alt text">
</picture>

• Von unten nach oben: Nehme immer das xs-image.png
• Wenn die Breite über 768 px beträgt, liefere medium-image.png
• Wenn die Breite über 1024 px beträgt, liefere la-image.png
• Wenn die Breite über 1200 px beträgt, liefere xl-image.png

Dabei wird auch wirklich nur das Bild geladen, welches notwendig ist. Das könnt ihr in eure Browser-Entwicklertools überprüfen (F12 auf Chrome und Firefox, dann auf Network und die Seite Neuladen)