25 marzo 2021

18 commenti Condividi il post

Menu personalizzato sui dispositivi mobili

menu mobile
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

primadopo


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ì:

menu mobile

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:

menu mobile Simona



È 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:

menu mobile Simona


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ì:

menu mobile Simona

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ì:

menu mobile Simona



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ì:

menu mobile Iole


a così:

menu mobile Iole


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

menu mobile Iole



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ì:

menu mobile Edvige


a così:

menu mobile Edvige


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

menu mobile Edvige



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ì:

menu mobile Tania


Ora è così:

menu mobile Tania


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

menu mobile Tania

Newsletter by follow.it


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

18 commenti

  1. Ed io ne sono felicissima! Tu sei un vulcano di idee oltre che una grande professionista e una persona meravigliosa! Stupenda anche questa versione ricca 🔝 grazie socia e un bacione 💋

    RispondiElimina
    Risposte
    1. @Simona Nania: ma quanti complimenti ^_^ grazie!
      Ti ho aiutata volentieri a personalizzare ulteriormente il tuo blog e grazie ai tuoi suggerimenti ho personalizzato anche il mio.

      Elimina
  2. Socia non so come sia venuto fuori 😳 ... la tastiera

    RispondiElimina
    Risposte
    1. @Simona Nania: non mi dispiacerebbe essere tua socia. Con tutte le meraviglie che prepari... tu cucini ed io assaggio :D

      Elimina
    2. 😅 sarebbe bello
      Anche x me esser tua socia con tutti i lavori grafici unici che fai! Potremmo pensarci CARA 😘

      Elimina
  3. Infatti non solo nn riescono a capire come fare per entrare in home page ma a cliccare su ‘segui’ e poter leggere ciò che scrivo. Per cui questa modifica è indispensabile! Brava 👏

    RispondiElimina
    Risposte
    1. @Tania Croce: ora ti contatto su WhatsApp... se mi dici come deve essere il tuo menu personalizzato, mi metto subito all'opera!

      Elimina
  4. Iole sai che io sono sempre curiosa e questo mi piace moltissimo chissà se lo puoi applicare anche per me???
    Inoltre ho un piccolo problema che tu risolverai facilmente ma ti mando screenshot su whatsapp. Grazie cara bravissima come sempre. Buona fine settimana.

    RispondiElimina
    Risposte
    1. @edvige: ti ho aiutata volentieri sia a risolvere il problemino relativo alla navbar che a personalizzare il menu. Sono contenta che ti sia subito piaciuto quello che ho fatto per te. Ora ho aggiornato il mio post con le immagini del tuo nuovo menu ^_^
      Per qualsiasi altra richiesta, io sono sempre qui a disposizione!

      Elimina
    2. Grazieeeeeee Jole è stata una sorpresa bellissimo e grazie per ls navbar, sai chi è la colpevole :) prossima volta come detto ti mando pelliccia piccolo colletto basta ahahahaha....
      So che sei sempre disponibile ma per me sei più un amica che un informatica che passa in seconda, ci conosciamo virtualmente da tantissimo tempo le principesse non c'erano ancora ed eri da poco sposata. Un abbraccio forte e grazie ancora.

      Elimina
  5. Ciao Iole ti seguo da tanto tempo e dopo un po' di anni mi sono decisa ad aprire il mio primo blog. Vorrei renderlo più personalizzabile e penso che tu mi daresti una grande mano, consigli? Vorrei uno stile meno statico.

    RispondiElimina
    Risposte
    1. @Alessia Montanelli: contattami tramite email così ne parliamo un po'...

      Elimina
  6. Ciao Iole! Che belle le personalizzazioni del menu! In effetti ho visto che anche sul mio non è molto visibile e intuitivo, nonostante abbia cambiato template.
    Un abbraccio!
    Roby

    RispondiElimina
    Risposte
    1. @Roberta La TEI-LaTanadell'EcoIdea: nel tuo blog hai uno dei nuovi temi di Blogger (io preferisco di gran lunga quelli classici).
      I nuovi temi sono progettati più per la versione per dispositivi mobili che per computer. A mio avviso sono poco intuitivi sia su pc che su smartphone.
      Se desideri un menu personalizzato... ti aiuto volentieri a realizzarlo come desideri!

      Elimina
  7. Buongiorno, io ho tralasciato di strutturare un menu per mobile, in quanto ho deciso per una configurazione assolutamente spartana, puntando ogni risorsa sulla questione della velocità di caricamento. Nella versione desktop ho raggiunto in questo senso risultati prossimi al 100%, mentre per le versione mobile avrei bisogno di conquistare ancora qualche punto di velocità. Ad ogni modo la mia esigenza attuale sarebbe la seguente. Nella versione mobile di blogger abbiamo a piè di pagina il link con la scritta "passa alla versione web". Beh, io vorrei fare in modo di trasportare in alto nell'header questo link, anche creando un doppione di quello che si trova in basso. Potrei avere gentilmente istruzioni in merito? Grazie!

    RispondiElimina
  8. Io ho bisogno di un menu così https://iromancedimaryedelsuopapino.blogspot.com/?m=1
    Homepage
    Un nuovo amore
    Di nuovo io e te
    Tu sei la ragione della mia vita
    Amo solo te e nessun altro
    Un amore segreto
    Sentieri
    Stellina
    Segreto
    Una vita
    Manuela.
    Posso aspettare e avevo bisogno di una firma animata personalizzata Maria papà ti vuole bene.
    Grazie mille per aver letto il mio commento.

    RispondiElimina

flag counter
This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
 Design by Iole | Privacy Policy | Cookie Policy