Share
Med flere mobile nettbrukere enn noensinne, er det viktig å holde merkevaren sterk. La oss gå et skritt lenger enn standardfaviconet og hjelpe nettstedet ditt til å skille seg ut ved å lage ikoner for bruk på IOS og Android-hjemmeskjermer.
* Fantastisk vaffelikon av Eddie Lobanovskiy
Før vi selv tenker på symbolene til våre ikoner, er det noen viktige ting du må huske på når du designer dem (spesielt når det gjelder Apple-enheter).
Det er også verdt å huske mens du designer ditt ikon at det er mulig å overstyre disse standard iOS-oppføringene. Vi ser på hvordan dette gjøres kort tid.
Hver Apple-enhet har en annen skjermstørrelse og oppløsning. Det betyr for best resultat, du trenger et eget, forskjellig størrelse ikon for hver enhet. Ikke bekymre deg for Android - et hvilket som helst størrelse ikon blir automatisk nedskalert.
Her er alt du trenger å vite for hver Apple-enhet:
IOS bestemmer hvilket ikon som skal brukes avhengig av størrelsen. Ved å bruke større ikoner for høyere oppløsning skjermer kan vi øke kvaliteten i bildene våre. Ta en titt på den ekstra oppmerksomheten på detaljer på disse eksemplene:
Som tidligere nevnt, legger iOS automatisk til effekter som avrundede hjørner, drop shadows og den klassiske Apple 'reflekterende glans'. Hvis du designer ikoner for å dra nytte av dette, gjør du bare ikonet ditt firkantet og la effektene til iOS. Hvis du heller vil lage dine egne avrundede hjørner, vær oppmerksom på at det kan ende med å se rotete og inkonsekvente.
For å overstyre disse iOS-standardene, bruk -forhåndssammensatt innen rel Tilordne når du kobler til ikonet ditt. Slik ser det ut:
Du vil legge merke til over det vi viste et ikon med -forhåndssammensatt søkeord på slutten av filnavnet. Dette er rent som en påminnelse for oss selv.
Det er ikke nødvendig å navngi bildene dine på denne måten, men det er nyttig for å huske omstendighetene som du desgined for ikonet. Hvis du planlegger å gå all-out og lage ikoner for så mange størrelser som mulig, så er det lurt å nevne dem alle tilsvarende. For eksempel:
Legge til ikonene på nettstedet ditt er veldig enkelt - alt som trengs, er en linje med kode for hver ikonstørrelse. La oss anta at du har laget ikoner med størrelsene 57x57px, 72x72px og 114x114px. Det er viktig å definere størrelsen på ikonet riktig slik at de kan brukes til den riktige enheten - uansett at de alle kommer under relasjonen til "apple-touch-icon".
Ikke glem, hvis du vil overstyre standardinnstillingene for iOS-skjerm, trenger du -forhåndssammensatt søkeord etter "eple-touch-ikon" i rel attributtfelt.
Og det er alt der er til det! Nå har du et skarpt nytt sett med ikoner som er klare for å styrke merkevaren din på det voksende mobilnettmarkedet. Hvis noen legger til nettstedet ditt på deres iOS-startskjerm, vil de i stedet for et skjermbilde se ikonet ditt. Med mange iOS-brukere som lagrer nettsteder for senere lesing, er det viktig å ha et godt ikon, slik at nettstedet ditt skiller seg ut fra resten.
Hvis du tenker på hvordan dette gjelder for Android-brukere, ikke bekymre deg.
Android støtter også "eple-touch-ikon-forhåndssammensatt'link rel attributt, så det er ikke nødvendig å legge til noen tilbakekallingskode. Operativsystemet skal skalere det mest passende ikonet til riktig størrelse, slik at du ikke trenger å opprette ikoner med spesielt størrelse for Android-enheter. Selv om du ikke bruker noen av alternativene for apple-touch-ikon, bruker Android OS det vanlige bokmerket (favicon) -bilde fra nettstedet ditt til ditt hjemmeskjermikon.
Ikke alle brukere av mobilenheten er klar over at de kan legge til nettsidebokmerkene til startskjermen, så du kan vurdere å be dem om å gjøre det. Det er noen JavaScript-utdrag for å hjelpe deg med å gjøre dette, for eksempel Matteo Spinelli's Add to Home Screen script.
Som alltid skjønt, er det verdt å vurdere ytelsesvirkningen av å trekke i en annen .js-fil.
Jeg håper dette raske tipset har inspirert deg til å ta en tur på å lage dine egne ikoner for iOS. De kan vise seg å være svært nyttige for brukerne dine, og egendefinerte ikoner vil tjene merket ditt mye bedre enn et uleselig skjermbilde.
Accentsconagua