Mobil uyumlu site yetmiyor: mobile first tasarım ne demek?

"Sitemiz mobil uyumlu" cümlesini neredeyse her işletmeden duyuyoruz. Telefonda açıyorsunuz, gerçekten de ekrana sığıyor. Ama menü üç kez dokunmadan açılmıyor, telefon numarası sayfanın en altında, ilk ekranı dev bir slider kaplıyor ve form alanları parmakla seçilemeyecek kadar küçük. Site teknik olarak mobil uyumlu, fakat telefonda karar vermek isteyen biri için tasarlanmamış. Mobile first yaklaşımı tam bu farkı kapatmak için var.

Mobil uyumlu ile mobile first arasındaki fark

Mobil uyumlu (responsive) site, genelde önce masaüstü için tasarlanır; sonra kodla daraltılır, sütunlar alt alta dizilir, bazı öğeler gizlenir. Sonuç ekrana sığar ama öncelikler masaüstünden kalmadır. Mobile first ise sırayı tersine çevirir: tasarım önce yaklaşık 360 ila 400 piksel genişliğindeki bir telefon ekranında kurulur, hangi bilginin ilk ekranda olacağına orada karar verilir, büyük ekranlar için alan sonradan genişletilir.

Bu sadece bir çizim sırası meselesi değil. Telefonda yer dar olduğu için ekip neyin gerçekten önemli olduğunu seçmek zorunda kalır. Masaüstünde yan yana sığan altı mesajdan hangisinin başta duracağı, hangisinin tamamen çıkacağı bu aşamada netleşir. Çoğu projede bu seçim masaüstü versiyonu da sadeleştirir.

Neden artık mecburi bir yaklaşım

Google, siteleri uzun süredir mobil sürümleri üzerinden değerlendiriyor; yani sıralamada esas alınan, sitenizin telefondaki hâli. Yerel aramalar, reklam tıklamaları ve sosyal medyadan gelen ziyaretlerin büyük kısmı da telefondan gelir. Instagram'daki bir gönderiden ya da Google Haritalar'daki işletme kartından sitenize geçen kişi masaüstüne dönmez; kararını o küçük ekranda verir. Masaüstü öncelikli tasarlanmış bir site, ziyaretçilerinizin çoğuna ikinci sınıf bir deneyim sunar.

Mobile first tasarımın pratikte değiştirdiği şeyler

Kâğıt üzerinde soyut duran yaklaşım, sayfada şu somut kararlara dönüşür:

• İlk ekran: telefonda kaydırmadan görünen alanda ne yaptığınız, kime yaptığınız ve bir eylem düğmesi olur. Büyük bir kapak fotoğrafı tek başına bu alanı harcamaz.
• Dokunma hedefleri: düğmeler ve bağlantılar parmakla rahat basılacak büyüklükte, aralarında yanlış dokunmayı önleyecek boşlukla tasarlanır.
• İletişim: "Ara" ve "WhatsApp" düğmeleri ekranın altında sabit durur, numara metin olarak değil dokunulabilir bağlantı olarak verilir.
• Menü: beş altı ana başlığı geçmez, alt kırılımlar sayfa içinde çözülür. Üç katmanlı açılır menü telefonda kullanılmaz.
• Formlar: alan sayısı azaltılır, telefon alanında rakam klavyesi, e-posta alanında @ işaretli klavye açılır.
• Metin: paragraflar kısa tutulur, yazı boyutu yakınlaştırma gerektirmeyecek kadar büyük olur, tablo yerine liste tercih edilir.

Hız: mobile first'ün görünmeyen yarısı

Telefon kullanıcısı çoğu zaman mobil veriyle, bazen zayıf bir bağlantıyla gezinir. Masaüstü için hazırlanmış 3 MB'lık bir kapak görseli, telefonda gizlense bile çoğu temada yine indirilir. Mobile first yaklaşımda görseller ekran boyutuna göre ayrı ayrı sunulur, ilk ekranda görünmeyen içerik sonradan yüklenir, gereksiz animasyon ve eklentiler baştan çıkarılır. Hızın dönüşüme etkisini web sitesi hızı ve dönüşüm oranı yazımızda ayrıntılı anlattık; telefonda bu etki daha da keskin hissedilir.

Mevcut sitenizi 10 dakikada kontrol edin

Yeni site kararı vermeden önce kendi telefonunuzla şu testi yapın. Mobil veriye geçin, sitenizi müşteri gözüyle açın:

• Sayfa açıldığında ilk ekranda ne iş yaptığınızı ve nasıl ulaşılacağını görebiliyor musunuz?
• Tek elle, başparmakla menüyü açıp hizmet sayfasına ulaşabiliyor musunuz?
• Telefon numarasına dokununca arama ekranı açılıyor mu?
• Formu telefondan doldurup gönderebiliyor musunuz, klavye alanları kapatıyor mu?
• Sayfada yatay kaydırma, taşan tablo ya da kesilmiş görsel var mı?
• Açılır pencere ya da çerez bandı içeriğin yarısını kapatıyor mu?

Bu sorulardan ikisine üçüne "hayır" diyorsanız sorun genelde tasarım katmanındadır ve küçük düzeltmeler yetmeyebilir. Reklama trafik gönderiyorsanız öncelik açılış sayfanız olsun; dönüşen bir landing page'in bölümlerini ayrı bir yazıda anlattık.

Mobile first site nasıl planlanır

Velaris Dijital'de sayfa taslaklarını önce telefon genişliğinde hazırlıyoruz ve müşteriye ilk sunumu da telefon ekranında yapıyoruz; masaüstü görünümü bu taslak onaylandıktan sonra genişletiyoruz. Sizin tarafınızda işe yarayacak sıra şudur: önce sitenize telefondan gelen ziyaretçinin en sık yapmak istediği üç işi yazın (aramak, fiyat görmek, konum bulmak gibi), sonra her sayfanın ilk ekranının bu işlerden birine hizmet edip etmediğine bakın. Sonucu ölçmek için analitikte mobil ve masaüstü dönüşüm oranını ayrı ayrı izleyin; mobil oran belirgin şekilde düşükse sorun neredeyse her zaman tasarımdadır. Düzeltmelerin etkisi genelde ilk birkaç haftanın arama ve form verisinde görünmeye başlar.