Html5-boilerplate: Les 6 icônes Apple-Touch différentes sont-elles nécessaires alors qu'une seule fonctionnera ?

Créé le 30 mai 2013  ·  28Commentaires  ·  Source: h5bp/html5-boilerplate

Un seul apple-touch-icon png, défini sur 144x144px, sera également utilisé sur les appareils plus anciens (automatiquement réduit), donc je ne vois pas la nécessité de créer 6 versions différentes.

Commentaire le plus utile

"L'inconvénient est que ces appareils chargeront une grande image de haute qualité, alors qu'un fichier beaucoup plus petit aurait tout aussi bien fonctionné."
Donc, seulement si quelqu'un clique sur "Ajouter à l'écran d'accueil", alors un png légèrement plus lourd devra charger (plus gros que de quelques kilo-octets) ... c'est parfaitement acceptable en ce qui me concerne, et bien mieux que créer 6 icônes de tailles différentes... et surtout mieux si vous incluez le code HTML sur la page pour charger les six.

Tous les 28 commentaires

"L'inconvénient est que ces appareils chargeront une grande image de haute qualité, alors qu'un fichier beaucoup plus petit aurait tout aussi bien fonctionné."
Donc, seulement si quelqu'un clique sur "Ajouter à l'écran d'accueil", alors un png légèrement plus lourd devra charger (plus gros que de quelques kilo-octets) ... c'est parfaitement acceptable en ce qui me concerne, et bien mieux que créer 6 icônes de tailles différentes... et surtout mieux si vous incluez le code HTML sur la page pour charger les six.

Neil,
Si vous avez besoin d'un moyen simple de créer ces icônes, puis-je suggérer le dépôt H5BP Multi-Layer FavIcons ? Je sais que c'est un plug sans vergogne, mais je l'ai utilisé à nouveau aujourd'hui et j'ai terminé avec les 7 images, y compris le favicon multicouche en moins de 10 minutes.

J'espère que ça aide!

