{"id":255364,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/tecniche-per-la-gestione-della-navigazione-nei-design-reattivi\/"},"modified":"2022-12-25T16:22:00","modified_gmt":"2022-12-25T13:22:00","slug":"tecniche-per-la-gestione-della-navigazione-nei-design-reattivi","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/tecniche-per-la-gestione-della-navigazione-nei-design-reattivi\/","title":{"rendered":"Tecniche per la gestione della navigazione nei design reattivi"},"content":{"rendered":"

\n La navigazione \u00e8 un elemento critico del responsive design. Questo perch\u00e9, la misura di quanto sia utile un design di sito Web reattivo, \u00e8 in larga misura dalla facilit\u00e0 di transizione tra layout mobile e desktop.\n<\/p>\n

\n Una navigazione reattiva efficace richiederebbe un ridimensionamento fluido a risoluzioni inferiori e quindi l'upsize a schermi pi\u00f9 grandi come quelli dei desktop.\n<\/p>\n

\n Che tipo di navigazione \u00e8 utile per i responsive design?\n<\/p>\n

\n Esistono diverse tendenze e tecniche nella gestione della navigazione nei siti web.\n<\/p>\n

\n Approccio minimalista alla navigazione
\n<\/h5>\n

\n Questo approccio alla navigazione \u00e8 considerato minimalista in quanto viene svolto un lavoro minimo sulla navigazione in modo da garantire un passaggio fluido e pulito. Il cambio di navigazione non \u00e8 brusco; fatto piuttosto delicatamente poich\u00e9 le dimensioni dello schermo subiscono modifiche. Quindi, l'approccio \u00e8 tale che il tipo minimo di rielaborazione degli elementi di navigazione \u00e8 fatto per ottenere effetti massimi, eleganti e sottili. I collegamenti di navigazione sono dimensionati e ridotti al minimo e si adattano perfettamente alla pagina. Questo approccio pu\u00f2 essere utilizzato per i siti Web che desiderano concentrarsi sull'eleganza e sulla semplicit\u00e0 e scelgono di promuovere alcune funzionalit\u00e0 selezionate. Ad esempio il sito Web CrossTrees<\/strong>mostra un menu di navigazione molto semplice, concentrandosi sull'essenziale e mantenendo lo spazio maggiore per la vetrina dei contenuti delle immagini. Sposta l'attenzione dell'utente sul tema principale che \u00e8 ci\u00f2 che vuole trasmettere e non lascia che l'utente perda la concentrazione. Oltre ai siti immobiliari, artisti, designer e fotografi, tra gli altri, possono utilizzare tali siti web.\n<\/p>\n

\n Come puoi vedere questo sito web enfatizza il minimalismo; l'attenzione si concentra sull'immagine e sullo slogan che \u00e8 “Townhouse Office Space To Let in Glasgow”. La facilit\u00e0 di accesso alla barra di navigazione \u00e8 ridotta al minimo, ma chiara.\n<\/p>\n

\n Un altro esempio \u00e8 un sito Web di progettazione Web Hashtag17<\/strong> che offre anche molti altri servizi. La sfida \u00e8 mostrare tutti i servizi offerti in un'unica pagina, senza ingombrare la pagina. La tecnica adottata dall'agenzia \u00e8 stata quella di mostrare un'istantanea di tutti i servizi nella parte inferiore del sito Web su uno sfondo bianco che aiuter\u00e0 l'utente a navigare verso una qualsiasi delle 17 pagine di questa singola area.\n<\/p>\n

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

\n Il vantaggio qui \u00e8 che un solo sguardo mostrer\u00e0 allo spettatore tutti i 17 servizi offerti da questa azienda. Lo sfondo bianco fornisce un approccio senza distrazioni e gli utenti possono individuare immediatamente l'area per la quale potrebbero cercare aiuto.\n<\/p>\n

\n Quando la barra di navigazione sopporta il peso della pagina web!
\n<\/h5>\n

\n La maggior parte dei siti Web responsive posiziona il menu di navigazione in alto. Ci sono chiari vantaggi nel fare questo come la facilit\u00e0 di implementazione, nessuna dipendenza da JavaScript e CSS semplice. Tuttavia, questo non \u00e8 il posizionamento ottimale per i cellulari in cui il settore immobiliare \u00e8 una sfida. Un modo interessante di gestire la navigazione nella progettazione di siti Web reattivi \u00e8 spingerla in fondo al sito, come suggerito dall'autore Luke Wroblewski. Una barra di navigazione occupa meno spazio sul desktop e quindi pu\u00f2 essere posizionata sopra. Inoltre, \u00e8 qui che anche gli utenti lo cercherebbero. Ma su dispositivi pi\u00f9 piccoli, \u00e8 ideale spingerlo verso il basso dove non occuper\u00e0 molto spazio. L'elenco di navigazione viene inserito nel pi\u00e8 di pagina del sito Web o appena sopra il pi\u00e8 di pagina. C'\u00e8 un collegamento di ancoraggio ad esso nella parte dell'intestazione del sito web.\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  Il vantaggio di questo \u00e8 lo spazio per pi\u00f9 contenuti nella parte above the fold del sito web; allo stesso tempo, la navigazione \u00e8 pi\u00f9 facile, accessibile e discreta. Un ulteriore vantaggio \u00e8 che l'utente pu\u00f2 leggere l'intero contenuto e scorrere fino alla fine della pagina dove trova la barra di navigazione. Questo dar\u00e0 loro pi\u00f9 opzioni su cui fare clic. Altri vantaggi sono che questo approccio non richiede l'uso di JavaScript e quindi \u00e8 pi\u00f9 facile da gestire e risolvere i problemi. Questo metodo \u00e8 pi\u00f9 semplice per la progettazione di siti Web reattivi poich\u00e9 la posizione dell'intestazione e del pi\u00e8 di pagina (che sono fissi) consente una facile transizione.\n<\/p>\n
\n  La parte scomoda di questo tipo di disposizione dell'elemento di navigazione \u00e8 che una persona deve saltare avanti e indietro per accedere ai collegamenti. Quindi, \u00e8 un tipo di interazione imbarazzante, che pu\u00f2 essere piuttosto ingombrante sui dispositivi mobili e pu\u00f2 impedire la fluidit\u00e0 della navigazione mobile. Un altro svantaggio \u00e8 che se un utente non sta leggendo il contenuto, potrebbe non scorrere fino alla fine dello schermo e quindi potrebbe perdere la barra di navigazione e ora sapere dove cercarla.\n<\/p>\n
\n  Questo pu\u00f2 essere risolto utilizzando il menu di commutazione
\n<\/h5>\n
\n  Qui, il menu si apre nell'intestazione stessa e offre un aspetto pulito ed elegante con una funzione mostra\/nascondi. \u00c8 facile da codificare ed \u00e8 una transizione graduale. Ma la sfida \u00e8 che Android potrebbe non offrire una transizione cos\u00ec fluida con le animazioni CSS.\n<\/p>\n
\n  Un buon esempio di utilizzo di Toggle \u00e8 Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Inoltre, se il men\u00f9 \u00e8 ampio, potrebbe comunque occupare molto spazio. Questo problema pu\u00f2 essere risolto creando menu diversi per dispositivi diversi. Un modo efficace per farlo \u00e8 utilizzare il plug-in Responsive Select Menu.\n<\/p>\n
\n  Un altro metodo \u00e8 attraverso l'uso dell'approccio Select Menu.
\n<\/h5>\n
\n  A differenza degli altri metodi di navigazione, questa tecnica prevede l'uso di Javascript. Ci fa della propriet\u00e0 form. Converte l'elenco del menu in un elemento selezionato. Sebbene possa essere l'elemento con le migliori prestazioni in ogni browser, poich\u00e9 derivano da menu a discesa, i progettisti possono trovarli restrittivi a causa della difficolt\u00e0 di personalizzazione su browser diversi. I maggiori vantaggi di questi menu nei progetti di siti Web reattivi sono che funzionano. Un altro aspetto positivo \u00e8 che possono essere utilizzati per controllare i collegamenti di navigazione quando sono in eccesso; questo potrebbe essere un problema per l'approccio TopNav. Inoltre liberano molto spazio sul layout web, che pu\u00f2 essere utilizzato per il web design. I menu selezionati possono essere adattati ai diversi dispositivi: diversi browser mobili gestiranno i menu selezionati in modi diversi.\n<\/p>\n
\n  Un modo semplice per utilizzare Seleziona menu \u00e8 tramite TinyNav<\/strong>, un plug-in JQuery.\n<\/p>\n
\n  Includi il file JS dopo aver caricato la tua versione di jQuery, quindi scrivi il seguente codice:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Aggiungi alcune righe al tuo CSS. Nascondi la classe tinynav. Impostalo in modo che venga visualizzato in qualsiasi punto di interruzione desideri:\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  Lo svantaggio \u00e8 che potrebbero non essere cos\u00ec puliti ed estetici come altre tecniche di menu di navigazione. Sono i migliori su pagine semplici con layout a pagina singola come quello di ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  La gestione dei contenuti \u00e8 fondamentale per una navigazione efficiente dei siti Web reattivi. Durante la pianificazione del wireframe per il sito Web reattivo, determina quale contenuto \u00e8 richiesto per il desktop e quale tipo di contenuto \u00e8 pi\u00f9 preferito per il layout mobile. Assicurati che vengano inseriti solo i contenuti che soddisfano gli obiettivi specifici. A questo proposito, la navigazione pu\u00f2 seguire un approccio simile. Per semplificare i menu di navigazione reattivi per dispositivi mobili, assicurati che il menu di navigazione mobile mostri solo i collegamenti pi\u00f9 importanti; quelli meno importanti devono essere lasciati fuori. Pertanto, gli utenti mobili possono semplicemente vedere ci\u00f2 che vogliono sui loro siti web.\n<\/p>\n
\n  Dovrai determinare quale contenuto \u00e8 assolutamente fondamentale da inserire nella parte del sito Web che viene osservata al massimo dalle persone, sia su desktop che su dispositivo mobile e farlo.\n<\/p>\n
\n  Ci sono alcuni punti chiave da ricordare mentre si lavora su un sito Web reattivo per garantire una navigazione fluida:\n<\/p>\n