SUNIPEYK

[ Okuma süresi tahmini 2 dakikadır ]

Responsive sitenizi yaptınız. Ya da yaptınız varsayalım. Yapmadıysanız yapın tabii. Çünkü şimdi de Retina Ekran/ görüntülere uygun web siteleri gerekiyor. Maalesef böyle.

Apple’ın iPhone 6’ları, iPad 3’leri, Air’ları, Macbook retina ekranları sitenizi çamur gibi gösterebilir. Yeni bir kısım Android cihazlarda öyle.

Temel Olarak Yapılması Gerekenler

1. CSS ile yapabileceğiniz site elementleri için görsel kullanmayın. Form gönderme buttonları, menü elementleri vb. site unsurlarını css ile yapılandırın.
2. İkon yazı karakterleri (Font icons) kullanın. Sitenizde basit temel ikonlar, buttonlar, sosyal medya ikonları için Font icon‘ları kullanın.
3. Görsellerinizin boyutunu 2 katına çıkarın. Hem jpg hem de png için geçerlidir. Diyelim ki görselleinizin sitenizdeki yeri 400×400 px boyutunda. O zaman o yer için 800×800 px lik bir görsel hazırlayıp yükleyeceksiniz. Ancak kullanacağınız yerde css ile yeniden width:400px ve height:400px olarak boyutlandıracaksınız. Böylelikle daha yüksek çözünürlüğü olan görselleri yayınlıyor olacaksınız.
4. SVG (Ölçeklendirebilir Vektör) Görseller kullanın. Bu konu biraz karışık. Ben de pek bilmiyorum. Şimdilik bunu geçiyorum.

Sonuç

Tüm bunları veya bir kısmını yaptıysanız retina bir cihazdan mutlaka kontrol edin. Siteyi büyütüp, küçültün. Görsel ve diğer elementleri kontrol edin. Yazı karakterilerinde, font iconlarda hiç bozulma olamaması gerekiyor. Fotoğraf ve görsellerde de bozulma olmaması tercih edilir. Ancak o kısım biraz daha zahmetli. Görsellerinizi hazırladığınız program ve fotoğraflarınızın orjinal kalitesi sonuca etki edebiliyor. Eh artık onu da deneyerek, uğraşarak en uygun çözünürlüğe ulaşırsınız.