OK merci. Mais je ne suis toujours pas d'accord pour dire que la création de plusieurs graphiques spécifiques pour cibler chaque appareil individuel est la bonne approche (pas une approche très « réactive »). La création d'une image est toujours plus rapide/plus facile et plus propre, et je ne vois pas de problème à la livrer à des appareils plus anciens lorsqu'elle n'ajoute aucun poids au chargement de la page (elle n'est chargée qu'après la "demande" d'ajout à la maison screen) et nous ne parlons que de quelques k dans la différence entre ces images.

S'il n'est téléchargé que lorsqu'il est ajouté à l'écran d'accueil, je peux voir votre point de vue. Personnellement, je choisis aussi la route à icône unique.

+1 pour une approche à icône unique (et un favicon.ico) sans liens html.

@mathiasbynens merci pour l'explication détaillée des icônes tactiles. J'ai dû rire quand j'ai lu le résumé cependant. Pas à cause de vos suggestions, mais à cause de la raison pour laquelle je déteste les BS propriétaires. Permettez-moi de résumer votre résumé.

  • Afin de prendre pleinement en charge Android, vous devez utiliser les balises html propriétaires d'Apple.
  • Si vous ne vous souciez que d'iOS, vous n'avez pas besoin d'utiliser les balises html propriétaires d'Apple.
  • L'approche « paresseuse » consiste à faire exactement ce que fait apple.com.

Pour récapituler, il y a deux raisons principales pour lesquelles avoir de nombreuses icônes tactiles différentes est la meilleure solution :

  • Performances / limitation de l'utilisation du plan de données : évitez de charger des images inutilement volumineuses lors de l'ajout à l'écran d'accueil.
  • Direction artistique : d'après mon expérience, les concepteurs n'aiment généralement pas se fier au redimensionnement automatique et fournissent eux-mêmes les icônes dans les dimensions appropriées.

Cela dit, je suis paresseux et j'utilise également la solution à icône unique. Mais cela ne signifie pas que cela devrait être la solution de prédilection à mon humble avis.

@ryanswedal :D

Si les liens HTML sont inclus sur la page, est-ce que quelqu'un sait s'ils sont appelés lors du chargement de la page ? Si c'est le cas, c'est un argument encore plus important pour l'approche à une icône... et pour ne pas inclure le lien HTML.

À l'époque où j'ai fait des recherches à ce sujet, mes tests IIRC ont confirmé que les icônes tactiles n'étaient pas demandées lors du chargement de la page, même pas avec le <link> .

Bon à savoir. Merci!

Oui, +1 pour l'approche à icône unique. Les icônes tactiles ne sont pas auto-documentées, donc avoir 6 dans la racine sans la possibilité de documenter un outil pour les synchroniser est compliqué et lourd en maintenance.

Je suis d'accord avec le problème de maintenabilité si vous avez toutes les icônes à la racine. Je ne vois pas vraiment de bonne solution à part ajouter les balises <link> (les liens symboliques ne résolvent pas vraiment ce problème).

Mais je ne pense pas que nous devrions gonfler le balisage de index.html avec ces balises pour le moment. Mobile Boilerplate fait cela.
Quoi qu'il en soit, je suis presque sûr qu'il est facile de savoir comment déplacer les icônes vers un autre dossier. Nous avons même une courte section sur ce sujet dans nos docs .

À partir d'iOS 7, la taille d'icône tactile recommandée pour les iPhones à écran Retina est passée de 114 × 114 pixels à 120 × 120 pixels. Mon message a été mis à jour pour refléter cela.

Pouvons-nous trouver une solution ici? Voulons-nous le laisser tel quel ou passer à l'approche à une icône ?

Eh bien, mon vote serait certainement pour l'approche d'une icône

Le mercredi 24 juillet 2013, Hans Christian Reinl a écrit :

Pouvons-nous trouver une solution ici? Voulons-nous le laisser tel quel ou passer au
approche d'une icône ?

-
Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps://github.com/h5bp/html5-boilerplate/issues/1367#issuecomment -21507073
.

Neil Creagh

Envoyé depuis un portable : 087 2174891

http://www.fuel.ie

Moins, plus c'est simple, mieux c'est. Si un seul suffit et fonctionne, pourquoi ne l'accepterions-nous pas ?

+1 pour un !

J'aimerais également adopter une méthode simple et réactive, mais pour les icônes, il y avait une exception: les icônes à différentes échelles peuvent nécessiter une refonte pour être claires à cette taille.

Si vous avez une icône complexe, disons 120x120 et que vous souhaitez l'utiliser en 32x32, elle peut devenir méconnaissable. Redimensionner une petite icône en une plus grande n'est pas un problème avec le format vectoriel, mais le concepteur peut vouloir ajouter plus de détails.

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077#module-67936509

Faites défiler plusieurs pages à partir du lien ci-dessus pour voir les icônes en 32x32 et 16x16 ... ce n'est peut-être pas si proche de ce sujet, mais je pense que c'est ce qu'il faut considérer lorsque l'on parle d'icônes de différentes tailles.

OMI dans la plupart des situations, une icône suffit. Fournir une seule grande icône H5BP avec une note dans la documentation sur la création d'icônes plus petites pour optimiser la clarté et la taille du fichier serait une bonne solution.

Cela dit, H5BP est semi-opiné, donc tout ce qui est considéré comme la méthode "correcte", quelle que soit sa simplicité, devrait être dans le repo.

J'ai fait une demande de tirage qui supprime cinq des six icônes Apple Touch dans #1425.
Commentaires très appréciés.

Veuillez garder la discussion principale dans ce problème.

+1

:+1:

+1

Est-ce que ça va si j'admets que je n'ai jamais su pourquoi il y en avait six en premier lieu et je suis heureux qu'il y en ait un donc je ne me sentirai pas paresseux de ne pas savoir le "pourquoi?"

La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer.
- Antoine de Saint-Exupéry

:+1:

Je n'ai pas eu le temps de faire plus court.
- Blaise Pascal
:pouces vers le haut:

J'ai couru pendant un certain temps avec juste une seule image. Un inconvénient est que de nombreux navigateurs mobiles demanderont les autres fichiers. Il n'est pas nécessaire de les référencer avec une balise de lien dans le code HTML, mais je suis revenu à l'inclusion des fichiers du répertoire racine pour toutes les tailles en normal et précomposé juste pour éviter que mon journal soit rempli d'erreurs 404 pour ces demandes.

Cette page vous a été utile?
0 / 5 - 0 notes