Mobil Uyumlu Web Tasarım Nedir?

Birine bir restoranın adresini sormak istediğinizi düşünün. Cebinizden telefonu çıkarır, restoranın adını yazar, sitesine girersiniz. Ekranda masaüstü için hazırlanmış küçücük bir sayfa belirir. Yazılar okunmaz, menüye ulaşmak için ekranı iki parmakla büyütmeniz gerekir, telefon numarasına dokunmak imkânsızdır. Büyük ihtimalle başka bir restoranın sitesine geçersiniz. Mobil uyumlu tasarım, bu kaybı önlemek içindir.

Mobil uyumlu ne demek?

Mobil uyumlu bir site, ekran boyutuna göre düzenini kendiliğinden ayarlayan sitedir. Geniş bir monitörde yan yana duran üç kutu, telefonda alt alta dizilir. Yazı boyutu okunabilir kalır, düğmeler parmakla basılacak büyüklüğe gelir, görseller ekrana sığar. Teknik dilde buna duyarlı (responsive) tasarım denir; ama ziyaretçinin gözünden bakınca yalnızca "bu site telefonda rahat" demektir.

Telefonla gelen ziyaretçinin ihtiyacı da masaüstünden farklı olabilir. Sokakta yürürken işletmenizi arayan biri adresinizi, çalışma saatinizi ve telefon numaranızı hızlıca görmek ister. Bu bilgilerin bir kaydırma uzağında olması önemlidir.

Kendi telefonunuzda test edin

Mobil uyumluluğu kontrol etmenin en kolay yolu sitenizi kendi telefonunuzda gezmektir. Bunu bir ziyaretçi gibi yapın, kendi sitenizi bildiğiniz için atladığınız noktaları fark edebilirsiniz. Şunlara bakın:

• Sayfa açılır açılmaz başlık ve ana düğme görünüyor mu?
• Yazılar yakınlaştırmadan okunabiliyor mu?
• Sayfayı yana kaydırmanız gerekiyor mu? Gerekiyorsa bir öğe ekrana sığmıyor demektir.
• Menü simgesine dokununca bağlantılar açılıyor ve kapanıyor mu?
• Telefon numarasına dokununca arama ekranı geliyor mu?
• Adres bilgisine dokununca harita açılıyor mu?
• Formu doldururken klavye alanları kapatmıyor mu?

Mümkünse farklı bir markada ve farklı ekran boyutunda bir telefonla da deneyin. Bir arkadaşınızdan ya da ailenizden bir cihaz ödünç alıp aynı kontrolü yapmak, sürpriz hataları yakalamak için değerlidir.

Yazı boyutu ve satır uzunluğu

Telefonda okunabilirlik, en çok yazı boyutuna bağlıdır. Gövde metni için çoğu zaman 16 piksel ve üzeri önerilir; daha küçük yazı kullanıcıyı yakınlaştırmaya zorlar. Satırlar çok uzun olmamalı, çünkü dar ekranda uzun paragraflar duvar gibi görünür. Paragrafları üç dört cümleyle sınırlayın ve araya boşluk bırakın.

Başlıklar da ekran genişliğine göre ölçeklenmeli. Masaüstünde tek satıra sığan bir başlık telefonda üç satıra çıkabilir; bu normaldir ama başlığın kelimeleri ortadan bölünmemeli.

Düğmeler ve dokunma alanları

Parmak ucu, fare imlecinden çok daha kalındır. Küçük bağlantılar yan yana durduğunda yanlış olana basma ihtimali artar. Düğmelere yeterli yükseklik verin, yan yana duran iki düğme arasında boşluk bırakın. Önemli eylemler, yani "Ara", "Yol tarifi al" ve "Mesaj gönder", ekranın alt yarısında, başparmağın rahat ulaştığı yerde olursa kullanım kolaylaşır.

Ayrıca ekranda sürekli duran yüzen düğmeleri ölçülü kullanın. Telefon ve mesaj düğmeleri faydalıdır; ama içeriği kapatıyor ya da birbirine yapışıyorsa ziyaretçiyi rahatsız eder.

