DiğerTeknoloji

Sitenizi Retina Destekli Hale Getirin

2
Sitenizi Retina Destekli Hale Getirin

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.

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.

Sitenizi Retina Destekli Hale Getirin - 1

 

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.

Sitenizi Retina Destekli Hale Getirin - 2

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. (:

Murat Tekmen
1999 yılından bu yana profesyonel olarak tasarım ile uğraşmakta ve kullanıcı arayüzü tasarımı konusunda yoğun çalışmalar yapmakta. Yazılı ve görsel basında bir çok çalışması yayınlanan Tekmen'in en büyük tutkusu okumak, yazmak ve üretmektir.

Ücretsiz WordPress Blog Kurulumu Detaylı Anlatım

Önceki haber

The Wolverine Çok Yakında

Sonraki haber

İlginizi Çekebilir

Kategori: Diğer