Vediamo come coordinare il layout di alcuni dei browser utilizzati dall'utenza, alla grafica del nostro sito web, migliorando l'esperienza di navigazione e la percezione che hanno i visitatori delle nostre pagine.
Aggiungerò una nota ad ogni paragrafo su quale file modificare, quando sviluppiamo siti web mediante CMS Wordpress.
Impariamo a personalizzare il browser degli utenti sul layout del nostro sito web Condividi il Tweet
Impostare l'icona del sito
Come ben sappiamo possiamo impostare una icona, relativa al nostro sito web, da associare al titolo della pagina quando viene memorizzata tra i segnalibri (preferiti o bookmarks a seconda dei casi) del browser, da computer desktop.
Il tag standard (da inserire tra i tag <head> del nostro sito) è:
< link rel="icon" type="image/gif" href="http://www.esempio.it/icona.gif">
Possiamo naturalmente utilizzare altri formati di immagine, modificando il codice precedente a seconda dei casi:
<link rel="icon" type="image/png" href="http://www.esempio.it/icona.png">
<link rel="icon" type="image/jpeg" href="http://www.esempio.it/icona.jpg">
Consiglio quindi di utilizzare, nel caso di immagini con più colori e a buona risoluzione, di non utilizzare il formato .gif.
I browser moderni useranno questa icona, quando vengono visualizzate diverse pagine web come schede, associandola al titolo della pagina.
Assegnare una icona per i device Apple
La Apple ha realizzato dei tag proprietari per associare alle pagine di un sito web delle icone specifiche in funzione del device che si sta utilizzando. L'utenza quando salverà sul desktop del proprio device mobile la pagina selezionata vedrà associata l'icona, che se studiata bene assomiglierà ad una app o per essere precisi Web App.
A seconda se utilizzeremo l'attributo rel="apple-touch-icon-precomposed" o rel="apple-touch-icon" avremo, rispettivamente, un effetto luce 3d sovrapposto sull'icona o solamente l'icona con la sua grafica originale.
Un buon set di tag e relative dimensioni per le icone è il seguente:
<link rel="apple-touch-icon" sizes="76x76" href="http://www.esempio.it/icona-76x76.gif"/>
<link rel="apple-touch-icon" sizes="120x120" href="http://www.esempio.it/icona-120x120.gif"/>
<link rel="apple-touch-icon" sizes="152x152" href="http://www.esempio.it/icona-152x152.gif"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://www.esempio.it/icona-114x114.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="http://www.esempio.it/icona-144x144.png"/>
Effettuare le modifiche in Wordpress
Generalmente per inserire dei tag particolari prima della chiusura del tag <head> è sufficiente editare il file header.php, presente nel tema grafico in uso.
Consiglio sempre di utilizzare il tema child, per effettuare queste modifiche, in modo tale da non sovrascriverle quando si aggiornerà il tema.
Personalizzare il browser su device mobile
Vediamo alcune tecniche per personalizzare l'aspetto di alcuni browser, utilizzati dall'utenza che naviga mediante device mobile.
Tutti questi tag che elencherò in questo paragrafo vanno inseriti tra i tag <head>, come tutti i meta tag classici.
Cambiare il colore della barra degli URL su Google Chrome, Firefox e Opera
E' stato sviluppato un metatag particolare che permette di personalizzare il colore della barra degli URL, quando visualizzata da browser Chrome, Firefox o Opera, omologandolo al layout utilizzato sul proprio sito web.
Il meta tag è <meta name="theme-color" content="#db5945"> mentre l'attributo deve essere il colore con cui vogliamo far visualizzare la barra.
Su posizionamento-seo.com, ad esempio, l'effetto è il seguente:
Visualizzando il sito da finestra nascosta la barra rimarrà di colore grigio e per vedere il cambiamento sarà necessario utilizzare una finestra di visualizzazione classica.
Cambiare il colore della barra degli URL su Windows Phone
Questo tag non l'ho testato personalmente, per cui non sono sicuro funzioni.
Possiamo cambiare il colore della barra dell'URL su Windows Phone, per il browser Internet Explorer, mediante il tag:
<meta name="msapplication-navbutton-color" content="#db5945">
Personalizzare l'aspetto di Safari su device mobile
Su Safari era possibile modificare la barra dell'interfaccia, nascondendola o rendendola traslucida. Parlo al passato in quanto sembrerebbe che con l'aggiornamento a IOS 9 questa funzionalità si sia persa.
Per nasconderla, in modo tale da aumentare la percezione che l'utenza ha del sito come se fosse una Web App, il tag è il seguente:
<meta name="apple-mobile-web-app-capable" content="yes">
Mentre per renderla traslucida il tag è il seguente:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Assegnare una trasparenza alla barra degli strumenti di Android
Questo metatag l'ho solamente provato su browser Chrome per Android.
Su alcuni device, utilizzando i tag dedicati a iOS (che testati su iPhone 4 e 6 non funzionano, come detto precedentemente) è possibile selezionare il colore della barra degli strumenti di Android che rimane a sovrastare la barra degli URL di Chrome.
Se vogliamo far si che la barra diventi translucida è possibile utilizzare il seguente meta tag:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Effettuare queste modifiche su sito Wordpress
Come per il paragrafo precedente è sufficiente effettuare queste modifiche editando il file header.php, presente nel tema in uso sul sito Wordpress da personalizzare.
Modificare il colore della barra di scroll di Chrome su Desktop
Per browser Chrome è possibile modificare il colore della barra di scroll, quando il sito viene visualizzato da Desktop.
Le tecniche che vi spiegherò a seguire si possono implementare semplicemente aggiungendo degli stili CSS, mentre:
- per Firefox è necessario utilizzare delle librerie Javascript dedicate, che non ho testato (non mi è capitata ancora la necessità di dover aggiungere codice JS, appesantendo la pagina per tale scopo);
- per Internet Explorer vi erano degli stili CSS, che da IE 9 hanno smesso di funzionare e per questo non vi riporto;
- per Edge mi sembra che non sia possibile ancora implementare questa funzionalità;
Modificare gli stili CSS per Chrome
Personalizzare il colore della barra di scorrimento su Chrome, in maniera basilare, non è affatto difficile.
Aggiungendo degli stili CSS possiamo selezionare il colore e le dimensioni del cursore e della barra di scorrimento laterale, che compare quando il contenuto della nostra pagina web è maggiore rispetto all'area visibile sul monitor.
Le regole CSS basilari sono le seguenti:
::-webkit-scrollbar { /*dimensioni scrollbar*/ }
::-webkit-scrollbar-track { /*tutta la traccia su dove corre il cursore di scorrimento*/ }
::-webkit-scrollbar-thumb { /*cursore di riferimento*/ }
::-webkit-scrollbar-track-piece{ /*la traccia di scorrimento dove non vi è il cursore*/ }
Un esempio pratico è questo sito web, dove le regole CSS che ho impostato sono le seguenti:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color:#39938d;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Per chi fosse interessato a delle modifiche più nel dettaglio consiglio il link che ho inserito nei riferimenti a fondo articolo.
Effettuare queste modifiche su sito Wordpress
Questa volta su Wordpress è necessario modificare gli stili CSS. Per farlo è necessario editare il file style.css, presente nel tema grafico in uso.
Riferimenti
- La guida per sviluppatori di Google
- La guida per sviluppatori di Apple
- Le icone apple
- Riferimenti sulla modifica della barra di scorrimento per Chrome
- Librerie Javascript per la scrollbar di Firefox (non testate)
Tag:
Condividi:
pino
Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL.
Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale.
Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.
Lascia un commento
