Mobile First: Der neue Ansatz im Webdesign

Scroll  ____
Share
| | 20. Oktober 2021
Allgemein | Design | Webentwicklung

Der Mobile First Ansatz - ein Trend, welcher durch die ungebremste Erfolgskurve mobiler Geräte einen riesigen Boom erfahren hat. Das entsprechende Konzept für moderne Webdesigns sieht vor, dass die für mobile Endgeräte optimierte Version zuerst entsteht und sukzessive Erweiterungen stattfinden. Auf mobilen Webseiten gibt es einige Elemente und Abschnitte die anders zu behandeln sind als bei stationären Desktops. Gerade die Nutzerführung muss optimal gestaltet sein, um den Seitennutzer nicht vorzeitig zu verlieren.

Wie Sie die eigene Webseite nicht nur auf Desktop Geräten, sondern auch responsive in der mobilen Welt ansprechend platzieren können, zeigen wir Ihnen im Folgenden:

Mobile First: mobiles Mockup

Zu Beginn eines jeden Webseiten-Projekts ist ein gut durchdachtes Mockup der späteren Seite bei uns nicht wegzudenken. Da wir selbst auch mit dem Mobile First Ansatz arbeiten, können wir bereits ganz am Anfang die wichtigsten Elemente mobil planen. Arbeitet man von einer bestehenden Desktop-Webseite/Mockup ausgehend, ist die Schwierigkeit, alle Inhalte der meist etwas ausführlicheren Desktop Version mobil passend zu machen. Von weniger Platz auf mobile zu viel Layout-Fläche auf Desktop umbauen ist natürlich wesentlich leichter als andersrum. Daher empfehlen wir Mobile Mockup first.

Mobile vs. Desktop: Mausklick & Touch Interaktion

Desktop = Cursor

Am Desktop kann der Cursor genutzt werden: Hover-Text, Button-Effekte oder durch den Cursor ausgelöste Animationen machen die Seite lebendig. Diese Cursorfunktion erlaubt es überwiegend mit Bildern zu arbeiten und beschreibende Texte erst zu einem späteren Zeitpunkt (z. B. wenn man mit dem Mauszeiger über sie fährt) erscheinen zu lassen.

Ältere Person nutzt Webseite auf einem mobilen Endgerät

Mobil = Gesten

Bei mobilen Endgeräten gibt es die Mauszeiger Funktion nicht, man kann also nicht mit dem Cursor über ein Bild fahren. Dafür hat man aber sehr viele Gesten einfach auf der Hand, welche mobilen Anwendungen eine ganze Bandbreite an neuen, aufregenden Möglichkeiten verschaffen. Wischen, schütteln oder einfach nur Drücken, hier ist man sozusagen selber der Cursor.

Um dieses Erlebnis aber nicht zu einer anstrengenden User-Experience zu machen, sollte man auf ein paar Dinge achten:

  • Call-to-Action Buttons, Links und Navigationen genügend Raum lassen (keiner will versehentlich den falschen Button drücken, nur weil zu wenig Abstand zwischen den beiden Buttons ist)
  • Es gibt Menschen mit größeren Fingern - Elemente mit Interaktionen dahinter sollten ohne Probleme klickbar und nicht zu klein sein oder andere Interaktionen auslösen

Navigation als Dropdown für mobile Geräte

Wenn man darüber nachdenkt, was eine mobile Umsetzung qualitativ hochwertig macht, dann kommen wenige Klicks oft ganz vorn. Wenige Klicks/Tabs = bessere Usability. Da kommen wir auch direkt zum Punkt Navigation, hier sind es nämlich häufig große Menüstrukturen mit vielen Klick-Möglichkeiten, die den Nutzer verwirren und stören. Umfangreiche Menüstrukturen stellen bei stationären Desktops kaum ein Problem dar. Dropdown Menüs haben viel Platz zum Ausklappen und alle Inhalte können vollflächig dargestellt werden. Bei mobilen Geräten ist dieser Platz einfach nicht vorhanden. Ein Dropdown Menü ist hier nicht empfehlenswert, da hier wesentlich mehr Interaktionen, Scrollen und Klicks erforderlich wären um ans Ziel zu gelangen. Bei mobilen Applikationen erleichtern Sie dem Nutzer die Experience, indem Sie Inhalte vereinfacht darstellen und die Auswahlmöglichkeiten durch raffinierte Darstellungstechniken anschaulich gestalten (z. B. bereits vorgegebene Daten bei Buchungsprozessen).

Situationsbedingtes Design für mobile Geräte

Zeiten ändern sich und so auch die Orte und Situationen in welchen im Internet gesurft wird. Unsere Mobil-Geräte haben wir fast immer zur Hand und mit dem Netz verbunden. Webseiten werden also in den unterschiedlichsten Situationen besucht. Beim Warten auf die Bahn, der kurzen Meeting-Unterbrechung, im Restaurant oder auf dem Weg nach Hause. Dies bedeutet natürlich, dass die Aufmerksamkeitsspanne deutlich reduziert ist. Der Nutzer wird durch viele Dinge in seinem Umfeld von der Website abgelenkt. Auch die Internetverbindung kann einknicken und das Laden Ihrer Seite verhindern. Aus diesen Gründen bevorzugen Nutzer kurze Wege und simple Funktionen, wenn Sie mobil surfen. Wir empfehlen klappbare Textboxen, Slider, die langem Scrollen vorbeugen, und große, gut leserliche Texte/Buttons. Komprimierte Bilder mit geringer Ladezeit sind nicht zu vergessen.

