Mobile first Ansatz – Fluch oder Segen?
Für uns als Shopware-Agentur ist das Thema “Mobile First” von großer Bedeutung und wird in beinahe jedem Projekt zur Sprache gebracht. Doch was bedeutet Mobile First? Was sind die Vorteile, was die Nachteile? Darauf möchten wir im Folgenden, ohne zu komplex zu werden, eingehen und eine Art Bewertungshilfe bieten, die auch denjenigen weiterbringt, der nicht jeden Tag mit diesem Thema aus fachlicher Sicht konfrontiert ist, aber dennoch Entscheidungen treffen muss.
Was bedeutet Mobile-First?
Mit dem Mobile First Ansatz wird auf mobile Endgeräte in der Entwicklung und Konzeption von Webprojekten ein besonderes Augenmerk gelegt. Ein Konzept, das sich, gerade in Bezug auf die stetig wachsenden Verbreitung von Smartphones und Tablets, großer Beliebtheit erfreut.
Der Kerngedanke besteht daraus, zunächst die Konzeption für den kleinsten Viewport zu erarbeiten und auf dieser Basis größere Viewports zu übertragen. Diese sehr konzeptionelle Sichtweise zielt darauf ab die User Experience zu verbessern und die Anzahl nicht relevanter Elemente auf größeren Bildschirmen zu reduzieren.
Zudem soll die Adaptierung, eine entsprechend gute Konzeption vorausgesetzt, auf größere Viewports keinen Aufwand verursachen. So verlockend dieser theoretische Gedanke klingen mag, so realistisch muss betrachtet werden, dass die Realität dem Versprechen nicht immer Stand halten kann.
Allgemeiner gehalten beschäftigt sich Mobile-First mit Möglichkeiten alle Aspekte eines Webauftritts von beginn an auf Mobile Endgeräte zu optimieren.
Die graue Vorzeit
Als die ersten Smartphones aufkamen, wurde versucht, die bestehenden Desktop-Webseiten auf mobilen Geräten nutzbar zu machen. Dieser Desktop-First-Ansatz resultiert, aus Sicht der Frontend-Entwicklung, im Überschreiben von Stylings, die nur für die Desktop-Ansicht gebraucht werden. Eine solche Website im Nachhinein anzupassen erfordert auf lange Sicht einen erheblichen Mehraufwand, da die Wartung und spätere Anpassung der Stylings erschwert werden. Zudem leidet die Performance auf Mobilgeräten spürbar, da zunächst alle Styles für die Desktop-Ansicht geladen und dann wieder entfernt werden.
Gründe für Mobile-First
In den vergangen Jahren ist das Surfen mit dem Smartphone salonfähig geworden. Der ständige Begleiter im Alltag ist mittlerweile zentraler Bestandteil der Internetnutzung. Durch die Verwendung von Mobile-First wird von der ersten Sekunde an eine Optimierung auf kleinste Bildschirmgrößen vorgenommen.
Seit März 2018 liefert Google eigene Suchergebnisse für Nutzer Mobiler Devices aus. Die Grundlage bildet ein separater “Mobile First Index”, welcher ein besonderes Augenmerk auf die mobile Optimierung von Webseiten legt.
Wird der Ansatz konsequent in der Frontend-Entwicklung fortgesetzt, so lässt sich die Wartbarkeit der Cascading Style Sheets, des formgebenden CSS, vereinfachen. Während Desktop-Layouts in der Regel auf komplexe Styling-Regeln zurückgreifen, müssen diese bei einem “Desktop-First-Ansatz” für Mobile Seiten rückgängig gemacht werden. Diesen Overhead erspart man sich durch eine saubere Implementierung des Mobile First Ansatzes im Frontend.
Beispiel Mobile First https://codepen.io/mo2l/pen/vaJdxN
Beispiel Desktop First https://codepen.io/mo2l/pen/KBvoME
Bereits in diesem einfachen Beispiel lassen sich vier Zeilen CSS-Code einsparen. Es lässt sich leicht vorstellen, wie dies in komplexen Webseiten skaliert und so für eine wesentlich bessere Geschwindigkeit und aufgeräumten Quelltext sorgt.
Schattenseiten von Mobile First
Während sich der Mobile First Ansatz in der Frontendentwicklung durch die Reduzierung der Komplexität des CSS-Codes rechtfertigt und somit nachhaltig zur Senkung der Entwicklungszeit beiträgt, kann dieser Ansatz bei der Konzeption und Umsetzung zu Problemen und einer schlechteren User Experience führen. Warum? Recht einfach: Durch die schwerpunktmäßige und nicht selten auch dogmatische Betrachtung der Mobile Viewports geht leicht der Fokus auf den immer noch relevanten Desktop Viewport verloren, so dass Elemente, die auch auf normalen PCs große Bedeutung haben, nicht umfassend genug berücksichtigt werden.
Wie arbeitet die Shopware Agentur Pixline Media?
Konzeptionell haben wir stets den User im Fokus. Wir bedienen uns also bei der Konzeption und Gestaltung Ihres Shopware Templates des “User First”-Ansatzes. Dieser hilft uns die Bedürfnisse des Nutzers in den Vordergrund zu stellen und für diesen eine bestmögliche Nutzererfahrung zu generieren.
Bei der Frontend-Entwicklung setzen wir dann, ausgehend von den umfassenden Ergebnissen von Konzeptions- und Layoutphase, vollends auf den Mobile-First-Ansatz, um ein modernes und funktionales Produkt erstellen zu können, welches schlussendlich auf allen Endgeräten für den Nutzer einen echten funktionalen Mehrwert bietet.
