Mobile First: Der neue Ansatz im Webdesign

| | 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 (mehr zum optimalen Button-Design) 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!

*“ zeigt erforderliche Felder an

Einwilligung*
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.

*“ zeigt erforderliche Felder an

Einwilligung*
Dieses Feld dient zur Validierung und sollte nicht verändert werden.
  |    |  
Überwinde deine Schreibblockade Als Texter:in oder Content Creator hast du einen wichtigen Job: Du bringst Ideen und Gedanken auf Papier […]
Weiterlesen
  |    |  
10+1 Anwendungen, wie ChatGPT bei der Erstellung von SEO-Content hilft Seit November 2022 ist ChatGPT als Forschungsvorschau für die Öffentlichkeit […]
Weiterlesen
  |    |  
Was sind saisonale Suchbegriffe?  Es ist kurz vor Weihnachten: Die Feiertage stehen vor der Tür und die letzten Geschenke landen […]
Weiterlesen
  |    |  
Kürzlich ist eine Alternative zur Suchmaschine Google erschienen. Neeva heißt der neue Suchdienst, der Suchen ohne Werbung und Tracking verspricht. In diesem Beitrag möchten wir Euch die neue Suchmaschine vorstellen und erklären, warum SEO gerade auf Neeva so wichtig ist.
Weiterlesen
  |    |  
Menschen mögen den Komfort des hybriden Shoppings Die Kluft zwischen Online- und Offline-Handel zu überwinden, stellt viele Händler:innen vor neue […]
Weiterlesen
  |    |  
Was ist lokale Suchmaschinenoptimierung? Lokale Suchmaschinenoptimierung (Local SEO) ist ein Aufgabenbereich der klassischen Suchmaschinenoptimierung. Ziel ist es, lokale sowie regionale […]
Weiterlesen
  |    |  
Was bedeutet Omnichannel-Marketing? Der Begriff Omnichannel heißt übersetzt soviel wie "alle Kanäle". Das bedeutet, dass ein Unternehmen Kund:innen kanalübergreifend anspricht […]
Weiterlesen
  |    |  
Eine Infografik für soziale Medien zu erstellen, ist im Grunde genommen gar nicht so schwierig. Willst du die Reichweite deiner […]
Weiterlesen
  |    |  
Ein Marken-Styleguide, auch bekannt als Brand Guidelines oder Gestaltungsrichtlinien, ist der Kern einer Marke. Er vereint auf visuelle Weise Mission, […]
Weiterlesen
  |    |  
Was versteht man unter "Suchintention"? Die Suchintention (Search Intent) meint die Absicht des Nutzers, eine Suchanfrage zu stellen. Dabei unterscheidet […]
Weiterlesen
  |    |  
Die sozialen Medien sind zum Hauptort für die eigene Markenpräsentation geworden. Sie helfen, die Werte und Markenbotschaften einem breiten Publikum zu eröffnen.
Weiterlesen
  |    |  
Kostet Instagram bald Geld? Wofür man jetzt bezahlen kann Bereits bei zehn Influencer:innen wird ein neu eingeführtes Abo-Modell für Instagram […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram