Retina hazır mı?

Retina hazır mı?


Retina hazır, insan gözünün tek tek pikselleri oluşturamayacağı kadar yüksek piksel yoğunluğuna sahip bir cihazdaki bir ekranı ifade eder. iPhone 6 ve iPad 3 Retina için hazır. Apple “Retina Ready” terimine sahip olmasına rağmen, birçok Android cihaz şimdi aynı veya daha yüksek çözünürlüğe sahiptir.

Retina hazır görüntüler (daha yüksek çözünürlük) sunan bir web sitesini görüntüleyen bir Retina ekran cihazı, daha net görüntüler ve daha parlak, daha canlı renkler görüntüler.

Ancak Retina olmayan görüntüler (düşük çözünürlük) sunan bir Retina ekran cihazı, düşük kaliteli görüntüler ve en iyi kullanıcı deneyimine neden olur.

Peki web sitelerinin Retina'ya hazır olduğundan emin olmak için ne yapmalıyız?

Web öğeleri için resim kullanmayın.

CSS3, düğmeleri kullanmadan düğmeler, konuşma balonları, alt gölgeler ve degradeler gibi öğeler oluşturmanıza olanak tanır. Bu, bu öğelerin ekran görüntüleyebildiği kadar keskin ve net görüntüleneceği anlamına gelir. Ek avantaj, CSS3 öğelerinin görüntülerden çok daha hızlı yüklenmesi.

Yüksek çözünürlüklü görüntüler sağlayın.

Web sitenizde görüntüler varsa, web sitenizdeki herhangi bir görüntüyü sunucuda bulunursa yüksek çözünürlüklü sürümle değiştiren küçük bir komut dosyası olan retina.js'yi kullanabilirsiniz. Düzgün çalışması için HiDPI görüntülerinizi Apple'ın “@ 2x” adlandırma kuralına göre adlandırmanız gerekir. Örneğin, web sitenizdeki bir görüntü, denilen my-image.pngyüksek çözünürlüklü bir sürümle değiştirilir my-image@2x.png.

WordPress eklentisi WP Retina 2x , bu HiDPI görüntüleri oluşturmak ve bunları uygun şekilde görüntülemek için kullanılabilir.

Simge Yazı Tipleri veya SVG kullanın.

Simge yazı tipleri yalnızca yazı tipleridir. Ancak, harfler veya rakamlar yerine semboller ve glifler içerirler. Bunları CSS ile normal metne stil uyguladığınız şekilde biçimlendirebilirsiniz, bu da herhangi bir çözünürlükte net ve net görünecekleri anlamına gelir. Kendim de dahil olmak üzere web tasarımcıları arasında oldukça popüler oldular, ancak erişilebilirlik konusunda bazı endişeler var. Her ne kadar “ Font Awesome nasıl erişilebilir hale getirilir” mesajımda açıkladığım gibi bu durum geliştirilebilse de , Ölçeklenebilir Vektör Grafiklerinin (SVG ) daha iyi bir seçim olup olmadığı konusunda bazı tartışmalar var . Daha fazla bilgi için Büyük Simge Tartışması: Fontlar ve SVG'yi okuyun .




×
Hiç birşey kaçırmamak için haftalık bültenlerimize abone olunuz.