Responsive Tasarım
Kısa tanım
Responsive tasarım, bir web sitesinin telefon, tablet ve masaüstü ekranlarında düzenini ve yazı boyutunu otomatik olarak ayarlaması demektir.
Aynı sayfa kodu telefonda tek sütun, tablette iki sütun, masaüstünde geniş bir ızgara halinde görünür. Bunu CSS içindeki esnek ızgaralar ve ekran genişliğine göre devreye giren kurallar sağlar. Görsel, buton ve yazı boyutu ekrana göre küçülüp büyür, ziyaretçi sayfayı yatay kaydırmak zorunda kalmaz.
Responsive tasarım artık standarttır çünkü ziyaretçilerin büyük bölümü siteye telefondan giriyor ve Google sıralamayı öncelikle mobil görünüme bakarak yapıyor.
Adaptif tasarımla karıştırılır. Adaptif yaklaşımda her cihaz için ayrı sabit düzen hazırlanır, responsive tasarımda ise tek düzen esnek kurallarla kendini uyarlar; bu yüzden bakımı daha kolaydır.
En sık yapılan hata, düzeni yalnız masaüstü için kurup mobil görünümü sonradan sıkıştırmaktır; bu, küçük dokunma alanları ve iç içe geçen menüler doğurur. Doğrusu mobil öncelikli çalışmaktır: önce dar ekran için tasarlanır, sonra genişlik arttıkça yeni sütunlar eklenir, böylece parmakla dokunulacak her öğe yeterince büyük ve aralıklı kalır.
Neden önemli
Sitenizi telefondan açan bir müşteri düzeni bozuk görürse geri döner. Responsive tasarım bu kaybı önler, tek bir site tüm cihazlarda çalışır, ayrı mobil site geliştirme ve bakım maliyetini ortadan kaldırır.
Örnek senaryo
Bir zemin kaplama üreticisinin ürün kataloğu masaüstünde geniş ızgara, telefonda tek sütun halinde açılır; aynı sayfa, aynı içerik, farklı bir düzen kurulumu gerekmez.
