Was genau ist Mobile-First Webdesign?
Der englische Begriff macht das grundlegende Konzept hinter diesem Designansatz deutlich. Bei der Gestaltung der Webseite nimmt der Entwickler an, dass der grössere Teil der Nutzer des Webangebots über mobile Geräte wie Smartphones und Tablets auf die Inhalte zugreift. Dies schliesst die Nutzer von Notebooks und Desktop-PCs nicht aus. Allerdings soll das Webdesign so angelegt werden, dass es primär auf die Nutzer mobiler Geräte ausgelegt ist.
Der Ansatz ergibt Sinn, wenn ein Blick auf die Entwicklung des Internets im letzten Jahrzehnt geworfen wird. Im Jahr 2012 fand ungefähr jeder zehnter Aufruf einer Webseite über ein mobiles Gerät statt. Damals war die Internetnutzung über PC und Laptop noch deutlich verbreiteter. Der Trend hat sich mittlerweile gewandelt, der Anteil mobiler Aufrufe liegt seit Jahren konstant zwischen 50 und 60 %.
Abhängig von Zielgruppe und Inhalten der Webseite ergibt es deshalb Sinn, «Mobile-First» zu denken. Was bei der Entstehung neuer Internetpräsenzen obligatorisch ist, gilt umso mehr für veraltete Webseiten ohne einen ansprechenden, mobilen Auftritt.
Was zeichnet diese Art des Webdesigns aus?
Natürlich erwarten Unternehmen von einer professionell entwickelten Webseite, dass diese für mobile und stationäre Nutzer funktioniert und das Corporate Design optimal wiedergibt. Unter dem Ansatz «Mobile-First-Design» leidet der Auftritt auf grösseren Bildschirmen deshalb nicht. Trotzdem gibt es einige Merkmale und Eigenschaften, die für eine mobil optimierte Webseite essenziell sind:
1. Die Navigation ist sehr schlank gehalten und intuitiv zu bedienen. Auf grössere Menüs mit zahlreichen Einträgen wird verzichtet. Stattdessen umfasst die Seite nur wenige Menüpunkte, die sich schnell und einfach aufrufen lassen. Das sogenannte «Hamburger-Menü» mit drei Strichen, das die Navigation ein- und ausblenden lässt, kann auch auf vielen Desktop-Versionen der Seite entdeckt werden.
2. Die Inhalte sind als One-Pager angelegt. Der Nutzer muss hier nicht mehr zwischen verschiedenen Unterseiten hin- und herblättern, sondern findet alle Informationen kompakt auf einer einzigen Webseite dargestellt. Das Anklicken eines Menüpunktes scrollt automatisch zum Eintrag auf der einzelnen Seite. Dieser Aufbau entspricht dem Nutzungsverhalten von Smartphone-Besitzern und wird für die Desktop-Variante fortgeführt.
3. Über die Webseite ist eine einfache Kontaktaufnahme möglich. Gehen Sie davon aus, dass der Nutzer die Seite per Smartphone aufruft, lässt sich die Möglichkeit zum Anruf oder einer Nachricht bei WhatsApp direkt verlinken. Stünde der Nutzer eines Desktop-PCs im Vordergrund, würde eher mit einer E-Mail-Adresse gearbeitet werden.
4. Mediale Inhalte wie Bilder und Videos sind in kleinen Formaten mit überschaubarer Auflösung angelegt. Dies reduziert die Ladezeiten der Inhalte und stellt sicher, dass der Nutzer nicht während der Wartezeit abspringt. Eine gute Seitenentwicklung stellt die gleichen Mediendateien in unterschiedlichen Grössen je nach Endnutzergerät bereit.
5. Da mobile Nutzer oft unterwegs oder in kurzen Zeitfenstern auf Webseiten zugreifen, sollte der Content leicht verständlich und schnell erfassbar sein. Absätze sind kompakt gehalten, Schriftgrössen sind gut lesbar, und wichtige Informationen werden mit Zwischenüberschriften, Bullet Points oder Icons hervorgehoben. Dies verbessert die Nutzererfahrung und sorgt für eine längere Verweildauer auf der Seite.
Mobile-First Webdesign – die Vorteile im Überblick
- Sämtliche Inhalte der Seite lassen sich einfacher, schneller und intuitiver aufrufen. Das schlanke und gradlinige Design hilft nicht nur Smartphonenutzern weiter, vielmehr verleiht es den Nutzern von PCs und Notebooks eine genauso klare Struktur.
- Die mobile Variante ist skalierbar angelegt und kann sich somit an die jeweilige Bildschirmgrösse des Nutzers anpassen. Bei einem grösseren Display, z.B. am PC, lassen sich so Inhalte von Vornherein einblenden, die auf dem Smartphone erst einmal ausgeblendet bleiben.
- Die digitalen Gewohnheiten und Erwartungen ändern sich. Mit einem Mobile-First-Auftritt zeigen Unternehmen, dass sie die Zeichen der Zeit verstanden haben und an einem modernen Online-Auftritt für ihre Zielgruppe interessiert sind.
- Die Performance der Seite verbessert sich dank kürzerer Ladezeiten. Hierfür sind natürlich ein schlanker Quelltext und Mediendaten in einer überschaubaren Auflösung nötig. In ein professionelles Webdesign integriert, profitieren hiervon mobile und stationäre Nutzer gleichermassen.
Vorgehensweise für das neue Webdesign
Laien im Bereich Webdesign sollten verstehen, dass ein mobiler Webauftritt nicht gleichbedeutend mit dem Mobile-First-Prinzip ist. Eine für mobile Geräte geeignete Webseite sollte heutzutage jeder Seitenbetreiber haben, da der Webauftritt sonst nicht mehr bei Google gelistet werden dürfte.
Auch deshalb ergibt es Sinn, ein bestehendes, mobiles Webdesign noch einmal zu überarbeiten und hierbei nach dem Mobile-First-Prinzip zu verfahren. Die folgenden Schritte sollten als grobe Richtlinie für die Entwicklung verstanden werden, die ONELINE als erfahrene Online Marketing Agentur kompetent begleitet:
- Priorisierung von Inhalten zur optimalen Darstellung auf kleinen Geräten
- Aufbau einer klaren Seitenhierarchie im Design, z. B. über ein CMS
- Entwicklung eines Interface passend zum Corporate Design
- Erarbeitung einer schlanken Menüstruktur, z. B. für einen One-Pager
- Umsetzung und Test auf verschiedenen mobilen Devices
Mobile-First-Konzept stetig wichtiger
Die Bedeutung des Mobile-First-Konzepts dürfte in den kommenden Jahren noch steigen. Auch wenn klassische PCs im gewerblichen Umfeld als Arbeitsmittel erhalten bleiben dürften, wird sich im privaten Bereich die mobile Internetnutzung immer stärker durchsetzen. Dies gilt insbesondere durch die nachrückende Generation, für die das Smartphone ein essenzieller Begleiter ist.
Eine Umstellung der Seite mit einer Priorität bei mobilen Nutzern ist deshalb dringend anzuraten. Auch wenn die Seite grundsätzlich allen Ansprüchen eines mobilen Webauftritts genügt, dürfte ohne den mobilen Fokus die Seite schwieriger zu navigieren sein als das Angebot der Konkurrenz. Gleiches gilt für die Grösse von Medienelementen und anderen Hürden, die eine einwandfreie Performance beeinflussen.
Mit einer professionellen Webdesign Agentur wie ONELINE lässt sich nach einer Analyse der richtige, strategische Weg einschlagen, um zukünftig durch einen mobil optimierten Webauftritt zu überzeugen.
