Inte skräpar skärmen med Navigeringsalternativ

June 8

I navigeringsalternativ på de flesta traditionella webbplatser, länkar till alla de viktigaste sidorna är alltid synliga. En typisk webbplats innehåller en rad med länkar över toppen eller den övre vänstra eller högra sidan av skärmen med gemensamma länkar till de viktigaste delarna, inklusive startsidan, Om oss sidan, och andra viktiga delar.

Att hålla navigeringslänkar högst upp på varje sida gör dem lätta hitta men clutters designutrymmet. Lägg till din logotyp och andra varumärkeselement, sub-navigeringslänkar, och eventuellt reklam och - yuck - vilken röra.

Inga undra tidningssajter alltid beskrivs som "upptagen" och de flesta bloggdesigner anses tråkigt. Plugga för mycket information på varje sida innan du ens börja lägga innehållet gör det svårt att hålla saker intressant.

Nu anser den metod som de flesta designers har tagit till att skapa iPad-appar. Vid utformning av webbsidor för iPad och iPhone, kan du dra nytta av den nya rasen av app designers som finns där ute.

Ett brett utbud av iPad-appar, däribland populära tidskrifter Wired och Sports Illustrated, display två konsekventa områden där app designers placera navigeringselement:

  • I det övre vänstra eller högra hörnet på sidan: Till skillnad från webbsidor, navigerings länkar i de flesta appar syns bara när du trycker på en ikon, som ikonen Hem i det övre vänstra, som visas i Honeybee tidningen.

    Inte skräpar skärmen med Navigeringsalternativ
  • Längst ner på sidan: Återigen, visas en valfri uppsättning navigeringslänkar bara när du trycker på botten av skärmen, så som visas i denna figur.

    Inte skräpar skärmen med Navigeringsalternativ

Denna nya design praktiken skulle kunna vara ett användbart nytt sätt att designa webbsidor samt appar. Designen visas i figurerna skapades ursprungligen som en app för iPad. Den var avsedd att använda Adobes nya digitala publiceringsverktyg som är idealisk för att skapa interaktiva tidskrifter och förbättrade e-böcker.

Men efter att designen var klar med Adobes digitala publiceringsverktyg, som automatiskt skapar navigeringslänkar som visas, det fanns ingen anledning att inte göra samma sak i en webbsida version.

Så samma design sedan återskapas i HTML och CSS och testade den i webbläsaren Safari. Voilà! Detta sätt att navigationen fungerar vackert på den mobila webben också, och det lämnar mycket mer utrymme för att skapa snygga designer som fyller skärmen på iPad.

Även i webbsidan versionen av denna webbplats, visas bara den rullgardinsmenyn som visas när du trycker på ikonen Hem. Menyn försvinner så fort du trycker på en länk i listan.