I browser moderni consentono di personalizzare facilmente alcuni componenti, come le icone e il colore della barra degli indirizzi, e persino aggiungere elementi come riquadri personalizzati. Queste semplici modifiche possono aumentare il coinvolgimento e invogliare gli utenti a tornare nuovamente sul tuo sito.
I browser moderni consentono di personalizzare facilmente alcuni componenti, come le icone e il colore della barra degli indirizzi, e persino aggiungere elementi come riquadri personalizzati. Queste semplici modifiche possono aumentare il coinvolgimento e invogliare gli utenti a tornare nuovamente sul tuo sito.
Fornisci icone e riquadri efficaci
Quando un utente visita la tua pagina web, il browser prova a recuperare un'icona dal codice HTML. L'icona potrebbe essere visualizzata in diverse posizioni, tra cui la scheda del browser, il cambio di app recente, la pagina della scheda Nuova (o visitata di recente) e altre ancora.
Se fornisci un'immagine di alta qualità, il tuo sito sarà più riconoscibile e gli utenti lo troveranno più facilmente.
Per supportare completamente tutti i browser, devi aggiungere alcuni tag all'elemento <head> di ogni pagina.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome e Opera
Chrome e Opera utilizzano icon.png, che viene ridimensionato in base alle dimensioni necessarie dal dispositivo. Per impedire la scalabilità automatica, puoi anche fornire dimensioni aggiuntive specificando l'attributo sizes.
Safari
Safari utilizza anche il tag <link> con l'attributo rel: apple-touch-icon per indicare l'icona della schermata Home.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Un file PNG non trasparente di 180 o 192 px di formato quadrato è ideale per l'icona-touch-screen.
Non è consigliabile includere più versioni tramite l'attributo sizes.
In precedenza, Safari per iOS prendeva in considerazione la parola chiave -precomposed per evitare di aggiungere effetti visivi, ma non è più necessario da iOS 7.
Internet Explorer e Windows Phone
La nuova schermata Home di Windows 8 supporta quattro diversi layout per i siti bloccati e richiede quattro icone. Puoi escludere i meta tag pertinenti se non vuoi supportare una dimensione specifica.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Riquadri in Internet Explorer
I "siti bloccati" e i "riquadri attivi" a rotazione di Microsoft vanno ben oltre altre implementazioni e vanno oltre l'ambito di questa guida. Per ulteriori informazioni, consulta MSDN su come creare riquadri attivi.
Colorare gli elementi del browser
Usando diversi elementi meta puoi personalizzare il browser e anche
alcuni elementi della piattaforma. Tieni presente che alcuni potrebbero funzionare solo su determinate
piattaforme o browser, ma possono migliorare notevolmente l'esperienza.
Chrome, Firefox OS, Safari, Internet Explorer e Opera Coast consentono di definire i colori per gli elementi del browser e persino della piattaforma utilizzando i meta tag.
Meta Theme Color per Chrome e Opera
Per specificare il colore del tema per Chrome su Android, utilizza il colore del meta tema.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Stili specifici di Safari
Safari consente di applicare uno stile alla barra di stato e di specificare un'immagine di avvio.
Specifica un'immagine di avvio
Per impostazione predefinita, Safari mostra una schermata vuota durante il tempo di caricamento e dopo diversi caricamenti di uno screenshot dello stato precedente dell'app. Puoi evitare che ciò accada dicendo a Safari di mostrare un'immagine di avvio esplicita, aggiungendo un tag link, con rel=apple-touch-startup-image. Ad esempio:
<link rel="apple-touch-startup-image" href="icon.png">
L'immagine deve avere le dimensioni specifiche dello schermo del dispositivo di destinazione, altrimenti non verrà utilizzata. Per ulteriori dettagli, consulta le Linee guida per i contenuti web di Safari.
Anche se la documentazione di Apple è scarsa su questo argomento, la community di sviluppatori ha trovato un modo per scegliere come target tutti i dispositivi utilizzando query supporti avanzate per selezionare il dispositivo appropriato e quindi specificare l'immagine corretta. Ecco una soluzione, gentilmente concessa dall'essenza di tfausak
Modificare l'aspetto della barra di stato
Puoi modificare l'aspetto della barra di stato predefinita in black o black-translucent. Con black-translucent, la barra di stato rimane sopra i
contenuti a schermo intero anziché spingerla verso il basso. In questo modo il layout
è più alto, ma ostruisce la parte superiore. Ecco il codice richiesto:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black