Html5-boilerplate: Sind die 6 verschiedenen Apple-Touch-Symbole überhaupt erforderlich, wenn nur eines funktioniert?

Erstellt am 30. Mai 2013  ·  28Kommentare  ·  Quelle: h5bp/html5-boilerplate

Nur ein Apple-Touch-Icon-Png, eingestellt auf 144x144px, wird auch auf älteren Geräten verwendet (automatisch verkleinert), daher sehe ich keine Notwendigkeit, 6 verschiedene Versionen zu erstellen.

Hilfreichster Kommentar

"Der Nachteil ist, dass diese Geräte das große Bild in hoher Qualität laden, während eine viel kleinere Datei genauso gut funktioniert hätte."
Also, nur wenn jemand auf "Zum Startbildschirm hinzufügen" klickt, muss ein etwas schwereres PNG geladen werden (nur um ein paar Kilobyte größer) ... das ist für mich völlig akzeptabel und weitaus besser als Erstellen von 6 unterschiedlich großen Icons ... und besonders besser, wenn Sie den HTML-Code auf der Seite einfügen, um alle sechs zu laden.

Alle 28 Kommentare

"Der Nachteil ist, dass diese Geräte das große Bild in hoher Qualität laden, während eine viel kleinere Datei genauso gut funktioniert hätte."
Also, nur wenn jemand auf "Zum Startbildschirm hinzufügen" klickt, muss ein etwas schwereres PNG geladen werden (nur um ein paar Kilobyte größer) ... das ist für mich völlig akzeptabel und weitaus besser als Erstellen von 6 unterschiedlich großen Icons ... und besonders besser, wenn Sie den HTML-Code auf der Seite einfügen, um alle sechs zu laden.

Neil,
Wenn Sie eine einfache Möglichkeit zum Erstellen dieser Symbole benötigen, kann ich das H5BP Multi-Layer FavIcons-Repository vorschlagen ? Ich weiß, es ist ein schamloser Plug, aber ich habe ihn heute wieder verwendet und war mit allen 7 Bildern, einschließlich des mehrschichtigen Favicons, in weniger als 10 Minuten fertig.

Ich hoffe es hilft!

OK danke. Aber ich bin immer noch nicht der Meinung, dass das Erstellen mehrerer spezifischer Grafiken für jedes einzelne Gerät der richtige Ansatz ist (kein sehr reaktionsschneller Ansatz). Das Erstellen eines Bildes ist immer noch schneller/einfacher und sauberer, und ich sehe kein Problem bei der Bereitstellung auf älteren Geräten, wenn es dem Seitenladen kein Gewicht hinzufügt (es wird erst nach der "Anfrage" zum Hinzufügen zum Home geladen Bildschirm) und wir sprechen nur über ein paar k im Unterschied zwischen diesen Bildern.

Wenn es nur heruntergeladen wird, wenn es zum Startbildschirm hinzugefügt wird, kann ich Ihren Standpunkt sehen. Ich persönlich gehe auch die Single-Icon-Route.

+1 für ein einzelnes Symbol (und ein favicon.ico) ohne HTML-Link-Ansatz.

@mathiasbynens danke für die ausführliche Erklärung der Touch-Icons. Allerdings musste ich lachen, als ich die Zusammenfassung gelesen habe. Nicht wegen Ihrer Vorschläge, sondern weil ich proprietäre BS hasse. Lassen Sie mich Ihre Zusammenfassung zusammenfassen.

  • Um Android vollständig zu unterstützen, müssen Sie die proprietären HTML-Tags von Apple verwenden.
  • Wenn Sie sich nur für iOS interessieren, müssen Sie die proprietären HTML-Tags von Apple nicht verwenden.
  • Der „faule“ Ansatz besteht darin, genau das zu tun, was apple.com tut.

Um es noch einmal zusammenzufassen, es gibt zwei Hauptgründe, warum viele verschiedene Touch-Symbole die beste Lösung sind:

  • Leistung / Nutzung des Datentarifs einschränken: Vermeiden Sie das Laden unnötig großer Bilder beim Hinzufügen zum Startbildschirm.
  • Art Direction: Nach meiner Erfahrung verlassen sich Designer im Allgemeinen nicht gerne auf die automatische Größenanpassung und stellen die Icons lieber selbst in den entsprechenden Dimensionen bereit.

Das heißt, ich bin faul und verwende auch die Single-Icon-Lösung. Aber das bedeutet nicht, dass es IMHO die Lösung sein sollte.

@ryanswedal :D

Wenn die HTML-Links auf der Seite enthalten sind, weiß jemand, ob sie beim Laden der Seite aufgerufen werden? Wenn ja, ist das ein noch größeres Argument für den One-Icon-Ansatz ... und dafür, den HTML-Link nicht einzuschließen.

