Web geliştiricileri ve web sitesi sahipleri dikkat: retinaya hazır bir iOS yer imi simgesi ayarlamanız gerekir. Yer imi simgelerine Apple Touch Simgesi adı verilir ve bu özel görüntüler, bir iPad'de bir web sitesine yer işareti koyduklarında kullanıcının ana ekranında görüntülenen simge haline gelir, iOS'ta iPhone veya iPod touch veya OS X için Safari'nin yer imleri paneli.Özel bir apple-touch-icon dosya seti olmadan, kullanıcılar web sayfasının kendisinin sıkıcı ve genellikle çirkin bir küçük resmini alacaklar ve retinaya hazır bir simge kullanmadan, yer imleri simgesi yeni iPad ekranında pikselli ve genel olarak berbat görünecek.

İşte birkaç kolay adımda herhangi bir web sitesi için mükemmel bir Apple Touch Simgesi oluşturmak için yapmanız gerekenler.

1) Retinaya Hazır iOS Web Sitesi Simgesini Oluşturun

Bir şablon kullanın veya kendi şablonunuzu tasarlayın. Önceki bir gönderide bahsedilen kolay DIY retina simge kitini kullandım, güzel görünümlü iOS simgeleri tasarlamayı bir veya iki tıklama kadar kolaylaştıran bir PSD dosyasıdır. Bir web sitesine veya şirket logosuna yapıştırın ve hazırsınız. PSD dosyalarını düzenlemek için bir şeye sahip değilseniz, Photoshop CS6 beta mükemmeldir ve yılın ilerleyen zamanlarında son sürüm çıkana kadar indirmek ve kullanmak ücretsizdir.

2) PNG Olarak Kaydet ve Retina Web Sitesini Yer İşareti Simgesine Adlandırın

Simge bir PNG olmalı ve iki şeyden biri olarak adlandırılmalıdır. Her dosya adı, bir kullanıcının ana ekranında görüntülenen simgenin biraz farklı bir görünümünü sunar:

• “apple-touch-icon.png” simgeye vurgu balonu kaplaması ekleyecek
• “apple-touch-icon-precomposed.png”, simgeyi vurgu kaplaması olmadan orijinal olarak oluşturulduğu gibi görüntüler

Kendi vurgunuzu oluşturduysanız veya simgenin, Apple'ın varsayılan simgelerinin çoğunda görünen her yerde bulunan kabarcık olmadan daha düz görünmesini istiyorsanız, önceden oluşturulmuş ikinci seçeneği kullanın.

3) Web Sitesi Yer İşareti Dokunmatik Simgesini Temel Web Dizinine Yükleyin

Apple-touch-icon.png dosyasını kök web dizinine kopyalamak için bir SFTP istemcisi kullanın (OS X, Finder'da FTP içerir ve CyberDuck veya Filezilla ücretsizdir). Bu genellikle sitenin ana dizin dosyasının bulunduğu konumla aynıdır. Yüklendikten sonra, bir web tarayıcısı açıp “http://SITEURL.com/apple-touch-icon.png” adresine giderek ve yüklendiğinden emin olarak doğru konumda olduğunu doğrulayın.

İşte OSXDaily.com'dan alınan 512×512 retinaya hazır bir yer imi simgesi örneği:

-önceden oluşturulmuş bayrağı olmadan, yukarıdaki simgenin vurgulama balonunu görüntüleyeceğine dikkat edin. Gerçek simgeyi ekran görüntülerinde yer imi olarak gösterilenle karşılaştırarak ikisi arasındaki farkı görebilirsiniz.

4) Bir iOS Cihazı Kullanın ve Siteye Yer İşareti koyun

Bu en kolay kısımdır, bir iOS cihazı alın (retina yönünü doğrulamak için tercihen bir iPad 3) ve Safari'yi açın.Simgeyi yüklediğiniz web sitesini yenileyin ve ardından ok simgesine dokunun ve yer imini "Ana Ekrana Ekle"yi seçin, ardından orada olduğunu doğrulamak için Ana ekrana dönün.

512 x 512 piksel olmasına rağmen, retina simgesi eski iPhone'larda ve retina olmayan cihazlarda iyi bir şekilde küçülür. Gerçekten istiyorsanız, farklı boyutlardaki simgeleri farklı cihazlarda görüntülemek için CSS ve HTML kullanabilirsiniz, ancak bu gerçekten gerekli değildir.

Artık birisi web sitenizi retina ekranlı bir iPad'de yer imlerine eklerse, web siteniz ana ekranında çok daha iyi görünecek. Gerçekten hepsi bu kadar. Ve evet, Apple dokunmatik simgesi hakkında daha önce yazmıştık, ancak iPad 3'ün önemli ölçüde daha yüksek çözünürlüklü simgeler ve grafikler gerektirdiği düşünüldüğünde, bundan bir kez daha bahsetmeyi hak ediyor.