Metas iOS "Zum Home-Bildschirm hinzufügen" Symbol ist nicht gut

[dfabulich (Dan Fabulich)]

Jetzt, da iOS 16.4 verfügbar ist, habe ich „Zum Home-Bildschirm hinzufügen“ (A2HS) verwendet, um eine Reihe von Discourse-Foren auf meinem iPhone-Homescreen zu speichern, einschließlich dieses Forums, Meta.

Wenn ich Meta auf meinem Homescreen unter iOS hinzufüge, sieht es so aus:

Wenn Sie genau hinschauen, sehen Sie, dass dies tatsächlich ein transparentes Bild mit einem fast schwarzen Rand ist, umgeben von einem schwarzen Hintergrund. Wenn man es einmal gesehen hat, kann man es nicht mehr übersehen.

Ich glaube, das ist das „Apple Touch Icon“:

https://d11a6trkgmumsb.cloudfront.net/optimized/3X/a/c/ac166452701ce353fa6c8865e99879e8cacfb960_2_180x180.png

Apple fügt diesem Icon automatisch einen schwarzen Hintergrund hinzu, wodurch zwei verschiedene Schwarztöne auf dem Icon entstehen.

Schlimmer noch, wenn Sie auf das Icon tippen und dann zum Homescreen zurückkehren, zeigt iOS kurz das transparente Icon an und zeichnet dann eine Sekunde später den schwarzen Hintergrund ein.

(Es ist schade, dass Apple es nicht einfach transparent lässt! Dieses Icon sieht ziemlich gut aus… für eine Sekunde.)

Ich denke, das Beste ist, Metas „Apple Touch Icon“ durch ein Icon ohne Transparenz zu ersetzen. Ich habe das Pipettenwerkzeug von Photoshop verwendet, um das Quadrat mit einem passenden, fast schwarzen Hintergrund zu füllen, so:

Viel besser. Fühlen Sie sich frei, meine Version zu verwenden oder Ihre eigene zu erstellen, wenn Sie möchten!

[dfabulich (Dan Fabulich)]

Ich schlage außerdem vor, dass Discourse das „Apple Touch Icon“ in den Einstellungen mit schwarzem Hintergrund anzeigen sollte, um es für Website-Administratoren offensichtlicher zu machen, was passiert, wenn sie versuchen, ein transparentes Symbol als „Apple Touch Icon“ zu verwenden.

EDIT: Es wäre noch besser, wenn die Admin-Einstellungen das „Apple Touch Icon“ mit abgerundeten Ecken und schwarzem Hintergrund anzeigen würden, damit Website-Administratoren sehen können, dass das Bild einen von Apple bereitgestellten Radius erhält. Ein anderes Forum, in dem ich Mitglied bin, hatte ein „Apple Touch Icon“ mit einem farbigen Rand, und natürlich sah es schrecklich aus, als Apple abgerundete Ecken hinzufügte…

[Stephen]

Der Bereich um die Farbe ist jedoch Teil des Logos. Ich bin mir nicht sicher, ob Schwarz auf Schwarz überhaupt richtig aussieht. Das Dunkelgrau auf Schwarz sieht besser aus als die Alternative. Dieser Bereich bildet das D von Discourse, ohne ihn sehen wir nur überlappende Sprechblasen.

Die Dark-Mode-Version invertiert das Schwarz:

[dfabulich (Dan Fabulich)]

Hm, ich nehme an. Das vielleicht?

… Ich weiß nicht. Vielleicht wollt ihr mit einem echten Designer sprechen oder so!

[jordan.vidrine]

Ich habe das Apple Touch Icon von Meta auf einen weißen Hintergrund mit unserem Logo vorne aktualisiert. Das sollte jetzt viel besser aussehen

Danke, dass Sie uns darauf aufmerksam gemacht haben.

[Stephen]

Hat sich die Skala signifikant verändert? Sie sieht definitiv etwas klein aus und wird von dem weißen Meer überwältigt.

[jordan.vidrine]

