Meine Erfahrungen mit Mobile First

mobile-first-prinzip

Für Erdmann & Freunde habe ich zum ersten Mal versucht, eine Website nach dem Mobile-First-Prinzip zu realisieren. Nachdem Phase 1 der Website nun abgeschlossen ist, möchte ich euch ein paar Einblicke geben, mit welchen Problemen ich zu kämpfen hatte, und was ich beim nächsten Mal vielleicht anders machen würde.

Zu Beginn war ich optimistisch. Die Texte hatte ich in den Wochen zuvor schon geschrieben, ich müsste sie also nur ins CMS einpflegen und dann schauen, dass sie erst auf dem Smartphone, dann auf dem Tablet und zu guter Letzt auf dem Desktop gut aussehen. Und mit Bootstrap 3 Framework als Basis, das ja extra für den Mobile-First-Ansatz gedacht ist, könnte ja nicht allzu viel schief gehen, dachte ich.

Tatsächlich sah die erste Version erwartungsgemäß gut auf dem Smartphone aus. Denn in 90% aller Fälle kommt man zu dem Ergebnis, dass nur eine einspaltige Darstellung sinnvoll ist. Und so begann ich mich verstärkt auf die Portrait-Ansicht auf dem Tablet zu konzentrieren. Dann ein kurzer Kontrollblick auf die Smartphone-Ansicht, dann weiter mit dem Desktop.

Irgendwann übersprang ich den Smartphone-Schritt (wird schon gut aussehen) und zuletzt erwischte ich mich dabei, wie ich doch zuerst die Desktop-Ansicht stylte, dann den Browser auf Tablet-Größe verkleinerte und zum Schluss die Smartphone-Ansicht kontrollierte. Alte Gewohnheiten und so.

Die richtige Schriftgröße für jeden Viewport

Welche Fehler sich dadurch einschleichen ist sehr schön zu beoachten, wenn man mal Version 3 und Version 4 miteinander vergleicht. In Version 4 beschloss ich, die Schriftgröße generell anzuheben, ohne dabei darauf zu achten, wie sich das auf die Smartphone-Ansicht auswirkt. Autsch!

Insgesamt kam die Entscheidung für die richtige Schriftgröße pro Geräteklasse aber zu spät. Das die optimale Zeilenlänge für Texte im Web zwischen 55 und 75 Zeichen liegt, ist ja nun keine ganz neue Erkenntnis. Aber jetzt weiß ich: Die richtigen Schriften und -größen legt man in den ersten 5 Minuten fest und dann bleibt man besser dabei. Das spart eine Menge Arbeit im Nachgang.

Bildwirkung auf unterschiedlichen Geräten

Was den Einsatz von Bildern auf der Website betrifft, so war ich ein wenig überrascht wie unterschiedlich ein und dasselbe Bild auf unterschiedlichen Bildschirmen wirkt. Zunächst fand ich Bilder, die auf dem Smartphone richtig klasse aussahen, aber sobald ich sie mir auf dem Desktop ansah, sahen sie einfach nur noch langweilig aus. Umgekehrt fand ich Bilder, die auf dem Desktop – gerade auch in Kombination mit dem Teaser-Text – gut aussahen, aber auf dem Smartphone hatte ich Mühe, dem Text genug Kontrast zu geben, dass man ihn einigermaßen lesen konnte.

Nach langem hin und her und stundenlanger Bildrecherche entschied ich mich für die Bilder, die auf dem Desktop gut aussahen und versah sie für Smartphones mit einem Weichzeichner. Positiver Nebeneffekt: Die Bilder ließen sich noch mal deutlich besser komprimieren, so dass die Ladezeiten für Smartphones noch geringer sind.

Vorteile von Mobile First

Letzten Endes haben aber doch die Vorteile des Mobile-First-Ansatzes überwogen. Da ich das Design direkt im Browser entwickeln wollte, habe ich mich zunächst darauf konzentriert, die Inhalte mit so wenig Design wie möglich auf dem Smartphone gut aussehen zu lassen. Diese Herangehensweise prägte auch maßgeblich das Design für die anderen Bildschirmgrößen, wobei Kritiker (zurecht) wieder sagen werden, dass spätestens bei der Desktop-Ansicht ein paar Spielereien mehr drin hätten sein können. Mein Ziel war es für alle Bildschirmgrößen eine gute Lesbarkeit zu ermöglichen. Ich denke, das habe ich geschafft. Und wer weiß, welche Spielereien Phase 2 bringen wird …

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

2 Kommentare

  1. Marco Raddatz sagt:

    Die Lesbarkeit ist super, jedoch die Bilder nicht ausreichend… 😉

    https://www.dropbox.com/s/dp0v4407fi81uh0/erdmann_freunde.jpg

  2. Dennis sagt:

    Danke dir. Sollte mittlerweile wieder funktionieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *