Share
Avec plus d'utilisateurs Web mobiles que jamais, il est important que votre marque reste forte. Allons un peu plus loin que le favicon standard et aidons votre site Web à se démarquer en créant des icônes à utiliser sur les écrans d'accueil iOS et Android..
* Icône génial de la gaufre par Eddie Lobanovskiy
Avant que nous ne réfléchissions aux dimensions de nos icônes, il convient de garder à l’esprit quelques points importants à prendre en compte lors de leur conception (en particulier en ce qui concerne les appareils Apple)..
Lors de la conception de votre icône, il est également important de garder à l'esprit qu'il est possible de remplacer ces comportements iOS par défaut. Nous verrons comment cela se fera sous peu.
Chaque appareil Apple a une taille d'écran et une résolution différentes. Cela signifie que pour de meilleurs résultats, vous avez besoin d'une icône distincte, de taille différente pour chaque périphérique. Ne vous inquiétez pas pour Android - n'importe quelle icône de taille est automatiquement réduite.
Voici tout ce que vous devez savoir pour chaque appareil Apple:
iOS détermine quelle icône utiliser en fonction de sa taille. L'utilisation d'icônes plus grandes pour les écrans de résolution supérieure nous permet d'améliorer la qualité de nos images. Jetez un coup d'œil à l'attention particulière portée aux détails de ces exemples:
Comme mentionné précédemment, iOS ajoute automatiquement des effets tels que des coins arrondis, des ombres portées et le "reflet brillant" classique d'Apple. Si vous concevez des icônes pour en tirer parti, créez simplement votre icône et laissez les effets à iOS. Si vous préférez créer vos propres coins arrondis, sachez que cela peut paraître désordonné et incohérent..
Afin de remplacer ces valeurs par défaut iOS, utilisez -précomposé dans le rel attribuer lorsque vous créez un lien vers votre icône. Voici comment cela pourrait apparaître:
Vous remarquerez ci-dessus que nous avons démontré une icône avec le -précomposé mot-clé à la fin de son nom de fichier. Ceci est purement un rappel pour nous-mêmes.
Nommer vos images de cette manière n’est pas nécessaire, mais il est utile de rappeler les circonstances pour lesquelles vous avez dessiné l’icône. Si vous prévoyez de tout mettre en œuvre pour créer des icônes correspondant à autant de tailles de périphériques que possible, il est sage de les nommer en conséquence. Par exemple:
L'ajout d'icônes à votre site est très simple: il suffit d'une ligne de code pour chaque taille d'icône. Supposons que vous avez créé des icônes de tailles 57x57px, 72x72px et 114x114px. Il est important de définir correctement la taille de l'icône afin qu'elle puisse être utilisée pour le périphérique approprié, indépendamment du fait qu'elles appartiennent toutes à la fonction de 'apple-touch-icon'..
N'oubliez pas que si vous souhaitez remplacer les paramètres d'affichage iOS par défaut, vous avez besoin de la -précomposé mot-clé après "apple-touch-icon" dans le rel champ d'attribut.
Et c'est tout ce qu'il y a à faire! Maintenant, vous avez un nouvel ensemble d’icônes précises prêtes à renforcer votre marque sur le marché en pleine croissance du Web mobile. Si quelqu'un ajoute votre site à son écran d'accueil iOS, il verra votre icône au lieu d'une capture d'écran. De nombreux utilisateurs iOS sauvegardant des sites Web pour les lire plus tard, il est important d’avoir une bonne icône pour que votre site se distingue des autres.
Si vous pensez que cela s'applique aux utilisateurs d'Android, ne vous inquiétez pas..
Android prend également en charge le 'apple-touch-icon-precomposed'link rel attribut, il n'y a donc pas besoin d'ajouter de code de secours. Le système d'exploitation redimensionnera l'icône la plus appropriée à la taille appropriée. Vous n'avez donc pas besoin de créer d'icônes de taille spécifique pour les appareils Android. Même si vous n'utilisez aucune des options apple-touch-icon, le système d'exploitation Android utilisera l'image de signet (favicon) standard de votre site pour l'icône de votre écran d'accueil..
Tous les utilisateurs d'appareils mobiles ne savent pas qu'ils peuvent ajouter des signets de pages Web à leur écran d'accueil. Vous pouvez donc leur demander de le faire. Il existe quelques extraits de code JavaScript pour vous aider, tels que le script Add to Home Screen de Matteo Spinelli..
Comme toujours, il est utile de prendre en compte l'impact sur les performances de l'extraction d'un autre fichier .js..
J'espère que ce conseil rapide vous a incité à essayer de créer vos propres icônes pour iOS. Elles peuvent s’avérer très utiles pour vos utilisateurs et les icônes personnalisées serviront mieux votre marque que les captures d'écran illisibles..
Accentsconagua