Was ist Mobile First?

Immer mehr Menschen besuchen Websites mit ihren mobilen End­ge­rä­ten. Auf diesen Trend reagiert die Welt des Web­de­signs mit dem Mobile-First-Ansatz: Zunächst werden die Websites für Smart­phones und Tablets gestaltet und pro­gram­miert, die Desk­top­ver­si­on baut auf diesem Grund­ge­rüst auf.

Was bedeutet Mobile First?

Mobile First ist ein Konzept für mobil op­ti­mier­tes Webdesign. Dabei entsteht zuerst die für mobile Endgeräte op­ti­mier­te Seite und später folgen dann suk­zes­si­ve Er­wei­te­run­gen für den Desktop-Browser. Mobile First ist also ein De­sign­trend, der auf die Evolution von Such­ma­schi­nen wie Google im mobilen Sektor reagiert.

Bislang war es üblich, dass sich Web­de­si­gnen­de und Pro­gram­mie­ren­de zunächst um die Umsetzung der Website für den Desktop kümmerten. Dabei wurde mit der vollen Palette an Funk­tio­nen, Grafiken und ge­stal­te­ri­schen Mög­lich­kei­ten eine Seite kon­zi­piert, die auf große Bild­schir­me und schnelle Da­ten­ver­bin­dung ausgelegt war. Erst im zweiten Schritt folgte die Planung der mobilen Seite, die oft nur als eine Art Anhang gesehen wurde. Die Mobile-First-Strategie kehrt diesen Workflow um und setzt die Prio­ri­tä­ten anders. Das wirkt sich auch auf die Ge­stal­tung der tech­ni­schen In­fra­struk­tur hinter der Website aus.

Welche Maßnahmen umfasst der Mobile-First-Ansatz?

Bei der Kon­zep­tio­nie­rung einer Mobile-First-Strategie werden zunächst die zentralen Aspekte des Angebots und der Seite definiert. Dabei geht es nicht nur um Inhalte und Bilder, sondern vor allem um die wich­tigs­ten Funk­tio­nen und Module, die als Elemente auf der Website in­te­griert werden müssen. Konkret werden folgende Maßnahmen beim Webdesign nach dem Mobile-First-Prinzip be­rück­sich­tigt:

• Be­schrän­kung auf das We­sent­li­che
• Nicht mehr Pro­gram­mier­auf­wand als nötig
• Maximale Per­for­mance auf allen End­ge­rä­ten
• Schneller In­for­ma­ti­ons­zu­griff: Struk­tu­rier­te Inhalte
• Design-Entwürfe aufs Smart­phone Display angepasst
• Keine großen Bilder und unnötigen Funk­tio­nen
• Kürzungen im Quellcode
• Verzicht auf Ja­va­Script, Seite wird direkt in HTML5 pro­gram­miert

Im Zentrum steht die Ent­wick­lung einer optimalen Lösung für mobile Endgeräte. Erst im Anschluss werden nach dem Prinzip der pro­gres­si­ven Ver­bes­se­rung (Pro­gres­si­ve Enhance­ment) Desktop- und Laptop-Dar­stel­lun­gen optimiert. Die optimale In­halts­dar­stel­lung auf allen Geräten folgt den Grund­sät­zen des Re­spon­si­ve Web­de­signs und nutzt häufig CSS-Grids, damit die Seite ska­lier­bar bleibt.

Welche Vorteile bietet Mobile First?

Webdesign sollte sich mitt­ler­wei­le haupt­säch­lich auf Mobile-Seiten kon­zen­trie­ren. Denn mobil op­ti­mier­te Websites erreichen ein sehr großes Publikum. Außerdem pro­fi­tiert man bei Mobile First von schneller An­pass­bar­keit: Durch die schlanke Struktur, die sich auf das We­sent­li­che be­schränkt, kann die Web­prä­senz später besser verändert und neue Ent­wick­lun­gen können einfacher ein­ge­bracht werden. Da aufgrund be­schränk­ter Bild­schirm­grö­ße nur die we­sent­li­chen Elemente in die Website ein­ge­bracht werden, bieten mobile Websites oft ver­bes­ser­tes User-Ex­pe­ri­ence-Design und höhere Be­nut­zer­freund­lich­keit.

Zudem können sich Web­de­si­gne­rin­nen und Web­de­si­gner die Arbeit er­leich­tern, indem sie bei der Ge­ne­rie­rung des CSS-Designs Prä­pro­zes­so­ren verwendet. Mit Hilfe von CSS-Prä­pro­zes­so­ren lassen sich Parameter wie Farben, Schrift­ar­ten usw. variabel verändern und müssen nicht mühsam im CSS-Code geändert werden.

Die Vorteile von Mobile First auf einen Blick

• Erreichen einer großen Ziel­grup­pe
• Be­nut­zer­freund­li­che und über­sicht­li­che Websites
• Schnelle und ef­fi­zi­en­te Ent­wick­lung
• Fle­xi­ble­re und einfacher an­pass­ba­re Web­prä­sen­zen

Welche Nachteile hat Mobile First?

Vielfach kommt es beim mobilen Webdesign zu Fehlern, sodass die ei­gent­lich op­ti­mier­te Website im Endeffekt nur wenig be­nut­zer­freund­lich ist. Doch auch ohne Fehler kann der Mobile-First-Ansatz an manchen Stellen nach­tei­lig sein.

Wenn Sie über eine Desktop-op­ti­mier­te Website verfügen, ist eine Migration auf mobile Endgeräte unter Umständen schwierig und erfordert ein gänzlich neues De­sign­kon­zept oder sogar einen kom­plet­ten Relaunch. Auch für Grafiken und Bild­in­hal­te gilt: Auf mobiles Design op­ti­mier­ter Content kann in der Desk­top­ver­si­on schlech­ter aussehen, da die Auflösung von Computer- und Lap­top­bild­schir­men eine gänzlich andere ist.

Außerdem ist zu beachten, dass Mobile First nicht für alle An­wen­dungs­fäl­le eine valide Lösung ist: Möchten Sie bei­spiels­wei­se komplexe Web­an­wen­dun­gen für mobile Endgeräte be­reit­stel­len, kann es gut sein, dass eine mobil op­ti­mier­te Website nicht aus­rei­chend oder sogar unmöglich ist. In solchen Fällen sollte über eine eigene App nach­ge­dacht werden, die al­ler­dings einen ver­hält­nis­mä­ßig hohen Pro­gram­mier­auf­wand mit sich bringt.

Die Nachteile von Mobile First auf einen Blick

• Migration von be­stehen­den Desk­t­op­si­tes schwierig
• Grafiken und Bild­in­hal­te benötigen andere Auflösung
• Komplexe Web­prä­sen­zen können unter Umständen mobil nicht voll­um­fäng­lich re­prä­sen­tiert werden
• Nicht für jeden Usecase geeignet

Was ist Mobile Friendly?

Eng einher mit dem Mobile-First-Konzept geht die Frage, wann eine Seite als Mobile Friendly ein­zu­stu­fen ist. Dies ist im All­ge­mei­nen der Fall, wenn:

• Die Inhalte möglichst schnell erfasst werden können
• Die Inhalte responsiv und damit auf Anhieb lesbar sind
• Die Website kurze La­de­zei­ten hat
• Links leicht lesbar und pro­blem­los klickbar sind

Wurde im Webdesign das Mobile-First-Prinzip beachtet, sollte Ihre Website die genannten Punkte ei­gent­lich erfüllen. Ob eine Seite auch von Google als Mobile Friendly erkannt wird, kann man als be­trei­ben­de Person leicht testen. Das Tool Chrome Light­house ist Be­stand­teil von Chrome DevTools und prüft Ihre Website au­to­ma­ti­siert.

Neben dem Mobile-Friendly-Test von Google bieten sich Website-Check-Tools an, um die eigene Seite auf mobile Op­ti­mie­rung hin zu testen. Beim Website-Checker von IONOS liefert die Über­prü­fung darüber hinaus weitere relevante Insights zur Auf­find­bar­keit der geprüften Website im Web.

Zu­sam­men­fas­sung: Mobile First

Bei der Er­stel­lung einer Website sollten Sie über den Mobile-First-Ansatz nach­den­ken: In An­be­tracht der Tatsache, dass die meisten End­nut­ze­rin­nen und Endnutzer Web­prä­sen­zen auf mobilen End­ge­rä­ten aufrufen, ist es nur sinnvoll, diesen besondere Auf­merk­sam­keit zu widmen und dafür zu sorgen, dass Ihre Website auf Smart­phones und Tablets ohne Probleme performt. Die Desk­top­ver­si­on der Seite kann im Anschluss direkt aus der Mo­bil­ver­si­on ab­ge­lei­tet werden, was einiges an Arbeit erspart. Bedenken Sie jedoch, dass sich nicht jeder Usecase für Mobile First eignet: Komplexe Webseiten oder gar Webapps sollten nach einem anderen De­sign­prin­zip gestaltet werden.