Als ich dies recherchierte, bestätigten meine IIRC-Tests, dass die Touch-Symbole beim Laden der Seite nicht angefordert wurden, nicht einmal mit dem <link> .

Gut zu wissen. Vielen Dank!

Ja, +1 für den Einzelsymbol-Ansatz. Die Touch-Symbole sind nicht selbstdokumentierend, daher ist es unordentlich und wartungsintensiv, 6 im Stammverzeichnis ohne die Möglichkeit, ein Tool zum Synchronisieren zu dokumentieren, zu haben.

Ich stimme dem Problem der Wartbarkeit zu, wenn Sie alle Symbole im Stamm haben. Ich sehe keine wirklich gute Lösung, aber die Tags <link> hinzuzufügen (symlinks lösen dieses Problem nicht wirklich).

Aber ich denke nicht, dass wir das Markup der index.html im Moment mit diesen Tags aufblähen sollten. Mobile Boilerplate macht dies.
Wie auch immer, ich bin mir ziemlich sicher, dass es einfach ist, herauszufinden, wie man die Symbole in einen anderen Ordner verschiebt. Wir haben sogar einen kurzen Abschnitt zu diesem Thema in unseren Dokumenten .

Ab iOS 7 wurde die empfohlene Touch-Icon-Größe für iPhones mit Retina-Display von 114 × 114 Pixel auf 120 × 120 Pixel erhöht. Mein Beitrag wurde aktualisiert, um dies widerzuspiegeln.

Können wir hier eine Lösung finden? Wollen wir es so lassen wie es ist oder zum One-Icon-Ansatz übergehen?

Nun, meine Stimme wäre sicherlich für den One-Icon-Ansatz

Am Mittwoch, 24. Juli 2013, schrieb Hans Christian Reinl:

Können wir hier eine Lösung finden? Wollen wir es so lassen wie es ist oder in die
ein Symbolansatz?


Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/h5bp/html5-boilerplate/issues/1367#issuecomment -21507073
.

Neil Creagh

Gesendet vom Handy: 087 2174891

http://www.fuel.ie

Je weniger, desto einfacher, desto besser. Wenn nur einer ausreicht und funktioniert, warum sollten wir dann nicht mit ihm gehen?

+1 für einen!

Ich würde auch gerne einen einfachen und reaktionsschnellen Weg gehen, aber bei Icons gab es früher eine Ausnahme: Icons in anderen Maßstäben müssen möglicherweise neu gestaltet werden, um sie in dieser Größe deutlich zu machen.

Wenn Sie ein komplexes Symbol von beispielsweise 120 x 120 haben und es in 32 x 32 verwenden möchten, wird es möglicherweise nicht mehr erkannt. Das Skalieren eines kleinen Symbols auf ein viel größeres ist im Vektorformat kein Problem, aber der Designer möchte möglicherweise mehr Details hinzufügen.

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

Scrollen Sie vom obigen Link mehrere Seiten nach unten, um Icons in 32x32 und 16x16 zu sehen ... vielleicht ist es nicht so nah an diesem Thema, aber ich denke, das sollte berücksichtigt werden, wenn man über Icons in verschiedenen Größen spricht.

IMO ist in den meisten Situationen ein Symbol ausreichend. Die Bereitstellung eines einzelnen großen H5BP-Symbols mit einem Hinweis in der Dokumentation zum Erstellen kleinerer Symbole zur Optimierung der Übersichtlichkeit und Dateigröße wäre eine gute Lösung.

Das heißt, H5BP ist halb-eigennützig, so dass alles, was unabhängig von der Einfachheit als "richtige" Methode angesehen wird, im Repo enthalten sein sollte.

Ich habe einen Pull Request erstellt, der fünf der sechs Apple Touch Icons in #1425 entfernt.
Feedback sehr geschätzt.

Bitte behalten Sie die Hauptdiskussion in dieser Ausgabe bei.

+1

:+1:

+1

Ist es in Ordnung, wenn ich zugebe, dass ich nie wusste, warum es überhaupt sechs waren, und ich bin froh, dass es einen geben wird, damit ich nicht das Gefühl habe, faul zu sein, das "Warum" nicht zu kennen.

Perfektion wird nicht erreicht, wenn nichts mehr hinzugefügt, sondern nichts mehr weggenommen werden kann.
- Antoine de Saint-Exupéry

:+1:

Ich hatte keine Zeit, es kürzer zu machen.
— Blaise Pascal
:Daumen hoch:

Ich laufe seit einiger Zeit nur mit dem Einzelbild. Ein Nachteil ist, dass viele mobile Browser die anderen Dateien anfordern. Es ist nicht erforderlich, sie mit einem Link-Tag im HTML-Code zu referenzieren, aber ich habe wieder Stammverzeichnisdateien für alle Größen in normal und vorkomponiert aufgenommen, nur um zu vermeiden, dass mein Protokoll mit 404-Fehlern für diese Anfragen voll ist.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen