»Mobile-first« bedeutet, dass man ein responsive Webdesign nicht vom großen Desktop-Layout Schritt für Schritt ver­klei­nert, son­dern dass man die mobile Webseiten-Ansicht als Ausgangsbasis nimmt, und das mobile Webseiten-Design dann schritt­weise für grö­ßere Bildschirmformate optimiert.

Eine solche Vorgehensweise bringt natür­lich eine ganz neue Denkweise für Webdesigner und Entwickler mit sich und wir werden gezwungen, uns mit der rasant wach­senden Beliebtheit mobiler Geräte und deren neuen Anforderungen auseinanderzusetzen.

Diese offen­sicht­liche Herausforderung ist meiner Ansicht nach eine große Chance, Webseiten fle­xi­bler und damit auch moderner umzu­setzen. Während der Konzeption und Umsetzung unseres ersten mobile-first WordPress-Themes Nori in den letzten Wochen haben auch Manuel und ich etliche »Aha-Erlebnisse« gehabt und neue Erkenntnisse dazu gewonnen. Die aus meiner Sicht wich­tigsten Tipps und Erfahrungswerte zum Thema »mobile-first Webdesign-Ansatz« habe ich im fol­genden Artikel zusammen gestellt:

1. Konzentration aufs Wesentliche

Da auf mobilen Geräten sehr viel weniger Platz als auf her­kömm­li­chen PC-Monitoren zur Verfügung steht, ist es beson­ders wichtig sich auf die wich­tigsten Punkte der Webseite zu kon­zen­trieren. Man sollte sich also vor Beginn des Desingprozesses u.a. mit fol­genden Fragen aus­ein­an­der­setzen: Welche Infos benö­tigt der Besucher wirk­lich? Wie kann man diese Infos mög­lichst klar und über­sicht­lich prä­sen­tieren? Was sind die wich­tigsten Inhalte und auf welche Inhalte könnte ver­zichtet werden?

2. Ein gutes Konzept ist wichtig

Es ist immer wichtig, ein gut durch­dachtes Konzept für ein Webdesign-Projekt zu erstellen, bevor es mit der eigent­li­chen Gestaltung los­geht. Da man sich beim mobile-first Ansicht aber zu aller­erst mit dem Webdesign für mobile Geräte aus­ein­ander setzt und dieses Design dann auch noch für eine ganze Reihe anderer Bildschirmformate funk­tio­nieren soll, ist eine gute Planung und Konzeption des Design ganz beson­ders gefragt.

So kann man dann auch ver­meiden, dass später für die Umsetzung der ver­schie­denen Design-Varianten einer Webseite auf­wän­dige Workarounds (z.B. durch den Einsatz von JavaScripts) gefunden werden müssen. Denn je logi­scher und sim­pler ein Design-Konzept auf­ge­baut ist, desto weniger auf­wendig sollte später auch der Code für die Umsetzung sein.

3. CSS Media Queries mit min-width statt max-width

Die Umsetzung eines mobile-first Webdesigns funk­tio­niert wieder mit Hilfe von CSS3 Media Queries. Statt wie bisher bei einem responsive Webdesign das brei­teste Layout (für Desktop-Monitor) als Standard zu nutzen, wird bei mobile-first mit der kleinsten Design-Version (für Smartphones im Hochformat) begonnen. Anschließend nutzt man z.B. @media screen and (min-width: 480px), um das Design an das nächst grö­ßere Format anzu­passen. Die Media Queries könnten also unge­fähr so auf­ge­baut sein:

/* smartphones in landscape mode */
@media screen and (min-width: 480px) {
...
}
/* tablets in portrait mode */
@media screen and (min-width: 768px) {
...
}
/* tablets in landscape mode */
@media screen and (min-width: 1024px) {
...
}
/* standard laptop screens */
@media screen and (min-width: 1220px) {
...
}
/* bigger desktop screens */
@media screen and (min-width: 1440px) {
...
}

4. Fluid Layouts

Wenn man an die Arbeit mit fixen Layoutbreiten gewohnt ist, fällt es einem anfangs ein wenig schwer sich daran zu gewöhnen, relativ wenig feste Anhaltspunkte bei der Design-Entwicklung zu haben. Je flüs­siger das Design sich jedoch an ver­schie­dene Größen anpasst, desto sicherer kann man gehen, dass die spä­tere Webseite optimal auf den ver­schie­densten Bildschirmen dar­ge­stellt wird. Schließlich erscheinen ständig neue Geräte mit neuen Formaten und Auflösungen. Mit einem sol­chen, soge­nannten »fluid Layout« ist man also so gut es geht auf der sicheren Seite.

Am besten arbeitet man daher auch mög­lichst mit Prozentwerten, um die Breiten (width) von Designelementen zu bestimmen. Bildern oder ein­ge­bet­teten Videos (iframe) kann man mit Hilfe von max-width:100% an ein fle­xi­bles Format anpassen.

5. Reduzieren, nicht nur für die mobile Webseiten-Version

Der mobile-first Ansatz zwingt einen Webdesigner auch dazu, noch einmal ganz genau zu über­legen, welche Webseiten-Inhalte wirk­lich rele­vant für die Besucher sind. Meist kommt man bei dieser Über­le­gung zur Erkenntnis, dass weniger mehr ist. Man sollte sich fragen: Benötigt man wirk­lich 10 Unternavigationspunkte oder wird eine solch auf­wen­diger Navigation nicht eher ver­wir­rend als hilf­reich für den Besucher?