Mobile First: Vorhandene Funktionen nutzen

Das hört sich nach einer Menge Einschränkungen und wenigen Möglichkeiten an? Stimmt nicht. Gerade bei mobilen Geräten gibt es einige sehr praktische, bereits integrierte Funktionen. Man muss sie nur nutzen. Machen Sie sich diese hauseigenen Gerätefunktionen zu Nutze:

  • Direkte Anruffunktionen
  • Integrierte Kamera für Videoanrufe
  • Textfunktion
  • Standort-Funktion

Call-to-Action Buttons sowie Links und klickbare Elemente können direkt mit diesen Funktionen verknüpft werden. Dies sorgt für eine bessere User-Experience und spart dem User Zeit.

Content Priorisierung für eine optimierte mobile Nutzung

Ja, das Layout und die freien Flächen sind gegenüber stationären Desktops bei mobilen Geräten definitiv eingeschränkt. Ein kleinerer Bildschirm bedeutet auch weniger Platz für Texte, Bilder und Grafiken. Es bietet sich also an, wichtige Inhalte zu priorisieren und in den Vordergrund zu rücken. Manche Texte lassen sich vielleicht um ein paar Wörter kürzen. Grafiken oder Bilder können Sie kleiner darstellen oder herausnehmen. Ein guter Mittelweg ist hier am besten. So wenig Inhalt wie möglich - so viel, dass alles verständlich und ansprechend ist.

Google Mobile Friendly Test

Jetzt soll Ihr mobiler Auftritt so richtig durch die Decke gehen? Dann checken Sie doch zuerst den nützlichen Google Mobile Friendly Test. Dieser kann helfen, kritische Usability Schnittstellen aufzudecken und die User Experience bei Ihrem mobilen Webauftritt zu verbessern.

Mobile First - der Ansatz der Zukunft

Der Mobile First Ansatz wird als der Ansatz der Zukunft gesehen. Ob er die stationären Desktops je komplett ablösen wird, ist fraglich. Fest steht jedoch, dass eine nicht mobil optimierte Webseite heute kaum mehr eine Chance gegenüber der Konkurrenz hat. Nutzen Sie also unsere Tipps und geben Sie dem Mobil Ansatz eine Chance. Und wer weiß, vielleicht bestätigt Ihnen der Google Mobile Friendly Test bereits eine top Usability Ihrer Internetseite.

Kostenlose Erstberatung!
  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.
That must be interesting!
Die seowerk News halten jede Woche interessante Beiträge, rund um die Themen SEO, SEA, Social Media, Storytelling, UX und vieles mehr für Sie bereit.
  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.
Volle Säle bei Content-Themen: mit Storytelling interagieren & konvertieren Die Orga lief allerdings so reibungslos, dass es sich nicht anfühlte, […]
Weiterlesen
  |    |  
Das unterscheidet Twitter von anderen Plattformen Die 2006 gegründete Mikroblogging-Plattform Twitter zählt mit 139 Millionen aktiven Nutzer:innen pro Tag zu […]
Weiterlesen
Natürlich hätte es für eine Google AdWords Agentur oder schlicht Werbende Vorteile, wenn ihre Google AdWords Anzeigen künftig durch Bilder mehr auffallen […]
Weiterlesen
Unser Wolfgang Winter hat vor kurzem im Rahmen des Online Marketing Tags ein Webinar zum Thema Gewinnbringendes Affiliate Marketing für KMU gehalten. […]
Weiterlesen
Neues Update von Google kommt – was ändert sich für Suchmaschinenoptimierung? Mit dem neuen Update wird der Suchalgorithmus von Google […]
Weiterlesen
So kommt das virtuelle Klassenzimmer online zu den Entscheidern Am 11. März 2020 schlossen die ersten Schulen, bevor Bayern nur […]
Weiterlesen
Kreativität ist die Fähigkeit Neues zu erschaffen und Lösungen für Probleme zu finden. Besondere die Berufsgruppe der Grafiker und Webdesigner […]
Weiterlesen
Clubhouse: Was ist das genau? Clubhouse ist ein Audio Network aus den USA, bei der Anwender Gesprächen und Diskussionen wie […]
Weiterlesen
  |  
Originelle, hochwertige Inhalte erregen Aufmerksamkeit, stellen für die Nutzer:innen echten Mehrwert dar und erreichen ganz nebenbei neue Kundschaft sowie eine […]
Weiterlesen
Was ist dieser Cyber Monday? Für die Amerikaner war wohl Halloween noch nicht genug. Sie erfanden auch noch den Black […]
Weiterlesen
  |  
Google Core Update 2020: Was hat sich verändert? Veränderungen im Sichtbarkeitsindex zeigen sich bei Webseiten aus den Bereichen Affiliate, Finance, […]
Weiterlesen
Was zeichnet die Generation Z aus? Die Generation Z ist ständig online. Laut der ARD/ZDF Online Studie 2019 waren mehr […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram