Ein flexibler Ansatz für die reaktionsschnelle Navigation

Viele reaktionsschnelle Websites bieten eine horizontale Navigationsleiste auf großen Bildschirmen und eine Dropdown-Navigation für kleinere Ansichtsfenster. Es ist ein vollkommen anständiger Ansatz, aber nicht ohne Probleme. Erstens sind Geräte nicht nur groß und klein. Sie kommen in jeder erdenklichen Größe. Zweitens kann sich die Navigation im Laufe der Zeit ändern. Drittens kann das Layout oder die Schriftgröße je nach Bildschirmgröße variieren. Wir werden die Dinge anders machen ...

Warum überprüfen Sie nicht (mit JavaScript), wie viel von unserer Navigation tatsächlich in den verfügbaren Platz passt? Sobald wir das wissen, können wir Elemente, die nicht in die Navigationsleiste passen, in ein Dropdown-Menü verschieben. Auf besonders kleinen Bildschirmen können Sie das gesamte Menü in ein Dropdown-Menü einfügen.

Passt die Navigation?

Welche Art der Navigation funktioniert am besten? Die Antwort auf diese Frage hängt von verschiedenen Faktoren ab, darunter Bildschirmgröße, Schriftgröße, Schriftfamilie, Anzahl der Navigationselemente und der Kontext, in dem die Navigation angezeigt wird. Diese Faktoren interagieren miteinander und können sich alle ändern.

Anstatt jeden dieser Faktoren zu berücksichtigen, betrachten wir einfach das Endergebnis: Passen alle Navigationselemente in eine ordentliche Zeile oder werden einige in die nächste Zeile verschoben? Wenn es das letztere ist, wie viele Artikel passen? Mit diesen Informationen können wir die richtige Navigation für den Job auswählen.

Schritt 1: Auswahl der Haltepunkte

Responsive Design hat zwei Hauptmerkmale. Erstens muss das Design fluid sein: Seine Breite skaliert mit der Breite des Browsers. Zweitens gibt es breakpoints, Breiten, an denen sich das Design mithilfe von CSS-Medienabfragen ändert. Sie können beispielsweise festlegen, dass eine Seitenleiste unter den Inhalt verschoben wird und die Überschriften kleiner werden, wenn der Browser nicht breiter als 480 Pixel ist. Sie können so viele oder so wenige Haltepunkte haben, wie Sie möchten.

Sie können einen Haltepunkt mithilfe einer Medienabfrage wie folgt erstellen:

1

@media only screen and (max-width: 480px) {

2

	/* This CSS will be applied only to phones and other small devices. */

3

}

Wie wählen wir Haltepunkte aus? Ein Ansatz besteht darin, einige Breiten auszuwählen, die mit den gängigen Gerätegrößen übereinstimmen.

Twitter Bootstrap verfügt über mehrere Haltepunkte, einschließlich eines "Smartphone" -Haltpunkts, der in Ansichtsfenstern ausgelöst wird, die nicht breiter als 480 Pixel sind. Es hat auch einen Haltepunkt für "Portrait-Tablets", der zwischen 768px und 979px ausgelöst wird.

Möglicherweise stellen Sie fest, dass in Bootstrap kein Haltepunkt für "Landschaftstablets" vorhanden ist. Das liegt daran, dass das iPad im Querformat 1024 Pixel breit ist - genauso breit wie viele Desktop-Bildschirme. Das bringt uns zu dem Hauptfehler bei diesem Ansatz: Es geht darum, fundierte Vermutungen über Gerätetypen anzustellen. Ein Gerät, das auf unser "Portrait-Tablet" trifft, kann tatsächlich ein wirklich großes Telefon oder ein wirklich kleiner Laptop sein.

Medienabfragen sagen uns nicht, welcher Gerätetyp verwendet wird, aber wir können anhand der Größe des Geräts eine fundierte Vermutung anstellen.

