Vad är responsiv na­vi­ge­ring? Dynamiska menyer för mobil surfning

Responsiv na­vi­ge­ring är en viktig aspekt av mo­bi­lop­ti­me­ring. Om mo­bil­na­vi­ge­ring­en inte guidar an­vän­dar­na smidigt från punkt A till punkt B är det troligt att de snabbt lämnar sidan, vilket leder till förlorad trafik och, ännu viktigare, förlorade intäkter. Olika koncept som ned­rull­nings­ba­ra menyer eller na­vi­ge­rings­fält längst ner kan bidra till att förbättra na­vi­ge­ring­en på webb­plat­sen.

Vad kän­ne­teck­nar en bra responsiv na­vi­ge­ring?

Ett bra na­vi­ga­tions­sy­stem är ryggraden i alla webb­plat­ser – det hjälper an­vän­dar­na att hitta den in­for­ma­tion som är viktig för dem. Na­vi­ga­tions­e­le­men­ten ska fungera smidigt, ha en tydlig och själv­för­kla­ran­de struktur och vara intuitiva att använda. De största ut­ma­ning­ar­na med responsiv na­vi­ge­ring är det be­grän­sa­de skär­mut­rym­met och den touch­ba­se­ra­de in­ter­ak­tio­nen på mobila enheter. Det finns dock flera re­spon­si­va lösningar som ga­ran­te­rar en ren och an­vän­dar­vän­lig na­vi­ge­ring på webb­plat­sen.

Den grund­läg­gan­de idén bakom responsiv webb­de­sign är att sidans innehåll och layout dynamiskt anpassar sig efter enhetens för­ut­sätt­ning­ar och skärm­stor­lek.

I de flesta fall är det bäst att följa principen ”mobil först”. Denna de­signstra­te­gi pri­o­ri­te­rar mo­bi­lop­ti­me­ring av webb­pro­jekt – man sättermo­bil­ver­sio­nens design, an­vänd­bar­het och prestanda i första rummet, innan man anpassar den till sta­tio­nä­ra och bärbara datorer. Att anpassa ett be­fint­ligt webb­platsna­vi­ge­rings­sy­stem för mobil an­vänd­ning är ofta mer kom­pli­ce­rat och tidskrä­van­de. Därför bör du, innan du börjar planera och bygga din re­spon­si­va na­vi­ge­ring, svara på några viktiga frågor – särskilt när det gäller pla­ce­ring­en och den över­gri­pan­de struk­tu­ren för na­vi­ge­ring­en.

Var ska na­vi­ge­ring­en placeras?

Vanliga metoder för placering av na­vi­ge­ring är na­vi­ge­ring i sidfoten och placering av menyn högst upp på sidan. Med na­vi­ge­ring i sidfoten ser an­vän­dar­na endast en länk till na­vi­ge­ring­en i början av mo­bil­si­dan, som tar dem direkt till sidfoten där de enskilda me­ny­al­ter­na­ti­ven finns.

Fot­na­vi­ge­ring är dock inte särskilt an­vän­dar­vän­ligt: an­vän­dar­na förväntar sig att viktiga na­vi­ge­ring­s­e­le­ment ska vara lät­till­gäng­li­ga, vilket är an­led­ning­en till att fot­na­vi­ge­ring blir allt mindre vanligt. Idag placeras mo­bil­na­vi­ge­ring oftare högst upp på sidan. Detta klassiska till­vä­ga­gångs­sätt för responsiv design är välbekant för de flesta användare.

Hur är na­vi­ge­ring­en uppbyggd?

Det finns olika möj­lig­he­ter när det gäller att struk­tu­re­ra din na­vi­ge­ring. Två av de mest populära al­ter­na­ti­ven är list­na­vi­ge­ring och re­spon­si­va rutnät.

Listor kan visas både som en enkel- och en fler­ni­vå­na­vi­ge­ring. Det finns två tydliga fördelar med detta format: för det första kan web­b­ut­veck­la­re im­ple­men­te­ra listor relativt enkelt, och dessutom anpassar det sig efter an­vän­da­rens vanor.

En rut­nätsna­vi­ge­ring är idealisk för korta na­vi­ge­rings­ob­jekt och är särskilt populär inom e-handel. Objekten visas sida vid sida i ett rut­nätslay­out, där antalet kolumner beror på skärm­stor­le­ken. Om du planerar ett rutnät med två kolumner, se till att antalet objekt är jämnt för att undvika en asym­met­risk layout.

Vilka mobila na­vi­ga­tions­kon­cept finns till­gäng­li­ga?

Nu kommer vi till den centrala frågan: hur ska mo­bil­na­vi­ge­rings­me­nyn öppnas? Konceptet bestäms av hur na­vi­ge­ring­en pre­sen­te­ras för an­vän­da­ren. Vis­nings­al­ter­na­ti­ven är många: na­vi­ge­ring­en kan visas direkt på sidan eller öppnas genom att trycka på en länk. Na­vi­ge­ring­en kan antingen flytta in­ne­hål­let nedåt eller ligga ovanför det. Här har vi samlat några exempel.

Na­vi­ge­ring via rull­gardinsme­ny

En av de klassiska re­spon­si­va na­vi­ge­rings­ty­per­na är rull­gardinsme­nyn. Den liknar tra­di­tio­nell na­vi­ge­ring på sta­tio­nä­ra datorer, vilket gör den bekant för an­vän­dar­na och ett vanligt valt na­vi­ge­rings­kon­cept. Menyn aktiveras genom att trycka på en knapp eller ikon och visas över in­ne­hål­let utan att täcka det helt.

Slidedown-na­vi­ge­ring

En annan populär typ av na­vi­ge­ring är slidedown-menyn, även känd som dragspels- eller ex­pan­der­bar ru­ta­na­vi­ge­ring. När an­vän­dar­na trycker på me­ny­knap­pen glider na­vi­ge­ring­en upp – till skillnad från rull­gardinsme­ny­er täcker den inte in­ne­hål­let utan skjuter istället ned det. Även om den är något mer komplex att im­ple­men­te­ra anses denna metod vara mycket skalbar och ut­rym­mes­be­spa­ran­de. Tack vare möj­lig­he­ten att inkludera un­der­me­ny­er erbjuder den en elegant lösning för både enkla och mer komplexa menyer.

Nedre na­vi­ge­rings­fält

Den nedre na­vi­ge­rings­fäl­tet är en alltmer populär lösning för mo­bi­lap­par och webb­plat­ser, där menyn visas längst ner på skärmen. Denna na­vi­ge­rings­stil är särskilt an­vän­dar­vän­lig, eftersom den är lätt att nå på smartp­ho­nes. Den fungerar bra för projekt med några få viktiga na­vi­ge­rings­al­ter­na­tiv och ger en tydlig, or­ga­ni­se­rad struktur som hjälper an­vän­dar­na att snabbt växla mellan webb­plat­sens hu­vudsek­tio­ner.

Na­vi­ge­ring utanför skärmen

I detta till­vä­ga­gångs­sätt placeras den re­spon­si­va na­vi­ge­ring­en som standard utanför skärmens synliga område. Menyn är inte in­te­gre­rad i hu­vud­lay­ou­ten, vilket gör off-canvas-na­vi­ge­ring till en ut­rym­mes­be­spa­ran­de lösning som inte tar upp någon plats i vis­nings­om­rå­det. Först när me­ny­i­ko­nen trycks på glider na­vi­ge­ring­en fram och skjuter hela layouten åt sidan. Denna metod är särskilt väl lämpad för stora na­vi­ge­rings­hi­e­rar­ki­er med flera un­der­me­ny­er.