Kommentare 33

Mobile-first Webdesign: Hilfreiche Tipps und Erfahrungswerte

“Mobile-first” bedeutet, dass man ein responsive Webdesign nicht vom großen Desktop-Layout Schritt für Schritt verkleinert, sondern dass man die mobile Webseiten-Ansicht als Ausgangsbasis nimmt, und das mobile Webseiten-Design dann schrittweise für größere Bildschirmformate optimiert.

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

Diese offensichtliche Herausforderung ist meiner Ansicht nach eine große Chance, Webseiten flexibler und damit auch moderner umzusetzen. 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 wichtigsten Tipps und Erfahrungswerte zum Thema “mobile-first Webdesign-Ansatz” habe ich im folgenden Artikel zusammen gestellt:

1. Konzentration aufs Wesentliche

Da auf mobilen Geräten sehr viel weniger Platz als auf herkömmlichen PC-Monitoren zur Verfügung steht, ist es besonders wichtig sich auf die wichtigsten Punkte der Webseite zu konzentrieren. Man sollte sich also vor Beginn des Desingprozesses u.a. mit folgenden Fragen auseinandersetzen: Welche Infos benötigt der Besucher wirklich? Wie kann man diese Infos möglichst klar und übersichtlich präsentieren? Was sind die wichtigsten Inhalte und auf welche Inhalte könnte verzichtet werden?

mobile-first WordPress Theme Nori

Das WordPress Theme Nori zeigt das Logo, ein Menü-Button und die neusten Blog-Artikel auf dem Smartphone.

2. Ein gutes Konzept ist wichtig

Es ist immer wichtig, ein gut durchdachtes Konzept für ein Webdesign-Projekt zu erstellen, bevor es mit der eigentlichen Gestaltung losgeht. Da man sich beim mobile-first Ansicht aber zu allererst mit dem Webdesign für mobile Geräte auseinander setzt und dieses Design dann auch noch für eine ganze Reihe anderer Bildschirmformate funktionieren soll, ist eine gute Planung und Konzeption des Design ganz besonders gefragt.

So kann man dann auch vermeiden, dass später für die Umsetzung der verschiedenen Design-Varianten einer Webseite aufwändige Workarounds (z.B. durch den Einsatz von JavaScripts) gefunden werden müssen. Denn je logischer und simpler ein Design-Konzept aufgebaut ist, desto weniger aufwendig 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 funktioniert wieder mit Hilfe von CSS3 Media Queries. Statt wie bisher bei einem responsive Webdesign das breiteste 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 anzupassen. Die Media Queries könnten also ungefähr so aufgebaut 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üssiger das Design sich jedoch an verschiedene Größen anpasst, desto sicherer kann man gehen, dass die spätere Webseite optimal auf den verschiedensten Bildschirmen dargestellt wird. Schließlich erscheinen ständig neue Geräte mit neuen Formaten und Auflösungen. Mit einem solchen, sogenannten “fluid Layout” ist man also so gut es geht auf der sicheren Seite.

Am besten arbeitet man daher auch möglichst mit Prozentwerten, um die Breiten (width) von Designelementen zu bestimmen. Bildern oder eingebetteten Videos (iframe) kann man mit Hilfe von max-width:100% an ein flexibles 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 überlegen, welche Webseiten-Inhalte wirklich relevant für die Besucher sind. Meist kommt man bei dieser Überlegung zur Erkenntnis, dass weniger mehr ist. Man sollte sich fragen: Benötigt man wirklich 10 Unternavigationspunkte oder wird eine solch aufwendiger Navigation nicht eher verwirrend als hilfreich für den Besucher?

Luke W erwähnt in seinem Buch “Mobile First” und auch auf seiner Webseite interesssante Studien und Auswertungen zu diesem Thema. Er macht darauf aufmerksam, 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ürlich ganz besonders der Fall. Luke W nennt dieses Verhalten das “one thumb, one eyeball Phänomen” (navigiert 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, sondern sollten möglichst schnell auf den für die Webseite wichtigsten Inhalt aufmerksam gemacht werden. Was der jeweils wichtigste Inhalt einer Webseite ist, sollte also in der Konzeptphase intensiv analysiert 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 profitieren. Denn nur weil mehr Platz zur Verfügung steht bedeutet das nicht, dass die Besucher an einem großen Bildschirm ein weniger klar strukturiertes und übersichtliches Webdesign bekommen sollten.

6. Design für Touchscreens

mobile-first Webdesign Ansatz

Noris Smartphone-Menü

Ein weiterer wichtige 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 speziell optimiert werden.

Buttons, Links und Eingabefelder sollten großzügiger und mit ausreichend Zwischenräumen gestaltet werden. Schriftgrößen und Textbreiten sollte man während der Designentwicklung bereits auf so vielen verschiedenen Geräten wie möglich testen, da Schriftgrößen und Farben oft sehr unterschiedlich ausfallen können. Eine Prototyp des Webdesigns ist also so früh wie möglich ratsam. Man kann ruhig auch einmal einen Ausflug in verschiedene Geschäfte unternehmen, um das eigene Design live auf möglich vielen unterschiedlichen Geräten testen zu können.

7. Hilfreiche Tools nutzen

Responsive Webdesign und mobile-first stecken natürlich 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 flexibleren Webdesigns und der Kompatibilität für verschiedene Browser unterstützen können. Diese Tools sollte man auf jeden Fall ausprobieren und für die eigenen Projekte nutzen:

  • Mit Hilfe von Respond.js kann man beispielsweise sicher stellen, das auch ältere Internet Explorer Browser (6 bis 8) auf die Media Queries reagieren. Das Script ist bei einem mobile-first Webdesign besonders wichtig.
  • Das Script FitVids.js kann eingesetzt werden, um eingebettete Videos automatisch zu skalieren.
  • Mit Hilfe von Adaptive Images kann man kleinere Dateigrößen für Bilder auf langsamen mobilen Geräten erzeugen.

Eine sehr umfangreiche 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 vielseitig zu testen, um eine möglichst kompatible Webdesign-Lösung zu finden. Auch nach neuen Optionen und Tools sollte man daher immer Ausschau halten und diese möglichst bald ausprobieren.

Außerdem ist es wichtig sich zu verdeutlichen, dass die Entwicklung im Web ständig weiter geht und es gerade im Bereich mobiles Internet noch recht wenig Regeln oder “best practices” gibt, bzw. sich diese relativ schnell ändern können. Das klingt zuerst etwas beängstigend, aber eigentlich ist diese ständige Entwicklung ja auch das spannende und besondere am heutigen Webdesign. Jeder hat so die Chance mitzumachen und sich selbst weiterzuentwickeln. Luke W schreibt hierzu:

Welcome to mobile where the only thing you can count on is change. [...] So what’s a web designer to do — get swept up in a sea of constant instability? Quite the opposite. Because things continue to be so Wild West out there, you need to be a cowboy. Take risks, try new things, and accept that not all the boundary lines between devices, browsers, and the web have been drawn yet.
Luke Wroblewski

Empfehlungen zum Weiterlesen
Deine Meinung, Tipps und Erfahrungswerte

Wie sind deine Erfahrungen zum Thema “mobile-first”? Hast du weitere Tipps und hilfreiche Tools, die bei der Gestaltung und Entwicklung von responsive, mobile-first Webdesigns nützlich sind. Über dein Feedback und deine Erfahrungen und Tipps freue ich mich sehr!

33 Kommentare

  1. Gelungener Artikel. Die Herangehensweise mit min-width find ich gar grandios, nun fehlt nur noch das erste Framework, welches damit arbeitet. Witzig das ich heute unserem Praktikanten die Aufgabe stellte, herauszufinden, was “mobile first” bedeutet. Gut das ihr den Artikel erst jetzt veröffentlicht habt, denn kennt euren Blog und es wäre so etwas zu einfach gewesen.

  2. Lukas

    Guter Artikel! Ich bin allerdings nicht so ganz sicher, ob man das wirklich schon so machen sollte. Kommt natürlich auch auf das jeweilige Projekt an, aber wenn ich mir so anschaue, wieviele Besucher meine Webseite(n) mit mobilen Endgeräten besuchen, dann sind das doch schon noch deutlich weniger, als Besucher mit PCs.
    In Zukunft wird man das aber wohl so machen müssen. Der Trend, dass mehr mobile Nutzer kommen, ist ja klar zu erkennen ;-)

    • Hallo Lukas,

      vielen Dank für dein Feedback. Ja, auf jeden Fall kommt es immer etwas auf das Projekt an, ob eine responsive, mobile-first Umsetzung sinnvoll ist. In manchen Fällen (vor allem bei großen Webseiten) ist sicher auch eine separate mobile Webseite geeigneter.

      Wenn man sich für ein responsive Webdesign entscheidet, ist der mobile-first Ansicht allerdings meiner Ansicht nach die logischere Umsetzung. Vielleicht könnte man als Erklärung den Aufbau eines Webdesigns mit dem Bau eines Hauses vergleichen. Dort fängt man ja auch mit dem Fundament an und arbeitet sich dann Schritt für Schritt weiter bis zu den Außenwänden und dem Dach. So ungefähr könnte man es meiner Ansicht nach vergleichen.

      Der mobile-first Ansatz ist bei einem responsive Webdesign übrigens auch für die Browser-Kompatibilität von Vorteil. Denn auch ältere Browser auf alten Computern kommen mit der kleinen, einfachen mobilen Standard-Version gut zurecht. Das ist ein weiterer zusätzlicher Pluspunkt, der für den mobile-first Ansatz spricht.

      Viele Grüße,
      Ellen

  3. Vielen Dank für die spannende Zusammenfassung. Ein Punkt, der meiner Meinung nach (bisher) noch zu wenig behandelt und eingesetzt wurde, ist die Reaktion des Inhalts auf die Höhe des Browsers. Bei reinen Textinhalten mag das zu vernachlässigen sein, aber bei Bildern ist es umso wichtiger und kann richtig lästig sein, wenn Bilder nicht komplett angesehen werden können. Ein guter Artikel dazu von Trent Walton: http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/

  4. Lynn

    Hallo Ellen,
    toller Artikel! Ich beschäftige mich momentan auch mit diesem Thema und wollte fragen welches Framework du empfehlen würdest? Ich erkunde gerade die Welt des 1140px-Frameworks, bin aber noch nicht 100% zufrieden damit.

    Liebe Grüße,
    Lynn

  5. Hallo,
    vielen Dank für das super Theme. Ich hab eine meiner Webseiten gleich umgestellt.
    Mich würde noch interessieren wie ich das Hauptmenü am besten auf die linke Seite bekomme. Habt ihr da einen Tipp? Oder komme ich da in Konflikt mit anderen Bereichen der Webseite?

    Vielen Dank und viele Grüße,
    Thomas

  6. super Beitrag…bei uns in der Agentur ist das Thema zur Zeit auch ganz oben auf der Liste. sehr spannend und definitiv gehört es der zukunft sich als webdesigner darauf zu konzentrieren.
    allerdings finde ich den Ansatz vom kleinsten viewport anzufangen für fragwürdig. die Desktop Versionen überwiegen schließlich das www und meiner Meinung nach ist es einfacher von groß auf klein zu gehen..

  7. Pingback: Responsives Essen | Journal Emanuel-S

  8. andreas

    hi, nett.

    ich hab mich auch mal mit dem thema beschäftigt und finde die ran gehensweise von klein nach groß nicht optimal.

    für mich muss ein layout auch ohne js funktionieren. js ist ein extra für mehr “konfort”… so stellen alle browser, die keine mediaqueries unterstützen das kleine layout da. also alle älteren ie´s, firefox, opera…

    das kann es doch nicht sein. in vielen ländern verwenden leute noch ältere browser. man kann nicht immer nur von den industriestaaten ausgehen.

    im grunde findet man immer im maximalen layout auch das minimale wieder und somit ist da nicht so viel zu überschreiben. es ist ja nicht auf ein mal ein komplett anderes layout.

  9. Elmar

    Hallo Ellen,

    darf ich fragen welches Plugin du nutzt um Codebeispiele in Deine Artikel einzubinden? Ich selber bin auf der Suche nach einem Plugin, bin aber von der Anzahl ein wenig erschlagen…

    Viele Grüße
    Elmar

  10. Pingback: Responsive Webdesign mit CSS3 Media Queries | Wirsing Maracuja

  11. Pingback: Spinnt Amazon? Zu den Änderungen im Partnerprogramm

  12. “Mobile-first”-Webdesign bietet Designer ebenso im nicht-technischem Bereich neue kreative Impulse. Mit „Weniger ist mehr“ hebt Ellen den wichtigsten Usability-Aspekt hervor. Was beim Schreiben von Texten gilt, ist beim Webdesign ebenso wichtig – Die Kunst liegt darin, soviel wie möglich durch so wenig wie nötig, mitzuteilen.

    Lieben Gruß,
    Jonathan

  13. Im Prinzip eine gute Vorgehensweise, wenn denn die Seite für das Responsive Webdesign geeignet ist. Bei einem neuen Projekt werde ich diese Art auf jeden Fall anwenden.
    Bei unserer über viele Jahre gewachsenen, sehr komplexen Webseite mit vielen Informationen und Bildern habe ich mich für eine separate Mobilversion entschieden, die zwar, weil doppelt gepflegt werden muß, etwas mehr Arbeit macht, aber dafür auf Kompromisse bei Bildern und vor allem bei der Navigation verzichten kann und deshalb sehr schnell lädt.

  14. Jetzt weiß ich warum ich deinen Blog in den Favoriten hab :) Wieder ein sehr schöner Artikel, der Anfängern und auch Profis, die sich mit Webdesign beschäftigten noch ein paar Tipps geben kann.
    Weiter so :)

  15. Pingback: Mobil First | Mobile first responsiveMobile first responsive

  16. Hallo Ellen,

    ein wirklich gelungender Artikel zu dem Thema. Zuvor konnte ich mit dem mobile-first-Ansatz nicht viel anfangen. Ich nutze derzeit dein Waipoua-Theme und habe mich schon öfter gefragt, weshalb die media-queries mit min-width aufbebaut sind. Nach diesem Artikel wirds mir klar.

    Bei meinem nächsten Web-Projekt werde ich auch mal mit diesem Ansatz arbeiten. Es erzwingt ein Umdenken, aber ein Gutes, wie ich finde.

  17. Pingback: Websites auf mobilen Geräten - Software-Design IT-Blog

  18. DL

    Endlich habe ich eine Site gefunden, die mir verspricht, *mobile* Lösungen zu finden. Ich bin seit wenigen Tagen dabei, einige Projekte *anzupassen*. Allerdings möchte ich bei den Desktop-/Tablet-Versionen nicht auf die Gestaltunsgfreiheiten verzichten. Lediglich das Corporate Design soll erhalten bleiben, meinetwegen auch wenn es bis zur Unkenntlichkeit abgespeckt werden muss. In jedem Fall werden die Inhalte aus der selben Datenbank kommen.
    Mit einem Lovejob (Desktop- und Mobile-Version) für einen Jazzclub bin ich fast zufrieden. Die Umsetzung einer Site mit Fotos von Jazzkonzerten scheitert noch daran, dass die css-Vorgaben für Schriftgrößen nicht immer richtig umgesetzt werden – bei identischen Voraussetzungen. Hier ist das Menü in einer select/option-Funktion.
    Ich werde weiter basteln – und hier weiterlesen.
    Danke erstmal.

  19. Michael

    Hi Ellen,

    Ich bin nun kein absoluter Experte auf dem Gebiet von Websites und hätte eine Frage zu diesem sehr schönen Artikel.

    Ich bin am überlegen, ob ich mir für meine Firma eine neue Website zulege. Allerdings habe ich leider kein all zu großes Budget (Internet ist nicht unser Schwerpunkt).

    Sofern ich nun die Website erneure, möchte ich diese natürlich auch gleich auf mobile Endgeräte optimieren um nicht in zwei Jahren wieder alles neu machen zu müssen. Allerdings ist die Erstellung einer neuen Website mit “Responsive Design” wohl relativ teuer. Jetzt habe ich einen Artikel gefunden, in dem beschrieben wird, wie man sich eine neue Website mit Responsive Design günstig erstellen kann:
    http://www.responsive-design-test.de/responsive-design-tipps-und-tricks

    Hört sich zunächst aus meiner Sicht ganz gut an. Und nun habe ich gesehen, dass Du Word Press Theme Entwicklerin bist. Da passt meine Frage ja perfekt :-) Würdest Du empfehlen, ein fertiges Template zu kaufen, sodass ich nur noch ein paar Anpassungen vornehmen lassen muss? Oder welche Nachteile könnte dies haben?

    Vielleicht kannst Du ja eine kurze Einschätzung aus erster Hand dazu abgeben, würde mich sehr freuen!

    Vielen Dank und Gruß,
    Michael

  20. Sehr schoener Artikel, werde aufjedenfall mein naechstes Projekt mit Mobile first aufziehen, bisher hab ich immer nur bestehende Projekte auf responsive umgebaut, was leider oft sehr schwierig ist..

  21. Guten Morgen,

    lange habe ich mich geweigert über eine mobile Version unseres shop nachzudenken bzw. mich damit auseinanderzusetzen. Nachdem nun aber durch analytics klar ist, dass fast 40% mit dem smartphone unsere shops besuchen, müssen wir handeln. Eur Artikel hat uns in der Vorbereitung und Konzeption mehr als geholfen. Vielen Dank dafür.

Schreibe eine Antwort