Bu günlerde hemen hemen her yeni müşteri, web sitesinin mobil versiyonunu istiyor. Sonuçta site ziyaretçileri için çözünürlük çok önemlidir: BlackBerry için bir tasarım, iPhone, iPad, netbook için bir tasarım - ve tüm ekran çözünürlükleri de uyumlu olmalıdır. Web tasarım ve geliştirme alanında, sonsuz yeni kararlara ve cihazlara ayak uyduramadığımız noktalara çabucak yaklaşıyoruz. Birçok web sitesi için, her çözünürlük ve yeni cihaz için bir web sitesi sürümü oluşturmak imkansız veya en azından pratik olmaz.
Duyarlı tasarım, web sitenizin, kullanıcıların görüntülediği cihaza uyum sağlamasına izin verir. Sizin için daha az iş anlamına gelir, her yerde bir kez yayınlanmasını sağlar. Responsive web tasarımı hakkında hiçbir şey bilmiyorsanız, o zaman doğru yerdesiniz.
Duyarlı yani Responsive web tasarımı 3 temel bileşenden oluşur.
1.Esnek Izgara tabanlı düzen
2.Esnek Medya
3.Medya sorguları
Duyarlı(Responsive) tasarım, bir miktar kontrolden vazgeçme ve bunu benimsemeyi öğrenme ile ilgilidir. Yapmamız gereken ilk şey tasarımımızı berraklaştırmak. Sitenin her boyutunda çalışmak ve her genişlik için mükemmel bir düzen bulmak çok zor olurdu. Bunun yerine, değişimin ana noktalarını buluruz ve sonra her şeyin kendi aralarında ezilmesine ve uzanmasına izin veririz.
Web ilk geldiğinde tüm sayfalar köprülü metinlerden ibaretti. Akışkan bir bilgi ağıydı. Sonra karışıma görüntüler ekledik, sonra gömdüler(Embeded Kodlar), sonra iframe'ler ve videolar…. ve bu noktada, web sabit genişlikteki tablolara ve CSS'ye çevrilmişti.
Başka bir deyişle, web sitesi, kullanıcının tercihlerine otomatik olarak cevap verecek teknolojiye sahip olmalıdır. Bu, piyasadaki her yeni gadget için farklı bir tasarım ve geliştirme aşamasına duyulan ihtiyacı ortadan kaldıracaktır.
Duyarlı tasarım CSS “medya sorguları” ile gerçekleştirilir. Medya sorgularını CSS kurallarını koşullu olarak uygulamanın bir yolu olarak düşünün. Tarayıcıya, kullanıcının cihazına bağlı olarak belirli kuralları yoksayması veya uygulaması gerektiğini söylerler.
Uygulama, esnek ızgaraların ve mizanpajların, görüntülerin ve CSS medya sorgularının akıllıca kullanılmasının bir karışımından oluşur. Kullanıcı dizüstü bilgisayarından iPad'e geçiş yaparken, web sitesi otomatik olarak çözünürlük, görüntü boyutu ve komut dosyası oluşturma yeteneklerine uyum sağlamak için geçiş yapmalıdır.