Bir web sitesini önce telefonunuzda, sonra dizüstü bilgisayarınızda, ardından da televizyonunuzda açın. Eğer üçünde de gözlerinizi kısmadan veya yakınlaştırmadan doğru görünüyorsa, duyarlı tasarım (responsive design) ile oluşturulmuştur. Bu yaklaşım, tek bir kod tabanının düzenini, resimlerini ve tipografisini hangi ekrana denk gelirse gelsin uyarlamasını sağlar.

Ethan Marcotte, mobil taramanın hızla yaygınlaştığı ve tasarımcıların bir seçimle karşı karşıya kaldığı 2010 yılında bu terimi ortaya attı: Her cihaz için ayrı siteler mi yoksa esnek bir site mi oluşturmak? Duyarlı tasarım kazandı. Temel araçlar akışkan ızgaralar, esnek resimler ve medya sorgularıdır. Medya sorgusu, tarayıcıya görüntüleme alanının ne kadar geniş olduğunu sorar ve cevaba bağlı olarak farklı CSS kuralları uygular.

Bir tasarımı duyarlı kılan nedir?

• Sabit pikseller yerine yüzdeler kullanan akışkan ızgaralar.
• Kapladıkları ortam içinde ölçeklenebilen esnek görüntüler.
• Farklı ekran boyutları için kırılma noktaları uygulayan medya sorguları
• Mobil düzenlerde dokunmatik ekran dostu hedefler

Amaç sadece içeriği küçük bir ekrana sığdırmak değil. Her bağlamda okunabilirliği, hiyerarşiyi ve kullanılabilirliği korumaktır. Üç sütunlu bir masaüstü düzeni, telefonda tek sütuna indirgenebilir. Hamburger menü, tam bir gezinme çubuğunun yerini alabilir. İyi bir duyarlı tasarım kaçınılmaz gibi görünür, sanki site her zaman cihazınızda bu şekilde görünmek üzere tasarlanmış gibidir.