Duyarlı tasarım, web arayüzlerini görüntüleyen cihazın boyutuna ve yeteneklerine uyum sağlayacak şekilde oluşturmaya yönelik bir yaklaşımdır; akışkan düzenler, esnek resimler ve CSS medya sorguları kullanarak tek bir kod tabanını farklı görüntüleme alanlarında yeniden düzenler. 2010 yılında Ethan Marcotte tarafından bir uygulama adı olarak tanıtılan bu yöntem, ayrı masaüstü ve mobil siteler oluşturma yaklaşımının yerini aldı ve artık neredeyse tüm web çalışmaları için varsayılan beklenti haline geldi.
En büyük avantajı, birden fazla uygulama yerine tek bir uygulamayı sürdürmektir. Ayrı mobil siteler zamanla birbirinden farklılaşır, tutarsızlıklar birikir, analizleri ve arama dizinlemeyi karmaşıklaştırır ve her değişikliğin maliyetini ikiye katlar. Duyarlı bir uygulama, içeriği, URL'leri ve işlevselliği birleşik tutar; bu da arama motorlarının sayfaları nasıl dizinlediği ve sıraladığıyla uyumludur, çünkü mobil öncelikli dizinleme aynı URL'nin mobil görünümünü değerlendirir.
Yaygın bir yanılgı, duyarlılığın yalnızca bir düzenin bozulmaması anlamına geldiğidir. Dar bir görüntüleme alanında sütunları bir yığın halinde yeniden düzenlemek minimum gerekliliktir, hedef değil. Gerçek duyarlılık, farklı cihazlarla ilişkili farklı bağlamı, yeteneği ve amacı hesaba katar: imleçler yerine parmaklar için boyutlandırılmış dokunma hedefleri, sıkıştırılmış masaüstü menüleri yerine küçük ekranlara uygun gezinme kalıpları, her şey dikey olarak üst üste yığıldığında en önemli materyali ilk sıraya koyan içerik önceliklendirmesi ve uygun giriş türlerini ve klavyeleri kullanan formlar.
Performans, duyarlı tasarım uygulamalarının pratikte en sık başarısız olduğu noktadır. Görsel olarak uyum sağlarken aynı zamanda masaüstü boyutunda resimler, tam JavaScript paketleri ve gereksiz bileşenler indiren bir düzen, doğru görünen ancak maliyeti en az karşılayabilen cihazlarda ve bağlantılarda kötü performans gösteren bir sayfa sunar. Uygun kaynak setlerine sahip duyarlı resimler, küçük ekranlarda görüntülenmeyen bileşenlerin koşullu yüklenmesi ve kritik olmayan kaynakların ertelenmesi, bu yaklaşımın yalnızca masaüstünde yeniden boyutlandırılmış bir tarayıcıda değil, sahada da işe yaramasını sağlayan unsurlardır.
Duyarlı çalışma testleri, yalnızca tarayıcı boyutlandırması değil, gerçek cihazlar gerektirir. Emülatörler, dokunma hassasiyetindeki kusurları, gerçek ağ koşullarını, orta seviye donanımlardaki bellek kısıtlamalarını veya sistem klavyelerinin ve tarayıcı arayüzünün dikey alanı nasıl kullandığını yeniden üretmez. Klavye tarafından gizlenen girişler, küçük bir ekranın çoğunu kaplayan yapışkan öğeler ve tek bir geniş öğenin neden olduğu yatay taşma gibi en yaygın kusurların çoğu, masaüstü emülasyonunda görünmezken telefonda hemen fark edilir.
Duyarlı tasarım, sıklıkla göz ardı edilen ve erişilebilirlik hatalarının yaygın bir kaynağı olan metin ölçeklendirme ve yakınlaştırmayı da hesaba katmalıdır. Sabit piksel boyutlarıyla oluşturulmuş bir düzen, cihaz genişliklerinde doğru şekilde yeniden düzenlenebilirken, kullanıcı tarayıcısının varsayılan metin boyutunu artırdığında veya yüzde iki yüze yakınlaştırdığında (ki bu, önemli sayıda insanın sürekli olarak kullandığı bir ayardır) tamamen bozulabilir. Bu koşullar altında kapsayıcıları aşan, kırpılan veya yatay kaydırma gerektiren içerik, hem kullanılabilirlik hem de erişilebilirlik standartlarını karşılamaz. Artırılmış metin boyutu ve yüksek yakınlaştırma seviyelerinde test yapmak dakikalar sürer ve cihaz genişliği testinde asla ortaya çıkmayan bir hata kategorisini yakalar, çünkü iki kısıtlama düzeni farklı şekillerde zorlar.
Duyarlılık, sayfa düzenini, içerik stratejisini ve sunumu kapsadığından, yalnızca kırılma noktalarını ayarlamakla nadiren iyileştirilir. ürün tasarımı Kalıcı yaklaşım, bir tasarım sistemi içinde görünüm pencereleri genelinde düzeni, aralığı ve bileşen davranışını tanımlamaktır; böylece yeni sayfalar varsayılan olarak doğru davranışı devralır. Performans tarafı ise şunlara aittir: web performansı Çünkü mobil cihazlarda dönüşüm sağlayan duyarlı bir site ile sağlamayan bir site arasındaki fark genellikle yerleşim düzeninden ziyade ağırlık ve yükleme stratejisiyle ilgilidir.