“Sitemiz mobil uyumlu” cümlesi neredeyse her ajans teklifinde geçiyor. Peki telefonda açıldığında sitenin küçülüp sığması mobil uyum mu demek? Kısmen. Ama bu cümle, telefonda gerçekten iyi çalışan bir siteyle, masaüstü tasarımın telefona sıkıştırılmış hâlini aynı kefeye koyuyor.
Aradaki fark küçük bir terim meselesi gibi görünse de ziyaretçinin kaç saniye kalacağını, forma ulaşıp ulaşmayacağını belirliyor. Gelin farkı adım adım açalım.
Mobil uyumlu ne demek?
Mobil uyumlu (responsive) tasarım, sitenin ekran genişliğine göre kendini yeniden düzenlemesi demek. Üç kolonlu bir bölüm telefonda tek kolona iniyor, menü hamburger simgesine dönüşüyor, görseller küçülüyor. Bunun ana amacı içeriğin taşmadan görünmesi.
Bu, çok değerli ve artık zorunlu bir temel. Ama tasarım masaüstünde düşünülüp sonra küçültülürse, telefon deneyimi ikinci sınıf kalır. İçerik sığar ama kullanılabilirlik kaybolur.
Mobil öncelikli ne demek?
Mobil öncelikli (mobile-first) yaklaşımda tasarım süreci telefondan başlar. Önce en küçük ekranda ne olması gerektiğine karar verilir: hangi bilgi en önemli, hangi eylem ilk sırada? Ardından büyük ekrana genişletilir. Yani telefon “sığdırılacak” bir versiyon değil, ana versiyondur.
Bu fark, tasarım kararlarını değiştirir. Masaüstünde yan yana beş öğe kolayca dizilir; telefonda beşini birden koyamazsınız. Mobil öncelikli düşünen tasarımcı bu yüzden en önemli iki öğeyi seçmek zorunda kalır ve bu, çoğu kez masaüstünü de daha odaklı yapar.
Somut fark: iletişim eylemi
Bir klinik sitesini düşünün. Uyumlu ama masaüstü odaklı sitede telefon numarası sayfanın sağ üstünde küçük bir metin olarak duruyor; telefonda bu, üst menünün altında kayboluyor. Mobil öncelikli sitede ise ekranın alt kısmında sabit bir “Ara” ve “WhatsApp” butonu var; ziyaretçi sayfanın neresinde olursa olsun tek dokunuşla ulaşabiliyor.
Bu tür bir ayrıntı, ziyaretçi ile iletişim arasındaki sürtünmeyi azaltıyor. Ölçülebilir bir kazanç vaat etmek doğru olmaz ama sürtünmenin dönüşümü öldürdüğü iyi bilinen bir gerçek. Form tasarımı için web sitesinde form doldurma oranını artıran değişiklikler yazısına göz atabilirsiniz.
Metin ve okunabilirlik farkı
Uyumlu ama mobil düşünülmemiş sitelerde yazı tipi genellikle küçüktür; ziyaretçi yakınlaştırmak zorunda kalır. Uzun paragraflar telefonda duvar gibi durur. Mobil öncelikli yaklaşımda satır uzunluğu, satır aralığı, yazı boyutu telefon için ayarlanır; paragraflar kısalır ve başlıklar taramayı kolaylaştırır.
Bir kural: telefonda okuyanlar genellikle tarar, okumazlar. Başlıklar, kısa cümleler, madde işaretleri buna göre yerleştirilmelidir.
Menü ve gezinme
Masaüstünde yatay menüde sekiz öğe rahat sığar. Telefonda sekiz öğelik bir hamburger menü ziyaretçiyi yorar. Mobil öncelikli tasarımda menü sadeleşir: en fazla beş öğe, en önemli sayfalar önde ve ana eylem her zaman görünür. Ayrıca aramaya gerek kalan büyük sitelerde arama kutusu belirgin olur. Dokunma alanlarının boyutu ise ayrı bir konu; parmakla tıklanabilir tasarım yazısında ayrıntılı.
Hız meselesi
Mobil öncelikli tasarım hız kararlarını da etkiler. Telefondaki bağlantı ve işlemci masaüstünden zayıf olabildiği için gereksiz görseller ve kodlar baştan alınmaz. Sonuç, genellikle daha hafif bir sayfa. Uyumlu ama masaüstü ağırlıklı yapılan bir sitede aynı ağır sayfa telefona da yüklenir ve ziyaretçi bekler. Hız için site hızını artırmanın kontrol listesine bakabilirsiniz.
Görsel ve medya yönetimi
Mobil uyumlu ama mobil öncelikli olmayan sitelerde masaüstü boyutundaki görseller telefona da gönderilir; tarayıcı bunları küçültür ama indirme yükü aynıdır. Mobil öncelikli yapıda her ekran boyutu için ayrı görsel boyutları hazırlanır. Ayrıca kırpma da düşünülür: yatay bir fotoğrafta önemli olan kişi ya da nesne telefonda kadraja girmeyebilir. Bu, tasarım kararı ister, otomatik çözüm her zaman doğru sonucu vermez.
Video için de benzer bir durum var. Masaüstünde arka planda çalan video telefonda hem veri harcar hem pil tüketir. Çoğu zaman telefonda yerine tek bir güçlü görsel göstermek daha akıllıca.
Form ve etkileşim farkları
Masaüstünde formu klavyeyle hızla doldurursunuz; telefonda ise her alan bir dokunma, bir klavye açılması, bir kaydırma demek. Mobil öncelikli tasarımda form alanları azaltılır, doğru klavye türü tanımlanır, otomatik doldurma desteklenir. Örneğin telefon numarası alanında rakam klavyesi açılması küçük bir ayrıntı gibi görünür ama form tamamlama oranını etkiler. Bu tür kararlar, yalnızca uyumlu bir tasarımda çoğu zaman atlanır.
Tablo ve uzun içeriğin durumu
Geniş tablolar telefonda ya yana kayar ya da sıkışır. Mobil öncelikli tasarımda tablo içeriği kartlara ya da listeye dönüştürülebilir. Fiyat karşılaştırması, paket listesi, çalışma saatleri gibi bilgileri telefonda düşünerek sunmak gerekir. Aksi hâlde ziyaretçi masaüstünde çok net görünen bir tabloyu telefonda okuyamaz ve vazgeçer.
Hangisini istediğinizi nasıl anlarsınız?
Ajansa şunu sorun: “Tasarıma telefondan mı başlıyorsunuz, masaüstünden mi?” Ve tasarım örneklerini telefon boyutunda görmek isteyin. Yalnızca masaüstü mockup’ı gösteriliyorsa uyarı işareti. Bir de canlı örneklerini kendi telefonunuzdan açıp deneyin: menüye dokunmak kolay mı, form parmakla doldurulabiliyor mu, yazılar yakınlaştırmadan okunuyor mu?
Örnek bir karşılaştırma: emlak ofisi
Bir emlak ofisinin sitesini düşünelim. Masaüstü öncelikli tasarımda ilan listesi üç kolonlu, filtre paneli solda ve harita sağda. Telefona uyarlandığında filtreler uzun bir liste hâline gelir ve ilanlara ulaşmak için epey kaydırmak gerekir. Mobil öncelikli tasarımda ise ilk ekranda basit bir arama kutusu ve birkaç temel filtre bulunur; gelişmiş filtreler bir düğmenin arkasında durur. İlan kartları büyük görselli ve tek kolonludur; telefon numarası her kartta doğrudan aranabilir. İki site de “mobil uyumlu” sayılabilir ama kullanım hissi çok farklıdır.
Mobil öncelikli her zaman doğru mu?
Sitenizin ziyaretçilerinin çoğu masaüstünden geliyorsa (örneğin B2B ya da ofis ortamında kullanılan bir yazılım tanıtımı) ağırlık masaüstüne kayabilir. Ama yerel hizmet işletmelerinde, e-ticarette ve sosyal medyadan gelen trafikte telefon çoğunlukla ana kanaldır. Ziyaretçi dağılımını bilmeden tahmin etmek yerine, mevcut sitenizin analiz verisine bakın; yoksa ilk aylarda ölçüm toplayın.
Sık gelen soru: Eski sitem uyumlu, yenilemem şart mı?
Cevap, kullanım deneyimine bağlı. Telefonda menü rahat çalışıyor, yazılar okunuyor, butonlar tıklanıyor ve hız makulse yenilemek için acele etmeyin. Ama telefonda sürekli yakınlaştırma gerekiyorsa, form zor dolduruluyor ya da sayfa yavaş açılıyorsa, “uyumlu” etiketi yanıltıcıdır. Yenileme zamanı sinyalleri için web sitesi yenileme belirtileri yazımıza bakabilirsiniz.
Kendi sitenizin durumu
Telefonunuzu alın ve sitenizi ilk kez gören biri gibi gezin. İlk beş saniyede ne yapmak istediğinizi bulabildiniz mi? Bulamadıysanız problem tasarımdadır. Sitenizi birlikte incelemek isterseniz iletişim sayfasından yazın ya da 0540 022 64 22 numarasına WhatsApp’tan sitenizin adresini gönderin. Hizmet kapsamımız web tasarım sayfasında yer alıyor.