Die Skalierung hat sich zwar geändert, da ein weißer Hintergrund auch bedeutete, dass das Symbol etwas verkleinert wurde, sodass der weiße Raum das Symbol umgab.

Es kann jedoch angepasst werden, da das Feedback gezeigt hat, dass es kleiner zu sein scheint, als die Leute es sich wünschen.

[twofoursixeight]

Was ist mit dem alten Logo passiert, das auf mobilen Geräten verwendet wurde, und warum verwenden wir ein anderes Design?

[ClawdiaWolf (Claudia)]

Das Logo wurde geändert, da die zuvor verwendete transparente PNG-Datei, wenn sie auf dem Startbildschirm angeheftet wurde, die Transparenz durch Schwarz ersetzte, was tatsächlich einen Teil des Logos verdeckte.

Sie wurde durch ein Symbol mit einem expliziten weißen Hintergrund ersetzt, damit das Logo beim Anheften an den Startbildschirm korrekt dargestellt wird.

[sam (Sam Saffron)]

@jordan.vidrine

Die Skalierung hat sich geändert, ja, da ein weißer Hintergrund auch bedeutete, dass das Symbol ein wenig geschrumpft wurde, sodass der weiße Raum das Symbol umschloss.

Ich verstehe, aber ich denke, wir können es auf jeden Fall größer machen.

Im Moment

• DiscourseHub hat ein großes Discourse-Logo (von Weiß umgeben)
• Meta PWA hat ein kleineres Discourse-Logo (von Weiß umgeben)

Können wir es einfach so ändern, dass wir das alte Logo in DiscourseHub verwenden, das die Grenzen etwas mehr ausgereizt hat?

[Stephen]

Hier sind sie nebeneinander:

[jordan.vidrine]

Aus Design-Sicht sollten wir das Logo in der DiscourseHub-App ebenfalls verkleinern.

Wenn man diese nebeneinander betrachtet, positioniert das Symbol links das Logo besser für die Balance als die Hub-Version rechts.

[Falco]

Das ist jetzt meine Firefox-Startseite. Der weiße Hintergrund des Symbols sieht sehr nicht standardmäßig aus

[dfabulich (Dan Fabulich)]

Warum sollte Firefox das Apple Touch Icon verwenden? Ich würde erwarten, dass Firefox eines der Icons verwendet, die von https://meta.discourse.org/manifest.webmanifest verlinkt sind.

Tatsächlich dachte ich, dass dies der Grund ist, warum Discourse zwei separate Einstellungen hat: „Manifest-Icon“ und „Apple Touch Icon“, da Apple Transparenz ignoriert und Maskierung mit abgerundeten Ecken anwendet, während andere Browser den Web-Manifest-Standard befolgen und Transparenz zulassen sollen.

Adaptive icon support in PWAs with maskable icons  |  Articles...

[Falco]

Sowohl Chrome (Android-Tab-Symbole) als auch Firefox (Tab-Startseite) verwenden das apple-touch-icon als hochauflösende Version des Favicons, und beide waren von dieser Änderung betroffen.

@dfabulich

Ich würde erwarten, dass Firefox eines der Symbole verwendet, die von https://meta.discourse.org/manifest.webmanifest verlinkt sind.

Soweit ich weiß, wird dies nur für PWA-Funktionen verwendet, wie z. B. das Symbol, wenn Sie es zum Startbildschirm hinzufügen.

[dfabulich (Dan Fabulich)]

Mir ist gerade aufgefallen, dass das Android PWA-Symbol dieses Forums auch irgendwie kaputt ist.

Ich habe gerade Android Studio gestartet und einen Pixel 4-Emulator mit Android API 31 gestartet, die neueste Version von Google Chrome installiert und Meta zum Startbildschirm hinzugefügt. Das Symbol sieht so aus:

Wie ich es verstehe, liegt das Problem darin, dass in der https://meta.discourse.org/manifest.webmanifest ein Bereich mit zwei Symbolen angeboten wird, eines für den Zweck „any“ und ein weiteres mit dem Zweck „maskable“. Das „maskable“-Symbol gibt an, dass es in Ordnung ist, einen Kreis mit einem Radius von 40 % daraus auszuschneiden.

