Share
Cu mai mulți utilizatori de dispozitive mobile decât oricând, este important să vă mențineți branding-ul puternic. Să mergem cu un pas mai departe decât standardul favicon și să ajutăm site-ul dvs. să iasă în evidență prin crearea de pictograme pentru utilizarea pe ecranele de iOS și Android.
* Icoana minunată de vafe de Eddie Lobanovskiy
Înainte de a ne gândi chiar la dimensiunile icoanelor noastre, există câteva lucruri importante pe care trebuie să le țineți minte în timp ce le proiectați (în special în ceea ce privește dispozitivele Apple).
De asemenea, merită să țineți minte în timp ce proiectați icoana dvs. că este posibil să înlocuiți aceste comportamente implicite iOS. Vom vedea cum se face acest lucru în curând.
Fiecare dispozitiv Apple are o dimensiune diferită a ecranului și rezoluție. Asta înseamnă că pentru cele mai bune rezultate, aveți nevoie de o pictogramă distinctă, diferită pentru fiecare dispozitiv. Nu vă faceți griji în legătură cu Android - pictograma oricărei dimensiuni este scalată automat.
Iată tot ce trebuie să știți pentru fiecare dispozitiv Apple:
iOS determină ce pictogramă să utilizeze în funcție de mărimea acesteia. Utilizarea de pictograme mai mari pentru ecrane cu rezoluție mai mare ne permite să îmbunătățim calitatea imaginilor noastre. Uitați-vă la atenția suplimentară la detalii pe aceste exemple:
Așa cum am menționat mai devreme, iOS adaugă automat efecte cum ar fi colțurile rotunjite, umbrele picăturilor și strălucirea clasică a Apple "reflective". Dacă proiectați icoane pentru a profita de acest lucru, pur și simplu faceți pictograma pătrată și lăsați efectele în iOS. Dacă preferați să vă creați propriile colțuri rotunjite, fiți conștienți de faptul că ar putea părea dezorientat și inconsecvent.
Pentru a suprascrie aceste setări iOS, utilizați -precompusă în cadrul rel atribuiți atunci când vă conectați la pictograma dvs. Iată cum ar putea apărea:
Veți observa mai sus că am demonstrat o pictogramă cu -precompusă cuvânt cheie la sfârșitul fișierului său. Acest lucru este doar ca un memento pentru noi înșine.
Denumirea imaginilor în acest fel nu este necesară, dar este utilă pentru a vă aminti circumstanțele pentru care ați desenat pictograma. Dacă intenționați să faceți totul și să creați pictograme pentru cât mai multe dispozitive posibil, atunci este bine să le numiți în mod corespunzător. De exemplu:
Adăugarea icoanelor pe site-ul dvs. este foarte simplă - tot ce este nevoie este o linie de cod pentru fiecare dimensiune a pictogramei. Să presupunem că ați făcut icoane cu dimensiunile 57x57px, 72x72px și 114x114px. Este important să definiți dimensiunea pictogramei corect, astfel încât să poată fi folosită pentru dispozitivul corect - indiferent dacă acestea toate se află sub relația "apple-touch-icon".
Nu uitați, dacă doriți să înlocuiți setările implicite pentru afișarea iOS, aveți nevoie de -precompusă cuvinte cheie după "apple-touch-icon" în rel atributul câmp.
Și asta este tot ce există! Acum aveți un nou set de icoane gata pentru a vă consolida brandul pe piața de telefonie mobilă în creștere. Dacă cineva adaugă site-ul dvs. pe ecranul de pornire iOS, în loc de o captură de ecran, acesta va vedea pictograma dvs. Cu mulți utilizatori ai site-urilor iOS care salvează site-uri web pentru o lectură ulterioară, este important să aveți o pictogramă bună, astfel încât site-ul dvs. să se distanțeze de restul.
Dacă vă gândiți la modul în care acest lucru se aplică utilizatorilor Android, nu vă faceți griji.
Android sprijină, de asemenea,Apple a-touch-icon-precompusă'link attribute rel, deci nu este nevoie să adăugați nici un cod de rezervă. OS va scala pictograma cea mai potrivită la dimensiunea corectă, deci nu este necesar să creați pictograme cu dimensiuni specifice pentru dispozitivele Android. Chiar dacă nu utilizați niciuna dintre opțiunile pentru pictograma Apple, sistemul de operare Android va utiliza imaginea standard (marcată) de pe site-ul dvs. pentru pictograma de pe ecranul dvs. de pornire.
Nu toți utilizatorii de dispozitive mobile sunt conștienți de faptul că pot adăuga marcaje de pagini web în ecranul de pornire, așadar vă recomandăm să le solicitați să le facă. Există câteva fragmente JavaScript care vă ajută să faceți acest lucru, cum ar fi scriptul Add to Home Screen al lui Matteo Spinelli.
Ca întotdeauna, merită să luați în considerare impactul de performanță al tragerii unui alt fișier .js.
Sper că acest sfat rapid te-a inspirat să te duci la crearea propriilor icoane pentru iOS. Acestea se pot dovedi a fi foarte utile pentru utilizatorii dvs., iar icoanele personalizate vă vor servi mult mai bine decât o captură de ecran lizibilă.
Accentsconagua