{"id":264933,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/tekniker-for-att-hantera-navigering-i-responsiv-design\/"},"modified":"2022-12-25T16:22:00","modified_gmt":"2022-12-25T13:22:00","slug":"tekniker-for-att-hantera-navigering-i-responsiv-design","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/tekniker-for-att-hantera-navigering-i-responsiv-design\/","title":{"rendered":"Tekniker f\u00f6r att hantera navigering i responsiv design"},"content":{"rendered":"

\n Navigering \u00e4r en viktig del av responsiv design. Detta beror p\u00e5 att m\u00e5ttet p\u00e5 hur anv\u00e4ndbar en responsiv webbdesign \u00e4r till stor del beror p\u00e5 den l\u00e4tta \u00f6verg\u00e5ngen mellan mobila och station\u00e4ra layouter.\n<\/p>\n

\n Effektiv responsiv navigering skulle kr\u00e4va smidig storleks\u00e4ndring till l\u00e4gre uppl\u00f6sningar och sedan uppstorlek till st\u00f6rre sk\u00e4rmar som de p\u00e5 station\u00e4ra datorer.\n<\/p>\n

\n Vilken typ av navigering \u00e4r anv\u00e4ndbar f\u00f6r responsiv design?\n<\/p>\n

\n Det finns olika trender och tekniker i hanteringen av navigering p\u00e5 webbplatser.\n<\/p>\n

\n Minimalistisk inst\u00e4llning till navigering
\n<\/h5>\n

\n Detta tillv\u00e4gag\u00e5ngss\u00e4tt f\u00f6r navigering anses vara minimalistiskt eftersom det finns ett minimum av arbete p\u00e5 navigeringen f\u00f6r att s\u00e4kerst\u00e4lla en smidig, ren, v\u00e4xel. V\u00e4xlingen i navigeringen \u00e4r inte abrupt; ganska k\u00e4nsligt gjort n\u00e4r sk\u00e4rmstorleken genomg\u00e5r f\u00f6r\u00e4ndringar. D\u00e4rf\u00f6r \u00e4r tillv\u00e4gag\u00e5ngss\u00e4ttet s\u00e5dant att minsta m\u00f6jliga omarbetning av navigeringselement g\u00f6rs f\u00f6r att \u00e5stadkomma maximala, eleganta och subtila effekter. Navigationsl\u00e4nkarna \u00e4r dimensionerade och h\u00e5lls till ett minimum och passar bra in p\u00e5 sidan. Detta tillv\u00e4gag\u00e5ngss\u00e4tt kan anv\u00e4ndas f\u00f6r webbplatser som vill beh\u00e5lla fokus p\u00e5 elegant och enkelhet och som v\u00e4ljer att marknadsf\u00f6ra vissa utvalda funktioner. Till exempel webbplatsen CrossTrees<\/strong>visar en mycket enkel navigeringsmeny, med fokus p\u00e5 v\u00e4sentligheter och beh\u00e5ller det stora utrymmet f\u00f6r att visa upp bildinneh\u00e5ll. Den flyttar anv\u00e4ndarens fokus till huvudtemat som \u00e4r vad de vill f\u00f6rmedla, och l\u00e5ter inte anv\u00e4ndaren tappa fokus. F\u00f6rutom fastighetssajter kan bland annat konstn\u00e4rer, designers och fotografer anv\u00e4nda s\u00e5dana webbplatser.\n<\/p>\n

\n Som du kan se betonar denna webbplats minimalism; fokus ligger p\u00e5 bilden och slagordet som \u00e4r ”Townhouse Office Space To Let in Glasgow”. Den enkla \u00e5tkomsten till navigeringsf\u00e4ltet \u00e4r minimerad, men \u00e4nd\u00e5 tydlig.\n<\/p>\n

\n Ett annat exempel \u00e4r en webbdesignwebbplats Hashtag17<\/strong> som ocks\u00e5 erbjuder flera andra tj\u00e4nster. Utmaningen \u00e4r att visa upp alla tj\u00e4nster som erbjuds p\u00e5 en enda sida, utan att belamra sidan. Tekniken som byr\u00e5n anpassade var att visa en \u00f6gonblicksbild av alla tj\u00e4nster l\u00e4ngst ner p\u00e5 webbplatsen mot en vit bakgrund som hj\u00e4lper anv\u00e4ndaren att navigera till n\u00e5gon av de 17 sidorna fr\u00e5n detta enstaka omr\u00e5de.\n<\/p>\n

\"\"<\/a><\/p>\n

\n F\u00f6rdelen h\u00e4r \u00e4r att en enda blick visar tittaren alla 17 tj\u00e4nster som erbjuds av detta f\u00f6retag. Den vita bakgrunden ger ett tillv\u00e4gag\u00e5ngss\u00e4tt utan distraktion och anv\u00e4ndare kan omedelbart uppt\u00e4cka omr\u00e5det de kan leta efter hj\u00e4lp med.\n<\/p>\n

\n N\u00e4r navigeringsf\u00e4ltet b\u00e4r vikten av webbsidan!
\n<\/h5>\n

\n De flesta responsiva webbplatser placerar navigeringsmenyn \u00f6verst. Det finns tydliga f\u00f6rdelar med att g\u00f6ra detta som enkel implementering, inget JavaScript-beroende och enkel CSS. Detta \u00e4r dock inte den optimala positioneringen f\u00f6r mobiler d\u00e4r fastigheter \u00e4r en utmaning. Ett intressant s\u00e4tt att hantera navigering i responsiv webbdesign \u00e4r att trycka den till botten av webbplatsen, som f\u00f6rfattaren Luke Wroblewski f\u00f6reslagit. Ett navigeringsf\u00e4lt tar mindre plats p\u00e5 skrivbordet och kan d\u00e4rf\u00f6r placeras ovanp\u00e5. Dessutom \u00e4r det h\u00e4r anv\u00e4ndarna skulle leta efter det ocks\u00e5. Men p\u00e5 mindre enheter \u00e4r det idealiskt att trycka den till botten d\u00e4r den inte tar mycket plats. Navigeringslistan placeras i sidfoten p\u00e5 webbplatsen eller precis ovanf\u00f6r sidfoten. Det finns en ankarl\u00e4nk till den i rubriken p\u00e5 webbplatsen.\n<\/p>\n

#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
\n  F\u00f6rdelen med detta \u00e4r utrymme f\u00f6r mer inneh\u00e5ll i den \u00f6vre delen av webbplatsen; samtidigt \u00e4r navigeringen enklare och tillg\u00e4nglig och diskret. En ytterligare f\u00f6rdel \u00e4r att anv\u00e4ndaren kan l\u00e4sa hela inneh\u00e5llet och scrolla till botten av sidan d\u00e4r de hittar navigeringsf\u00e4ltet. Detta ger dem fler alternativ att klicka p\u00e5. Andra f\u00f6rdelar \u00e4r att detta tillv\u00e4gag\u00e5ngss\u00e4tt inte kr\u00e4ver anv\u00e4ndning av JavaScript och \u00e4r d\u00e4rf\u00f6r l\u00e4ttare att hantera och fels\u00f6ka. Denna metod \u00e4r enklare f\u00f6r att designa responsiva webbplatser eftersom positionen f\u00f6r sidhuvudet och sidfoten (som \u00e4r fasta) m\u00f6jligg\u00f6r enkel \u00f6verg\u00e5ng.\n<\/p>\n
\n  Den besv\u00e4rliga delen av denna typ av arrangemang av navigeringselementet \u00e4r att en person beh\u00f6ver hoppa fram och tillbaka f\u00f6r att komma \u00e5t l\u00e4nkarna. D\u00e4rf\u00f6r \u00e4r det en besv\u00e4rlig typ av interaktion, som kan vara ganska besv\u00e4rlig p\u00e5 mobil och kan hindra smidigheten i mobilnavigering. En annan nackdel \u00e4r att om en anv\u00e4ndare inte l\u00e4ser inneh\u00e5llet kanske han inte rullar till botten av sk\u00e4rmen och kan d\u00e4rf\u00f6r missa navigeringsf\u00e4ltet och nu vet var han ska leta efter det.\n<\/p>\n
\n  Detta kan \u00e5tg\u00e4rdas genom att anv\u00e4nda v\u00e4xlingsmenyn
\n<\/h5>\n
\n  H\u00e4r glider menyn upp i sj\u00e4lva rubriken och ger ett rent, elegant utseende med en visa\/d\u00f6lj funktion. Det \u00e4r l\u00e4tt att koda och \u00e4r en smidig \u00f6verg\u00e5ng. Men utmaningen \u00e4r att Android kanske inte ger en s\u00e5 smidig \u00f6verg\u00e5ng med CSS-animationer.\n<\/p>\n
\n  Ett bra exempel p\u00e5 att anv\u00e4nda Toggle \u00e4r Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Dessutom, om menyn \u00e4r stor, kan den fortfarande ta mycket plats. Detta problem kan \u00e5tg\u00e4rdas genom att skapa olika menyer f\u00f6r olika enheter. Ett effektivt s\u00e4tt att g\u00f6ra detta \u00e4r att anv\u00e4nda insticksprogrammet Responsive Select Menu.\n<\/p>\n
\n  En annan metod \u00e4r att anv\u00e4nda metoden V\u00e4lj meny.
\n<\/h5>\n
\n  Till skillnad fr\u00e5n de andra navigeringsmetoderna inneb\u00e4r denna teknik anv\u00e4ndning av Javascript. Det g\u00f6r oss till formegenskapen. Den konverterar menylistan till ett valt element. \u00c4ven om det kan vara det mest presterande elementet i varje webbl\u00e4sare, eftersom de h\u00e4rr\u00f6r fr\u00e5n rullgardinsmenyer, kan designers tycka att de \u00e4r restriktiva p\u00e5 grund av sv\u00e5righeter att anpassa i olika webbl\u00e4sare. De st\u00f6rsta f\u00f6rdelarna med dessa menyer i responsiv webbdesign \u00e4r att de fungerar. En annan positiv punkt \u00e4r att de kan anv\u00e4ndas f\u00f6r att styra navigeringsl\u00e4nkarna n\u00e4r de \u00e4r i \u00f6verskott; detta kan vara ett problem f\u00f6r TopNav-metoden. De frig\u00f6r ocks\u00e5 mycket utrymme p\u00e5 webblayouten, som kan anv\u00e4ndas f\u00f6r webbdesign. Utvalda menyer kan skr\u00e4ddarsys f\u00f6r de olika enheterna \u2013 olika mobila webbl\u00e4sare kommer att hantera utvalda menyer p\u00e5 olika s\u00e4tt.\n<\/p>\n
\n  Ett enkelt s\u00e4tt att anv\u00e4nda Select Menu \u00e4r genom TinyNav<\/strong>, ett JQuery-plugin.\n<\/p>\n
\n  Inkludera JS-filen n\u00e4r du har laddat din version av jQuery och skriv sedan f\u00f6ljande kod:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  L\u00e4gg till n\u00e5gra rader i din CSS. G\u00f6m tinynav-klassen. St\u00e4ll in den s\u00e5 att den visas vid vilken brytpunkt du vill:\n<\/p>\n
\/* 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
\n  Nackdelen \u00e4r att de kanske inte \u00e4r lika snygga och estetiska som andra navigeringsmenytekniker. De \u00e4r b\u00e4st p\u00e5 enkla sidor med enkelsideslayouter som ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Inneh\u00e5llshantering \u00e4r avg\u00f6rande f\u00f6r effektiv navigering av responsiva webbplatser. Under planeringen av tr\u00e5dramen f\u00f6r responsiv webbplats, best\u00e4m vilket inneh\u00e5ll som kr\u00e4vs f\u00f6r skrivbordet och vilken typ av inneh\u00e5ll som \u00e4r mer att f\u00f6redra f\u00f6r den mobila layouten. Se till att endast det inneh\u00e5ll som uppfyller de specifika m\u00e5len placeras. I detta avseende kan navigeringen f\u00f6lja ett liknande tillv\u00e4gag\u00e5ngss\u00e4tt. F\u00f6r att effektivisera de responsiva navigeringsmenyerna f\u00f6r mobiler, se till att den mobila navigeringsmenyn endast visar de viktigaste l\u00e4nkarna; mindre viktiga m\u00e5ste utel\u00e4mnas. D\u00e4rf\u00f6r kan mobilanv\u00e4ndare bara se vad de vill ha p\u00e5 sina webbplatser.\n<\/p>\n
\n  Du m\u00e5ste best\u00e4mma vilket inneh\u00e5ll som \u00e4r helt avg\u00f6rande f\u00f6r att placeras i den del av webbplatsen som observeras maximalt av m\u00e4nniskor, oavsett om det \u00e4r p\u00e5 dator eller mobil, och g\u00f6r det.\n<\/p>\n
\n  Det finns vissa viktiga punkter att komma ih\u00e5g n\u00e4r du arbetar p\u00e5 en responsiv webbplats f\u00f6r att s\u00e4kerst\u00e4lla smidig navigering:\n<\/p>\n