Smart Insights’a göre internet kullanıcılarının %80’i akıllı telefonlara sahiptir. Evet, milyonlarca insan almayı düşündüğü ürünle ilgili bilgiye ulaşmaya çalışırken web sitelerini ziyaret ediyor. Dolayısıyla, her şirket potansiyel müşterilerini memnun etmek için, mobil cihazlarda web sitelerini gezinmeyi kolaylaştırmalıdır.

Mobil uyumlu bir web sitesi tasarlamanıza ve geliştirmenize yardımcı olması için bazı ipuçları:

İpucu 1: Tüm mobil siteler bir görüntü alanı meta etiketine ihtiyaç duyar

Mobil uyumlu bir web sitesi oluştururken bir görüntü alanı meta etiketi eklemeyi unutmayın. Görüntü alanı, bir sitenin içeriğinin nasıl ölçeklendiğini ve boyutlandırıldığını belirlemek için arama motorları tarafından kullanılan ve çok cihazlı bir deneyim oluştururken kritik bir meta etiketinin bulunduğu sanal bir alandır.

Görüntü metası etiketi mobil tarayıcıya daha küçük bir ekrana uyması gerektiğini bildirir. O olmadan site bir mobil cihazda iyi çalışmaz. Görüntü alanını denetlemek ve belirtmek için hangi konfigürasyonları seçerseniz seçin, belgenin başlığına eklendiğinden emin olun.

İpucu 2: Mobil web siteleri için boyut önemlidir
Daha önce mobil cihazınızda bir butona basmanızı isteyen bir siteyi ziyaret ettiniz mi, ancak buton o kadar küçüktü ki, bunun yerine yanlış şeylere mi bastınız? Yoksa sadece bir şeyler okumak için sayfayı yakınlaştırmak zorunda mı kaldınız?

Korkunç derecede sinir bozucu olduğu için mobil tasarım söz konusu olduğunda boyutu, yalnızca sayfa boyutundan değil aynı zamanda yazı tipleri ve butonların boyutundan da söz ederken hatırlamak önemlidir.

Yazı Tipleri: Mobil sitelerde yazı tipi boyutu en az 14px olmalıdır. Bu başlangıçta istemediğinizden daha büyük görünse de, bu boyut sayesinde içeriği görüntüleyenler onu büyütme ihtiyacı duymadan içeriğe kolaylıkla ulaşabilirler.

Genelde, yazı tipi küçültmesini etiketleri veya formları 12px’e düşüreceğiniz zaman kullanabilirsiniz.

Butonlar: Daha Büyük Butonlar Daha İyi. Büyük butonlar, kullanıcının yanlışlıkla yanlış butona basması veya onu kaçırma ihtimalini azaltmaktadır. Apple gibi mobil liderler, kullanıcı deneyimini en üst düzeye çıkarmak ve e-ticaret sitelerindeki dönüşümleri artırmak için buton boyutlarının en az 44 piksel x 44 piksel olması gerektiğini önermektedir.

İpucu 3: Mobil web tasarımında pop-ups (açılır pencereler) veya refreshes (yenilemeler) kullanılmamalıdır

Küçük pop-uplar bile, mobil kullanıcıların başını ağrıtabilir. Mobil tarayıcılar genelde pop-up‘ları desteklemediğinden, tüm kullanıcı deneyimini sinir bozucu hale getirirler.

Tasarım süreci boyunca, iyi mobil sonuçlar için pop-up‘ları kullanmaktan kaçının. Benzer şekilde, mobil aygıtın sınırlı aygıt ön belleklerinin doldurulmasını önlemek için periyodik refreshleri ortadan kaldırın. Sayfa yenilemeye ihtiyaç duyulursa bırakın kontrol görüntüleyen kişinin elinde olsun.

İpucu 4: Navigasyon için gerekli olan user text entry’sini (kullanıcı metin girişi) azaltın

Bildiğiniz gibi, web sitelerin mobil sürümlerinde metin girmek son derece zordur. Kullanıcı metin girişini butonlar veya bir liste ile değiştirerek azaltın; böylece kullanıcılar ihtiyaç duydukları şeyi metin girişi ile kolaylıkla seçebilirler.

Masaüstü kullanıcıların aksine, mobil kullanıcılar geleneksel bir klavye veya mouse erişimine sahip olmadıklarından, kullanıcı deneyimini iyileştirmek ve kolaylaştırmak için yaratıcılığınızı kullanın.

Bunun için birkaç çözüm:

  • Kontrol listeleri
  • Açılır menüler
  • Butonlar
  • Resim seçimleri

İpucu 5: Tasarımınızda yaratıcı navigasyon yerleştirmeden yararlanın
Web sitenizi oluşturmaya başlamadan önce, kitlenizi tanımak ve bir web sitesinde aradıklarını öğrenmek için muhtemelen büyük oranda araştırma yaptınız. Belirli kitlelerin sitede nasıl gezineceklerini belirlemek için mobil cihazları optimize ederken bu bilgileri tekrar gözden geçirin.

Hedeflenen kullanıcılar hızla değişen içeriği görmek istiyorsa, gezinme menüsünü ana materyalin altında konumlandırın. Bu, içerik ve başlıklara sayfa görünümünü engellemeden görülebilecekleri yer bırakacaktır.

Öte yandan, kullanıcılar kategori navigasyonuna derhal erişmek istiyorsa, gezinme menüsünü sayfanın üst kısmına yerleştirmelisiniz.

İpucu 6: Sitenizin tasarımını basitleştirin
Sitenizi gereksiz içeriklerden kurtarın ve kullanılabilirlik yaratmak için sitenin tasarımını basitleştirin. “Mobile First” (Önce Mobil) yaklaşımının tamamıyla minimalizm (sade, basit) olduğunu ve tasarımın basitleştirilmesinin, kullanılabilirliğin geliştirilmesine yardımcı olduğunu unutmayın.

Kullanıcılarınızın tablolar, çerçeveler ve diğer formatlara maruz kalmadan sıfır zorlukla sitede gezinmelerini sağlayan bir site oluşturun. Padding’i (içerik alanı ile kenarlık arasındaki alan) asgari seviyeye tutun, çünkü daha fazla kullanıcı bağlantıları tıklarsa, yükleme süresi artacaktır. İçerik ve gezinme arasında bir denge oluşturmak için web sitenizi basitleştirin.

İpucu 7: Sayfayı küçük bölümlere ayırın

Büyük masaüstü bilgisayarlarda iyi görüntülenen içeriği, küçük-elde taşınabilir bir aygıta sıkıştırmak, yuvarlak bir deliğe kare bir mandalı takmaya çalışmaya benziyor.


Kullanıcıların içeriği görüntülemek için sürekli olarak kaydırması gereken bir sayfa yerine birkaç farklı sayfaya uzun metin bölümleri yerleştirerek sayfayı küçük porsiyonlara bölün. Düşük-öncelikli  içeriğin yer aldığı sayfayı kaldırın ve yatay kaydırmayı önlemek için daraltılmış metni tek bir sütuna sabitleyin.

İpucu 8: Görüntü ölçekleme, mobil kullanıcılar için büyük fark yaratır
İçerikte ve arka planda kullanılan her görüntüyü inceleyin. Kullanıcılar görüntüye dikey ve yatay yönde göz attığında görüntünün doğru biçimde ölçeklendiğinden emin olun. Görüntüler uygun boyutlarda ölçeklenmediyse, görüntülerin %100 genişliğe sahip olmasını veya sayfalarda  (arka plan görüntüler için) yer almalarını sağlamak için CSS kurallarını değiştirin.


Bu basit ipuçlarını uygulayarak tasarımlarınızın hem masaüstü hem de mobil cihaz dostu olmasını sağlayabilir, ziyaretçilerinize mümkün olan en iyi kullanıcı deneyimini yaşatabilirsiniz.