Bir kişi Google’da bir hizmet arar, sonuçtan sitenize tıklar ve telefonunda sayfa açılır. Menü üst üste biner, iletişim düğmesi ekranın dışına çıkar, form yarım kalır. Bu kişi masaüstünde ne kadar güzel bir site olduğunu bilmez; bildiği yalnızca telefonda gördüğü sayfadır. Mobil uyum, bu ekranda sitenizin işini yapıp yapmadığını anlatır.
Bu yazıda mobil uyumlu sitenin ne demek olduğunu, Google’ın neden telefon sürümüne baktığını ve kendi sitenizi telefonda nasıl test edeceğinizi anlatıyorum. Teknik kodlamaya girmeden, bir işletme sahibinin kendi kontrolünü yapabileceği bir yol vereceğim.
Mobil uyumlu site ne demek?
Mobil uyumlu site, farklı ekran boyutlarında kendini düzenleyen ve telefonda da masaüstüyle aynı bilgiyi veren sitedir. Bu tanımın üç parçası var. Birincisi okunabilirlik: yazı küçük kalmadan, yatay kaydırma gerektirmeden okunur. İkincisi kullanılabilirlik: düğmeler ve bağlantılar başparmakla rahat basılacak büyüklükte olur. Üçüncüsü içerik eşitliği: telefondaki sayfa, masaüstündeki bilginin hiçbirini eksik bırakmaz.
Sahada en sık gördüğümüz sorun, masaüstünde düzgün çalışan bir sitenin telefonda ufalanmasıdır. Yazı okunmaz hâle gelir, butonlar birbirine değer, bir açılır menü ekranın dışına taşar. Bu durumda site “mobil uyumlu” görünse bile ziyaretçi için kullanılmaz.
Neden önce telefonda bakıyoruz?
Google, dizine alma işinde ağırlıklı olarak sitenin mobil sürümünü kullanır. Google Arama Merkezi’nin mobil öncelikli dizine alma dokümanı bu yaklaşımı açıkça anlatır. Yani sizin masaüstü sürümünüzün ne kadar iyi olduğu, arama sonuçlarındaki yerinizi tek başına belirlemez.
Bu yüzden tasarıma telefon ekranından başlamak mantıklıdır. Reslife Medikal sitesinde de tasarım mobil öncelikli kurgulandı; ürün ve hizmet sayfaları teklif almaya yönlendiriyor. Masaüstü düzen, telefon düzenine uyarlanmış bir şey olarak düşünülmez; önce telefonda çalışması gereken sayfa kurulur, sonra geniş ekrana açılır.
Telefonda sitenizi kendiniz test edin
Bir uzmanı çağırmadan yapabileceğiniz ilk test, kendi telefonunuzla yapacağınız bir gezintidir. Sitenizi Chrome ya da Safari’de açın, ardından şu adımları sırayla deneyin:
- Ana sayfayı açın ve ilk ekranda ne gördüğünüzü, sizi ne yapmaya çağırdığını not edin.
- Menüyü açın, her bağlantıya başparmağınızla dokunun. Yanlış bağlantıya basma riski varsa düğmeler çok yakın demektir.
- Telefon ve WhatsApp düğmelerine basın. Arama ekranı açılıyor mu, WhatsApp bağlantısı doğru numaraya gidiyor mu?
- İletişim formunu doldurun. Telefon klavyesi doğru türde açılıyor mu, gönder düğmesi görünür mü?
- Telefonu yatay çevirin ve tekrar bakın. Görsel ve metin ekrandan taşıyor mu?
- Sayfayı mobil veriyle, yavaş bir bağlantıda açın. İlk görünen içerik ne kadar sürede geliyor?
Bu adımların hepsi on dakika sürer. Sonucu bir kâğıda yazın; sorun bulduğunuz satırları tasarımcınıza ya da yazılım ekibinize doğrudan iletebilirsiniz.
Chrome geliştirici araçlarıyla cihaz taklidi
Telefonunuzdan başka cihazlara erişemiyorsanız, masaüstü tarayıcıda cihaz taklidi kullanabilirsiniz. Chrome’da sayfa üzerinde sağ tık yapıp “İncele” dediğinizde açılan araç penceresinde cihaz modu düğmesi bulunur. Bu modda farklı telefon ekranlarını seçip sayfayı aynı anda görebilirsiniz.
Bu yöntem iki açıdan işe yarar. Ekran genişliğine bağlı kırılmaları hızlıca görürsünüz ve bir değişikliğin sayfanın başka bir yerini bozup bozmadığını anında anlarsınız. Ama bir eksiği var: dokunma hissini ve gerçek telefonun yazı boyutunu taklit etmez. Bu yüzden cihaz taklidi ile gerçek telefonda deneme birlikte kullanılmalı, biri diğerinin yerini tutmaz.
Hızı da telefonda ölçün
Mobil uyum yalnızca görünüm değildir. Sayfanın telefonda ne kadar hızlı açıldığı da ziyaretçinin ilk izlenimini belirler. Google’ın PageSpeed Insights aracında mobil sekmesine bakarak sayfanızın ölçümünü ve iyileştirme önerilerini görebilirsiniz. Bu ölçümlerin anlamını sade biçimde anlattığımız Core Web Vitals nedir yazısında bulabilirsiniz.
Ölçüm sonuçlarını bir kere almak yetmez. Sitede yeni bir görsel ya da yeni bir açılır kutu eklediğinizde aynı sayfayı tekrar ölçün. Değişikliğin hızı düşürüp düşürmediğini ancak bu şekilde görürsünüz.
Sık yapılan hatalar
Birkaç hata tekrar tekrar karşımıza çıkıyor. Telefonda çok küçük yazı kullanılması, okunması zor gri metinler ve iki satıra bölünen düğme metinleri bunların başında gelir. Bir diğeri, telefonda açılan menünün kapatılamaması; menü açıldığında kapatma düğmesi ekranda görünmüyorsa ziyaretçi sayfadan çıkmak zorunda kalır. Son olarak, telefon numarasının tıklanabilir olmaması sık görülen bir eksiktir; numara yazılıysa bağlantıya çevrilmesi gerekir.
Bu hataların hiçbiri teknik olarak zor değildir. Zor olan, sitenin her güncellemesinden sonra telefonda tekrar bakmaktır. Yeni bir sayfa ya da yeni bir görsel eklendiğinde ilk kontrolü telefonda yapmak, sorunun büyümeden yakalanmasını sağlar.
Ayrıca erişilebilirlik tarafı da mobil uyumla bağlantılıdır. Yazı boyutu, renk kontrastı ve klavyeyle gezinme gibi konular için web erişilebilirliği temel kontrol listesi yazısına bakabilirsiniz.
Kontrol listesi
- Ana sayfa telefonda ilk ekranda neyi anlatıyor ve bir eyleme çağırıyor mu?
- Menü, telefonda rahat açılıp kapanıyor mu?
- Telefon ve WhatsApp düğmeleri doğru numaraya gidiyor mu?
- İletişim formu telefonda eksiksiz doldurulabiliyor mu?
- Metin yakınlaştırmadan okunuyor mu, yatay kaydırma gerekiyor mu?
- Sayfa mobil veriyle makul sürede açılıyor mu?
- Her güncellemeden sonra telefonda kontrol ediliyor mu?
Bu listedeki maddelerden birkaçı “hayır” ise, sorunun tasarımda mı yoksa içerik yapısında mı olduğunu ayırt etmek için sayfayı telefonda bir kez baştan sona gezmeniz yeterli olur.
Bu yazıdaki Google dizine alma bilgisi Google Arama Merkezi’nin mobil öncelikli dizine alma dokümanından, site örneği Reslife Medikal referans sayfamızdan alındı.
