Responsive Tasarım

 Unutmayın! Responsive tasarım ile ayrıca mobil web sitesi yaptırmanıza gerek yok.

Responsive tasarım yapmak yeni nesil tasarımlar adına büyük önem taşımaktadır ve Yurtdışında bir çok web sitesi artık responsive olarak tasarlanmaktadır. Responsive Design Web Sitesi araması ile en iyi siteleri inceleyebilirsiniz. Web tasarım kavramı gelişen internet dünyasıyla beraber hızlı bir değişimin içerisine girmiş oldu. Responsive design kavramı da günümüzde sıklıkla kullanılan bir terim olmakta. Ancak ne yazık ki firma sahipleri bu kavramın ne olduğunu tam olarak bilmediği için web siteleri için oldukça avantajlı olan responsive tasarım imkanından mahrum kalıyorlar. Responsive tasarım, bilgisayar, tablet, telefon ve benzeri tüm ekranlarda; yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.

Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

• Tabletlerin en geniş çözünürlüğü 960px’dir.
• Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
• Dikey telefonların en geniş çözünürlüğü 479px’dir.

Bu boyutlara dikkate aldığımızda bizim en az 4 seçeneğimiz oluyor; tabletler için tasarım,yatay telefonlar için tasarım,dikey telefonlar için tasarım ve gerçek (bilgisayar üzerindeki) web tasarım. İşte Css bu konuda hızır gibi yetişiyor ve her çözünürlüğe uygun kodlama yapmamıza yardımcı oluyor.

Çözünürlükler için CSS Kodları

• 960px den düşük çözünürlüklerde:@media only screen and (max-width: 960px)
• 801px ve 959px arasındaki çözünürlüklerde:@media only screen and (min-width: 801px) and (max-width: 959px)
• 800px den düşük tüm çözünürlüklerde:@media only screen and (max-width: 800px)
• 480px ve 759px arasındaki çözünürlüklerde:@media only screen and (min-width: 480px) and (max-width: 759px)
• 479px den düşük tüm çözünürlüklerde:@media only screen and (max-width: 479px)

Son Olarak Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:meta name=”viewport” content=”width=device-width, initial-scale=1.0″

Responsive web tasarımı google çok sevmektedir ve arama sonuçlarında responsive siteler her zaman ön plandadır. Bununla beraber, mobil web sitesi yaptırmak için ayrıca ücret vermeniz gerekmemektedir.

Mailing tasarımları da responsive olarak yapılmaktadır. Böylece mail telefondan veya tabletten açıldığı zaman profesyonel bir şekilde gözükmektedir.