Share
Bei mehr mobilen Webbenutzern als je zuvor ist es wichtig, dass Ihr Branding stark bleibt. Lassen Sie uns einen Schritt weiter gehen als das Standard-Favicon und helfen Sie, Ihre Website hervorzuheben, indem Sie Symbole für die Verwendung auf iOS- und Android-Startbildschirmen erstellen.
* Awesome Waffel-Symbol von Eddie Lobanovskiy
Bevor wir überhaupt über die Abmessungen unserer Symbole nachdenken, sollten Sie beim Entwerfen einige wichtige Punkte beachten (insbesondere bei Apple-Geräten)..
Beachten Sie beim Entwerfen Ihres Symbols auch, dass es möglich ist, diese Standard-iOS-Verhaltensweisen zu überschreiben. Wir werden in Kürze sehen, wie das geht.
Jedes Apple-Gerät verfügt über eine andere Bildschirmgröße und Auflösung. Für optimale Ergebnisse benötigen Sie für jedes Gerät ein eigenes Symbol mit unterschiedlichen Größen. Machen Sie sich keine Sorgen um Android - jedes Symbol wird automatisch verkleinert.
Hier ist alles, was Sie für jedes Apple-Gerät wissen müssen:
iOS legt fest, welches Symbol abhängig von seiner Größe verwendet werden soll. Durch die Verwendung größerer Symbole für Bildschirme mit höherer Auflösung können wir die Qualität unserer Bilder verbessern. Sehen Sie sich die besondere Aufmerksamkeit für diese Beispiele an:
Wie bereits erwähnt, fügt iOS automatisch Effekte hinzu wie abgerundete Ecken, Schlagschatten und den klassischen "reflektierenden Glanz" von Apple. Wenn Sie Symbole entwerfen, um dies zu nutzen, machen Sie einfach Ihr Symbol zu einem Quadrat und lassen Sie die Effekte für iOS. Wenn Sie lieber Ihre eigenen abgerundeten Ecken erstellen möchten, sollten Sie sich dessen bewusst sein, dass sie am Ende chaotisch und inkonsistent aussehen.
Um diese iOS-Standardeinstellungen zu überschreiben, verwenden Sie -vorkomponiert innerhalb des rel Attribut, wenn Sie auf Ihr Symbol verlinken. So könnte es aussehen:
Sie werden oben feststellen, dass wir mit dem Symbol ein Symbol gezeigt haben -vorkomponiert Schlüsselwort am Ende des Dateinamens. Dies ist nur eine Erinnerung an uns.
Die Benennung Ihrer Bilder auf diese Weise ist nicht erforderlich, ist jedoch nützlich, um sich an die Umstände zu erinnern, für die Sie das Symbol festgelegt haben. Wenn Sie vorhaben, Symbole für so viele Gerätegrößen wie möglich zu erstellen, sollten Sie sie alle entsprechend benennen. Zum Beispiel:
Das Hinzufügen der Symbole zu Ihrer Site ist sehr einfach - Sie benötigen lediglich eine Codezeile für jede Symbolgröße. Angenommen, Sie haben Icons mit den Größen 57x57px, 72x72px und 114x114px erstellt. Es ist wichtig, die Größe des Symbols richtig zu definieren, damit sie für das richtige Gerät verwendet werden können - unabhängig davon, ob sie alle unter dem "Apple-Touch-Symbol" stehen..
Vergessen Sie nicht, wenn Sie die Standard-iOS-Anzeigeeinstellungen überschreiben möchten, benötigen Sie die -vorkomponiert Stichwort nach "Apple-Touch-Icon" im rel Attributfeld.
Und das ist alles was dazu gehört! Jetzt haben Sie ein neues Set an Icons, um Ihre Marke im wachsenden mobilen Web-Markt zu stärken. Wenn jemand Ihre Site zu Ihrem iOS-Startbildschirm hinzufügt, wird anstelle eines Screenshots Ihr Symbol angezeigt. Da viele iOS-Benutzer Websites zum späteren Lesen speichern, ist es wichtig, ein gutes Symbol zu haben, damit sich Ihre Website von den anderen abhebt.
Machen Sie sich keine Sorgen, wenn Sie darüber nachdenken, wie dies für Android-Benutzer gilt.
Android unterstützt auch die 'apfel-touch-icon-vorzusammengesetzt'link rel-Attribut, so dass kein Fallback-Code hinzugefügt werden muss. Das Betriebssystem skaliert das am besten geeignete Symbol auf die richtige Größe, sodass Sie keine speziell dimensionierten Symbole für Android-Geräte erstellen müssen. Auch wenn Sie keine der Apple-Touch-Symbol-Optionen verwenden, verwendet das Android-Betriebssystem das Standard-Lesezeichen (Favicon) Ihrer Site für Ihr Homescreen-Symbol.
Nicht alle Benutzer mobiler Geräte wissen, dass sie ihrem Startbildschirm Webseiten-Lesezeichen hinzufügen können. Daher sollten Sie sie gegebenenfalls dazu auffordern. Es gibt einige JavaScript-Ausschnitte, die Ihnen dabei helfen, beispielsweise das Skript "Zum Startbildschirm hinzufügen" von Matteo Spinelli.
Wie immer ist es jedoch ratsam, die Auswirkungen auf die Leistung beim Ziehen einer anderen .js-Datei in Betracht zu ziehen.
Ich hoffe, dieser schnelle Tipp hat Sie dazu inspiriert, eigene Icons für iOS zu erstellen. Sie können sich als sehr nützlich für Ihre Benutzer erweisen, und benutzerdefinierte Symbole werden Ihrer Marke viel besser dienen als ein unleserlicher Screenshot.
Accentsconagua