Tek bir web sitesi, birçok ekran. Duyarlı tasarım, tek bir düzenin farklı cihaz boyutlarına ve yönlerine uyum sağlamasını sağlar. Bu terim, esnek ızgaralar ve akışkan görüntüler hakkındaki önceki fikirlerden yola çıkarak 2010 yılında Ethan Marcotte tarafından ortaya atılmıştır. Tasarımcılar, masaüstü ve mobil için ayrı siteler oluşturmak yerine, görüntüleme alanı genişliğine göre kendini yeniden düzenleyen tek bir kod tabanı oluştururlar.

Üç teknik bileşen bunu mümkün kılıyor. Akışkan ızgaralar, sabit pikseller yerine yüzdeler kullanır, bu nedenle sütunlar genişler ve daralır. Esnek görüntüler, kapsayıcıları içinde ölçeklenir. Medya sorguları ekran boyutunu algılar ve tanımlanmış kırılma noktalarında farklı CSS kuralları uygular. Üç sütunlu bir masaüstü düzeni, telefonda tek sütuna daralabilir ve gezinme bir hamburger menüsüne dönüşebilir. Amaç, piksel hassasiyetinde kontrol değil, zarif bir uyum sağlamaktır.

Temel teknikler

• Yüzdelere dayalı akışkan tablolar.
• Esnek görüntüler ve medya.
• Tanımlanmış kırılma noktalarında medya sorguları.
• Mobil öncelikli içerik önceliklendirmesi.

Duyarlı tasarım artık standart bir uygulama. Kullanıcılar, bir sitenin telefonda, tablette, dizüstü bilgisayarda veya televizyonda açılması fark etmeksizin çalışmasını bekliyor.