Ein alternativer Ansatz wäre, Haltepunkte auf das Design und den Inhalt zu stützen. Sie können eine flüssige Version Ihres Entwurfs ohne Haltepunkte implementieren und dann in verschiedenen Breiten testen. Wenn Sie auf Breiten stoßen, in denen die Dinge merkwürdig aussehen, ist es ein guter Zeitpunkt, einen Haltepunkt hinzuzufügen. Dies ist der Ansatz von Ethan Marcotte, der den Begriff "Responsive Design" geprägt hat.

Welcher Ansatz ist am besten? Wie bei so vielen Dingen im Leben kommt es darauf an. Verwenden Sie ein vorgefertigtes Framework wie Bootstrap? Denken Sie, dass es einfacher ist, Ihrem Team oder Kunden das Responsive Design zu erklären, wenn Sie über bestimmte Gerätetypen sprechen können? Wenn Sie mit "Ja" geantwortet haben, ist die Auswahl von Haltepunkten basierend auf der Gerätegröße möglicherweise die richtige für Sie. Wenn Sie mit "Nein" geantwortet haben, können Sie durch Auswahl von Haltepunkten basierend auf Ihrem Design und Inhalt mehr Freiheit und Flexibilität erhalten. Das ist der Ansatz, den wir in diesem Tutorial verfolgen werden.

Schritt 2: Schreiben des Markups

Beginnen wir mit der Erstellung einer einfachen Seite. Wir werden einen "Artikel" -Bereich erstellen, der einige Inhalte und eine Navigationsleiste enthält. Neben dem Artikel legen wir eine beiseite.

1

<article>

2

	<nav>

3

		<ul class="navbar" id="mainNavbar">

4

			<li><a href="/">Home</a></li>

5

			<li><a href="/products.html">Products</a></li>

6

			<!-- More nav items... -->

7

			<li><a href="/contact.html">Contact</a></li>

8

		</ul>

9

	</nav>

10

	<p>Here is our content.</p>

11

</article>

12

<aside>

13

	<p>Here is a side note about our content.</p>

14

</aside>

Nehmen Sie zur Demonstration etwa zehn Navigationselemente in diese Liste auf.

Schritt 3: Grundlegendes Styling

Lassen Sie uns zunächst unsere Liste so gestalten, dass eine Navigationsleiste angezeigt wird.

1

.navbar {

2

	background-color: #055;

3

	margin: 0;

4

	padding: 0;

5

	width: 100%;

6

	line-height: 1;

7

	overflow: hidden;

8

}

9

10

.navbar li, .navbar a {

11

	display: inline-block;	

12

}

13

14

.navbar li {

15

	list-style-type: none;

16

}

17

18

.navbar > li {

19

	margin-left: .25em;

20

}

21

22

.navbar > li:first-child {

23

	margin-left: 0;

24

}

25

26

.navbar a {

27

	padding: .25em;

28

	text-decoration: none;

29

	height: 1em;

30

	font-weight: bold;	

31

	color: #fff;

32

}

33

34

.navbar a:hover {

35

	background-color: #088;

36

}

Wir werden unseren Artikel auch ein wenig hervorheben und ihn als Seitenleiste anzeigen. Wir verwenden Prozentwerte für unsere Breiten, um unser Design flüssig zu machen.

1

body {

2

	font-family: sans-serif;

3

	font-size: 16px;

4

	background-color: #fff;

5

}

6

7

article {

8

	background-color: #eee;

9

	padding: 2.5%;

10

	margin-right: 1%;

11

	width: 64%;

12

	float:left;

13

}

14

15

aside {

16

	background-color: #ccc;

17

	padding: 2.5%;

18

	width: 25%;

19

	float: left;

20

}

Unser Endergebnis sollte ungefähr so aussehen:

Schritt 4: Fügen Sie einen Haltepunkt hinzu

