Share
Con più utenti Web mobili che mai, è importante mantenere forte il tuo marchio. Facciamo un passo in più rispetto alla favicon standard e aiutiamo il tuo sito Web a distinguersi creando icone da utilizzare su schermi domestici iOS e Android.
* Icona waffle impressionante di Eddie Lobanovskiy
Prima ancora di pensare alle dimensioni delle nostre icone, ci sono alcune cose importanti che devi tenere a mente durante la progettazione (in particolare per quanto riguarda i dispositivi Apple).
Vale anche la pena tenere a mente durante la progettazione dell'icona che è possibile ignorare questi comportamenti iOS predefiniti. Vedremo come sarà fatto a breve.
Ogni dispositivo Apple ha una diversa dimensione e risoluzione dello schermo. Ciò significa che per ottenere i migliori risultati è necessaria un'icona separata di dimensioni diverse per ciascun dispositivo. Non preoccuparti di Android: qualsiasi icona di dimensioni viene ridimensionata automaticamente.
Ecco tutto ciò che devi sapere per ogni dispositivo Apple:
iOS determina quale icona usare a seconda delle sue dimensioni. L'utilizzo di icone più grandi per schermi a risoluzione più elevata ci consente di migliorare la qualità delle nostre immagini. Dai un'occhiata alla particolare attenzione ai dettagli su questi esempi:
Come accennato in precedenza, iOS aggiunge automaticamente effetti come gli angoli arrotondati, le ombre esterne e il classico "riflesso riflessivo" di Apple. Se stai progettando icone per trarne vantaggio, crea semplicemente l'icona quadrata e lascia gli effetti su iOS. Se preferisci creare i tuoi angoli arrotondati, sii consapevole che potrebbe finire per apparire disordinato e incoerente.
Per sovrascrivere queste impostazioni predefinite iOS, utilizzare -precomposto all'interno del rel attributo quando si collega alla tua icona. Ecco come potrebbe apparire:
Noterai sopra che abbiamo dimostrato un'icona con il -precomposto parola chiave alla fine del suo nome file. Questo è puramente un promemoria per noi stessi.
Non è necessario assegnare un nome alle immagini in questo modo, ma è utile per ricordare le circostanze per le quali è stata desunta l'icona. Se hai intenzione di andare fuori e creare icone per il maggior numero di dispositivi possibile, allora è consigliabile nominarli tutti di conseguenza. Per esempio:
Aggiungere le icone al tuo sito è molto semplice: basta una riga di codice per ogni dimensione dell'icona. Supponiamo che tu abbia creato icone con le dimensioni 57x57px, 72x72px e 114x114px. È importante definire correttamente la dimensione dell'icona in modo che possano essere utilizzate per il dispositivo corretto, a prescindere dal fatto che siano tutte sotto il marchio di 'apple-touch-icon'.
Non dimenticare, se vuoi scavalcare le impostazioni di visualizzazione iOS predefinite, hai bisogno di -precomposto parola chiave dopo "apple-touch-icon" nella rel campo attributo.
E questo è tutto ciò che c'è da fare! Ora hai una nuova serie di icone pronte a rafforzare il tuo marchio nel crescente mercato del mobile web. Se qualcuno aggiunge il tuo sito alla schermata iniziale di iOS, invece di uno screenshot vedrà la tua icona. Con molti utenti iOS che salvano siti Web per la lettura successiva, è importante avere una buona icona in modo che il tuo sito si distingua dal resto.
Se stai pensando a come questo si applica agli utenti Android, non preoccuparti.
Android supporta anche l 'apple-touch-icon-precomposto'attributo link rel, quindi non è necessario aggiungere alcun codice fallback. Il sistema operativo ridimensiona l'icona più appropriata alla dimensione corretta, quindi non è necessario creare icone di dimensioni specifiche per i dispositivi Android. Anche se non utilizzi nessuna delle opzioni di apple-touch-icon, il sistema operativo Android utilizzerà l'immagine del segnalibro standard (favicon) dal tuo sito per l'icona della schermata iniziale.
Non tutti gli utenti di dispositivi mobili sono consapevoli di poter aggiungere segnalibri di pagine Web alla loro schermata iniziale, quindi potresti prendere in considerazione l'invito a farlo. Ci sono alcuni frammenti di JavaScript per aiutarti a fare questo, come lo script di Aggiungi allo schermo Home di Matteo Spinelli.
Tuttavia, come sempre, vale la pena considerare l'impatto sul rendimento derivante dall'inserimento di un altro file .js.
Spero che questo suggerimento ti abbia ispirato a creare le tue icone per iOS. Potrebbero rivelarsi molto utili per i tuoi utenti e le icone personalizzate serviranno il tuo marchio molto meglio di uno screenshot illeggibile.
Accentsconagua