{"id":253357,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/techniken-zur-handhabung-der-navigation-in-responsive-designs\/"},"modified":"2022-12-25T16:52:00","modified_gmt":"2022-12-25T13:52:00","slug":"techniken-zur-handhabung-der-navigation-in-responsive-designs","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/techniken-zur-handhabung-der-navigation-in-responsive-designs\/","title":{"rendered":"Techniken zur Handhabung der Navigation in Responsive Designs"},"content":{"rendered":"<p>\n  Die Navigation ist ein entscheidendes Element des Responsive Designs. Das liegt daran, dass das Ma\u00df daf\u00fcr, wie n\u00fctzlich ein responsives Website-Design ist, zu einem gro\u00dfen Teil an der Leichtigkeit des \u00dcbergangs zwischen Mobil- und Desktop-Layout liegt.\n<\/p>\n<p>\n  Eine effektive reaktionsschnelle Navigation w\u00fcrde eine reibungslose Gr\u00f6\u00dfen\u00e4nderung auf niedrigere Aufl\u00f6sungen und dann ein Upsizing auf gr\u00f6\u00dfere Bildschirme wie die von Desktops erfordern.\n<\/p>\n<p>\n  Welche Art von Navigation ist f\u00fcr responsive Designs sinnvoll?\n<\/p>\n<p>\n  Es gibt verschiedene Trends und Techniken bei der Verwaltung der Navigation in Websites.\n<\/p>\n<h5>\n  Minimalistischer Navigationsansatz<br \/>\n<\/h5>\n<p>\n  Dieser Navigationsansatz wird als minimalistisch angesehen, da nur minimale Arbeit an der Navigation geleistet wird, um einen reibungslosen, sauberen Wechsel zu gew\u00e4hrleisten. Der Wechsel in der Navigation ist nicht abrupt; ziemlich fein gemacht, wenn sich die Bildschirmgr\u00f6\u00dfe \u00e4ndert. Daher ist der Ansatz so, dass die minimale Art der Nachbearbeitung von Navigationselementen durchgef\u00fchrt wird, um maximale, elegante und subtile Effekte zu erzielen. Die Navigationslinks haben eine minimale Gr\u00f6\u00dfe und sind gut in die Seite eingepasst. Dieser Ansatz kann f\u00fcr Websites verwendet werden, die sich auf Eleganz und Einfachheit konzentrieren und einige ausgew\u00e4hlte Funktionen bewerben m\u00f6chten. Zum Beispiel die Website <strong>CrossTrees<\/strong>zeigt ein sehr einfaches Navigationsmen\u00fc, das sich auf das Wesentliche konzentriert und den gr\u00f6\u00dften Platz f\u00fcr die Pr\u00e4sentation von Bildinhalten einh\u00e4lt. Das verschiebt den Fokus des Benutzers auf das Hauptthema, das er vermitteln m\u00f6chte, und l\u00e4sst den Benutzer nicht den Fokus verlieren. Neben Immobilienseiten k\u00f6nnen unter anderem K\u00fcnstler, Designer und Fotografen solche Websites nutzen.\n<\/p>\n<p>\n  Wie Sie sehen k\u00f6nnen, betont diese Website den Minimalismus; Der Fokus liegt auf dem Bild und dem Slogan, der \u201eB\u00fcrofl\u00e4chen in einem Stadthaus zu vermieten in Glasgow&#8220; lautet. Der einfache Zugriff auf die Navigationsleiste ist minimiert, aber klar.\n<\/p>\n<p>\n  Ein weiteres Beispiel ist eine Webdesign-Website <strong>Hashtag17<\/strong>, die auch mehrere andere Dienste anbietet. Die Herausforderung besteht darin, alle angebotenen Dienste auf einer einzigen Seite zu pr\u00e4sentieren, ohne die Seite zu \u00fcberladen. Die von der Agentur angepasste Technik bestand darin, einen Schnappschuss aller Dienste am unteren Rand der Website vor einem wei\u00dfen Hintergrund anzuzeigen, der dem Benutzer hilft, von diesem einzelnen Bereich aus zu einer der 17 Seiten zu navigieren.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cf3ef2fc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cf3ef2fc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Der Vorteil dabei ist, dass dem Betrachter auf einen Blick alle 17 Angebote dieses Unternehmens angezeigt werden. Der wei\u00dfe Hintergrund sorgt f\u00fcr einen ablenkungsfreien Ansatz und Benutzer k\u00f6nnen sofort den Bereich erkennen, in dem sie m\u00f6glicherweise nach Hilfe suchen.\n<\/p>\n<h5>\n  Wenn die Navigationsleiste das Gewicht der Webseite tr\u00e4gt!<br \/>\n<\/h5>\n<p>\n  Die meisten responsiven Websites positionieren das Navigationsmen\u00fc ganz oben. Dies hat klare Vorteile wie einfache Implementierung, keine JavaScript-Abh\u00e4ngigkeit und einfaches CSS. Dies ist jedoch nicht die optimale Positionierung f\u00fcr Mobiltelefone, bei denen Immobilien eine Herausforderung darstellen. Eine interessante M\u00f6glichkeit, die Navigation im responsiven Website-Design zu handhaben, besteht darin, sie an das Ende der Website zu verschieben, wie vom Autor Luke Wroblewski vorgeschlagen. Eine Navigationsleiste nimmt weniger Platz auf dem Desktop ein und kann daher oben platziert werden. Dar\u00fcber hinaus w\u00fcrden Benutzer hier auch danach suchen. Bei kleineren Ger\u00e4ten ist es jedoch ideal, es nach unten zu schieben, wo es nicht viel Platz einnimmt. Die Navigationsliste wird in der Fu\u00dfzeile der Website oder direkt \u00fcber der Fu\u00dfzeile platziert. Es gibt einen Ankerlink dazu im Header-Teil der Website.\n<\/p>\n<pre><code>#access li a {\n   padding: 0;\n   margin: 0;\n   font-size: 16px;\n   height: 57px;\n}\n.container {\n   padding-bottom: 549px;\n   position: relative;\n}\n.nav-strip {\n   position: absolute;\n   bottom: 0;\n}<\/code><\/pre>\n<p>\n  Der Vorteil davon ist Platz f\u00fcr mehr Inhalt im \u201eabove the fold&#8220;-Teil der Website; Gleichzeitig ist die Navigation einfacher und zug\u00e4nglicher und diskreter. Ein zus\u00e4tzlicher Vorteil ist, dass der Benutzer den gesamten Inhalt lesen und zum Ende der Seite scrollen kann, wo er die Navigationsleiste findet. Dadurch erhalten sie mehr Optionen zum Klicken. Weitere Vorteile sind, dass dieser Ansatz keine Verwendung von JavaScript erfordert und daher einfacher zu verwalten und zu beheben ist. Diese Methode ist einfacher f\u00fcr die Gestaltung reaktionsschneller Websites, da die Position der Kopf- und Fu\u00dfzeile (die fest sind) einen einfachen \u00dcbergang erm\u00f6glicht.\n<\/p>\n<p>\n  Der unangenehme Teil dieser Art der Anordnung des Navigationselements besteht darin, dass eine Person hin und her springen muss, um auf die Links zuzugreifen. Daher ist es eine umst\u00e4ndliche Art der Interaktion, die auf Mobilger\u00e4ten ziemlich umst\u00e4ndlich sein kann und die reibungslose Navigation auf Mobilger\u00e4ten beeintr\u00e4chtigen kann. Ein weiterer Nachteil besteht darin, dass ein Benutzer, wenn er den Inhalt nicht liest, m\u00f6glicherweise nicht bis zum Ende des Bildschirms scrollt und somit m\u00f6glicherweise die Navigationsleiste verpasst und nun wei\u00df, wo er danach suchen muss.\n<\/p>\n<h5>\n  Dies kann mit dem Umschaltmen\u00fc behoben werden<br \/>\n<\/h5>\n<p>\n  Hier \u00f6ffnen sich die Men\u00fcfolien in der Kopfzeile selbst und geben ein sauberes, elegantes Aussehen mit einer Ein-\/Ausblenden-Funktion. Es ist einfach zu codieren und ist ein reibungsloser \u00dcbergang. Die Herausforderung besteht jedoch darin, dass Android mit CSS-Animationen m\u00f6glicherweise keinen so reibungslosen \u00dcbergang bietet.\n<\/p>\n<p>\n  Ein gutes Beispiel f\u00fcr die Verwendung des Umschalters ist <strong>Starbucks<\/strong> :\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cf8b4a34.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cf8b4a34.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Wenn das Men\u00fc au\u00dferdem gro\u00df ist, kann es immer noch viel Platz einnehmen. Dieses Problem kann behoben werden, indem f\u00fcr verschiedene Ger\u00e4te unterschiedliche Men\u00fcs erstellt werden. Ein effektiver Weg, dies zu tun, ist die Verwendung des Responsive Select Menu-Plugins.\n<\/p>\n<h5>\n  Eine andere Methode ist die Verwendung des Select Menu-Ansatzes.<br \/>\n<\/h5>\n<p>\n  Im Gegensatz zu den anderen Navigationsmethoden beinhaltet diese Technik die Verwendung von Javascript. Es macht uns von der Form-Eigenschaft. Es wandelt die Men\u00fcliste in ein Auswahlelement um. Obwohl es das leistungsst\u00e4rkste Element in jedem Browser sein kann, da es von Dropdown-Men\u00fcs abgeleitet wird, k\u00f6nnen Designer es als restriktiv empfinden, da es schwierig ist, es \u00fcber verschiedene Browser hinweg anzupassen. Die gr\u00f6\u00dften Vorteile dieser Men\u00fcs in responsiven Website-Designs sind, dass sie funktionieren. Ein weiterer positiver Punkt ist, dass sie verwendet werden k\u00f6nnen, um die Navigationslinks zu steuern, wenn sie \u00fcberz\u00e4hlig sind; Dies kann ein Problem f\u00fcr den TopNav-Ansatz sein. Sie geben auch viel Platz auf dem Weblayout frei, der f\u00fcr das Webdesign genutzt werden kann. Ausgew\u00e4hlte Men\u00fcs k\u00f6nnen an die verschiedenen Ger\u00e4te angepasst werden \u2013 verschiedene mobile Browser handhaben ausgew\u00e4hlte Men\u00fcs auf unterschiedliche Weise.\n<\/p>\n<p>\n  Eine einfache M\u00f6glichkeit, Select Menu zu verwenden, bietet <strong>TinyNav<\/strong>, ein JQuery-Plugin.\n<\/p>\n<p>\n  F\u00fcgen Sie die JS-Datei ein, nachdem Sie Ihre Version von jQuery geladen haben, und schreiben Sie dann den folgenden Code:\n<\/p>\n<pre><code>\n&lt;script&gt;\n&lt;![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]&gt;\n&lt;\/script&gt;<\/code><\/pre>\n<p>\n  F\u00fcgen Sie Ihrem CSS ein paar Zeilen hinzu. Verstecken Sie die tinynav-Klasse. Stellen Sie es so ein, dass es an jedem gew\u00fcnschten Haltepunkt angezeigt wird:\n<\/p>\n<pre><code>\/* styles for desktop *\/\n.tinynav { display: none }\n \n\/* styles for mobile *\/\n@media screen and (max-width: 600px) {\n    .tinynav { display: block }\n    #nav { display: none }\n}<\/code><\/pre>\n<p>\n  Der Nachteil ist, dass sie m\u00f6glicherweise nicht so ordentlich und \u00e4sthetisch sind wie andere Navigationsmen\u00fctechniken. Sie eignen sich am besten f\u00fcr einfache Seiten mit Einzelseitenlayouts wie dem von <strong>ApacheCoube<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cfe21374.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cfe21374.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Content Management ist entscheidend f\u00fcr die effiziente Navigation auf responsiven Websites. Bestimmen Sie bei der Planung des Wireframes f\u00fcr eine responsive Website, welche Inhalte f\u00fcr den Desktop erforderlich sind und welche Art von Inhalten f\u00fcr das mobile Layout bevorzugt werden. Stellen Sie sicher, dass nur die Inhalte platziert werden, die die spezifischen Ziele erf\u00fcllen. Insofern kann die Navigation einem \u00e4hnlichen Ansatz folgen. Um die responsiven Navigationsmen\u00fcs f\u00fcr Mobilger\u00e4te zu optimieren, stellen Sie sicher, dass das mobile Navigationsmen\u00fc nur die wichtigsten Links anzeigt; weniger wichtige m\u00fcssen weggelassen werden. Daher k\u00f6nnen mobile Benutzer auf ihren Websites nur sehen, was sie wollen.\n<\/p>\n<p>\n  Sie m\u00fcssen bestimmen, welche Inhalte unbedingt in dem Teil der Website platziert werden m\u00fcssen, der von Menschen am h\u00e4ufigsten beobachtet wird, ob auf dem Desktop oder auf dem Handy, und dies tun.\n<\/p>\n<p>\n  Bei der Arbeit an einer responsiven Website sind einige wichtige Punkte zu beachten, um eine reibungslose Navigation zu gew\u00e4hrleisten:\n<\/p>\n<ul>\n<li>\n    <strong>Einheitliche Designs<\/strong>: Einige Arten von Designs bleiben \u00fcber alle Ger\u00e4te und Bildschirmgr\u00f6\u00dfen hinweg einheitlich. Die Wahl eines solchen Designs ist problemlos und Sie erhalten eine reibungslose Navigation und k\u00f6nnen dennoch reaktionsschnell sein. <strong>Flip<\/strong>, ein kroatisches Unternehmen, verwendet ein solches Design.\n  <\/li>\n<li>\n    <strong>Dropdown-Men\u00fcs<\/strong>: Dropdown-Men\u00fcs, insbesondere mit einem mehrschichtigen Effekt, sind einfach und effektiv. Sie nehmen nur minimalen Platz auf dem Bildschirm ein, und wenn Sie auf eine Schaltfl\u00e4che klicken, werden die anderen Unterschaltfl\u00e4chen in einer geschichteten Drop-down-Weise ge\u00f6ffnet. <strong>Dieser Stil wird von Microsoft<\/strong> verwendet .\n  <\/li>\n<li>\n    <strong>Inhalte priorisieren<\/strong>: Zeigen Sie nur das Notwendige und wirklich Wichtige. \u00dcberspringen Sie Inhalte, die nicht n\u00fctzlich sind oder auf kleinen Bildschirmen ablenken k\u00f6nnten.\n  <\/li>\n<li>\n    <strong>Verwenden Sie Symbole<\/strong>: Durch die Verwendung sauberer und einfacher Symbole kann die Verwendung von gro\u00dfem, sperrigem Text vermieden werden.\n  <\/li>\n<li>\n<p>\n      <strong>Passen Sie Ihr Design an<\/strong>: Ihr Design sollte in der Lage sein, sich \u00e4sthetisch an verschiedene Bildschirmgr\u00f6\u00dfen anzupassen, auch wenn dies bedeutet, dass die Positionierung des Designs je nach Ger\u00e4t variieren w\u00fcrde. Die \u00e4ltere Version von Oliver Russell hatte ein flexibles Design, das sich an die Bildschirmgr\u00f6\u00dfe anpasste.\n    <\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844d0340a02.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844d0340a02.webp\" alt=\"\" \/><\/a>\n  <\/li>\n<\/ul>\n<h3>\n  Was sind die Herausforderungen beim Umgang mit responsiven Designs auf gro\u00dfen Websites?<br \/>\n<\/h3>\n<p>\n  Gro\u00dfe Websites stellen eine andere Art von Herausforderung f\u00fcr responsive Designs dar. Die einfachen Optionen sind nicht m\u00f6glich, da die Navigation ziemlich komplex ist, da die Menge an Inhalten, die pr\u00e4sentiert werden m\u00fcssen, ziemlich gro\u00df ist. Dar\u00fcber hinaus gibt es zu verwaltende Navigationsebenen und viele Bildschirme, die verwaltet werden m\u00fcssen. Die Entwicklung einer Navigation f\u00fcr eine reaktionsschnelle Navigation in komplexen Websites erfordert eine ausf\u00fchrliche Diskussion mit den Mitarbeitern und erfordert mehr Feinabstimmung und Diskussion aller Aspekte mit Kunden. Die Schritte, um dies aufzuschl\u00fcsseln, drehen sich darum, zu verstehen, was eine komplexe Website braucht, um ihre Zielgruppe zu erreichen. Daher umfassen die Schritte die Durchf\u00fchrung von Publikumsrecherchen, um die Erwartungen des Publikums hinsichtlich dessen, was es auf der Website sehen m\u00f6chte, zu ermitteln. Dies kann zu einer gro\u00dfen Menge an Inhalten f\u00fchren, und die Art der zu pr\u00e4sentierenden Inhalte muss sorgf\u00e4ltig ausgew\u00e4hlt werden. Diese Art von Studie und Arbeit wurde bei der Gestaltung der komplexen Website f\u00fcr Krankenh\u00e4user durchgef\u00fchrt.\n<\/p>\n<p>\n  Eine M\u00f6glichkeit, ein responsives Design f\u00fcr umfangreiche Websites zu entwerfen, ist die Verwendung von Vorlagen und Komponenten. Dies kann erreicht werden, indem die Funktions- und Inhaltsvariationen in kleinere Komponenten aufgeteilt werden und dann getestet wird, wie jede Komponente auf dem kleinen Bildschirm aussehen w\u00fcrde. Diese Designmethode wurde von <strong>Quidco<\/strong> angepasst, das 40 Komponenten verwendete, um ihre Inhaltsvariationen zu rationalisieren. Gro\u00dfe Websites m\u00fcssen mit ihren Funktionen agil sein. Beispielsweise \u00e4ndert der Chat-Bereich in Facebook seine Position basierend auf der Gr\u00f6\u00dfe des Darstellungsbereichs.\n<\/p>\n<p>\n  E-Commerce-Websites, insbesondere gro\u00dfe, stehen ebenfalls vor der Herausforderung, eine reibungslose Navigation zu gew\u00e4hrleisten. Das Befolgen bestimmter wichtiger Schritte kann dazu beitragen, die Benutzererfahrung auf solchen Websites zu verbessern. Ein solcher Schritt ist das Erstellen einer visuellen Produkthierarchie, damit Benutzer Produkte, die sie interessieren, klar sehen k\u00f6nnen. Die Verwendung von mehr wei\u00dfen R\u00e4umen mit minimalem Durcheinander ist unerl\u00e4sslich. Verwenden Sie klare Schriftarten und richtige Schriftgr\u00f6\u00dfen. Verzichten Sie auf lange Textbl\u00f6cke. Priorisieren Sie wesentliche Funktionen und platzieren Sie sie ganz oben, wie die Suchleiste und den Warenkorb. Die Sortierung von Produkten nach Preis, Relevanz oder Bewertung sollte ebenfalls leicht zug\u00e4nglich sein. Geben Sie auch Bereichen Bedeutung, die die Kunden wahrscheinlich ben\u00f6tigen, wie z. B. die Details der Kundenbetreuung.\n<\/p>\n<p>\n  Die Handhabung der Navigation ist ein Bereich, den Designer und Entwickler immer weiter perfektionieren k\u00f6nnen, um die Benutzererfahrung zu verbessern. Entscheidend ist, dass Sie den gew\u00fcnschten Stil basierend auf der Branche, in der Sie t\u00e4tig sind, und basierend auf der Demografie Ihrer K\u00e4ufer ausw\u00e4hlen.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Aufnahmequelle: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2017\/08\/10\/handling-navigation-responsive-designs\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Die Navigation ist ein entscheidendes Element des Responsive Designs. Das liegt daran, dass das Ma\u00df daf\u00fcr, wie n\u00fctzlich ein responsives Website-Design ist, zu einem gro\u00dfen Teil an der Leichtigkeit des \u00dcbergangs zwischen Mobil- und Desktop-Layout liegt. Eine effektive reaktionsschnelle Navigation w\u00fcrde eine reibungslose Gr\u00f6\u00dfen\u00e4nderung auf niedrigere Aufl\u00f6sungen und dann ein Upsizing auf gr\u00f6\u00dfere Bildschirme wie die von Desktops erfordern. Welche Art von Navigation ist f\u00fcr responsive Designs sinnvoll? Es gibt verschiedene Trends und Techniken bei der Verwaltung der Navigation in Websites. Minimalistischer Navigationsansatz Dieser Navigationsansatz gilt als minimalistisch, da nur minimale Arbeit am \u2026<\/p>\n","protected":false},"author":1,"featured_media":222351,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[55,198],"tags":[],"class_list":["post-253357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-und-wordpress","category-webdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/comments?post=253357"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media\/222351"}],"wp:attachment":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media?parent=253357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/categories?post=253357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/tags?post=253357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}