Responsive mi Adaptive mi: Kararın Nerede Verildiği Meselesi

Adaptive ve responsive tasarım çoğu yazıda iki ayrı estetik tercih gibi anlatılır. Oysa aralarındaki fark tek bir teknik soruda toplanıyor: düzeni kim seçiyor, sunucu mu tarayıcı mı? Bu sorunun cevabı cache davranışını, arama motorunun siteyi nasıl gördüğünü ve iki yıl sonraki bakım faturasını belirliyor. Karşılaştırma tablolarındaki satırların çoğu bu ayrımın türevi.

Fark estetik değil, karar noktası

Responsive tasarımda tek bir HTML ve CSS vardır. Esnek grid ve medya sorguları düzeni tarayıcıda, viewport genişliğine bakarak kurar. Yaklaşımın adını 2010'da Ethan Marcotte koydu, A List Apart'taki o yazı hâlâ okunmaya değer.

Adaptive tarafta karar sunucuda verilir. Gelen isteğin user agent bilgisine bakılır, önceden hazırlanmış şablonlardan biri döndürülür. Google bu yönteme dynamic serving diyor. Klasik örnekte 320, 480, 760, 960, 1200 ve 1600 piksel için ayrı düzenler bulunur.

İki yöntemi "hangisi daha modern" diye kıyaslamak yerine yanlış tahmin ettiklerinde ne olduğuna bakmak daha çok şey anlatıyor. Responsive yanlış tahmin ederse düzen çirkinleşir, içerik yerinde durur. Adaptive yanlış tahmin ederse kullanıcı doğrudan yanlış siteyi görür.

Adaptive'in hız avantajı cache'te geri ödeniyor

Aynı URL'den farklı cihazlara farklı HTML dönüyorsa, sunucunun Vary: User-Agent başlığını göndermesi gerekir. Bu başlık CDN'e şunu söyler: bu adresin cevabını user agent başına ayrı sakla. User agent dizeleri tarayıcı sürümü, işletim sistemi ve cihaz modeliyle birlikte neredeyse kullanıcıya özel olduğundan, edge cache pratikte parçalanır ve isabet oranı düşer.

Bunun çözümü var: CDN katmanında user agent'ı mobil, tablet ve masaüstü gibi birkaç sınıfa normalize etmek. Cloudflare ve CloudFront bu iş için hazır cihaz başlıkları sunuyor. Yani adaptive'in "daha az bayt indirir" avantajı bedava gelmiyor, edge konfigürasyonu karşılığında alınıyor. Bu ayar yapılmadan tek cihazda ölçüm alırsanız hızlı bir sonuç görürsünüz, site genelinde ise origin'e giden istek sayısı artmış olur.

Adaptive ile m.siteadi.com aynı şey değil

Yaygın karşılaştırma tablolarında adaptive'in SEO notu düşük yazar, gerekçe olarak da ayrı URL ve içerik varyasyonu gösterilir. Burada iki farklı yöntem birbirine karışıyor. Ayrı mobil site başka bir adreste yaşar, adaptive ise aynı adresten farklı HTML döndürür. Ayrı URL sorunu adaptive'in sorunu değil.

Gerçek risk başka yerde. Mobile-first indexing ile Google siteyi mobil sürümünden indeksliyor. Adaptive kurulumda mobil şablon, masaüstü şablonundan daha az metin, daha az yapısal veri ya da daha az iç bağlantı taşıyorsa, arama motorunun gördüğü sürüm eksik olandır. Yani adaptive'in SEO riski URL yapısı değil, şablonlar arası içerik eşitsizliği. Bu da tablodaki tek satırla geçiştirilemeyecek, her sürümde tekrar kontrol edilmesi gereken bir şey.

Responsive'in indirmediğini sandığınız dosyalar

Responsive'e yöneltilen "mobilde gereksiz veri yükü" eleştirisi haksız değil, ama sebebi genelde yanlış anlatılıyor. display: none ile gizlenmiş bir <img> etiketi yine de indirilir. Tarayıcının preload scanner'ı CSS uygulanmadan önce belgeyi tarar ve src değerini indirme kuyruğuna alır. Buna karşılık gizli bir elemana CSS ile verilmiş background-image çoğu tarayıcıda hiç istenmez.

Aradaki bu asimetri, "mobilde gizledim, yüklenmiyor" varsayımının nereden yanlışlandığını gösteriyor. Doğru araçlar srcset, sizes ve <picture>; ağır bölümler için de sunucu tarafında koşullu render. Fazladan bayt sorunu gerçek, ama karşılığında ayrı şablon setleri bakmak fazla pahalı bir çözüm.

Bakım maliyeti şablon sayısıyla büyüyor

Altı kırılım noktası altı ayrı düzen demek. Yeni bir özellik eklendiğinde altısında da görünmesi, altısında da test edilmesi gerekir. Regresyon yüzeyi şablon sayısıyla doğru orantılı büyüyor, üstelik bu büyüme sessiz: sorun genelde en az kullanılan şablonda, aylar sonra fark edilir.

Responsive'de aynı özellik tek bir CSS gövdesinde yaşar. Kırılım noktaları o gövdenin içinde olduğu için değişiklik tek yerde yapılır. İki kişilik bir ekipte adaptive şablon seti, bakımı sürekli ertelenen ikinci bir ürüne dönüşüyor.

Pratikte hangisi

İşlerin büyük çoğunluğunda responsive. Bu bir uzlaşma değil, kaynakların nereye gittiğine bakınca çıkan sonuç.

Adaptive'i savunulabilir kılan durumlar dar ama gerçek. Cihaz başına farklı bir ürün sunuyorsanız (mobilde hızlı tarama, masaüstünde ağır bir yönetim ekranı), reklam envanteriniz cihaz kırılımıyla satılıyorsa ya da hedef pazarınızda düşük bantlı cihazlar baskınsa ve edge tarafını yönetecek biri varsa hesap tutabilir. Bu üçünden hiçbiri sizin durumunuz değilse, adaptive'den bekleyeceğiniz kazanç doğru resim etiketleri ve tembel yüklemeyle zaten alınabilir.

Karar aşamasında "hangisi daha hızlı" sorusu yanıltıyor, çünkü ikisi de doğru kurulduğunda hızlı. Daha faydalı soru şu: bu düzeni iki yıl boyunca kim güncelleyecek?