Web-kehittäjät ja verkkosivustojen omistajat kiinnittävät huomiota: sinun on asetettava verkkokalvoa tukeva iOS-kirjanmerkkikuvake. Kirjanmerkkikuvakkeita kutsutaan Apple Touch Iconiksi, ja näistä mukautetuista kuvista tulee kuvake, joka näytetään käyttäjien aloitusnäytössä, kun he merkitsevät verkkosivuston iPadilla. iPhone tai iPod touch iOS:ssä tai Safari OS X:lle kirjanmerkkipaneeli.Ilman mukautettua apple-touch-kuvaketiedostosarjaa käyttäjät saavat tylsän ja usein ruman pikkukuvan itse verkkosivusta, ja ilman verkkokalvovalmiuskuvaketta kirjanmerkkikuvake näyttää pikselöidyltä ja yleensä kamal alta uudessa iPad-näytössä.

Näin sinun tulee tehdä verkkokalvon täydellisen Apple Touch -kuvakkeen luominen mille tahansa verkkosivustolle muutamalla helpolla vaiheella.

1) Luo Retina-Ready iOS -verkkosivustokuvake

Käytä mallia tai suunnittele omasi. Käytin aiemmassa viestissä mainittua helppoa DIY-retina-kuvakesarjaa, se on PSD-tiedosto, joka tekee kauniin näköisten iOS-kuvakkeiden suunnittelusta helppoa kuin kahdella napsautuksella. Liitä verkkosivusto tai yrityksen logo ja olet melko hyvä. Jos sinulla ei ole mitään muokattavaa PSD-tiedostoja, Photoshop CS6 beta on erinomainen ja ilmainen ladata ja käyttää, kunnes lopullinen versio ilmestyy myöhemmin tänä vuonna.

2) Tallenna PNG-muodossa ja nimeä Retina-verkkosivuston kirjanmerkkikuvake

Kuvakkeen on oltava PNG, ja sen nimen on oltava toinen kahdesta asiasta. Jokaisen tiedostonimen kuvakkeen ulkoasu on hieman erilainen kuin käyttäjän aloitusnäytössä:

• “apple-touch-icon.png” lisää korostuskuplan peittokuvan kuvakkeeseen
• "apple-touch-icon-precomposed.png" näyttää kuvakkeen alkuperäisessä muodossaan ilman korostettua peittokuvaa

Käytä jälkimmäistä valmiiksi laadittua vaihtoehtoa, jos loit oman kohokohdan tai jos haluat kuvakkeen näyttävän tasaisemm alta ilman kaikkialla esiintyvää kuplaa, joka näkyy useimmissa Applen oletuskuvakkeissa.

3) Lataa Web-sivuston kirjanmerkin kosketuskuvake perusverkkohakemistoon

Käytä SFTP-asiakasohjelmaa (OS X sisältää FTP:n Finderiin, ja CyberDuck tai Filezilla ovat ilmaisia) kopioidaksesi apple-touch-icon.png-tiedoston juuriverkkohakemistoon. Tämä on yleensä sama sijainti, jossa sivuston päähakemistotiedosto sijaitsee. Kun se on ladattu, varmista, että se on oikeassa paikassa avaamalla verkkoselain ja siirtymällä osoitteeseen "http://SITEURL.com/apple-touch-icon.png" ja varmistamalla, että se latautuu.

Tässä on esimerkki 512 × 512 verkkokalvon valmistuksen kirjanmerkkikuvakkeesta osoitteesta OSXDaily.com:

Huomaa, että ilman -valmistettua lippua yllä oleva kuvake näyttää korostuskuplan. Näet eron näiden kahden välillä vertaamalla todellista kuvaketta kuvakaappauksissa kirjanmerkkinä näkyvään kuvakkeeseen.

4) Käytä iOS-laitetta ja merkitse sivusto kirjanmerkkeihin

Tämä on helpoin osa, nappaa iOS-laite (mieluiten iPad 3 vahvistaaksesi verkkokalvon näkökulman) ja avaa Safari.Päivitä Web-sivusto, jolle lähetit kuvakkeen, napauta sitten nuolikuvaketta ja valitse "Lisää aloitusnäyttöön" nimeä kirjanmerkki ja palaa sitten aloitusnäyttöön vahvistaaksesi sen olemassaolon.

Vaikka verkkokalvokuvake on kooltaan 512 x 512 pikseliä, se pienenee hienosti vanhemmissa iPhoneissa ja laitteissa, joissa ei ole verkkokalvoa. Jos todella haluat, voit näyttää erikokoisia kuvakkeita eri laitteissa CSS:n ja HTML:n avulla, mutta se ei todellakaan ole välttämätöntä.

Jos joku lisää Web-sivustosi kirjanmerkkeihin retinanäytöllä varustetussa iPadissa, se näyttää paljon paremm alta aloitusnäytöllä. Siinä on oikeastaan ​​kaikki. Ja kyllä, olemme kirjoittaneet Applen kosketuskuvakkeesta aiemmin, mutta nyt se ansaitsee toisen maininnan, koska iPad 3 vaatii huomattavasti korkeamman resoluution kuvakkeita ja grafiikkaa.