Mobile First Design: Der heilige Gral oder Schnee von gestern?

Ist Mobile First die Lösung für alle Probleme?

Natürlich ist Mobile First ein guter Ansatz, der Fehlerquellen bei der Entwicklung von Websites reduziert. Es ist aber nicht immer der beste und einzige Weg eine Web-Anwendung zu entwickeln. Als solche wird es allerdings zu oft verstanden. Ich bin der Meinung, dass es in den letzten Jahren wichtig war, Mobile First zu praktizieren. Es wird jedoch langsam Zeit für neue Vorgehensweisen, die einen Schritt weiter denken.

Der Schnee von gestern

Ursprünglich wurden Websites für fixe Bildschirmgrößen und Auflösungen geschrieben. Die Tendenz war, dass die Bildschirme immer größer und höher auflösend wurden. Webdesigner hatten somit immer mehr Platz und Möglichkeiten, Informationen, Bilder, Texte, etc. zu platzieren.

Problematik im Webdesign durch Screen sizes

Im Jahr 2007 gewannen die Smartphones jedoch immer mehr Bedeutung. Websites die vorher nur für große Bildschirme konzipiert wurden, haben auf Smartphones plötzlich nicht mehr gut funktioniert. Man musste umdenken, um seinen Kunden eine möglichst gute Erfahrung auf Internetseiten zu gewährleisten, die vom Smartphone aufgerufen wurden.

Ein Ansatz waren die m.website.com Websites, also solche, die ausschließlich von einem Smartphone erreicht wurden. Diese haben allerdings eine Reihe von Nachteilen gegenüber anderen Strategien. Die mobilen Websites unterscheiden sich häufig zu stark durch ihr Design von den Websites auf dem PC, wodurch der Wiedererkennungswert leidet. Und die Vielzahl von Displaybreiten lassen sich dadurch nicht besonders gut bedienen. 

Vielzahl an unterschiedlichsten Bildschirmgrößen

Wichtig ist auch, dass es nicht nur zwei Displaygrößen, also Smartphone- und Desktop-Bildschirm gibt. Smartphone ist nicht gleich Smartphone. Neben diesen beiden kommen immer mehr Geräte mit Internetanbindung auf den Markt, die mit den verschiedensten Bildschirmen ausgestattet sind. Es gibt Fernseher, Uhren, Spielkonsolen, Tablets die Internetzugang haben, und alle haben verschiedene Bildschirmgrößen.

Doch wie schafft man es, Websites so zu schreiben, dass sie auf all diesen Bildschirmgrößen funktionieren? Wichtige Begriffe, um diese Frage zu beantworten sind Responsive Design und Mobile First.

Im Jahr 2018 spielen Tablets und Smartphones keine untergeordnete Rolle mehr. Ein Großteil aller Seitenaufrufe finden auf mobilen Endgeräten statt. Etwa jeder vierte Deutsche tätigt Käufe mit dem Smartphone. Viele besitzen überhaupt keinen Rechner oder Laptop mehr, mit dem sie auf das Internet zugreifen, sondern führen ihren einzigen Internet-Zugang täglich mit sich in der Tasche. Das allein macht deutlich, wie relevant mobile-optimierte Websites in der heutigen Zeit sind.

Responsive Design

Seit 2010 spielt das Responsive Design eine übergeordnete Rolle.

Es ermöglicht mit sogenannten Media-Queries die Anordnung von Elementen via CSS für bestimmte Browser-Breiten zu manipulieren. Dadurch lässt sich zum Beispiel die Schriftgröße auf verschiedenen Browser-Größen anpassen.

Bei diesem Beispiel würde die Schrift bei Browsern mit einer maximalen Breite von 500 Pixeln 16 Pixel groß dargestellt werden. Bei allen größeren Browsern ist die Schrift nur noch 14 Pixel groß.

Durch Responsive Design lassen sich also Elemente beliebig anordnen und manipulieren. Um langes Scrollen auf kleinen Bildschirmen zu vermeiden, werden viele Elemente durch display: none; einfach ausgeblendet. Inhalt wird also häufig gekürzt, wenn eine Website erst für große Bildschirme konzipiert wurde und anschließend auf Smartphone-Größe angepasst wird.

Tatsächlich ist mit einer responsiven Website eine Seite gemeint, die durch solche Skalierungen auf allen Screensizes funktioniert, ohne das Inhalte am Bildschirmrand unabsichtlich abgeschnitten werden. Eine moderne Website sollte natürlich immer responsive sein. Das bedeutet, dass bei den folgenden Entwicklungsansätzen vorrausgesetzt wird, dass die zu erstellende Website responsive ist. Die m-dot (m.website.com) Websites widersprechen dem Gedanken eine einzige Website für alle Screensizes zu machen. Außerdem bringen sie zukünftig Nachteile im Indexing von Google.

Mobile First und was es bedeutet

Inhalte für kleinere Bildschirme zu kürzen ist allerdings keine gute Idee, da jene, die nur das Smartphone nutzen, ständig die gekürzten Inhalte sehen würden. Genau das wurde allerdings lange Zeit praktiziert. Man hat Websites für die gewohnten Displaygrößen erstellt und anschließend geprüft, welche Inhalte sich davon gut auf dem kleinen Smartphone-Display darstellen lassen und welche man besser weg lassen kann oder sollte. Mit Mobile First wollte man das verhindern.

Die Lösung bestand darin, Websites für den kleinsten Bildschirm zu optimieren und anschließend die genutzten Elemente auf den größeren Bildschirmen anzuordnen. Man kann sich das Ganze mit dem Einrichten von verschieden großen Räumen verbildlichen. Stellen Sie sich vor, Sie haben einen großen, leeren Raum und füllen diesen so lange mit Möbeln, bis Sie glücklich und zufrieden sind. Nun ziehen Sie in einen kleineren leeren Raum um und möchten all ihre Möbel mitnehmen. Sie stellen fest, dass nicht alle Möbel in den neuen Raum passen und müssen reduzieren. Wenn Sie zuerst den kleineren Raum mit Möbeln füllen und diese anschließend in einen größeren Raum bringen, passen alle Möbel wunderbar und problemlos in den großen Raum.

Hier der Umzug von einem großen Raum in einen kleineren Raum, in den nicht alle Möbel passen.

3D isometric living room | designed by Vexels

Google schenkt den mobilen Versionen von Websites zunehmende Bedeutung. Dadurch ist der Begriff Mobile First nun auch im SEO-Bereich angekommen und etabliert. Was das genau zu bedeuten hat schreiben wir in dem Artikel SEO 2017: Wie geht eigentlich Mobile First SEO? 6 Tipps.

Funktioniert Mobile First in der Praxis?

Sind Mobile First konzipierte Websites immer gut aufgebaut? Ich denke, dass man sich von Anfang an sehr einschränkt. Wenn man von Beginn an seine Informationen und Elemente für kleine Darstellungen filtert, gehen wohl immer interessante Gedanken verloren.

Mobile First wird als das Allheilmittel gesehen. Jede Website soll Mobile First gebaut werden. Der kleinste Bildschirm ist jedoch wohl nicht immer der beste oder der wichtigste Bildschirm. Vielleicht bewegen mich ganz andere Interessen dazu, mein Smartphone in die Hand zu nehmen statt ein Tablet.

Neue, alternative Ansätze

Für welche Displaygröße, oder für welches Gerät sollte man also anfangen, seine Website zu gestalten?

Kenne deine Zielgruppe

Um diese Frage zu beantworten, sollte man seine Zielgruppe kennen. Um sich ein genaues Bild von seiner Zielgruppe und von deren Vorlieben und Charakteristika zu machen, hilft es, Traffic mit Hilfe eines Analysetools wie beispielsweise Google Analytics zu analysieren. Falls das nicht reicht, kann man sich seine Zielgruppe via Personas verbildlichen. In dem Artikel "Geben Sie Ihrer Zielgruppe ein Gesicht - Persona Entwicklung in wenigen Schritten" findet man eine detaillierte Beschreibung zur Erstellung hilfreicher Personas.

Wenn man seine Zielgruppe genau kennt, hat man auch eine bessere Vorstellung davon, welche Geräte bevorzugt genutzt werden. Es spielt schließlich eine Große Rolle, ob man eine Website oder Web-App erstellt, die auf der Arbeit und im Büro genutzt wird oder ob man etwas erstellt, das hauptsächlich auf dem Arbeitsweg in der Bahn aufgerufen wird.

Journey-Driven Design

Ein Ansatz für eine zeitgerechte Herangehensweise bietet das Journey-Driven Design von Smashing Magazine (vlg.: Mobile First Is Just Not Good Enough: Meet Journey-Driven Design).

Hier wird genau diese Problematik behandelt und festgestellt, dass man die Reise eines Nutzers auf der Website verfolgen sollte:

Die Optimierung der verschiedenen Website-Darstellungen sollte also für die verschiedenen Stationen auf der Reise eines Nutzers optimiert sein. Wenn ein Nutzer 4 Schritte auf dem Smartphone geht und danach zum Desktop wechselt, dann müssen 4 Schritte für das Smartphone und die folgenden für große Screens optimiert sein. So würde man garantieren, dass immer die interessantesten Informationen am prominentesten dargestellt werden.

User First Design

Bei dem Ansatz des User First Design von Jess Hutton aus dem Artikel Where Do We Go from Mobile First? muss man sich auch erst ein genaues Bild von seinen Konsumenten machen. Wichtig ist es zu wissen, welche Inhalte sind auf welchem Darstellungsgerät am interessantesten? Welche Informationen möchte ich wie dargestellt bekommen.

Das Browserverhalten auf Smartphones ist ein anderes als auf größeren Displays. Auf dem Smartphone-Display zählen schnelle Ergebnisse. Man möchte die wesentlichen Informationen schnell finden und angezeigt bekommen. Nutzt man seinen Smartphone-Browser, möchte man etwas Bestimmtes. Man hat genaue Ziele im Kopf und möchte diese auch, so schnell es geht, erreichen.

Außerdem beeinflusst meine Interessen auch, mit welchem Gerät ich auf eine Internetseite gehe. Stellt man sich vor, man geht auf die Internetseite eines Restaurants:

• Möchte ich mich allgemein mit einem Restaurant auseinandersetzen, dann mache ich das am Desktopbildschirm. Ich schaue mir Bewertungen an und verschaffe mir ein genaues Bild.
• Wenn ich mir das Menü anschauen will, wähle ich vielleicht eher das Tablet und klicke mich durch das Angebot.
• Wenn ich mein Smartphone in die Hand nehme, will ich vielleicht eher Informationen erhalten wie beispielsweise eine Wegbeschreibung, eine Adresse, eine Telefonnummer oder einen direkten Call-Button.

Bei der Entwicklung nach Journey-Driven Design liegt also die Reise im Vordergrund. Man guckt, welche Geräte in welcher Reihenfolge genutzt werden. Beim User First Design geht man danach, welche Interessen mit welchem Gerät einhergehen.

Meine eigene Einschätzung

Mobile First ist keine schlechte Sache. Es hilft dabei, Fehler zu vermeiden und gibt einem eine grobe Struktur. Wie es interpretiert wird und wie es umgesetzt wird, ist in meinen Augen nicht immer ideal. Außerdem wird es immer wichtiger, seine Zielgruppe genau zu kennen und zu wissen, welche Informationen zu welchem Zeitpunkt und auf welche Weise am interessantesten sind.

Natürlich ist es wichtig, dass Websites auf dem Smartphone funktionieren. Und es ist furchtbar, dass es immer noch Websites gibt, die auf kleineren Displays nicht funktionieren. Aber ist das Smartphone das wichtigste Medium? Muss man es als priorisiert behandeln?

In meinen Augen sollte man versuchen, sich von Anfang an vor Augen zu führen, welche Rolle welches Gerät in meinem Projekt einnehmen soll. Man sollte sich individuell für die wichtigsten Screensizes entscheiden und diese dann parallel mit Inhalt füttern. Dafür muss man sich allerdings schon vor der Erstellung intensiv mit seiner Zielgruppe und seinem Thema auseinandersetzen.