Wenn unsere Breite besonders klein wird, wird der Text so weit umbrochen, dass er schwer zu lesen ist. Wir können das beheben, indem wir sowohl den Artikel als auch die Seite die volle Breite einnehmen lassen und die Seite unter den Artikel drücken.

1

@media only screen and (max-width: 550px) {

2

	aside, article {

3

		width: 95%;

4

		float: none;

5

	}

6

7

	article {

8

		margin-right: 0;

9

		margin-bottom: 1em;

10

	}

11

}

Spielen Sie mit der Fensterbreite und beobachten Sie, was passiert. Wenn das Fenster kleiner wird, ist im Allgemeinen immer weniger Platz für die Navigation. Wenn Sie das Fenster jedoch auf 550 Pixel verkleinern, erhalten Sie tatsächlich Platz für die Navigation, wenn die Seite in die nächste Zeile fällt.

Die Anzahl der Elemente, die in der Navigationsleiste angezeigt werden können, hängt von mehreren Faktoren ab, einschließlich der Breite des Fensters, des Haltepunkts, der Schriftgröße und der Anzahl der Elemente in der Navigation.

Schritt 5: Stellen Sie eine feste Höhe in der Navigationsleiste ein

In vielen Fällen passt unser Inhalt der Navigationsleiste nicht in eine ordentliche Zeile. Lassen Sie uns das beheben!

Wenn der Benutzer über JavaScript verfügt, werden Elemente ausgeblendet, die nicht passen. Wir werden sie später in einem Dropdown-Menü anzeigen. Wenn der Benutzer kein JavaScript hat, lässt er die Höhe der Navigationsleiste nach Bedarf erweitern. Es ist nicht schön, aber es ist zumindest funktional.

Zu diesem Zweck laden wir einen benutzerdefinierten Build von Modernizr herunter und fügen ihn hinzu, einer JavaScript-Bibliothek, mit der wir die Funktionsunterstützung in Browsern testen können. Unsere benutzerdefinierten Build-Tests für die Unterstützung von JavaScript und Touch-Ereignissen.

Als nächstes fügen wir unserem Tag eine "no-js" -Klasse hinzu. Wenn der Benutzer über JavaScript verfügt, ändert Mozernizr diese Klasse in "js". Wenn der Benutzer kein JavaScript hat, wird die Klasse "no-js" remian.

1

<html class="no-js">

2

<script src="modernizr.custom.js"></script>

Hinweis: Aus Leistungsgründen ist es normalerweise am besten, Skripte nicht oben auf der Seite zu platzieren. Während der Browser Skripte herunterlädt, werden andere Dateien nicht mehr heruntergeladen und die Seite gerendert. In diesem Fall ist es genau das, was wir wollen: Wir möchten nicht, dass der Browser etwas anzeigt, bis unsere .js-Klasse vorhanden ist. Mit diesem Ansatz ist ein kleiner Leistungseinbruch verbunden, den wir durch die Verwendung eines benutzerdefinierten Builds von Modernizr etwas gemildert haben. Wenn Sie nur diese "no-js" -Klasse benötigen und nicht vorhaben, die anderen Funktionen von Modernizr zu verwenden, können Sie Ihre Seite noch einfacher gestalten, indem Sie stattdessen dieses einzeilige Wunder verwenden.

Nachdem wir eine funktionierende .js-Klasse eingerichtet haben, können Sie damit alle Elemente ausblenden, die in eine zweite Zeile eingeschlossen werden.

1

.js .navbar {

2

	height: 1.5em;

3

 	overflow: hidden;

4

}

Schritt 6: Fügen Sie FlexMenu hinzu

Laden Sie als Nächstes flexMenu herunter, ein jQuery-Plugin, mit dem wir überprüfen können, ob alle Elemente in die Navigationsleiste passen, und den entsprechenden Menütyp anzeigen können. Wir brauchen auch jQuery selbst. Fügen Sie diese Skripte am Ende der Seite ein, damit die Anzeige der Seite beim Laden nicht blockiert wird.

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

2

<script src="flexmenu.min.js"></script>

Wir müssen flexMenu auch anweisen, sich unser Menü anzusehen und die Größe nach Bedarf zu ändern:

1

<script type="text/javascript">

2

	$('#mainNavbar').flexMenu();

3

</script>

Wenn wir nun die Größe der Seite ändern, wird ein "Mehr" -Link angezeigt, wenn einige der Elemente nicht in die Navigationsleiste passen. Sie können mit der Maus über diesen Link fahren oder auf diesen Link tippen, um eine Dropdown-Liste mit diesen Elementen anzuzeigen. Wenn die Seite zu klein wird, als dass mehr als ein oder zwei Elemente in der Navigationsleiste angezeigt werden könnten, wird ein "Menü" -Link angezeigt. Wenn Sie mit der Maus über diesen Link fahren oder darauf tippen, werden alle Navigationselemente angezeigt.

Wir haben jetzt das Verhalten, das wir wollen, aber das Dropdown-Menü sieht ziemlich schrecklich aus. Das ist okay - wir werden das im nächsten Schritt beheben.

Schritt 7: FlexMenu formatieren

Fügen wir nun einige Stile hinzu, damit das Dropdown-Menü besser aussieht. Wir werden auch einen CSS-Pfeil neben dem Link "Menü" oder "Mehr" hinzufügen, um zu verdeutlichen, dass diese Links ein Dropdown-Menü öffnen.

Mit CSS-Pfeilen muss kein Bild geladen werden, und die Pfeile bleiben auf hochauflösenden Displays scharf. Dieser Ansatz funktioniert in allen modernen Browsern sowie in IE8. Wenn Sie IE7 oder früher unterstützen müssen, müssen Sie einen bildbasierten Fallback einschließen.

1

.flexMenu-popup {

2

	padding: 0;

3

	background-color: #088;

4

	margin: 0;

5

}

6

7

.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {

8

	background-color: #5599AA;

9

}

10

11

.flexMenu-viewMore > a:after {

12

	display: inline-block;

13

	content:"";

14

	border-left:0.3em solid transparent;

15

	border-right:0.3em solid transparent;

16

	border-top:0.4em solid white;

17

	margin-left:0.4em;	

18

	position: relative;

19

	top: -.1em;

20

}

21

22

.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {

23

	background-color: #088;	

24

}

25

26

.flexMenu-popup > li > a, .flexMenu-popup > li {

27

	display: block;

28

}

29

30

.flexMenu-popup > li > a:hover {

31

	background-color: #3aa;

32

}

Schritt 8: Anpassen für Touchscreens

Jetzt haben wir eine Symbolleiste, die auf einer Vielzahl von Bildschirmgrößen gut funktioniert, auf einem Touchscreen jedoch etwas schwierig zu verwenden ist. Touchscreens bieten nicht so viel Präzision wie Mäuse und Trackpads, daher ist es leicht, das falsche Objekt zu übersehen und zu tippen. Um dieses Problem zu beheben, vergrößern wir die Links und verschieben sie etwas weiter auseinander.

Modernizr, das wir zuvor hinzugefügt haben, bietet eine CSS-Klasse für jede Funktion, nach der gesucht wird. Auf Geräten mit Touchscreens wird die Klasse "Touch" hinzugefügt. Auf Geräten ohne Touchscreen wird die Klasse "no-touch" hinzugefügt.

1

.touch .navbar {

2

	font-size: 1.25em;

3

}

Da wir alle unsere Größen in ems ausgedrückt haben, können wir die gesamte Navigationsleiste um ihre Schriftgröße vergrößern oder verkleinern. Die eine Zeile darüber (ok, technisch gesehen drei, wie wir sie beabstandet haben) passt nicht nur die Größe des Textes an, sondern auch die Größe der Pfeile, die Höhe der Navigationsleiste, die Polsterung der Links und den Rand zwischen den Elementen.

Hinweis: Die .touch-Klasse gibt die Unterstützung für Berührungsereignisse an, mit denen Entwickler Berührungseingaben in Webanwendungen erstellen können. Geräte, die sowohl Touchscreens als auch Mäuse haben (z. B. Windows 8-Slates), erhalten höchstwahrscheinlich die .touch-Klasse. Die meisten Touch-Geräte simulieren aus Kompatibilitätsgründen Mausereignisse. Daher gibt es derzeit keine Möglichkeit, Modernizr zum Erkennen von Geräten mit Touchscreen und Mäusen zu verwenden.

Schritt 9: Beheben Sie die Cross-Browser-Funkiness

Wenn Sie die Demo bisher in IE7 aufrufen, werden Sie wahrscheinlich zwei Probleme bemerken:

• Wenn Sie die Fenstergröße ändern, wird die Seitenleiste manchmal unter den Artikel verschoben, bevor wir unseren Haltepunkt erreichen.
• Das Dropdown-Menü befindet sich ein Pixel unter dem unteren Rand des Links "Mehr", sodass das Menü verschwindet, wenn Sie versuchen, den Mauszeiger darüber zu halten.

Das erste Problem ist auf die prozentuale Behandlung von Prozentsätzen durch IE7 zurückzuführen. Wenn ein Wert berechnet wird, der einen Bruchteil eines Pixels enthält, wird immer aufgerundet. Das zweite Problem wird wahrscheinlich durch ein ähnliches Problem verursacht.

Um dieses Problem zu umgehen, können wir in IE7 eine feste Breite für unsere Seite festlegen. Fügen Sie dazu oben auf unserer Seite zunächst eine Klasse "weniger als IE8" hinzu.

1

<!--[if lt IE 8]>    <html lang="en-us" class="no-js lt-ie8"> <![endif]-->

2

<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

Als Nächstes fügen wir CSS hinzu, das eine bestimmte Pixelbreite für den Artikel und in IE7 beiseite legt. Die Gesamtbreite dieser Bereiche zuzüglich Polsterung, Rand und Zulässigkeit für Rundungen beträgt 901 Pixel.

1

.lt-ie8 .flexMenu-popup {

2

	margin-top: -1px

3

}

4

5

.lt-ie8 article {

6

	width: 600px;

7

}

8

9

.lt-ie8 aside {

10

	width: 200px;

11

}

12

13

.lt-ie8 body {

14

	width: 901px;

15

}

Möglicherweise stellen Sie auch fest, dass sich unter iOS die Zoomstufe ändert, wenn Sie das Gerät vom Hoch- zum Querformat drehen. Um dieses Problem zu beheben, greifen Sie einfach auf dieses JavaScript-basierte fix zu und verweisen Sie unten auf der Seite darauf. Dieses Problem wurde anscheinend in iOS 6 behoben.

Weiterführende Literatur

Brad Frosts Artikel Responsive Navigation Patterns und Complex Navigation Patterns für Responsive Design decken eine Vielzahl von Navigationsansätzen auf Responsive Sites ab.

Luke Wroblewski ist auch eine großartige Ressource für reaktionsschnelle und mobile Designmuster. Insbesondere sein Off Canvas-Ansatz ist ziemlich clever: Er platziert Navigation und andere sekundäre Inhalte außerhalb des Bildschirms auf kleinen Geräten. Wenn der Benutzer auf eine Schaltfläche tippt, wird der Inhalt von links oder rechts eingeblendet.

Diese Ressourcen bieten natürlich keine vollständige Liste. Responsive Design ist noch ein junges Feld, und Sie können davon ausgehen, dass in Zukunft viele coole neue Designmuster auftauchen werden. Vielleicht gehören einige von ihnen Ihnen!