Mobil Uyumlu Web Tasarım Nedir? Telefonda Kusursuz Site İçin Kontrol Listesi

Mobil uyumlu web tasarım, sitenin telefon, tablet ve bilgisayar ekranlarına göre kendini düzenlemesi demektir. Yerel işletmelerde ziyaretçilerin büyük kısmı telefondan bakar. Telefonda bozuk görünen bir site, müşteriyi birkaç saniyede kaybettirir.

Bu yazıda mobil uyumun neden önemli olduğunu ve kendi sitenizi nasıl kontrol edeceğinizi anlatıyoruz.

Neden mobil uyum şart?

İki ana sebep var. Birincisi kullanıcı davranışı: insanlar "yakınımdaki" bir hizmeti telefonla arar. İkincisi Google: arama motoru sitelerin mobil sürümünü esas alarak değerlendirir. Mobilde sorunlu bir site, aramalarda da geride kalabilir.

Mobil uyumsuzluğun belirtileri:

• Metin çok küçük ve yakınlaştırmak gerekiyor.
• Düğmeler birbirine çok yakın, yanlış yere basılıyor.
• Sayfa yana kayıyor (yatay kaydırma çıkıyor).
• Menü açılmıyor ya da kapanmıyor.
• Sayfa çok geç açılıyor.

Mobil uyumlu web tasarım için kontrol listesi

Sitenizi telefonunuzdan açıp şunlara bakın:

• Yazılar yakınlaştırma olmadan okunuyor mu?
• Telefon numarasına tek dokunuşla ulaşılıyor mu?
• Düğmeler parmakla rahat basılacak boyutta mı?
• Formlar telefon klavyesiyle kolay doldurulabiliyor mu?
• Görseller ekrana sığıyor ve hızlı yükleniyor mu?
• Açılır pencereler ekranı kapatıp çıkışı zorlaştırıyor mu?

Bir de farklı telefonlarda deneyin. Aynı site iki farklı cihazda farklı davranabilir.

Tasarımda dikkat edilecekler

Bir sitenin mobil sürümünü masaüstünün küçültülmüş hali sanmak yaygın bir hatadır. Mobil için ayrıca düşünmek gerekir:

• Önce telefon: tasarıma küçük ekrandan başlayıp büyütmek en sağlıklı yoldur.
• Önemli bilgi üstte: telefon, adres ve ana mesaj ilk ekranda olmalı.
• Sade menü: az sayıda ve net başlık.
• Okunur yazı: yeterli büyüklük ve kontrast.
• Hafif görsel: büyük dosyalar mobil bağlantıyı yorar.

Hız mobilde daha da önemli

Mobil bağlantılar her zaman hızlı değildir. Büyük görseller ve gereksiz kodlar telefonda daha çok hissedilir. Hız konusunu web sitesi hızı rehberimizde ayrıntılı anlattık. Google'ın ücretsiz PageSpeed Insights aracıyla sitenizi mobil için ölçebilirsiniz.

Mobil uyumu ölçmek

Telefonda elle denemek en gerçekçi testtir. Ek olarak Google Search Console, sitenizin mobil kullanılabilirliğiyle ilgili sorunları raporlar. Bu aracı Search Console rehberimizde anlatıyoruz.

Telefonda dokunmatik kullanım

Masaüstünde fareyle kolay olan şey telefonda parmakla zor olabilir. Dokunmatik kullanım için şunlara dikkat edin:

• Düğmeler ve bağlantılar yeterince büyük olmalı; birbirine çok yakın olmamalı.
• Menü, tek elle ulaşılabilecek biçimde tasarlanmalı.
• Üzerine gelince açılan (hover) menüler telefonda çalışmaz; dokunuşla açılmalı.
• Form alanları doğru klavyeyi açmalı; telefon numarası alanı sayısal klavyeyle gelmeli.
• Çok adımlı ve uzun formlardan kaçının.

Bu ayrıntılar küçük görünür, ama telefonla arama yapan müşterinin sabrını belirler.

Görseller ve yazılar mobilde nasıl olmalı?

Büyük görseller telefonda hem yavaşlık hem de taşma sorunu yaratır. Şu kurallar işe yarar:

• Görseller ekran genişliğine otomatik uyum sağlamalı.
• Gereğinden büyük dosya yüklemeyin; telefonda göstermek için küçük sürüm yeterlidir.
• Metin satırları çok uzun olmamalı; okuma genişliği sınırlanmalı.
• Yazı boyutu yakınlaştırma gerektirmeyecek kadar büyük olmalı.
• Metin ile arka plan arasında yeterli kontrast bulunmalı.

Uzun paragrafları kısa bölümlere ayırmak, küçük ekranda okumayı belirgin biçimde kolaylaştırır.

Mobil için en sık yapılan hatalar

• Masaüstü tasarımı küçültüp mobil sitemiş gibi sunmak
• Açılır pencereler (pop-up) ile ekranı kapatmak
• Telefon numarasını tıklanabilir yapmamak
• Haritayı ya da videoyu sayfayı kilitleyen biçimde yerleştirmek
• Çerez bildirimini ekranın büyük kısmını kaplayacak şekilde göstermek

Google bu tür sorunları kullanıcı deneyimi sorunu olarak değerlendirebilir. Mobil görünümü doğrudan kendi telefonunuzda, mümkünse iki farklı cihazda test edin. Google'ın genel yaklaşımını SEO başlangıç rehberinde okuyabilirsiniz.

Nasıl başlamalı?

Sitenizi şimdi telefonunuzdan açın ve yukarıdaki listeyi uygulayın. Sorun görüyorsanız küçük düzeltmelerle çözülebilecek mi, yoksa yenileme mi gerekir, buna karar verin. Yenileme kararı için web sitesi yenileme yazımıza bakabilirsiniz.

Biz tüm sitelerimizi mobil öncelikli hazırlıyoruz. Detaylar için web tasarım hizmetlerimiz sayfasına göz atın ya da bize yazın.