Retina ekran uyumlu yeni jenerasyon monitörler markete hakim hale gelmeye başladılar. Gelişen teknolojiye ayak uydurmak adına hali hazırda var olan web sitelerinizi retina destekli hale getirmenin püf noktalarından bahsetmek istiyorum.
İLGİNİZİ ÇEKEBİLECEK HABERLER
2010 yılında Apple tarafından iPhone 4’ün tanıtılmasının ardından ekran çözünürlükleri ile ilgili gelişmeler başlamış ve günümüzde neredeyse tüm Apple ürünleri retina destekli hale gelmiştir. Eğer web sitenizin çok daha net ve şık gözükmesini istiyorsanız, sattığınız ürünlerin ziyaretçileri daha fazla cezbetmesini diliyorsanız bu makaleyi mutlaka okuyun.
Adım 1: CSS Sprites
Retina görseller hazırlamanın ilk adımı CSS Sprite tekniğini uygulamak. Bu teknik ile birlikte hazırladığınız görselleri X1 normal çözünürlük ve X2 yüksek çözünürlük şeklinde hazırlıyorsunuz ve ardından retinajs.com sitesi üzerinden sistemi otomatik hale getiren java script uygulamasını sitenizi entegre ederek yola devam ediyorsunuz.
Adım 2: Retine Destekli Görseller
Retina destekli görseller sunucu bağlantılı çözümlerdir, kullandığınız x1 ve x2 çözünürlükteki görselleri otomatik olarak algılar ve siteyi ziyaret eden kullanıcıdaki monitörün özelliğine göre sadece bir tanesini ekrana yansıtır.
Eğer ki WordPress kullanıyorsanız buradaki eklenti sayesinde sisteme kolay bir şekilde entegre edebilirsiniz.
Adım 3: Ölçeklenebilir Vektör Görseller
Bir diğer yöntem siteniz içerisinde kullandığınız görselleri SVG uzantılı hazırlamaktır. SVG uzantılı dosyalar oldukça ihmal edilmiş olsalarda artık günümüzde Retina destekli web siteleri için vazgeçilmez hale geldiler.
Tüm görsel uygulamalar için uygun olmasada ikonlar, desenler, logolar, grafikler, haritalar, arkaplanlar için oldukça ideal’dir.
SVG uzantılı dosyaların kullanımı hakkında daha detaylı bilgi almak ve Modernizr aracını kullanmak için lütfen buraya tıklayın.
Adım 4: Ikon Yazı Tipleri
Bu yöntem ile kolaylıkla küçültüp-büyütme işlemlerini yapabilir ve pixel kaybının önüne geçebilirsiniz.
Bu yönteme ilişkin en güzel örnekleri ve nasıl hazırlanacağını Glyphs, Shifticons ve Font Awesome sitelerinde bulabilir ve hemen uygulayabilirsiniz.
Umarım faydalı bir makale olmuştur, web sitelerinizin ışıl ışıl parlamasını dilerim. (:
