Responsive Tasarım Ne Demek?
İngilizce: Responsive Design
Yayın: · Son güncelleme:
Responsive Tasarım Ne Demek? Kısaca
Responsive tasarım, bir web sitesinin düzeninin, görsellerinin ve yazılarının ekran genişliğine göre kendiliğinden uyum sağlamasıdır. Aynı sayfa telefon, tablet ve bilgisayarda okunaklı ve kullanışlı görünür.
Responsive tasarım ne demek?
Responsive tasarım, Türkçede "duyarlı" ya da "uyarlanabilir" tasarım olarak da geçer. Aynı web sayfasının, açıldığı cihazın ekran boyutuna göre düzenini değiştirmesi anlamına gelir. Ayrı bir mobil site yapılmaz, tek bir sayfa her ekrana uyum sağlar.
Örneğin bir restoranın menü sayfası masaüstünde üç sütun hâlinde görünürken telefonda tek sütuna iner. Yazılar küçülmez, kullanıcı yakınlaştırma yapmak zorunda kalmaz.
Nasıl yapılır?
Duyarlı tasarım üç temel teknikle kurulur. Birincisi esnek ızgaralardır: sütun genişlikleri piksel yerine yüzde veya fr gibi göreli birimlerle verilir. İkincisi esnek görsellerdir: max-width: 100% kuralı, resmin kapsayıcısından taşmasını önler.
Üçüncüsü media query kurallarıdır. Bunlar, belirli ekran genişliklerinde farklı CSS uygulanmasını sağlar. Ayrıca sayfanın başına eklenen viewport meta etiketi, mobil tarayıcının sayfayı doğru ölçekte göstermesi için gereklidir.
Pek çok ekip "önce mobil" (mobile first) yaklaşımını kullanır. Önce dar ekran için tasarlanır, ekran genişledikçe sütunlar ve ek öğeler eklenir.
Nasıl test edilir?
Tarayıcının geliştirici araçlarında cihaz görünümünü açıp farklı ekran genişliklerini deneyebilirsiniz. Ancak gerçek bir telefonda kontrol etmek her zaman daha güvenilirdir.
Dikkat edilecek yerler genellikle geniş tablolar, sabit genişlikli görseller ve çok küçük düğmelerdir. Parmakla rahat dokunulabilen, aralarında boşluk olan düğmeler mobil kullanıcı için büyük fark yaratır.
Sıkça Sorulan Sorular
Responsive tasarım ile mobil uyumlu site aynı şey mi?
Yakın kavramlardır. Mobil uyumluluk sitenin telefonda rahat kullanılmasıdır. Responsive tasarım ise bunu tek bir sayfanın her ekrana uyarlanmasıyla sağlayan en yaygın yöntemdir.
Responsive tasarım SEO'yu etkiler mi?
Dolaylı olarak evet. Google siteleri büyük ölçüde mobil sürümlerine göre değerlendirir, bu yüzden telefonda kötü görünen bir site kullanıcı deneyimi açısından dezavantajlıdır.