Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Eine einfache, reaktionsschnelle und Mobile First Navigation erstellen

by
Length:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Wir werden eine einfache, reaktionsschnelle Website-Navigation erstellen. Unsere Lösung wird uns helfen, den content unserer Seite in den Vordergrund zu stellen, was bei der Gestaltung für Mobilgeräte wohl oberste Priorität hat. Es wird kein JavaScript erforderlich sein, und wir werden es mit einem Mobile First-Ansatz angehen.

Mobile Navigation

Wenn Sie Luke Wroblewskis Mobile First gelesen haben, kennen Sie seine Aussage:

Inhalte haben in der Regel Vorrang vor der Navigation auf Mobilgeräten.

Damit meint er, dass mobile Benutzer häufig nach sofortigen Antworten suchen; Sie wollen den Inhalt, nach dem sie gesucht haben, nicht mehr Navigationsoptionen.

Viele Websites, auch reaktionsfähige, halten sich an die Konvention, dass die Navigation oben auf einer bestimmten Seite steht. Dieser Ansatz kann auf Mobilgeräten zu Usability-Problemen führen, da mobilen Benutzern häfig zwei Dinge fehlen: Platz und Zeit auf dem Bildschirm. Wenn die primäre Navigation oben auf einer Seite platziert ist, besteht eine gute Chance, dass ein ganzer mobiler Bildschirm verdeckt wird. Dieses Problem wird durch große berührungsfreundliche Menü-Links weiter verschärft, sodass Benutzer über die Navigation hinaus scrollen müssen, um zu wertvollen Inhalten zu gelangen.

Nehmen Sie dieses Beispiel von London & Partners:

Ein perfekt anständiges, ansprechendes Design, aber bei Standardabmessungen für mobile Ansichtsfenster (320 x 480 Pixel) sehen Sie nur ein Navigationsmenü. Sicherlich, nachdem ich gerade auf der Homepage angekommen bin, möchte ich etwas anderes sehen? Dies demonstrieren nicht nur London & Partners, sondern auch viele reaktionsschnelle Designs im Internet.

Was sind die Lösungen?

Wir haben einige Möglichkeiten gesehen, dies zu umgehen, und uns oft auf jQuery gestützt, um die Dinge für uns zu regeln. Nehmen Sie Chris Coyiers Erklärung des reaktionsschnellen Dropdown-Menüs "Fünf einfache Schritte".


Großer Bildschirm, kleiner Bildschirm.

Mit jQuery wird ein Duplikat des Menüs in Form einer Dropdown-Liste <select> erstellt, die zunächst mit CSS nicht angezeigt werden kann. Wenn Medienabfragen einen kleineren Bildschirm erkennen, wird das Dropdown-Menü sichtbar und die ursprüngliche Navigation unsichtbar. Dies ist perfekt für mobile Geräte, da Dropdowns nur wenig Platz beanspruchen und die spezielle Benutzeroberfläche des Geräts (wie den Scroller des iPhones) verwenden.

Alternativ können Sie Ihre Navigation ausblenden, sie jedoch anzeigen lassen, wenn Sie auf die Schaltfläche "Menü" klicken. Sie können diesen Effekt mit dem neuesten Bootstrap von Twitter in Aktion sehen.

Kleinere Bildschirme verbergen die Navigationslinks und zeigen ein Listensymbol an (das schnell als "Menü" akzeptiert wird), das die Navigation beim Klicken anzeigt. Auch hier wird mobilen Besuchern so viel Inhalt wie möglich präsentiert, es stehen jedoch Navigationsoptionen zur Verfügung, falls sie dies wünschen.

Reine CSS-Lösung

Wir werden eine von Luke diskutierte Technik verwenden, die CSS und einen Mobile First-Ansatz verwendet. Was verstehen wir unter einem Mobile First-Ansatz? Einfach ausgedrückt, werden wir ein einfaches mobiles Layout entwerfen und dann das Design für größere Bildschirme schrittweise verbessern. Wir werden Medienabfragen verwenden, die stetig wachsende Bildschirmgrößen erkennen und dabei Stil und Funktionen hinzufügen.

Dies bedeutet, dass nur das Mindestmaß an CSS und Ressourcen geladen wird, wenn unser Design mit einem mobilen Gerät angezeigt wird. Dies bedeutet auch, dass ältere Versionen des IE (die Medienabfragen nicht erkennen) auf der mobilen Site angezeigt werden. Weitere Informationen hierzu finden Sie in Joni Korpis Leaving Old Internet Explorer Behind.

1. Markup

Ich werde die Ideen hinter dieser Lösung im weiteren Verlauf erläutern. Lassen Sie uns daher vorerst einige Markups zusammenstellen, die mit einem blanco HTML5-Dokument beginnen.

Hinweis: Vergessen Sie das Viewport Meta Tag nicht!

Nachdem wir das getan haben, werden wir eine Seitenstruktur hinzufügen. Einfaches Zeug und alles für die Zwecke unserer Demonstration. Ich habe Fülltext aus Monty Pythons Heiligem Gral verwendet (danke Chris Valleskey), was eine gute Möglichkeit ist, ein Lächeln auf Ihr Gesicht zu zaubern, während Sie arbeiten :)

2. Navigations-Markup

Wir haben eine einfache HTML-Seite zusammengestellt. Jetzt ist es Zeit für die Hauptattraktion. unsere primäre Navigation..

Ja, Sie haben das richtig gesehen, das haben wir in Zeile 68 nach dem letzten Artikel hinzugefügt. Vergessen Sie nicht, dass wir jetzt für Mobilgeräte entwerfen. Wir werden uns später mit dem Desktop befassen. Wir haben die Navigation am Ende unserer Seite platziert, damit sie nicht im Weg ist. Wir werden jetzt einen Link oben auf unserer Seite platzieren, damit Benutzer die Navigation finden können, wenn sie dies wünschen.

3. CSS zurücksetzen

Je nachdem, wie Sie normalerweise mit Webprojekten beginnen, unterscheidet sich dieser Schritt von Ihrem üblichen Workflow. Ich habe Eric Meyers Reset immer als solide Grundlage für die Arbeit empfunden, vor allem, weil er es kürzlich optimiert hat. Wir werden seine Reset-Regeln einem Stylesheet hinzufügen, um unser CSS zu starten:

4. Grundstile

Im Moment sieht unsere Seite ziemlich langweilig aus.

..so lassen Sie uns die Dinge verbessern, indem wir ein einfaches Styling hinzufügen.

Dies sind alles grundlegende Dinge (Schriftarten, Zeilenhöhen, Farben usw.). Bisher ist entscheidend, dass ich die Schaltfläche "Menü" so gestaltet habe, dass sie im <header> nach rechts schwebt, wo Sie häufig eine Navigation erwarten gefunden werden.

Wenn Sie den Mauszeiger darüber halten, wird der Schwebezustand angezeigt - für Touchscreen-Geräte natürlich nicht erforderlich. Diese Erfahrung wird jedoch auch für nicht kooperative Internet Explorer-Versionen bereitgestellt. Was wir zum Nutzen mobiler Benutzer definiert haben, ist ein :focus status. Es ist dasselbe wie der :hover status jedoch ein entscheidendes Feedback für Touchscreen-Geräte. Unsere Benutzer werden wissen, dass es ihnen gelungen ist, die Menüschaltfläche zu berühren.

Wie auch immer, klicken Sie darauf und Sie werden zur Navigation weitergeleitet, super.

Lassen Sie uns nun das Menü ein wenig stylen.

5. Navigationsstile

Wir werden unsere primäre Navigation ähnlich wie das zuvor gezeigte Beispiel von London & Partners gestalten, außer dass sie diesmal offensichtlich am Ende der Seite steht.

Viel besser. Wir haben die Menü-Links schön groß gemacht (lesen Sie mehr über Touch-Target Größen in Luke Wroblewskis eigenem Blog) und erneut einen :focus status für Benutzer-Feedback festgelegt.

Es ist auch klar geworden, dass wir einen "Top" -Link eingefügt haben, der die Benutzer bei Bedarf zum oberen Rand der Seite zurückführt.

6. Größer werden

OK, wir haben uns mit unserem einfachen mobilen Layout befasst. Jetzt ist es Zeit für eine schrittweise Verbesserung. Wir werden Medienabfragen verwenden, um festzustellen, wann unser mobiles Layout nicht mehr geeignet ist.

Aber ab wann wird es unangemessen? Es gibt viele Möglichkeiten, Medienabfragen zu bearbeiten, aber wir gehen davon aus, dass ein mobiles Ansichtsfenster 320 x 480 Pixel groß ist. Es ist im Hochformat 320 Pixel breit und im Querformat 480 Pixel breit, sodass wir zu Recht unsere erste Medienabfrage so einstellen können, dass ein Bildschirm erkannt wird, der größer als 480 Pixel ist.

Der nächste Schritt ist jedoch wohl das Tablet. Das iPad hat eine Auflösung von 980 x 768 Pixel, sodass wir davon ausgehen können, dass alles, was kleiner als 768 Pixel ist, für unser mobiles Layout geeignet ist. Alles, was größer als 768px ist, kann mehr Desktop-ähnliche Navigationslayouts verarbeiten.

Wir können daher Regeln hinzufügen. Richten wir also eine Medienabfrage ein:

Diese Medienabfrage führt alle darin enthaltenen Stile aus, wenn das Ansichtsfenster mindestens 768 Pixel breit ist. Beachten Sie die Aufnahme des einzigen Schlüsselworts, das sicherstellt, dass Internet Explorer 8 nicht verwirrt wird, und versuchen Sie, die Abfrage zu verarbeiten. Siehe meine frühere Erklärung für Details.

Lassen Sie uns loslegen, indem Sie unseren Menü-Button verschwinden lassen:

Wenn der Browser etwas breiter ist, wird die Menüschaltfläche nicht mehr angezeigt.

7. Navigation verschieben

Jetzt müssen wir unsere primäre Navigation an den Anfang der Seite bringen. Dazu entfernen wir es aus dem Dokumentenfluss und positionieren es absolut oben.

Damit dies möglich ist, müssen wir zuerst das übergeordnete Element (.wrapper) relativ positionieren. Wir können dies entweder hier in der Medienabfrage tun oder dies am Anfang unseres Stylesheets feststellen.

Sobald das Menü absolut positioniert ist, müssen wir einen Teil des Ankerstils entfernen. Es gibt nicht viel zu tun, aber wir brauchen die Listenelemente, um sie inline anzuzeigen, und wir müssen die Ränder und die übertriebene Polsterung von den Ankern entfernen. Die Schwebezustände, die wir zuvor diktiert haben, sind natürlich in Ordnung, daher müssen wir sie nicht ändern.

8. Eine letzte Sache

Wenn Sie aufgepasst haben, haben Sie bemerkt, dass wir immer noch einen "Top"-Link in der Navigation haben - brauchen wir das nicht mehr wirklich, oder?

Wir können dies auf verschiedene Arten entfernen, aber wir sind uns sicher, was los ist. Fügen wir dem Listenelement zunächst eine Klasse hinzu:

Und dann können wir es in unserer Medienabfrage loswerden:

Abschluss

Das ist es! Es gibt unzählige Möglichkeiten, auf dieser Idee aufzubauen (das Listensymbol ist nur eine), und Sie können natürlich weiterhin Medienabfragen hinzufügen, um den wachsenden Bildschirmen gerecht zu werden. Hoffentlich haben Sie jetzt die Grundlagen dafür. Wir haben eine einfache, reaktionsschnelle Mobile First Navigation erstellt, die von einem mobilen ersten Ansatz ausgeht und dabei den Schwerpunkt auf Inhalt und Benutzerfreundlichkeit legt. Wer kann mehr verlangen?!

Weitere Ressourcen

Einige nützliche Links, die im Tutorial erwähnt werden und alle in einer praktischen Liste zusammengefasst sind:

Premium Option

Auf Envato Market gibt es zahlreiche Mobile First Design Vorlagen zur sofortigen Verwendung in Ihren Projekten zur Verfügung.

Das erste ist ein Mobile First Web-App-/Admin-Dashboard-Thema mit einer flachen Benutzeroberfläche, die auf Bootstrap 3 basiert. Es ist leichtgewichtig, verfügt jedoch über viele Komponenten, die Ihren Anforderungen entsprechen. Es reagiert auch vollständig, die Widgets und Komponenten sind Mobil First.

first - Mobile First Web App Theme
first - Mobile First Web App-Thema
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.