Responsive ve Adaptive Tasarım Arasındaki Gerçek Fark
Responsive mi adaptive mi sorusu genelde iki eşit seçenek arasında bir tercih gibi sunulur. Değil. Adaptive tasarım, medya sorgularının tarayıcılarda güvenilir çalışmadığı bir dönemin çözümüydü; bugün ayakta kalan gerekçesi epeyce daraldı ve ona atfedilen hız avantajının büyük kısmı aslında başka bir yerden geliyor.
İkisi aynı problemi farklı katmanda çözer
Responsive tasarımda karar tarayıcıda verilir. Tek bir HTML, tek bir CSS gider; düzen, medya sorguları ve esnek birimlerle ekran genişliğine göre kendini toplar. Adaptive tasarımda karar sunucuda verilir: gelen isteğin User-Agent başlığına bakılır, cihaz bir sınıfa yerleştirilir ve o sınıf için önceden hazırlanmış şablon gönderilir.
Fark kozmetik değil. Birinde tek bir çıktı vardır ve o çıktı her yerde çalışmak zorundadır. Diğerinde çıktı sayısı kadar bakım yüzeyi vardır ve her içerik değişikliğinin doğrulanması gereken yer sayısı da o kadardır.
Hız avantajı iddiası nereden geliyor
Adaptive'in klasik satış argümanı şudur: mobil kullanıcıya sadece mobil için gereken kod gider, sayfa hızlı açılır. Doğru kısmı var ama nedeni yanlış yerde aranıyor. Hızı getiren şey sunucunun cihazı tanıması değil, gönderilmeyen kod. Aynı kazanç responsive bir sayfada da mümkün: görselleri srcset ile boyuta göre servis edersen, kritik olmayan CSS'i ertelersen, ağır bileşeni ekran genişliği eşiği geçtiğinde yüklersen sonuç benzer.
Buna karşılık cihaz algılamanın kendi faturası var ve bu fatura genelde hesaba katılmaz. Aynı URL'nin cihaza göre farklı yanıt döndürmesi demek, önbelleğin doğru davranabilmesi için yanıtın Vary: User-Agent ile işaretlenmesi demektir. User-Agent değerlerinin çeşitliliği pratikte sınırsız olduğu için CDN o adresi tek bir kayıt olarak değil, yüzlerce ayrı kayıt olarak tutmaya başlar. Bir e-ticaret projesinde CDN isabet oranının neden otuzlu yüzdelerde takıldığını araştırırken sebebin tam olarak bu olduğunu görmüştüm: şablonlar ayrılmıştı, önbellek de onunla birlikte parçalanmıştı.
Bilinmeyen cihaz en ağır şablona düşer
Adaptive anlatısının kendi içinde çelişkili bir yeri var. Aynı listede hem "her cihaz için optimize edilmiş deneyim" hem de "şablonu olmayan yeni cihazlarda uyum sorunu" yazar. İkisi yan yana durunca asıl soru ortaya çıkıyor: eşleşme bulunamayınca ne gönderiliyor?
Cevap neredeyse her zaman masaüstü şablonu, yani setin en ağırı. Tanınmayan bir tarayıcı, yeni çıkmış bir cihaz ya da User-Agent değerini kısaltan bir gizlilik ayarı, kullanıcıyı doğrudan en kötü senaryoya düşürür. Responsive'de böyle bir uçurum yok; bilinmeyen genişlikte de düzen bozulmaz, sadece en yakın davranışa oturur.
Adaptive hangi durumda hâlâ doğru
Bu yaklaşımı tamamen gömmek de yanlış olur, ama ölçütü "daha iyi deneyim" gibi bir cümle değil. Adaptive, gönderilen içeriğin kendisi bağlama göre değiştiğinde anlamlı: mobilde ekranın tamamını kaplayan kart tarayıcı, masaüstünde aynı verinin tablo görünümü, sahada çalışan kullanıcıya açılışta kamera ve konum, ofistekine raporlama. Burada mesele düzeni sıkıştırmak değil, farklı bir ürün akışı sunmak.
Sadece kolonların dizilişi değişiyorsa adaptive'e geçmenin karşılığı yok. İki şablon, iki test döngüsü, bölünmüş bir önbellek ve zamanla birbirinden ayrışan iki içerik ödersin.
Bugünkü tartışma breakpoint tartışması değil
Responsive tasarımın klasik zayıf noktası, kararı sayfa genişliğine bağlamasıydı. Dar bir kenar çubuğuna yerleştirilmiş bir kart, pencere geniş olduğu için kendini geniş sanıyordu. Container query'ler bunu çözdü: bileşen artık pencereye değil, içine yerleştirildiği kabın genişliğine bakıyor. Bu, adaptive'in "bağlama göre farklı görünüm" vaadinin büyük kısmını sunucuya hiç uğramadan karşılıyor.
Yeni bir projeye başlıyorsan responsive'i varsayılan al, bileşen düzeyinde container query kullan, ağırlığı gerçekten gerektiği yerde koşullu yükle. Cihaz algılamayı ancak sunacağın işlevin kendisi cihaza göre değiştiğinde masaya koy, ondan önce değil. Google'ın SEO başlangıç rehberi de tek URL üzerinden servis edilen yapıyı bu yüzden öneriyor: aynı adres, aynı içerik, bölünmemiş sinyal.