Responsive tasarım, bir web sitesinin telefon, tablet ve masaüstü gibi farklı ekran boyutlarına otomatik uyum sağlayarak her cihazda okunabilir ve kullanılabilir kalmasını sağlayan tasarım yaklaşımıdır.
Responsive tasarım, tek bir web sitesinin farklı ekran genişliklerine göre yerleşimini, yazı boyutlarını ve görsellerini kendiliğinden ayarlamasıdır. Aynı sayfa telefonda tek sütun, tablette iki sütun, geniş ekranda üç sütun görünebilir. Bunu sağlayan teknik, CSS içindeki medya sorguları ve esnek ızgara sistemleridir: tarayıcı ekran genişliğini ölçer, tasarım o genişlik için tanımlanmış kurallara göre yeniden dizilir. Ayrı bir mobil site ya da ayrı bir adres gerekmez; içerik tektir, sunum değişir.
İşletme sahibi için neden önemli
Ziyaretçilerinizin önemli bir kısmı siteye telefondan ulaşır. Telefonda yakınlaştırma yapmadan okunamayan bir sayfa, kullanıcıyı saniyeler içinde kaybeder. Google da sayfaları öncelikle mobil sürümleri üzerinden değerlendirir; bu nedenle mobilde bozuk görünen bir site arama sonuçlarında da geriye düşer. Responsive tasarım ayrıca tek içerik, tek adres mantığıyla bakımı kolaylaştırır: bir düzeltme her cihaza aynı anda yansır.
Örnek
Bursa'da bir mobilya atölyesi, ürün galerisini masaüstünde dört sütun halinde gösteriyor. Aynı galeri telefonda tek sütuna iner, görseller ekran genişliğine sığar, fiyat ve iletişim butonu parmakla rahat basılacak boyutta kalır. Kullanıcı hangi cihazdan gelirse gelsin aynı ürünleri, aynı adreste görür.
Sık yapılan hata
Sitenin yalnızca tasarımcının kendi ekranında test edilmesidir. Masaüstünde kusursuz görünen bir tablo telefonda yatay kaydırma yaratır, menü açılmaz, formlar ekran dışına taşar. Bir diğer hata, mobilde bazı içerikleri tamamen gizlemektir; bu hem kullanıcıya hem de arama motoruna eksik sayfa sunar.
Teklif alırken sorulacak soru
Site hangi ekran genişliklerinde test edilecek ve teslim öncesi gerçek telefon ve tabletlerde kontrol yapılacak mı? Mobilde gizlenen içerik olacak mı, olacaksa hangi gerekçeyle?
Sık sorulanlar
Responsive tasarım ile mobil uygulama aynı şey mi?
Hayır. Responsive tasarım, web sitesinin tarayıcıda her ekrana uyum sağlamasıdır; mobil uygulama ise telefona indirilen ayrı bir yazılımdır.
Mevcut sitem responsive değilse sıfırdan mı yapılmalı?
Çoğu durumda evet; eski sabit genişlikli bir şablonu esnek hale getirmek, yeniden kodlamaktan daha maliyetli ve kırılgan olur.