Adaptive icon support in PWAs with maskable icons  |  Articles...

Glücklicherweise gibt es eine gut definierte und standardisierte „minimale sichere Zone“, die alle Plattformen respektieren. Die wichtigen Teile Ihres Symbols, wie Ihr Logo, sollten sich innerhalb eines kreisförmigen Bereichs in der Mitte des Symbols mit einem Radius von 40 % der Symbolbreite befinden. Der äußere Rand von 10 % kann abgeschnitten werden.

Sie können mit Chrome DevTools überprüfen, welche Teile Ihrer Symbole innerhalb der sicheren Zone liegen. Wenn Ihre Progressive Web App geöffnet ist, starten Sie DevTools und navigieren Sie zum Bereich Application. Im Abschnitt Icons können Sie Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen auswählen. Ihre Symbole werden so zugeschnitten, dass nur der sichere Bereich sichtbar ist. Wenn Ihr Logo innerhalb dieses sicheren Bereichs sichtbar ist, ist alles in Ordnung.

Hier sieht das Manifest-Panel von Meta in Chrome Dev Tools so aus, wenn ich „Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen“ auswähle.

Da das Symbol maskierbar sein soll, schneidet Android/Chrome einen kreisförmigen Teil aus der Mitte aus, mit schlechten Ergebnissen.

Ich habe versucht, das Apple Touch Icon, das @Stephen als „von einem weißen Meer überwältigt“ beschrieb, als maskierbares Manifest-Symbol in Chrome Dev Tools zu verwenden. Aber selbst dieses Symbol ist gerade zu groß für die Standard-Maskiergröße… die untere linke Ecke wird abgeschnitten.

[dfabulich (Dan Fabulich)]

@Falco

Sowohl Chrome (Android-Tab-Symbole) als auch Firefox (Tab-Startseite) verwenden das apple-touch-icon als hochauflösende Version des Favicons, und beide waren von dieser Änderung betroffen.

Das kann ich für Chrome Android nicht reproduzieren. Für Chrome Android scheint das neue Tab-Symbol nur das Favicon zu sein.

Können Sie Dokumentationen darüber finden, welches Symbol Firefox für die Tab-Startseite verwendet?

Wenn Firefox nicht das Manifest-Symbol für die Tab-Startseite verwendet, dann hätte ich erwartet, dass es zumindest eines der <link rel=icon>-Symbole verwendet.

Vielleicht greift Firefox auf das Apple Touch Icon zurück, weil das <link rel=icon> so klein ist?

Wissen Sie, Sie dürfen mehrere <link rel=icon>-Elemente mit mehreren sizes-Attributen haben. Ich denke, es wäre wahrscheinlich sinnvoll, zwei <link rel=icon>-Elemente zu haben, wobei das erste auf das Favicon und das zweite auf das Manifest-Symbol mit einer größeren sizes verweist. Ich wette, das würde Firefox dazu bringen, das bessere, größere Symbol zu verwenden.

Im weiteren Sinne denke ich, die Moral von der Geschichte ist:

1. Das ist eigentlich eine Art Projekt, herauszufinden, welche Symbole wo und warum verwendet werden.
2. Die Discourse-Admin-Oberfläche gibt Administratoren bei weitem nicht genug Anleitung, um dies richtig zu machen.

Die Admin-Oberfläche sollte:

• Transparenz bei Manifest-Symbolen und Apple Touch Icons verbieten
• Das Manifest-Symbol mit einem Kreis mit 40% Radius rendern, wie es die Chrome Dev Tools tun
• Das Apple Touch Icon mit abgerundeten Rändern rendern, so wie Apple es tut

Mit diesen Einrichtungen könnte ein Designer beginnen, das Problem des Hochladens von Symbolen anzugehen, die in all diesen Bereichen gut aussehen:

• iOS A2HS
• Android A2HS
• Tab-Startseiten für Firefox, Chrome und Safari