Mobil Site ve Masaüstü Site Ayrımı: Ne Zaman Anlamlı, Ne Zaman Zarar
"Mobil site mi masaüstü site mi" sorusu genelde iki ayrı soruyu tek pakete koyar. Birincisi mimari: aynı içeriği iki farklı adreste mi yayınlayacaksın, yoksa tek kod tabanı her ekrana mı uyum sağlayacak. İkincisi içerik: küçük ekranda kullanıcıya neyi göstereceksin. Birincinin cevabı yıllar önce netleşti, ikincisi hâlâ her projede yeniden tartışılıyor ve çoğu ekip yanlış tarafa düşüyor.
Ayrı mobil site: mimarinin faturası
Ayrı mobil site, klasik kurulumda m.siteadi.com gibi bir alt alan adında yaşayan ikinci bir sitedir. Ziyaretçinin tarayıcı kimliği (user agent) sunucuda okunur, telefondan geliyorsa mobil sürüme yönlendirilir. Kâğıt üzerinde temiz görünür: her cihaza kendi arayüzü.
Pratikte bu kurulum üç ayrı yerde borç biriktirir. Aynı sayfanın iki adresi olduğu için arama motoruna hangisinin asıl olduğunu canonical ve alternate etiketleriyle çift yönlü anlatman gerekir; biri eksik kalırsa iki sürüm birbiriyle yarışır. İki kod tabanı, her içerik değişikliğinin iki kez yapılması demektir ve zamanla mobil sürüm geride kalır. Üçüncüsü en sinsisi: cihaz tespiti kırılgan bir tekniktir. Tablet hangi sürüme gider? Masaüstünde tarayıcıyı ekranın yarısına daraltan kullanıcı? Masaüstü kimliğiyle istek gönderen tablet tarayıcısı? Her yeni cihaz sınıfı, sunucudaki kural listesine yeni bir istisna ekler.
Bu yüzden ayrı mobil site bugün istisnai bir tercihtir. Anlamlı olduğu yer var: bant genişliğinin gerçekten kısıtlı olduğu pazarlar, ya da mobilde işin kendisinin farklılaştığı ürünler. Bir bankanın masaüstünde toplu ödeme dosyası yükleten ekranını küçük ekrana sığdırmaya çalışmak yerine mobilde bambaşka bir akış kurmak makul. Ama "mobilde daha hızlı açılsın" gerekçesi tek başına ikinci bir site kurmayı haklı çıkarmaz; o hızı tek kod tabanında da elde edersin.
Mobilde içerik kesmenin görünmeyen bedeli
Asıl tartışmalı kısım burası. Yaygın tavsiye "mobilde sadeleştir, gereksiz içeriği çıkar" der. Bu tavsiye, arama motorlarının masaüstü sürümü indekslediği dönemden kalmadır ve o dönem bitti. Google artık sayfanın mobil sürümünü indeksliyor. Yani mobil şablondan çıkardığın içerik, sadece telefondaki ziyaretçiden değil, arama sonuçlarından da çıkıyor.
Bir kurumsal sitede mobil görünümde display:none ile gizlenen teknik özellik tablosunun, aynı sayfanın uzun kuyruk sorgularındaki görünürlüğünü de birlikte götürdüğünü gördüm. Sayfa masaüstünde eksiksizdi, kimse bir şey sildiğini düşünmüyordu.
Burada ince ama belirleyici bir ayrım var. İçeriği HTML'den hiç üretmemek ile üretip görsel olarak katlamak aynı şey değil. Akordeon ya da sekme içinde duran metin sayfanın kaynağında mevcuttur, taranır ve değerlendirilir; kullanıcı da başlığa dokunarak ulaşır. Sunucuda hiç basılmayan metin ise yoktur. Mobilde sadeleştirme dediğimiz şey ikincisi değil, birincisi olmalı: aynı içerik, farklı sıralama ve farklı görünürlük düzeyi.
Sadelik az içerik değil, iyi sıralama demek
Küçük ekranın gerçek kısıtı içerik miktarı değil, dikey sıra. Masaüstünde yan yana duran üç sütun mobilde alt alta gelir, dolayısıyla soldaki sütunun içeriği en üste, sağdaki en alta düşer. Kullanıcının ilk ekranda ne göreceğini bu sıra belirler ve çoğu sitede bu sıra kimsenin kararı değildir, sadece masaüstü düzeninin yan etkisidir.
Yapılacak iş, mobil düzeni bağımsız bir karar olarak ele almaktır: bu sayfaya telefondan gelen kişi ne yapmaya çalışıyor, o eylem ilk ekranda mı? Bir ürün sayfasında fiyat ve sepete ekleme, bir hizmet sayfasında telefon numarası, bir makalede metnin kendisi. Geri kalan her şey aşağıda durabilir, silinmesi gerekmez.
Cihazı değil, kullanılabilir alanı hedefle
Responsive tasarımın temel mantığı, kararı cihaz markasından değil ölçülebilir koşullardan almaktır. Ekran genişliği bir koşuldur, ama tek koşul değil. İşaretleme cihazının hassasiyetini de sorgulayabilirsin:
@media (min-width: 48rem)ile düzeni pencere genişliğine göre değiştirirsin, telefonda mı tablette mi olduğunu bilmene gerek kalmaz.@media (pointer: coarse)ile parmakla kullanılan arayüzleri ayırırsın; dokunmatik ekranlı bir dizüstü bilgisayar da bu kümeye girer, ki doğrusu budur.@media (hover: none)ile fareyle üzerine gelince açılan menülerin çalışmayacağı ortamları yakalarsın.
Dokunma hedefi ölçüsü de tahmin işi değil. Apple'ın arayüz kılavuzu 44 punto, Google'ın Material rehberi 48 dp alt sınır verir. Bu sayılar parmak ucunun temas alanından geliyor ve ikisi de pratikte aynı yere çıkıyor: yaklaşık yarım santimetrekarelik dokunulabilir bir alan. Butonun görünen kutusu daha küçük olabilir, önemli olan tıklamayı alan alanın büyüklüğüdür; iç boşlukla büyütmek çoğu durumda yeterli.
"Masaüstü sürüme geç" bağlantısı bir yama işaretidir
Eski mobil sitelerin altında duran o bağlantı, aslında bir itiraftır: mobil sürümde bir şey eksik ve kullanıcı onu bulamıyor. Tek kod tabanlı bir sitede böyle bir bağlantıya ihtiyaç duyuyorsan, sorun düzenin kendisindedir. Kullanıcıyı arayüz değiştirmeye zorlamak yerine eksik olanı mobil düzene yerleştir.
Tek meşru istisnası, gerçekten geniş ekran isteyen ekranlardır: çok sütunlu veri tabloları, karşılaştırmalı raporlar, tasarım araçları. Orada bile doğru davranış "masaüstüne geç" demek değil, tabloyu yatay kaydırılabilir yapmak ya da mobilde kart görünümüne dönüştürmektir.
Karar nerede veriliyor
Sıradan bir kurumsal site, e-ticaret ya da yayın sitesi için cevap net: tek kod tabanı, tek adres, düzen ekrana göre değişsin. İkinci bir mobil site kurmayı ancak mobil kullanıcının yaptığı iş masaüstündekinden gerçekten farklıysa ve bu farkı ölçtüysen düşün.
Ölçmenin de somut bir karşılığı var. Analitik aracında cihaz kırılımını açıp mobil ve masaüstü için dönüşüm oranını, sayfada kalma süresini ve en çok terk edilen adımı ayrı ayrı bak. Mobilde belirgin şekilde düşen tek bir adım varsa sorun genel bir "mobil uyumluluk" meselesi değil, o adımdaki somut bir engeldir: küçük bir form alanı, yanlış klavye tipi, ekranı kaplayan sabit bir başlık. Bu tür engeller tek tek çözülür ve çözüldüğünde kazanç ikinci bir site kurmaktan çok daha ucuza gelir.