I browser moderni semplificano la personalizzazione di alcuni componenti, come le icone e il colore della barra degli indirizzi, e perfino l'aggiunta di riquadri personalizzati. Questi semplici ritocchi possono aumentare il coinvolgimento e invogliare gli utenti a tornare sul tuo sito.
I browser moderni semplificano la personalizzazione di alcuni componenti, come le icone e il colore della barra degli indirizzi, e perfino l'aggiunta di riquadri personalizzati. Questi semplici ritocchi possono aumentare il coinvolgimento e invogliare gli utenti a tornare sul tuo sito.
Fornisci icone e riquadri di alta qualità
Quando un utente visita la tua pagina web, il browser tenta di recuperare un'icona dal codice HTML. L'icona potrebbe essere visualizzata in molti punti, tra cui la scheda del browser, il passaggio a un'app recente, la pagina della scheda Nuova (o visitata di recente) e altro ancora.
Fornire un'immagine di alta qualità renderà il tuo sito più riconoscibile e aiuterà gli utenti a trovarlo 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 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'immagine PNG non trasparente quadrata di 180 o 192 px è ideale per l'elemento apple-touch-icon.
Non è consigliabile includere più versioni tramite l'attributo sizes.
In precedenza, Safari per iOS teneva conto della parola chiave -precomposed per evitare di aggiungere effetti visivi, ma non è stato necessario da iOS 7.
Internet Explorer e Windows Phone
La nuova esperienza della schermata Home di Windows 8 supporta quattro diversi layout per i siti bloccati e richiede quattro icone. Puoi omettere i metatag 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 dinamici" in rotazione di Microsoft vanno ben oltre altre implementazioni e non rientrano nell'ambito di questa guida. Puoi scoprire di più su come creare riquadri in tempo reale su MSDN.
Colorare gli elementi del browser
Utilizzando diversi elementi meta, puoi personalizzare il browser e persino gli 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 ti consentono di definire i colori per gli elementi del browser e persino della piattaforma utilizzando i meta tag.
Colore tema Meta per Chrome e Opera
Per specificare il colore del tema per Chrome su Android, utilizza il colore meta del tema.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Stili specifici di Safari
Safari ti 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
più caricamenti di uno screenshot dello stato precedente dell'app. Puoi evitare che questo accada
indicando 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.
Sebbene la documentazione di Apple su questo argomento sia scarsa, la community di sviluppatori ha trovato un modo per scegliere come target tutti i dispositivi utilizzando query sui media avanzate per selezionare il dispositivo appropriato e poi specificare l'immagine corretta. Ecco una soluzione funzionante, per gentile concessione del gist di tfausak
Modificare l'aspetto della barra di stato
Puoi modificare l'aspetto della barra di stato predefinita su black o
black-translucent. Con black-translucent, la barra di stato viene visualizzata sopra i contenuti a schermo intero anziché spingerli verso il basso. In questo modo il layout assume più altezza, ma ostruisce la parte superiore. Ecco il codice richiesto:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black