Sitenizin Responsive Yapısını Test Edin

İnternet kullanımının yangınlaşması son 5 yıla damga vuran akıllı cihazların öncülüğünde gerçekleşti.Özellikle gün içerisinde elinden düşürmediğimiz mobil cihazlar, her an online olmamızın başlıca nedenidir.

Mobil cihazların internet kullanımını domine etmesinden dolayı responsive tasarım kavramı artık internet siteleri için zorunlundur.

Responsive Tasarım Nedir?

Responsive tasarım kavramı 2010 yılında yayınlanan “a list part:responsive web design” yazısında Ethan Marcotte adında bir yazımlımcı tarafından ortaya atıldı.Ona göre responsive tasarım akışkan grid yapısı, esnek görseller ve CSS’in media sorgularını içinde barındıran bir anlayış.

Peki tam olarak nedir? Responsive tasarım geleneksel internet kullanımını yani masaüstü bilgisayarları ve laptop ekranlarına uygun tarayıcılarla kullanılan interneti, bütün akıllı cihazlara uygun hale getirmektir.Özellikle son yıllarda artan mobil cihazların internette daha fazla aktif olmasını sağlamaktır.

Aktifliği sağlamak için de bilgisayar ekranlarına uygun web sitelerini, daha küçük ekranlara uyumlu hale getirmeyi gerektirir.Yani 1000px üzeri ekranlar için tasarlanan web sitelerini, 400px genişliğe sahip akıllı telefonlarda da aynı rahatlıkta kullanmayı amaçlamaktır.

Responsive Tasarım Nasıl Yapılır?

Aslında artık web tasarımcılar için mobile first (mobil öncelikli) tabiri söz konusu.Yani ilk olarak mobil cihazlar için tasarla sonra web tarayıcılarına entegre et anlayışıdır.Fakat bu anlayışın internetin doğuşuna göre çok yeni olması, eski sitelerin bu anlayışa göre tasarlanmadığı gerçeğini değiştirmiyor.

Bu nedenle sadece mantığı kavram anlamında responsive tasarıma geçiş nasıl yapılır kısa bir bilgi vermek istiyorum.

Media Sorguları ve Breakpoints
Resposive tasarım yaparken siteyi breakpoints denilen kırılma noktalarına göre ayırıyoruz.Yani farklı boyuttaki cihazları kümelere ayırıyoruz.Misal 300px genişliğinden küçük siteler, 300 ile 500px arasında olanlar, 500px ile 900px arasında olanlar gibi.

Bu breakpointleri CSS media sorguları(query) ile oluşturuyoruz.Örnek oluşturum şekli : @media screen and(max-width:300px) {} şeklinde.Bu şu anlama geliyor maksimum 300px genişliğe sahip ekranlarda bu kodları çalışacak.

Ölçülendirme
Biliyorsunuz CSS ölçüleri göreceli ve mutlak olmak üzere ikiye ayrılıyor.Responsive olmayan siteler alışkanlık üzerine genelde mutlak ölçü birimi px kullanır.Fakat sitemizi esnek, uyumlu hale getirmek için göreceli ölçü birimleri kullanmamız daha uygun olacaktır.

Bu kapsamda genelde elementlerin boyutu olarak px yerine yüzde(%) ölçü birimi tercih edilir.Bunun yanında font boyutlarında kullanılan px yerine de em veya rem ölçü birimini tercih edilmelidir.

Görsel
Görseller responsive tasarım konusunun en can sıkan kısmıdır.Bu yüzden resimleri mobil uyumlu yapmak için bir çok yöntem ortaya atılmıştır.Bunlardan en basit olan yöntem ise görsele maksimum genişlik değeri vermektir.Mesela sitenizde kullanacağınız bir görselin boyutu ekrandan büyükse, ona max-width: 100%; dedidiğiniz zaman, ekran boyutu aşmaz, eğer ekran küçülürse, fotoğrafta aynı şekilde küçülecektir.

Bir siteyi responsive yapmak başlı başına bir yazı gerektirir.Bu yazının amacı olmadığından sadece mantığı anlamaya yönelik temel bir bilgi vermeye çalıştım.İleride bununla ilgili daha detaylı yazı yazmayı düşünüyorum.

Responsive Tasarım Test Etmek

Kısa bir girizgahtan sonra yazının asıl konusuna ulaşmış bulunuyoruz.Sitenizi mobil cihazlar için uyumlu hale getirdiktan sonra sorununuz ortadan kalkmıyor.Bir de bunun cihazlarda nasıl göründüğünü test etmeniz gerekiyor.
Nasıl ki eskinde sadece tarayıcıları farklılıklarında dolayı sitenizi her tarayıcıda test ediyorsanız, şimdi de farklı ekran boyutlarına sahip cihazlarda sitenizin görünümünü test etmeniz gerekir.

Bunun için internet üzerinde oldukça fazla uygulama mevcut.Bu uygulamalar tasarımınızı farklı ekran boyutlarına göre nasıl göründüğü ile ilgili size görel bilgi veriyor.Hemen hemen bütün uygulamalar aynı işlevi yapıyor.O yüzden aralarında birini seçebilirsiniz.Ya da beinm gibi bir kaçını aynı zamanda kullanabilirsiniz.

Responsinator

Responsinator, hem local çalışmalarınızı hem de aktif sitelerinizi telefon ve tablet ekranları için test edebileceğiniz güzel bir uygulama.Sitenizi url sini girip iPhone,iPad ve Nexus cihazlarda siteniz nasıl görünüyor test edebilirsiniz.

Screenfly

Screenfly benim oldukça yararlandığım çok geniş bir test aralığı olan harika bir test uygulaması.İçerisinde en yangın kullnılan küçük ekranlı telefonladan, büyük ekran televizyonlarda kadar bir çok hazır boyut mevcut.İsterseniz kendiniz de bir boyut belirleyebilirsiniz.Ayrıca ekran döndürme özelliği ile hem yatay hem dikey konumda sitenizi test edebilirsiniz.

Responsive.is

Responsive.is genel bir test için kullanabileceğiniz basit bir uygulama.Web sitenizin ortalama bir laptop,yatay ve dikey tablet ve telefon genişliklerinde nasıl göründüğü hakkında fikir sahibi olabilirsiniz.

Responsivepx

Responsivepx genişlik ve yükselikliği size bırakarak istediğiniz boyutlarda sınırsızca test etmenize olanak sağlayan basit güzel bir test uygulamsı.

Am I Responsive

Am I Resposive de responsive.is’in alternatifi bir uygulama isterseniz buna da göz atabilirsiniz.

Liste buraya kadar ama internette responsive ekran testi için bir çok araç ve uygulama mevcut fakat ben kullanışlı olanları vermeye çalıştım.Umarım işinizi görür.

Bonus: Aslında hiç bunlara gerek kalmadan Google’un tarayıcısı Chrome ile de Responsive ekran testi yapabilirsiniz.Chrome tarayıcısından sitenizi açıp, F12 yada ctrl+shift+j ile geliştirici araçlarını açıyorsunuz.Açılan panelin sol üst köşesinden telefon ikonu göreceksiniz.Ona tıklıyorsunuz ve açılan ekranda istediğiniz akıllı modeli seçerek kontrol yapabilirsiniz.Kolay gelsin.

Bunları da beğenebilirsin