30 Tipps zum Design mobiler Websites
In den letzten Jahren ist das mobile Design explodiert, aber es kann schwierig sein zu wissen, was zu tun ist und wo man anfangen soll. Das Design mobiler Websites ist nicht nur eine Frage der Wahl zwischen einer mobilen Website oder einer App - es gibt eine Reihe von Optionen dazwischen und Aspekte, die berücksichtigt werden müssen. Um Ihnen zu helfen, haben wir 30 Top-Tipps zusammengestellt, die Sie bei der Definition Ihrer Mobilstrategie und beim Entwerfen für Mobilgeräte berücksichtigen sollten.
Beachten Sie, dass wir uns auf das Design mobiler Websites und in geringerem Maße auf das Design von Apps konzentrieren, jedoch nicht auf reaktionsfähige Websites. Schauen Sie sich unseren Artikel an wie man eine App macht und unsere Zusammenfassung von sich anpassendes Webdesign Tutorials, wenn Sie daran interessiert sind.
01. Denken Sie voraus - definieren Sie Ihr Ziel jetzt und für die Zukunft
Wir befinden uns in einer Zeit, in der der technologische Fortschritt beim Design mobiler Websites schnell voranschreitet und ständig neue Player eingeführt werden. Überlegen Sie, wie das erste iPad im Sommer 2010 und die Apple Watch im Jahr 2015 auf den Markt kamen. Man kann davon ausgehen, dass sich die Dinge in nur zwei Jahren noch sehr von heute unterscheiden werden.
So viel wie möglich müssen wir etwas bauen, das in ein oder zwei Jahren weiterentwickelt werden kann, anstatt eine vollständige Neugestaltung zu erfordern. Definieren Sie also sowohl Ihre unmittelbaren als auch Ihre langfristigen Anforderungen an mobile Websites und berücksichtigen Sie die Vor- und Nachteile des Werts, den das Ausführen einer App mit sich bringt, gegenüber der Investition in eine Website, die geräteübergreifend funktioniert.
02. Kennen Sie Ihre Zielgruppe und deren Verwendung
Zu wissen, auf welchem Gerätetyp Ihre mobile Website angezeigt wird, ist der Schlüssel zur Steuerung des Designprozesses und Ihrer Strategie für mobile Websites. Obwohl viele Menschen Smartphones haben, gehen Sie nicht davon aus, dass dies jeder tut oder dass alle ein iPhone oder Android-Handy haben. Überprüfen Sie stattdessen mithilfe von Analysen oder Recherchen, welche Geräte Ihre Zielgruppe tatsächlich verwendet.
Sie sollten auch berücksichtigen, wie Ihre Zielgruppe ihr Telefon verwendet und wofür und ob sie über eine zuverlässige Internetverbindung verfügt. Letzteres ist besonders wichtig, wenn Ihre Benutzer beispielsweise Formulare auf ihren Mobilgeräten ausfüllen.
03. Verstehen Sie die Nutzung und Verhaltensmuster mobiler Websites
Es gibt eine Reihe von Missverständnissen in Bezug auf die Nutzung mobiler Websites, die zu irreführenden Designentscheidungen führen können. Eine der häufigsten ist, wie mobile Benutzer immer überstürzt und unterwegs sind oder dass wir nur an bestimmten Dingen interessiert sind, wenn wir unsere Mobiltelefone verwenden.
Tatsächlich geschieht ein großer Teil unserer mobilen Website-Nutzung, wenn wir Zeit zum Töten haben oder wenn wir zu Hause auf dem Sofa sitzen, und dies wirkt sich darauf aus, wie wir die Dinge angehen sollten.
Es ist besser, Ihre Entwurfsentscheidungen auf die Theorie zu stützen, dass wir unsere Telefone zunehmend für dieselben Aufgaben wie auf dem Desktop verwenden, da dies tatsächlich bereits geschieht. Erforschen Sie jedoch so viel wie möglich die Besonderheiten Ihrer Zielgruppe, um zu verstehen, was für sie gilt.
04. Aufgaben und Kontext verstehen
In den frühen Tagen der mobilen Nutzung bestand eine stärkere Beziehung zwischen Aufgaben und Kontext. Einschränkungen bei Geräten sowie die Art und Weise, wie wir das Internet auf ihnen erlebten, führten dazu, dass die von uns ausgeführten Aufgaben recht begrenzt waren. Wenn jemand über ein mobiles Gerät auf unsere Website zugegriffen hat, können wir davon ausgehen, dass er unterwegs und nach etwas Bestimmtem ist.
Heutzutage werden mobile Geräte überall und zunehmend für die gleichen Aufgaben wie ein Desktop verwendet. Obwohl der Kontext immer noch eine wichtige Überlegung ist, besteht er eher darin, wie sich unsere Umgebung auf unsere Nutzung auswirkt, als dass der Kontext, in dem wir uns befinden, einer festgelegten Anzahl von Aufgaben entspricht, die wir ausführen möchten.
05. Vermeiden Sie maßgeschneiderte mobile Websites
Wie haben Sie entschieden, was mit Ihrer mobilen Website geschehen soll? Einschränkungen bei aktuellen technischen Lösungen wie einem CMS können die Erstellung einer maßgeschneiderten mobilen Website erforderlich machen. Vermeiden Sie jedoch nach Möglichkeit die Erstellung separater mobiler Websites. Auf lange Sicht ist die Wartung teurer und zeitaufwändiger, da maßgeschneiderte Geräte für verschiedene Geräte erstellt werden müssen.
Wenn Sie etwas erstellen, das auf so vielen Geräten wie möglich funktioniert, können Sie Ihre Ressourcen und Ihr Budget am besten auf den Inhalt und nicht auf die Wartung konzentrieren.
06. Halten Sie den Kerninhalt gleich
Da Benutzer ihre Mobilgeräte zunehmend für dieselben Aufgaben wie auf Desktops verwenden und daher eine gleichmäßige und kontinuierliche Reise über Geräte hinweg erwarten, gibt es ein starkes Argument dafür, dass Ihre mobile Website ein Spiegelbild Ihrer Desktop-Version sein sollte.
Menschen klicken auf den Link 'Desktop-Version', insbesondere wenn sie mit einer sehr eingeschränkten mobilen Website oder einer Website bereitgestellt werden, die sich strukturell oder visuell erheblich von der gewohnten unterscheidet. Versuchen Sie also, den Kerninhalt gleich zu halten, und denken Sie daran, wie der Benutzer von einem Gerät zum anderen wechselt und was dies für seine Erfahrung bedeuten sollte.
07. Für Handys optimieren
Nur weil Sie den Kerninhalt gleich halten, heißt das nicht, dass Sie Ihre mobile Website nicht optimieren sollten oder können. Im Gegenteil, Sie sollten sowohl die Anzeige von Inhalten als auch Interaktionen optimieren, um sie besser für Berührungen zu verbessern und die Verwendung integrierter Gerätefunktionen zu überprüfen.
Mobile bietet großartige Möglichkeiten, um noch bessere und individuellere Erlebnisse als auf dem Desktop zu erstellen. Diese können auch dann erreicht werden, wenn Sie keine maßgeschneiderte mobile Website oder App erstellen.
08. Sehen Sie sich die Einstiegspunkte als Leitfaden an, um festzustellen, ob Sie eine App erstellen möchten oder nicht
Apps eignen sich hervorragend für fokussiertere und persönlichere Erlebnisse. Wenn Sie erwägen, Ihr Angebot durch eine App mithilfe von Analysen zu ergänzen und Einstiegspunkte zu betrachten, kann dies ein erster Leitfaden sein. Wenn die Mehrheit Ihrer Benutzer über direkten Datenverkehr ankommt, kann dies darauf hinweisen, dass sie Ihre URL mit einem Lesezeichen versehen und dass ein App-Symbol auf dem Startbildschirm von Wert ist. Wenn der größte Teil Ihres Datenverkehrs über freigegebene Links erfolgt, wird dies von einer App allein nicht unterbrochen, da die Benutzer in der Lage sein müssen, auf Ihre Inhalte zuzugreifen, auch wenn sie Ihre App nicht installiert haben.
09. Verwenden Sie Analytics, um zu definieren, auf welche Geräte Sie sich konzentrieren möchten
Consulting Analytics eignet sich auch hervorragend, um zu definieren, auf welche Geräte sich das Betriebssystem, die Version oder die Bildschirmgröße konzentrieren sollen. In Google Analytics sehen Sie beispielsweise eine Aufschlüsselung der verwendeten Geräte, die Aufteilung zwischen verschiedenen Betriebssystemen sowie die Versionen der einzelnen verwendeten Betriebssysteme.
10. Betrachten Sie die verschiedenen Arten von Apps
Wenn Sie festgestellt haben, dass Sie eine App benötigen, prüfen Sie, welcher App-Typ für Sie geeignet ist. Native Apps wie Instagram wurden speziell für jedes Betriebssystem entwickelt. Aus diesem Grund bieten sie häufig die geräteoptimierteste Erfahrung, bedeuten jedoch die Pflege maßgeschneiderter Codebasen.
Eine Alternative sind Hybrid-Apps wie Facebook, die auf HTML5 und JavaScript basieren und einen Wrapper verwenden, um native Funktionen bereitzustellen. Dies bedeutet, dass weniger Versionen gewartet werden müssen, es kann jedoch zeitnah sein, bis die Funktionalität app-artig ist. Was Sie auswählen müssen, hängt unter anderem von Ihren Zielen, Ihrem Budget und der Häufigkeit ab, mit der Sie Ihre Inhalte aktualisieren müssen.
11. Befolgen Sie die Richtlinien und Muster der Benutzeroberfläche
Jedes Betriebssystem verfügt über eine Reihe von Benutzeroberflächen- und Interaktionsprinzipien, an die die Benutzer gewöhnt sind. Wenn Sie eine Android-App erstellen, nehmen Sie nicht nur Ihr iOS-App-Design und verwenden Sie es unverändert, sondern optimieren und erkennen Sie, dass jedes Betriebssystem anders ist. Wenn Sie lernen, was sie unterscheidet, und die Richtlinien einhalten, wird Ihre App einfacher zu verwenden.
12. Berücksichtigen Sie die Abwärtskompatibilität und Fragmentierung
Wenn es um Apps geht, ist es nicht so einfach wie iOS und Android. Jedes Betriebssystem hat unterschiedliche Versionen und nicht jeder Benutzer wird auf der neuesten Version sein. Die Akzeptanzraten neuer Versionen variieren und während sie für iOS ziemlich schnell sind, sind sie langsamer und daher für Android fragmentierter. Stellen Sie sicher, dass Sie Ihre mobile Website nicht nur für die neuesten Versionen entwerfen, sondern auch die Versionen, auf denen sich Ihre Zielgruppen hauptsächlich befinden.
13. Definieren Sie Ihr Raster und Ihre Haltepunkte
Wenn es um responsives Design geht, ist die Definition Ihres Rasters und Ihrer Haltepunkte das Rückgrat Ihres mobilen Website-Designs. Es gibt eine Reihe von Tools, mit denen Sie sowohl die Anzahl der Spalten als auch deren Breite und die Dachrinnen definieren sowie Anleitungen dazu geben können, wie diese auf mobilen Websites und kleineren Bildschirmen funktionieren. In einigen Fällen ist ein fester Ansatz bei gleichbleibender Breite besser geeignet. In einigen Fällen ein flüssiger Ansatz oder eine Kombination aus beiden.
Das Raster und Ihre Haltepunkte, d. H. Die unterschiedlichen Bildschirmauflösungen, die die Anzeige von Inhalten von einem Layout zum nächsten ändern, sind jedoch Ihr vertrauenswürdiger Freund, wenn es darum geht, Ihre Website ansprechbar und modular zu gestalten.
14. Mobil oder Desktop zuerst - wo fangen Sie an?
Das erste Design für Mobilgeräte ist immer noch ein heißes Thema. Einige Leute fühlen sich damit wohler. Andere weniger. Wie bei allem gibt es selten einen richtigen oder falschen Ansatz.
Der Schlüssel liegt darin, sich auf den Inhalt zu konzentrieren und kleinere Bildschirme im Auge zu behalten. Ob dies jedoch mit Skizzen für Mobilgeräte geschieht, während die detaillierteren Definitionen zuerst für den Desktop vorgenommen werden, spielt keine Rolle. Solange Sie Ihre Inhalte berücksichtigen, warum sie vorhanden sind und wie sie sich geräteübergreifend verhalten sollten. Beginnen Sie dort, wo Sie sich wohl fühlen, aber experimentieren Sie mit beiden.
15. Definieren Sie Ihre Content-Stacking-Strategie
Sofern Sie nicht definieren, wie sich die verschiedenen Inhaltsmodule in Ihren Spalten verhalten sollen, werden die Module in der linken Spalte oben platziert, wenn Sie zu einem kleineren Bildschirm wechseln, gefolgt von den Modulen der mittleren Spalte unten und zuletzt der rechten Spalte unten . Dies entspricht selten der Reihenfolge der Wichtigkeit der einzelnen Inhaltsmodule.
Um sicherzustellen, dass Ihre Inhalte vom Desktop auf Mobilgeräte oder umgekehrt ordnungsgemäß angezeigt werden, müssen Sie festlegen, wie die Inhaltsmodule selbst gestapelt und neu angeordnet werden sollen. Verwenden Sie zunächst einen einfachen Zahlenansatz, skizzieren Sie, wie sich die Anzeige des Inhalts ändern würde, und bringen Sie ihn zum Rest des Teams, um ihn zu bearbeiten. Lassen Sie die Entwicklung Prototypen erstellen und definieren Sie sie bei Bedarf weiter.
16. Vergessen Sie nicht die Navigation
Ein häufig übersehener Bereich, der beim reaktionsschnellen Design zunehmend an Aufmerksamkeit gewinnt, ist die Navigation. Brad Frost hat einige ausgezeichnete Beiträge zu diesem Thema verfasst, in denen verschiedene Optionen sowie Vor- und Nachteile beschrieben werden. Lesen Sie sie und definieren Sie, wie die Navigation auf Ihrer mobilen Website funktionieren soll, anstatt sie der Entwicklung zu überlassen.
17. Hab keine Angst davor herauszufordern, was schon da draußen ist
Das Web ist voll von großartigen Musterbibliotheken und Tutorials. Lernen Sie von ihnen und lassen Sie sich inspirieren, aber haben Sie keine Angst, sich etwas Neues auszudenken oder das herauszufordern, was bereits da draußen ist. Etablierte Muster sind großartig, aber das Überschreiten von Grenzen bringt uns voran und in der Welt der mobilen Dinge bewegen sich die Dinge schnell.
18. Nicht jede Seite / jeder Bildschirm benötigt ein Drahtmodell / Design
Es ist leicht, sich darin zu verfangen, dass alles definiert werden muss. Für jede Seite oder Ansicht für jede Bildschirmgröße oder Ausrichtung ist jedoch kein Drahtmodell oder Design erforderlich. Verwenden Sie Analytics als Leitfaden für die Fokussierung, arbeiten Sie eng mit dem Entwicklungs- und Designteam zusammen und finden Sie einen Weg und eine Definitionsebene, die für Sie und Ihr Projekt am besten geeignet sind. Versuchen Sie jedoch, z. Wireframes für jede Größe und Ausrichtung des Hauptbildschirms erstellen. Vieles davon kann mit einem Master-Set und Skizzen für den Rest erledigt werden.
19. Arbeiten Sie disziplinübergreifend und eng zusammen
Um das beste Endergebnis in Bezug auf mobiles Design und Design im Allgemeinen zu erzielen, sollte eine enge Zusammenarbeit zwischen den verschiedenen Disziplinen stattfinden. Viele Problembereiche werden erst bemerkt, wenn aus Drahtgittern Entwürfe und Entwürfe erstellt werden. Je mehr Sie zusammenarbeiten, desto eher werden Sie Lösungen für diese identifizieren und finden.
20. Prototyp, Test und Iteration
Das Wichtigste beim Entwerfen für Mobilgeräte ist das Erstellen von Prototypen und Iterationen. Arbeiten Sie eng mit dem Entwicklungsteam zusammen, um festzustellen, ob das, was vorgeschlagen wird, tatsächlich funktioniert, wenn es erstellt wird, und um Situationen zu identifizieren, die genauer untersucht werden müssen. Und stellen Sie etwas zusammen, das Sie mit Ihren potenziellen Benutzern testen und tatsächliches Feedback dazu erhalten können. Darauf kommt es am Ende an.
21. Liefern Sie Inhalte schnell
Die besten mobilen Websites sind elegant und sauber. Versuchen Sie zu verstehen, was die Besucher einer Handy-Website tatsächlich erwarten - fragen Sie die Kunden, was für sie wirklich wichtig ist, und überlegen Sie, auf welche Informationen ihre Benutzer schnell zugreifen möchten, z. B. Reservierungsinformationen, Menüs und Standortkarten auf einer Restaurant-Website.
22. Begrenzte Ebenen unterstützen die Navigation
Versuchen Sie, maximal drei Navigationsebenen durch eine mobile Website einzuhalten - manche Leute streben nur zwei an. Mobile Benutzer möchten schnell Informationen erhalten, damit sie nicht hier, da und überall tippen, um das zu finden, wonach sie suchen.
23. Design aus Sicht des Benutzers
Versuchen Sie zu lernen, ein Gerät aus der Sicht eines Benutzers zu verwenden. Testen Sie Ihr Design auf diesem Gerät und bitten Sie Ihre Kunden, es ebenfalls zu testen, damit Sie sehen können, ob Informationen vorhanden sind, die nicht vorhanden sein sollten, oder ob etwas fehlt. Benutzertests sind auch immer sehr wichtig.
24. Wählen Sie die richtige Webschriftart
Während Sie versuchen sollten, die Verwendung von Serifenschriften zu vermeiden, es sei denn, sie sind sehr scharf und leicht zu lesen, sind die Handys so weit fortgeschritten, dass Sie kreativer mit dem Typ umgehen können und dies können Betten Sie Schriftarten auf einer mobilen Website ein . Sie müssen die Dinge für die Benutzer jedoch so einfach wie möglich halten. Lesen Sie auch unseren Artikel über reaktionsschnelle Typografie Tipps.
25. Lassen Sie sich nicht an verschiedenen Geräten aufhängen
Während Sie sich der Tatsache bewusst sein müssen, dass nicht jeder das gleiche Gerät verwendet - zum Beispiel nicht alle Smartphones über Touchscreens -, ist die auf verschiedenen Mobilgeräten verwendete Technologie ziemlich ähnlich. Denken Sie also daran, dass nicht jeder die gleiche Bildschirmauflösung oder Eingabe hat, aber lassen Sie sich nicht zu sehr darauf ein. Wenn es sich lohnt, auf Ihre Inhalte zuzugreifen, möchten die Benutzer darauf zugreifen. Das jeweilige Gerät interpretiert jedoch Ihr Styling.
26. Test, Test, Test
Es gibt so viele verschiedene Plattformen, dass es praktisch unmöglich ist, jede mögliche Kombination aus Smartphone und Betriebssystem zu testen. Neue Android-Geräte werden fast wöchentlich ausgeliefert, ganz zu schweigen von Windows Mobile, iOS, Blackberry OS und Cyanogen OS. Es ist jedoch wichtig, über einen Querschnitt von Geräten hinweg zu testen, und Sie sollten darauf abzielen, dies zu einem iterativen, fortlaufenden Prozess zu machen. Es gibt nichts Schlimmeres, als nur gegen iOS zu entwerfen und am Ende Ihres Builds festzustellen, dass Android-Geräte Ihre Seite nicht wie beabsichtigt rendern.
27. Berücksichtigen Sie die Akkulaufzeit
Es mag kontraintuitiv klingen, sich beim Entwerfen einer Website für Handys Gedanken über die Akkulaufzeit machen zu müssen, aber Ihre Benutzer werden es Ihnen danken, dass Sie rücksichtsvoll sind. Dies ist ein Problem, dessen sich Webdesigner bewusst sein müssen, da Smartphones und Tablets über Akkus mit begrenzter Größe und leistungsstarke Prozessoren verfügen. Je mehr Sie am Prozessor arbeiten, desto mehr wird der Akku entladen. Dies gilt insbesondere dann, wenn Sie HTML5-Funktionen wie die geografische Positionierung oder das Rendern komplexer Canvas-Animationen verwenden. Versuchen Sie daher, diese Tools sparsam zu verwenden.
28. Akzeptieren und akzeptieren Sie die Einschränkungen
Es ist verlockend zu versuchen, die letzten Funktionen in eine mobil ausgerichtete Website zu packen, aber Sie müssen akzeptieren, dass einige Dinge für Desktop-Computer besser geeignet sind als für tragbare Geräte. Umgekehrt sind mobile Geräte in einigen Dingen weitaus besser als Desktops. Standortbezogene Inhalte sind beispielsweise eine ideale Anwendung für Mobilgeräte, aber das Rendern von webGL wird (derzeit) am besten dem Desktop überlassen.
29. Minimieren Sie die Texteingabe
Auf den meisten Handys und Tablets ist es durchaus möglich, relativ einfach ein paar Sätze oder Absätze auszutippen, aber es ist nicht gerade eine unterhaltsame Erfahrung. Es ist auch ein ziemlich störender Prozess auf modernen Touchscreen-Geräten, da die virtuelle Tastatur über den Webinhalten angezeigt wird. Um die Frustration der Benutzer zu verringern, sollten Sie die Menge an Texteingaben, die Sie in Webformularen benötigen, minimieren. Wenn dies wirklich erforderlich ist, sollten Sie die praktischen Aspekte berücksichtigen: Es ist wahrscheinlich, dass niemand auf einem iPhone einen Aufsatz mit 2000 Wörtern in Safari eingibt!
30. Lieben Sie das Tempo der Veränderung
Eines der besten Dinge am aktuellen Lebenszyklus von Funktionen auf Smartphones ist die Geschwindigkeit, mit der sich die Plattformen entwickeln. Techniken, die vor sechs oder zwölf Monaten noch nicht funktionierten, sind jetzt durchaus machbar. Der Nachteil dabei ist, dass der Code, an dem Sie heute arbeiten, nicht garantiert noch in einem Jahr funktioniert, insbesondere wenn Sie modernste Technologien verwenden. Stellen Sie sicher, dass Ihr Kunde dies versteht.
Mitwirkende : Dean Evans, Anna Dahlström und Sam Hampton-Smith
Dies ist eine aktualisierte Version eines Artikels, der zuvor auf Creative Bloq veröffentlicht wurde.
- oben Chrome-Erweiterungen für Designer und Entwickler
- Wähle ein Webseitenersteller mit diesen Top-Tools
- Siehe, das Beste in Website-Vorlagen
- Entdecken Sie das Beste Benutzertests Software
- Lesen Sie unsere Schritt-für-Schritt-Anleitung zu Benutzererfahrung