Luke W erwähnt in seinem Buch »Mobile First« und auch auf seiner Webseite inter­ess­sante Studien und Auswertungen zu diesem Thema. Er macht darauf auf­merksam, dass die meisten Menschen beim Surfen im Web nicht mit ihrer vollen Konzentration bei der Sache sind. Dies ist bei der Nutzung von mobilen Geräten natür­lich ganz beson­ders der Fall. Luke W nennt dieses Verhalten das »one thumb, one eye­ball Phänomen« (navi­giert wird auf mobilen Geräten mit einem Daumen und meist schaut man nur mit der halben Aufmerksamkeit, also mit einem Auge auf den Display).

Besucher benö­tigen also nicht zu viele Infos, son­dern sollten mög­lichst schnell auf den für die Webseite wich­tigsten Inhalt auf­merksam gemacht werden. Was der jeweils wich­tigste Inhalt einer Webseite ist, sollte also in der Konzeptphase intensiv ana­ly­siert werden. Weniger aber klare Navigationselemente sind außerdem sinnvoll.

Von diesen Erkenntnissen für mobiles Webdesign kann beim mobile-first Ansatz auch die Desktop-Version einer Webseite pro­fi­tieren. Denn nur weil mehr Platz zur Verfügung steht bedeutet das nicht, dass die Besucher an einem großen Bildschirm ein weniger klar struk­tu­riertes und über­sicht­li­ches Webdesign bekommen sollten.

6. Design für Touchscreens

Ein wei­terer wich­tige Punkt beim mobile-first Ansatz ist auch die Design-Optimierung für Touchscreens. Schließlich sind die Anforderungen an ein Webdesign bei der Bedienung mit einem eher groben Finger ganz andere, als wenn ein prä­ziser Mauspfeil zur Navigation auf der Webseite zur Verfügung steht. Auch die Lesbarkeit von Texten sollte für mobile Geräte spe­ziell opti­miert werden.

Buttons, Links und Eingabefelder sollten groß­zü­giger und mit aus­rei­chend Zwischenräumen gestaltet werden. Schriftgrößen und Textbreiten sollte man wäh­rend der Designentwicklung bereits auf so vielen ver­schie­denen Geräten wie mög­lich testen, da Schriftgrößen und Farben oft sehr unter­schied­lich aus­fallen können. Eine Prototyp des Webdesigns ist also so früh wie mög­lich ratsam. Man kann ruhig auch einmal einen Ausflug in ver­schie­dene Geschäfte unter­nehmen, um das eigene Design live auf mög­lich vielen unter­schied­li­chen Geräten testen zu können.

7. Hilfreiche Tools nutzen

Responsive Webdesign und mobile-first ste­cken natür­lich noch mitten in der Entwicklung und sind mit Sicherheit auch erst der Anfang von vielen neuen Möglichkeiten, um Webseiten auf die neuen Entwicklungen des mobilen Internets vorzubereiten.

Dennoch gibt es bereits etliche Tools und Scripte, die einem bei der Umsetzung eines fle­xi­bleren Webdesigns und der Kompatibilität für ver­schie­dene Browser unter­stützen können. Diese Tools sollte man auf jeden Fall aus­pro­bieren und für die eigenen Projekte nutzen:

• Mit Hilfe von Respond.js kann man bei­spiels­weise sicher stellen, das auch ältere Internet Explorer Browser (6 bis 8) auf die Media Queries rea­gieren. Das Script ist bei einem mobile-first Webdesign beson­ders wichtig.
• Das Script FitVids.js kann ein­ge­setzt werden, um ein­ge­bet­tete Videos auto­ma­tisch zu skalieren.
• Mit Hilfe von Adaptive Images kann man klei­nere Dateigrößen für Bilder auf lang­samen mobilen Geräten erzeugen.

Eine sehr umfang­reiche Auflistung von Tools und Scripten kannst du im Smashing Magazine Artikel »Responsive Webdesign Techniques, Tools and Design Strategies« finden.

8. Neue Wege gehen

Wie bereits oben erwähnt ist es wichtig, das eigene Design viel­seitig zu testen, um eine mög­lichst kom­pa­tible Webdesign-Lösung zu finden. Auch nach neuen Optionen und Tools sollte man daher immer Ausschau halten und diese mög­lichst bald ausprobieren.

Außerdem ist es wichtig sich zu ver­deut­li­chen, dass die Entwicklung im Web ständig weiter geht und es gerade im Bereich mobiles Internet noch recht wenig Regeln oder »best prac­tices« gibt, bzw. sich diese relativ schnell ändern können. Das klingt zuerst etwas beängs­ti­gend, aber eigent­lich ist diese stän­dige Entwicklung ja auch das span­nende und beson­dere am heu­tigen Webdesign. Jeder hat so die Chance mit­zu­ma­chen und sich selbst wei­ter­zu­ent­wi­ckeln. Luke W schreibt hierzu:

Welcome to mobile where the only thing you can count on is change. […] So what’s a web desi­gner to do — get swept up in a sea of con­stant insta­bi­lity? Quite the oppo­site. Because things con­tinue to be so Wild West out there, you need to be a cowboy. Take risks, try new things, and accept that not all the boun­dary lines bet­ween devices, brow­sers, and the web have been drawn yet.
Luke Wroblewski

Empfehlungen zum Weiterlesen

• Luke W A Book Apart Buch »Mobile First«
• O’Reilly Media Video-Workshop »Luke Wroblewski on Designing for Mobile First«
• der Blog von Luke W
• Liste mit hilf­rei­chen Tipps von Brad Frost bei Google+

Deine Meinung, Tipps und Erfahrungswerte

Wie sind deine Erfahrungen zum Thema »mobile-first«? Hast du wei­tere Tipps und hilf­reiche Tools, die bei der Gestaltung und Entwicklung von responsive, mobile-first Webdesigns nütz­lich sind. Über dein Feedback und deine Erfahrungen und Tipps freue ich mich sehr!