Responsive Web Design

Yakın zamanda oldukça popülerleşen bir yönelim diyebiliriz. HTML5 ve CSS3 ile gerçekleştirilmesi çok basit hale getirilmiştir. Kısaca web sitesinin görünümünün farklı ekran boyutlarında farklı davranması diyebiliriz. CSS Media Query ile belli pikselde belli bir css yüklenmesini sağlıyoruz. Bu sayede farklı tasarımları farklı cihazlara, yani farklı ekran çözünürlüklerinde kullanıcı deneyimini artıracak şekilde uygulayabiliyoruz.

Örneğin e-ticaret tasarımını kodluyorum. Bu web sitesi 1024×768, 1920×1080 veya 540 x 960 ekran çözünürlüklerinde farklı davranmalı. 540×960 ekranda yan yana 10 tane ürün koyamazsınız, veya karınca kadar linkler gösteremezsiniz. Mesela geniş ekranlar için mükemmel bir arka planı görseliniz var. Yüksek çözünürlüklü ekranlarda hoş durabilir ama mobil telefon için boş yere yüklenmiş olur. Mobil çözünürlük için CSS yazarken bu arka plan görselini göstermeyebilirsiniz.

Sadece html elementlerine css yazmaktan başka sitenizdeki görselleri de farklı cihazlarda farklı boyutta gösterebilirsiniz. Mesela geniş ekranda uzun tuttuğunuz header görseli mobil telefon için kısa ve daha yüksek tutulabilir.

responsive-web-design

Bundan 3-4 sene öncesine kadar Internet Explorer 6 ile uğraşıp durduk. Çözünürlük başımıza bela oldu. En kötü ihtimale göre 980px siteler tasarladık. Şimdi hem ekran boyutlarıyla, flash desteğiyle, HTML5 ve CSS3 desteğiyle, cihaz tipleriyle (tablet, akıllı telefon) karşı karşıyayız. Responsive Web Design yaklaşımı ve bunu mümkün kılan teknolojiler sayesinde bu uyum sorunlarına çok güzel çözüm yaratabiliyoruz.

Aynı curcuna mobil programlama tarafında da mevcut. iOS, Android, Windows Phone, Blackberry, Bada gibi mobil işletim sistemlerimiz var. Tamam iOs’da belli bir istikrar var. Cihazlar belli, işletim sistemi versiyonu belli. Peki Android? Farklı ekranlar, farklı boyutlar, farklı işlem güçleri, farklı işletim sistemi versiyonları. Şuan için buna PhoneGap en uygun çözüm görünüyor. HTML5, CSS ve Javascript kullanarak tüm platformlarda çalışacak uygulamalar geliştirebiliyoruz. Üstelik GPS, G Sensor, Rehber gibi native uygulamaların  erişebildiği tüm API’lara erişebiliyoruz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İnsan mısınız? * Time limit is exhausted. Please reload CAPTCHA.