{"id":257299,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/teknikker-for-a-handtere-navigasjon-i-responsive-design\/"},"modified":"2022-12-25T16:17:00","modified_gmt":"2022-12-25T13:17:00","slug":"teknikker-for-a-handtere-navigasjon-i-responsive-design","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/teknikker-for-a-handtere-navigasjon-i-responsive-design\/","title":{"rendered":"Teknikker for \u00e5 h\u00e5ndtere navigasjon i responsive design"},"content":{"rendered":"

\n Navigasjon er et kritisk element i responsiv design. Dette er fordi m\u00e5let p\u00e5 hvor nyttig et responsivt nettsteddesign er, i stor grad er den enkle overgangen mellom mobil- og skrivebordsoppsett.\n<\/p>\n

\n Effektiv responsiv navigering vil kreve jevn endring av st\u00f8rrelsen til lavere oppl\u00f8sninger og deretter oppskalering til st\u00f8rre skjermer som for stasjon\u00e6re datamaskiner.\n<\/p>\n

\n Hva slags navigasjon er nyttig for responsive design?\n<\/p>\n

\n Det er ulike trender og teknikker innen styring av navigasjon p\u00e5 nettsider.\n<\/p>\n

\n Minimalistisk tiln\u00e6rming til navigasjon
\n<\/h5>\n

\n Denne tiln\u00e6rmingen til navigering anses for \u00e5 v\u00e6re minimalistisk ettersom det er minimalt med arbeid p\u00e5 navigasjonen for \u00e5 sikre en jevn, ren bryter. Byttingen i navigasjonen er ikke br\u00e5; ganske delikat utf\u00f8rt ettersom skjermst\u00f8rrelsen endres. Derfor er tiln\u00e6rmingen slik at minimumstypen for omarbeiding av navigasjonselementer gj\u00f8res for \u00e5 f\u00e5 til maksimale, elegante og subtile effekter. Navigasjonslenkene er dimensjonert og holdt p\u00e5 et minimum, og passer fint inn p\u00e5 siden. Denne tiln\u00e6rmingen kan brukes for nettsteder som \u00f8nsker \u00e5 holde fokus p\u00e5 elegant og enkelhet og som velger \u00e5 markedsf\u00f8re noen utvalgte funksjoner. For eksempel nettstedet CrossTrees<\/strong>viser en veldig enkel navigasjonsmeny, med fokus p\u00e5 det vesentlige og holder hovedplassen for utstilling av bildeinnhold. Den flytter brukerens fokus til hovedtemaet som er det de \u00f8nsker \u00e5 formidle, og lar ikke brukeren miste fokus. I tillegg til eiendomssider kan blant annet kunstnere, designere og fotografer bruke slike nettsteder.\n<\/p>\n

\n Som du kan se legger denne nettsiden vekt p\u00e5 minimalisme; fokuset er p\u00e5 bildet og slagordet som er «Townhouse Office Space To Let in Glasgow». Enkel tilgang til navigasjonslinjen er minimal, men likevel tydelig.\n<\/p>\n

\n Et annet eksempel er et webdesign nettsted Hashtag17<\/strong> som ogs\u00e5 tilbyr flere andre tjenester. Utfordringen er \u00e5 vise frem alle tjenestene som tilbys p\u00e5 \u00e9n enkelt side, uten \u00e5 rote siden. Teknikken tilpasset av byr\u00e5et var \u00e5 vise et \u00f8yeblikksbilde av alle tjenestene nederst p\u00e5 nettstedet mot en hvit bakgrunn som vil hjelpe brukeren med \u00e5 navigere til en av de 17 sidene fra dette enkeltomr\u00e5det.\n<\/p>\n

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

\n Fordelen her er at et enkelt blikk vil vise seeren alle de 17 tjenestene som tilbys av dette selskapet. Den hvite bakgrunnen gir en tiln\u00e6rming uten distraksjon, og brukere kan umiddelbart oppdage omr\u00e5det de leter etter hjelp med.\n<\/p>\n

\n N\u00e5r navigasjonslinjen b\u00e6rer vekten av nettsiden!
\n<\/h5>\n

\n De fleste responsive nettsteder plasserer navigasjonsmenyen \u00f8verst. Det er klare fordeler ved \u00e5 gj\u00f8re dette som enkel implementering, ingen JavaScript-avhengighet og enkel CSS. Dette er imidlertid ikke den optimale posisjoneringen for mobiler hvor eiendom er en utfordring. En interessant m\u00e5te \u00e5 h\u00e5ndtere navigasjon i responsivt nettsteddesign er \u00e5 skyve den til bunnen av nettstedet, som foresl\u00e5tt av forfatteren Luke Wroblewski. En navigasjonslinje tar mindre plass p\u00e5 skrivebordet og kan derfor plasseres p\u00e5 toppen. Dessuten er det her brukerne vil se etter det ogs\u00e5. Men p\u00e5 mindre enheter er det ideelt \u00e5 skyve den til bunnen der den ikke tar mye plass. Navigasjonslisten er plassert i bunnteksten p\u00e5 nettsiden eller rett over bunnteksten. Det er en ankerlenke til den i overskriften p\u00e5 nettstedet.\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  Fordelen med dette er plass til mer innhold i den over folddelen av nettstedet; samtidig er navigeringen enklere og tilgjengelig og diskret. En ekstra fordel er at brukeren kan lese hele innholdet og bla til bunnen av siden der de finner navigasjonslinjen. Dette vil gi dem flere alternativer \u00e5 klikke p\u00e5. Andre fordeler er at denne tiln\u00e6rmingen ikke krever bruk av JavaScript og er derfor lettere \u00e5 administrere og feils\u00f8ke. Denne metoden er enklere for \u00e5 designe responsive nettsteder, da plasseringen av topp- og bunnteksten (som er faste) muliggj\u00f8r enkel overgang.\n<\/p>\n
\n  Den vanskelige delen av denne typen arrangement av navigasjonselementet er at en person trenger \u00e5 hoppe frem og tilbake for \u00e5 f\u00e5 tilgang til lenkene. Derfor er det en vanskelig type interaksjon, som kan v\u00e6re ganske tungvint p\u00e5 mobil og kan hindre smidigheten til mobilnavigering. En annen ulempe er at hvis en bruker ikke leser innholdet, kan det hende at han ikke ruller til bunnen av skjermen og kan derfor g\u00e5 glipp av navigasjonslinjen, og n\u00e5 vet hvor han skal lete etter den.\n<\/p>\n
\n  Dette kan rettes opp ved \u00e5 bruke vekslemenyen
\n<\/h5>\n
\n  Her glir menyen opp i selve overskriften og gir et rent, elegant utseende med en vis\/skjul-funksjon. Det er enkelt \u00e5 kode og er en jevn overgang. Men utfordringen er at Android kanskje ikke gir en s\u00e5 jevn overgang med CSS-animasjoner.\n<\/p>\n
\n  Et godt eksempel p\u00e5 bruk av Toggle er Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Dessuten, hvis menyen er stor, kan den fortsatt ta mye plass. Dette problemet kan rettes ved \u00e5 lage forskjellige menyer for forskjellige enheter. En effektiv m\u00e5te \u00e5 gj\u00f8re dette p\u00e5 er \u00e5 bruke Responsive Select Menu-plugin.\n<\/p>\n
\n  En annen metode er \u00e5 bruke tiln\u00e6rmingen Velg meny.
\n<\/h5>\n
\n  I motsetning til de andre navigasjonsmetodene, inneb\u00e6rer denne teknikken bruk av Javascript. Det gj\u00f8r oss til formegenskapen. Den konverterer menylisten til et utvalgt element. Selv om det kan v\u00e6re det beste elementet i hver nettleser, ettersom de er avledet fra rullegardinmenyer, kan designere finne dem begrensende p\u00e5 grunn av vanskeligheter med \u00e5 tilpasse p\u00e5 tvers av forskjellige nettlesere. De st\u00f8rste fordelene med disse menyene i responsivt nettsteddesign er at de fungerer. Et annet positivt poeng er at de kan brukes til \u00e5 kontrollere navigasjonslenkene n\u00e5r de er i overkant; dette kan v\u00e6re et problem for TopNav-tiln\u00e6rmingen. De frigj\u00f8r ogs\u00e5 mye plass p\u00e5 weblayouten, som kan brukes til webdesign. Utvalgte menyer kan skreddersys til de forskjellige enhetene – forskjellige mobilnettlesere vil h\u00e5ndtere utvalgte menyer p\u00e5 forskjellige m\u00e5ter.\n<\/p>\n
\n  En enkel m\u00e5te \u00e5 bruke Select Menu p\u00e5 er gjennom TinyNav<\/strong>, en JQuery-plugin.\n<\/p>\n
\n  Inkluder JS-filen etter at du har lastet inn versjonen av jQuery, og skriv deretter f\u00f8lgende kode:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Legg til noen linjer i CSS-en din. Skjul tinynav-klassen. Still den til \u00e5 vises ved hvilket bruddpunkt du vil:\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  Ulempen er at de kanskje ikke er like pene og estetiske som andre navigasjonsmenyteknikker. De er best p\u00e5 enkle sider med enkeltsideoppsett, slik som ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Innholdsstyring er avgj\u00f8rende for effektiv navigering av responsive nettsteder. Under planleggingen av wireframe for responsive nettsider, avgj\u00f8r hvilket innhold som kreves for skrivebordet og hvilken type innhold som er mer foretrukket for mobiloppsettet. S\u00f8rg for at kun innholdet som oppfyller de spesifikke m\u00e5lene plasseres. I denne forbindelse kan navigasjonen f\u00f8lge en lignende tiln\u00e6rming. For \u00e5 str\u00f8mlinjeforme de responsive navigasjonsmenyene for mobiler, s\u00f8rg for at mobilnavigasjonsmenyen kun viser de viktigste koblingene; mindre viktige m\u00e5 utelates. Derfor kan mobilbrukere bare se hva de vil ha p\u00e5 nettsidene deres.\n<\/p>\n
\n  Du m\u00e5 finne ut hvilket innhold som er helt avgj\u00f8rende for \u00e5 plasseres i den delen av nettstedet som observeres maksimalt av folk, enten det er p\u00e5 datamaskin eller mobil, og gj\u00f8r det.\n<\/p>\n
\n  Det er visse n\u00f8kkelpunkter \u00e5 huske p\u00e5 n\u00e5r du arbeider med et responsivt nettsted for \u00e5 sikre jevn navigering:\n<\/p>\n