Görseller

Görseller telefon sayfa yükünün büyük kısmını oluşturur. Masaüstü için hazırlanmış büyük bir fotoğraf, mobil bağlantıda sayfayı ağırlaştırabilir. Görselleri yüklemeden önce makul boyuta küçültün. Ayrıca görselin telefonda kırpıldığında önemli kısmı kaybetmediğinden emin olun; bir ürün fotoğrafının yarısı kesiliyorsa bu durum düzeltilmelidir.

Görsel içine yazı gömmekten kaçının. Masaüstünde okunan bir afiş görseli, telefonda küçülünce okunmaz hâle gelir. Önemli metin görselin içinde değil, sayfanın metin alanında yer almalı.

Menü ve gezinme

Masaüstünde yatay duran menü, telefonda genellikle bir menü simgesine dönüşür. Bu simgenin anlaşılır olduğundan, açılan listede bağlantıların kolay okunduğundan emin olun. Menüde çok fazla seçenek bırakmayın; beş altı başlık çoğu işletme için yeterlidir. Ana sayfaya dönüş yolunun kolay olduğunu da kontrol edin; logo ya da bir ev bağlantısı bu görevi görebilir.

Formlar

Telefonda form doldurmak, masaüstünden çok daha zahmetlidir. Gerekli olmayan alanları kaldırın. İsim, telefon ve kısa bir mesaj çoğu zaman yeterlidir. Telefon alanı için sayı klavyesi açılması, e-posta alanı için uygun klavyenin çıkması kullanım kolaylığı sağlar. Hata mesajlarının okunur olduğundan ve gönder düğmesinin klavyenin arkasında kalmadığından emin olun.

Hız meselesi

Mobil kullanıcılar bazen daha yavaş bağlantılarla gelir. Bu yüzden sayfanın hızlı açılması ayrı bir kaygıdır. Gereksiz büyük görseller, birbiri üzerine binen betikler ve her sayfada tekrar yüklenen ağır öğeler sitenizi yavaşlatır. Hızla ilgili adımları blogdaki ilgili rehberde bulabilirsiniz.

Mobil kontrol listesi

• Site telefonda yatay kaydırma gerektirmiyor
• Gövde metni yakınlaştırmadan okunuyor
• Düğmeler parmakla kolay basılıyor
• Telefon numarası dokunulduğunda aranıyor
• Menü açılıp kapanıyor ve bağlantılar okunuyor
• Görseller kırpıldığında önemli kısım kaybolmuyor
• Form kısa ve klavye ile rahat dolduruluyor
• İlk ekranda ne yaptığınız ve ana eylem görünüyor

Tek elle kullanım testi

Telefonu tek elinizde tutup sadece başparmağınızla siteyi gezin. Menü simgesine rahatça ulaşabiliyor musunuz? Ekranın üst köşesindeki bir düğmeye uzanmak zorunda kalıyor musunuz? Birçok kişi telefonu yolda, sırada ya da başka bir işle uğraşırken tek elle kullanır. Önemli düğmeler başparmağın rahat ulaştığı bölgeye yakın olduğunda kullanım belirgin biçimde kolaylaşır.

Aynı testi parmağınız nemliyken ya da eldiven takılıyken yapmaya gerek yok; ama dokunma alanlarının küçük kaldığını fark ederseniz, düğmeleri büyütmeniz için yeterli işarettir.

Yatay ve dikey konumu da deneyin. Telefonu yan çevirdiğinizde menü, görsel ve form düzgün kalıyor mu? Çoğu ziyaretçi dikey kullanır; ama video izlerken ya da form doldururken ekranı yan çevirenler vardır ve bozuk bir yatay görünüm bu kişileri kaybettirebilir.

Düzenli kontrol

Siteyi bir kez telefonda denemek yeterli değildir. Yeni bir bölüm, yeni bir görsel ya da yeni bir düğme eklediğinizde aynı kontrolü tekrarlayın. Ayda bir, sitenizi telefonunuzda baştan sona gezmek, çoğu hatayı daha ziyaretçiler görmeden yakalamanızı sağlar.