Mobil cihazlar gün geçtikçe yaygınlığını arttırıyor ve teknoloji piyasasında daha fazla yer almaya başlıyorlar . Tablet bilgisayarları , akıllı telefonları artık sıkça görmeye başladık . Bir çok işimizi bu cihazlar üserinden yapabiliyoruz,gerek mobil uygulamalar olsun gerek mobil web olsun bir çok alanda bize hizmet veriyorlar.
Ülkemizde mobil iletişimin, mobil teknolojilerin artmasındaki en büyük etmen 3G teknolojisi oldu .3G teknolojisi ile neredeyse her yerden hızlı bir şekilde internete bağlanıp sörf yapabiliyoruz.Fakat mobil internet kollanırken geziniğimiz sitelerin büyük bir çoğunluğunun mobil cihazlara özel bir sürümüyok . google ,facebook , twitter gibi büyük ölçekli sitelerin dışında mobil cihazlara özel sürümü olan site sayısı oldukça az.
Küçük ölçekli siteler için mobil cihazlar için ayrı sürümler yapmak hem maddi olarak hemde zaman olarak oldukça yüksek değerlere çıkabiliyor.
Bu tip sorunlarda bize hem zamandan hemde maddi harcamalardan kurtaran yeni bir uygulama geliştirilmiş. Duyarlı web tasarımı.
Responsive web design yani duyarlı web tasarımı webmaster ların işini kolaylaştıran kullanışlı bir kodlama tekniği. Öncelerden farklı ekran çözünürlükleri için farklı html kodlamalar yapılarak hazırlanan siteler bu yöntemle daha kolay kodlamalar ile yapılabiliyor.Duyarlı web tasarımı temel olarak farklı ekran çözünürlüklerine farklı tasarım kodları belirlenerek çalışıyor yani sadece CSS kodları oluşturarak farklı çözünürlükteki cihazlara uygun tasarımlar oluştura bilirsiniz .
Eğer masaüstü bilgisayarlar gibi büyük ekranlarda gözüken bir nesneyi 320px lik telefonlarda gösternek istemezseniz şuşekilde bir kod yazmanız yeterli :
@media screen and (max-width:320px) {
.sidebar { display:none; }
}
Duyarlı web tasarımını daha iyi anlayabilmek için bir kaç örnek siteye bakalım farkı görebilmek için siteleri açıp tarayıcınızın boyutunu küçültüp büyültün:
Benim en çok beğendiğim site CSS-Tricks çözünürlüğün durumuna göre sağ üsttaraftaki kurbağa renk değiştiriyor :
Form CMS
Staff Anstorp
2011 dConstruct
Duyarlı Tasarım tekniği ile nasıl kodlama yapılır?
Duyarlı Tasarım’ı daha iyi anlatabilmem için daha fazla teknik detaydan bahsetmem gerekiyor. Çünkü Duyarlı Tasarım oldukça ileri seviyede bir kodlama tekniği. Bu nedenle başlangıç seviyesindeki web tasarımcılar için başlangıçta zor gelebilir. Ama Html&CSS ile aranız iyiyse sizi bir basamak daha ileriye götürecek bir teknik bu. Çünkü bu teknik sayesinde Html5 ve CSS 3 ile fazlasıyla haşır neşir olacaksınız.
Duyarlı Tasarım temelde, esnek grid yapıları kullanarak değişken layout’lar oluşturma prensibine dayanıyor. (Esnek gridleri sıfırdan oluşturmak istemeyenler, Duyarlı Tasarım için uygun, hazır framework‘leri internetten bulabilirler. Twitter ve Github işbirliği ile geliştirilen Bootstrap bunlardan bir tanesi.) Tek bir CSS dosyasında, aynı class’lara farklı genişliklerde farklı değerler tanımlanarak geliştiriliyor. Örneğin; bir sitenin Html kodlamasını yaparken, aynı CSS class’larına 767px genişlikten küçük ekranlar için farklı, 767px – 979px arası ekranlar için farklı, 979px’den büyük ekranlar için farklı özellikler tanımlayabiliyorsunuz. Böylece site tasarımının iPhone, iPad, Netbook gibi farklı çözünürlüklü her cihaza özel olarak geliştirilmesi sağlanıyor.
Kaynaklar:
1. http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
2. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
3. http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
4. http://designwoop.com/2012/03/15-detailed-responsive-web-design-tutorials/