mobil

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; }
}

[/css]

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/

5. http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/