Menu personalizzato sui dispositivi mobili

La scorsa settimana Simona, del blog Batuffolando Ricette, mi ha contattata su WhatsApp e mi ha scritto:

Ciao Iole,
tantissimi lettori del mio blog non notano il menu che è presente in alto nel blog, né da computer né su smartphone.
Potresti aiutarmi a rendere il menu più visibile e più intuitivo?

In effetti il menu offerto da Blogger, visualizzato sui dispositivi mobili, è poco visibile, poco intuitivo e soprattutto non funziona tanto bene. Siete curiosi di vedere come ho trasformato il suo menu?

Com'era e com'è...

Visitando ora il blog di Simona su smartphone, il suo menu appare:

• più visibile perché ho aggiunto uno script che permette al menu di rimanere sempre fisso in alto quando si scorre la pagina verso il basso
• più intuitivo perché per ogni voce del menu è visualizzata un'icona con il titolo della pagina corrispondente

Ed ora vediamo insieme perché il menu offerto da Blogger è poco visibile, poco intuitivo e non funziona tanto bene.

È poco visibile

Sui dispositivi mobili, il menu di ogni blog è visualizzato sotto il titolo o sotto l'immagine di header ed appare così:

Modificando opportunamente il codice css del template, è possibile personalizzarlo con i colori del proprio blog.

Da quando Simona si era affidata a me per un nuovo template, il menu del suo blog era colorato ma comunque poco visibile:

È poco intuitivo

Oltre che poco visibile, il menu offerto da Blogger è anche poco intuitivo. Non tutti i visitatori di un blog capiscono che cliccando sulla barra con la scritta "Home page" appare un elenco. Cliccando poi su una delle voci dell'elenco si apre una pagina del blog o un link esterno che rimanda ad esempio ad un altro blog, una pagina Facebook, ecc.

Nel blog di Simona cliccando sulla barra beige apparivano queste voci:

Le è capitato però diverse volte di dire ai suoi lettori "cliccate sul menu e selezionate la voce Ricette per consultare tutte le ricette che ho pubblicato nel mio blog" e di non essere capita.

Non funziona tanto bene

Non so se ci avete fatto caso ma se siete in uno qualsiasi dei vostri post o state leggendo un post di un altro blog, nella barra del menu appare la scritta "Home page". E fin qui sembra tutto normale!

Se però provate a cliccare "Home page" non succede assolutamente nulla perché nel menu quella voce è già selezionata e quindi non viene aperto il link ad essa associato.

Nei template che ho realizzato di recente, per Daniela e per Liana, ho corretto questo errore: nei loro blog appare la scritta "MENU" con la tipica icona con tre barrette e selezionando la voce "Home page" si torna correttamente alla home del blog.

Per Simona ho fatto la stessa cosa e quindi il menu si vedeva così:

Lei però mi ha chiesto di renderlo ancora più intuitivo, magari aggiungendo delle icone oppure i titoli delle sue pagine.
Ed io ho aggiunto entrambe le cose e l'ho trasformato così:

Anche il mio blog ha un nuovo menu personalizzato!

Mi occupo sempre dei template degli altri blog e non trovo mai il tempo per dedicarmi al mio. Era da tempo che volevo sistemare questo difetto nel mio blog... e finalmento l'ho fatto!

Ho trasformato il mio menu da così:

a così:

Cliccando su "MENU" appaiono tutte le icone relative alle mie pagine:

Menu personalizzato

Se desiderate anche voi un menu personalizzato per il vostro blog... contattatemi lasciando un commento in questo post oppure tramite email.

Menu personalizzato per Edvige

Edvige mi ha chiesto di personalizzare il menu del suo blog e mi ha dato carta bianca. Ed io ho trasformato il suo menu da così:

a così:

Cliccando su "MENU" appaiono tutte le icone e i titoli delle sue pagine:

Menu personalizzato per Tania

Tania mi ha chiesto di personalizzare il menu del suo blog con delle icone e i titoli delle sue pagine. Ed ecco come ho trasformato il suo menu che era così:

Ora è così:

Cliccando su "MENU" appaiono tutte le icone e i titoli delle sue pagine:

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.