it-swarm.com.de

Navigation auf einer Desktop-Website für mobile Benutzer

Immer mehr Menschen surfen hauptsächlich von ihren Mobilgeräten aus im Internet. In ähnlicher Weise verwenden die meisten jungen Leute ihr Telefon als Hauptbrowser.

Ich gehöre zu der Generation, die mit Computern aufgewachsen ist und gerne Telefone und Smartphones angenommen hat, als sie sich verbreiteten.

Aber die nächste Generation, die heute 14 oder weniger Jahre alt ist, hat das Internet mit ihren Smartphones entdeckt. Und das ist großartig, aber sie haben sich offensichtlich an andere Navigationsprinzipien gewöhnt als Sie und ich.

Was bedeutet das, wenn ich heute eine Desktop-Website für diese Jugendlichen entwerfe? Muss ich versuchen, das zu replizieren, was sie auf mobilen Websites sehen, oder gebe ich ihnen ein regelmäßiges Desktop-Web-Erlebnis (wie Sie und ich es gewohnt sind)?

Beispielsweise bevorzugen mobile Websites normalerweise das Scrollen gegenüber dem Aufteilen von Inhalten in Registerkarten. Sollte ich dies auf einer Desktop-Website replizieren, die auf die mobile Generation ausgerichtet ist?

4
Pioul

Abgesehen von Breite und Informationsdichte sind Konventionen für mobile Websites für Desktop-Benutzer nicht nicht praktikabel. In Bezug auf die Navigation ist alles, was wirklich wichtig ist, dass Sie es einfach halten, große Klickziele bevorzugen und keine Hover-Interaktionen benötigen. Wenn Ihre mobile Website nicht zu viele Funktionen entfernt (und das sollte es auch nicht), sollte der Aufbau einer mobilen Website nicht so schlecht sein. Es gibt einen Grund Mobile First ist eine Designphilosophie, nicht nur eine Geschäftsphilosophie; Eine ordnungsgemäß erstellte mobile Site kann viel einfacher in ein Desktop-Set integriert werden als eine Desktop-Site in eine mobile.

Hier sind einige Dinge zu tun und zu vermeiden:

Dinge die zu tun sind:

  • Vom Handy aus aufbauen: Das macht alles andere einfacher. Beginnen Sie mit einer soliden mobilen Site.
  • Responsive Design: Es muss nicht schwer sein, wenn Sie vom Handy aus starten. An bestimmten Haltepunkten können Sie Seitenleisten und breitere horizontale Menüs hinzufügen.
  • Fließendes Design: Wenn Responsive nicht Ihr Ding ist oder Sie nicht sicher sind, wie es funktioniert, müssen Sie zumindest sicherstellen, dass Ihre Site den Bildschirmbereich konsistent nutzt. Stellen Sie sicher, dass Sie dies gut testen und versuchen Sie, Ihre Inhalte sowohl auf dem Desktop als auch auf dem Handy zu lesen. Haben Sie keine Angst davor, minimale/maximale Breiten für Elemente zu verwenden, da sonst Zeilenlängen für Text zu kurz/lang werden kann
  • Navigieren Sie in großen Abschnitten: Breite über Tiefe funktioniert gut auf mobilen und Desktops, da weniger auf mehr und mehr Seiten geklickt wird. Insbesondere auf Mobilgeräten kann es vorzuziehen sein, auf einer Seite zu scrollen, um alle verfügbaren Inhalte anzuzeigen, anstatt durch mehrere Navigationsebenen zu klicken und darauf zu warten, dass jede geladen wird. Dies ist jedoch auch auf dem Desktop eine gute Sache.

Dinge zu vermeiden:

  • Explizite Touch/Drag-Interaktionen: Bevorzugen Sie stattdessen Klicks und Scrollen, die auf beiden Plattformen funktionieren.
  • Kleiner Text: Trotz des gesamten 9-Punkte-Textes, den Sie im Web sehen, müssen Sie selten so viel Text wie möglich auf dem Bildschirm speichern.
  • Kleine Schaltflächen: Auch hier sind anklickbare Bereiche auf Desktop-Sites ohne Grund eher klein. Machen Sie sie etwas größer (fügen Sie anklickbare Hintergrundelemente in die Navigation ein, bevorzugen Sie Schaltflächen gegenüber Links, wenn dies logisch ist) und sie sind berührungsfreundlich, ohne für den Desktop unhandlich zu sein
  • Menü-Dropdowns auf dem Desktop: Auf Mobilgeräten ist dies eine großartige Möglichkeit, Platz zu sparen. Auf Desktops ist dies jedoch nicht erforderlich und fügt zusätzliche Klicks hinzu. Dadurch wird die auf einen Blick verfügbare Ansicht der verfügbaren Inhalte entfernt.
  • Horizontales Scrollen: Auch auf dem Desktop ist dies ärgerlich. Das Scrollen sollte nur in eine Richtung erfolgen, insbesondere auf Mobilgeräten, sofern dies nicht unbedingt erforderlich ist.
  • Paginierung : Es ist viel besser, zum Lesen von Inhalten zu scrollen als zu klicken (meiner Meinung nach sogar auf dem Desktop). Wie oben erwähnt, bedeuten mehr Klicks zum Anzeigen von Inhalten auch auf Mobilgeräten mehr Ladezeit. Oft ist eine einzelne, längere Last auf Mobilgeräten weniger schmerzhaft als mehrere kleinere Lasten mit insgesamt derselben Datenmenge. Die Latenz auf Mobilgeräten kann ziemlich schlecht sein.
5
Ben Brocka

Pioul,

Ich denke, Bens Rat ist solide. Vielleicht übersehen Sie den Rat; STARTEN Sie mit Mobile als primärer Erfahrung beim Entwerfen/Layout Ihrer neuen Site. Entwerfen/legen Sie sie zusammen nebeneinander aus. Sie müssen nicht zwei separate Sites haben (eine für Mobilgeräte, eine für Desktops). Sie sind die gleiche Seite. Mithilfe von CSS-/Medienabfragen können Sie ermitteln, auf welchem ​​Gerätetyp Ihre Site angezeigt wird, und dem Viewer ein optimiertes Layout für dieses Gerät bereitstellen. Sie erstellen also eine Site, die auf verschiedenen Geräten angezeigt werden kann.

Da Sie diese neue Site von Grund auf neu erstellen, ist jetzt der beste Zeitpunkt dafür. Wenn Sie mit einem Mobile-First-Ansatz beginnen, können Sie Ihre Anforderungen an ein vollständiges Desktop- UND ein mobiles Erlebnis erfüllen, indem Sie sie gleichzeitig durchdenken. Hier sind ein paar großartige Artikel und ein Beispiel, wie man das angeht:

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

http://www.html5rocks.com/en/mobile/responsivedesign/

Ich hoffe das hilft!

1
Duskus