«Mobile First» – vom Trend zur Philosophie

19.4.2016

Der Begriff «Mobile First» geht auf den erfolgreichen Entrepreneur Luke Wroblewski zurück. Dieser wies bereits 2009 darauf hin, dass Webapplikationen und Webseiten – im Gegensatz zur damals gängigen Praxis – zuerst für Mobilgeräte und erst in einem zweiten Schritt für Desktopbildschirme entwickelt werden sollen. Was damals noch revolutionär war und von verschiedenen Seiten kritisch hinterfragt wurde, kann heute durchaus als Paradigmenwechsel verstanden werden.

Obwohl viele Webdesigner und Entwickler zunächst dagegenhielten, «Mobile First» führe zu zusätzlichem Aufwand oder schränke ihre Kreativität ein, zweifelt heute niemand mehr an der Bedeutung von mobilen Geräten. Seit einigen Jahren übersteigt der Traffic von Mobilgeräten (Smartphones und Tablets) denjenigen der Desktopcomputer und auch der Anteil mobiler Bestellungen am Gesamtvolumen nimmt kontinuierlich zu, wenn auch nicht so schnell wie prognostiziert. Ein Grund für die langsamere Entwicklung könnte sein, dass «Mobile First» noch nicht überall gleich konsequent umgesetzt wird und viele Onlineshops noch keine einfachen Bestelllösungen anbieten.

Daher ist es essentiell, «Mobile First» bereits in der Konzeptionsphase miteinzubeziehen. Dank der frühzeitigen Auseinandersetzung mit Mobilgeräten können gewisse Schwierigkeiten umgangen werden: Einerseits werden nur wesentliche Features eingebaut, die auf allen Geräten funktionieren. Andererseits weist das Design von Beginn weg grössere klickbare Flächen und grössere Abstände zwischen den Elementen auf. Zudem wird die Webseite so aufgebaut, dass sie auch bei geringeren Bandbreiten und kleineren Bildschirmen gut bedienbar ist.

Best Practice – «Mobile First» im E-Commerce

Der Onlineshop von Herzbrand, ein Projekt der MySign AG in Zusammenarbeit mit Malu AG und weiteren Lieferanten, beinhaltet einzigartige und qualitativ hochwertige Geschenkartikel jeglicher Art: Cingomma Gürtel aus alten Fahrradreifen, Bugatti Taschen, Küchengeräte, Möbel, Gartengrills, Feuerschalen und vieles mehr.

Bei Herzbrand erkennt man auf den ersten Blick, dass sich die Mobile-First-Strategie lohnt: Der Fokus auf das Wesentliche führte zu einem minimalistischen Design, welches die Produkte in den Fokus stellt und durch eine hohe Usability besticht. So wurden beispielsweise die klickbaren Flächen im Voraus definiert und gestaltet, die Schriftart entsprechend ausgewählt und der „in den Warenkorb“-Button der mobilen Ansicht im Produktdetail unten fixiert. Zudem entschied man sich für hochaufgelöste Produktbilder in Retina-Qualität. Einen positiven Effekt hat die Mobile-First-Strategie auch für den Desktop-Benutzer von Herzbrand: Während die Desktopversion früher oftmals mit unnützen Features vollgepackt wurde, welche später in der mobilen Ansicht weggelassen werden mussten, sind die Funktionen bei Herzbrand bei allen Ansichten identisch. Dank «Mobile First» überlegt man sich also genauer, ob Funktionen, auf welche in der mobilen Version verzichtet wurden, in der Desktop-Ansicht überhaupt benötigt werden. Der Fokus auf das Wesentliche hilft somit auch den Desktop-Usern und führt zu einer besseren Usability.

Mobile First bei Herzbrand

«Ein Bild sagt mehr als tausend Worte»

Dieses alte Sprichwort gilt auch für Webseiten. Es ist bekannt, dass Texte mit Bildern viel häufiger angeklickt werden, als solche ohne Bild. Die Bedeutung von (hochaufgelösten) Bildern ist insbesondere im Bereich des E-Commerce nicht zu unterschätzen. Daher wurde Herzbrand so konzipiert, dass der Kunde die Produkte bis ins kleinste Detail anschauen kann. Eine grössere Anzahl an Bildern führt jedoch unweigerlich zu einer weiteren Schwierigkeit bei retinaoptimierten Onlineshops, denn eigentlich müsste es auch heissen «ein Bild lädt mehr als tausend Worte». Da die Ladezeit eines Onlineshops nachgewiesenermassen einen direkten Einfluss auf die Konversionsrate (und somit auf den Umsatz) hat, wird der positive Effekt der «schönen» Bilder wieder zunichte gemacht. Glücklicherweise gibt es hier verschiedene Lösungsansätze, die bei Herzbrand verwendet werden: Zum einen empfiehlt es sich, die Bilddateien vor dem Upload zu komprimieren. Die Komprimierung ist für das menschliche Auge kaum ersichtlich, kann jedoch zu mehr als 70% kleineren Datenmengen führen. Zum anderen gibt es technische Tricks (wie z.B. «Lazy Load»), mit welchen nicht alle Bilder auf einmal geladen werden, sondern erst, wenn sie im Viewport/Anzeigebereich erscheinen. Zu guter Letzt sollte sich dieses Problem mit der zunehmenden Verbreitung höherer Geschwindigkeiten auf Mobilgeräten (dank 4G, 4G+ und in Zukunft 5G) vermindern. Somit wird man in Zukunft auch unterwegs noch mehr in den Genuss von qualitativ hochstehenden Bildern und Videocontent kommen.

Fazit

«Mobile First» hat sich also von einem Trend zu einer ständigen Philosophie weiterentwickelt, die heute kaum noch wegzudenken ist und diverse Vorteile mit sich bringt. Es ist jedoch wichtig, dass man die Mobile-First-Strategie nicht als losgelöste Strategie betrachtet. Für einen erfolgreichen Webauftritt benötigt es einen ganzheitlichen Strategieansatz, der alle möglichen Geräte miteinbezieht und eine massgeschneiderte Lösung für die jeweilige Zielgruppe präsentiert.

 

Mobile First - MySign

Google+ 0 Facebook 0 Twitter 0 Pinterest 0

Kategorisiert in: ,