Web Sitenizdeki Mobil Kullanılabilirlik Sorunları

Web sitenizi Search Console’a eklediyseniz büyük ihtimalle Gmail adresinize gelen; siteniz için yeni mobil kullanılabilirlik sorunları tespit edildi maillerine alışık olmalısınız. Bu yazımızda mobil kullanılabilirlik nedir? Mobil uyumluluk testi nasıl yapılır? Mobil kullanılabilirlik sorunları nelerdir ve nasıl çözülür sorularının cevaplarını bulacaksınız.

Mobil Kullanılabilirlik Nedir?

Cep telefonu ve tablet gibi mobil cihazların kullanımının artmasıyla beraber, Google gibi arama motorları, mobil uyumlu İnternet deneyimi sunan siteleri ödüllendirerek sıralamada öncelik sunmaktadır. Mobil kullanılabilirlik sağlamak için web site geliştiricileri, web sitelerini duyarlı, responsive tasarım ya da mobil site versiyonu ile hazırladılar.

Mobil Uyumluluk Testi

Web sitemizin mobil uyumlu olup olmadığını denetlemek için Google’ın Mobile Friendly Test aracını kullanabilirsiniz. Bu araç ile web sitenizin giriş sayfasını (anasayfa) veya diğer sayfalarınızın linklerini taratarak test edebilirsiniz. Mobil uyumluluk testi sonrasında sayfa mobil uyumlu değil uyarısı alıyorsanız, aşağıdaki mobil kullanılabilirlik sorunlarını inceleyelim.

Sayfa Mobil Uyumlu Değil Hatası

Mobil kullanılabilirlik ile alakalı bir sorun tespit edildiğinde sorunu çözmek için ilk adımımız işe nereden başlayacağımıza karar vermek olmalıdır.

Eğer web sitenizin mobil uyumlu olarak tasarlandığından eminseniz, ya da satın aldığınız tema responsive uyumlu ise, ancak yaptığınız mobil uyumluluk testi sonucunda “Sayfa mobil uyumlu değil” uyarısı alıyorsanız muhtemelen css, js gibi tema kaynakları test sırasında yüklenmiyor olabilir. Mobil uyumluluk testi sonucunda sayfada sol üstte sarı ünlem şeklinde görünen Sayfa yükleme sorunları bölüne tıklayarak hangi kaynakların yüklenmediği görebilirsiniz.

Sayfa Kısmı Olarak Yüklendi Hatası

Sayfa yükleme bilgileri olarak geçen bu sayfada, mobil uyumluluk testi sırasında yüklenmeyen web site kaynaklarının listesini bulacaksınız.

Bu kaynakların mobil uyumluluk testi sırasında yüklenmemesinin birçok sebebi olabilir. Bunlardan en önemlisi robots.txt dosyanıza eklediğiniz bazı klasörlerin veya dizinlerin engellenmiş olması olabilir.

User-agent: *
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/
Disallow: /css
Disallow: /assets

Robots.txt dosyanızda yukarıdaki örnekteki gibi bir kod var ise, bunlardan kurtulun ve aşağıdaki gibi güncelleyip mobil testi tekrar başlatın.

User-agent: *
Allow: /

Yeni test sonucunda mobil uyumluluk sorunları hala devam ediyorsa, yukarıdaki “Sayfa mobil uyumlu değil” bölümündeki görselde görünen “Aşağıdaki sorunları düzeltin” olarak geçen alandaki mobil kullanılabilirlik sorunlarını inceleyelim.

Mobil Kullanılabilirlik Sorunları

Mobil kullanılabilirlik ile ilgili sorunların en iyi analizi yapıp test edeceğimiz araç Google Search Console’dur. Sol bölümdeki “Mobil kullanılabilirlik” sekmesine tıklayarak, web sitenizde devam eden veya düzeltilmiş tüm kullanılabilirlik sorunlarını ve bu sorunların hangi sayfalarda olduğunu bulabilirsiniz. Şimdi bu mobil kullanılabilirlik sorunlarını ve çözümlerini inceleyelim.

1. Metin okunamayacak kadar küçük

Metin okunmayacak kadar küçük hatası en yaygın görülen hatadır. Metniniz küçük ekranlarda okunabilecek kadar büyük olmalıdır. Google, sayfalarınızın yazı boyutunun okunamayacak kadar küçük olduğunu ve mobil kullanıcılarının bu okuyabilmek için ekranı yakınlaştırılmasının gerektirdiğini düşünüyorsa bu durumu bir mobil kullanılabilirlik sorunu olarak işaretlemektedir.

Sorunun Çözümü:

Sorunun nedeni, sayfalardaki yazıların font-size’ı ile alakalıdır ve yapmamız gereken sayfanın hangi bölümündeki yazı boyutunun bu hataya sebep olduğunu tespit etmektir.

İncelemeniz gereken bölümler paragraf, varsa yorum alanlarındaki kullanıcı adları, yorum bölümleri, varsa yazar adı, varsa tarih bölümleri, varsa özel olarak tanımlanmış id ve class bölümleri kontrol edilmelidir.

İlgili alanların font-size: değeri en az 15px ya da 1.2em olarak ayarlanmadır.

p { font-size:15px; margin: 0 0 20px; line-height: 1.7;}

Ayrıca bazı H başlıklarınız çok uzun olabilir ve mobilde satıra sığmayan başlıklar alt satıra geçtiğinde birbirine çok yakın olabilir. Bu durumda ilgili başlık, paragraf veya ögeye aşağıdaki css kodunu ekleyin;

h2 { line-height: 1.7; veya line-height: 30px; }     p { line-height: 1.4; veya line-height: 15px; }

2. Tıklanabilir öğeler birbirine çok yakın

Parmaklarımız fare işaretçilerine göre daha çok yer kaplar ve daha az hassasiyete sahiptir. Google, linklerinizin birbirine ne kadar yakın olduğunu inceler ve bu linklerin boyutunu ve yakınlığını mobil uyumluluk faktörü olarak niteler. Eğer Google bir kullanıcının herhangi bir bağlantıya parmağıyla kolayca dokunamayacağını düşünürse bu durumu bir mobil kullanılabilirlik sorunu olarak işaretler.

Sorunun Çözümü:

Bu sorunun çözümünde cep telefonlarınızdan yararlanarak kendiniz test edebilirsiniz. Eğer sitenizin bazı bölümlerini tıklarken zorluk çekiyorsanız bu alanları geliştirmeye çalışın. Genellikle yan yana olan linklerin, menülerin, butonların, varsa sosyal medya ikonlarının birbiri arasındaki boşluğun az olmasından kaynaklanır.

Bu sorunun çözümünde ilgili id veya class’a margin-right:5px veya daha fazla değeri vererek çözebilirsiniz. Eğer tıklanabilir ikonlarınız ya da butonlarınız parmakla dokunmak için uygun büyüklükte değilse, genişlik ve yükseklik değerlerini optimize edin.

.ornek {height: 15px; width: 15px;}

.ornek2 {margin-right:10px}

Yukarıdaki css kodu sadece örnektir, fikir vermesi amacıyla kullanılmıştır.

3. İçerik ekrandan daha geniştir

İçerik ekrandan daha geniştir hatasının nedeni genellikle sayfanın ekrandan taşmasıdır. Kullanıcılarınızın içeriği görüntüleyebilmek için sayfayı yanlara doğru kaydırmasına neden olur. Google eğer böyle bir davranış fark ederse bu durumu yine mobil kullanılabilirlik sorunu olarak işaretler. Hatta bazen her şeyin doğru görüntülendiği durumlarda dahi Google bu sorunu karşımıza çıkarabiliyor.

Sorunun Çözümü:

Bu sorunun çözümü için sayfadaki taşan alanları tespit etmeliyiz. Genellikle tek bir sayfada bu hatayı alıyorsanız ve wordpress kullanıyorsanız header veya footer gibi her sayfada bulunan bölümlerden kaynaklanmaz. Ancak ortak alanları sabit bir kaynaktan çağırmıyorsanız, yine de ilgili sayfanın header ve footer alanında taşma olup olmadığını, hata olup olmadığını kontrol edin.

İçerik ekrandan daha geniş hatası çoğu zaman content alanındaki içeriklerden kaynaklanır. Bunun için hata aldığınız sayfayı CTRL + ile %300 oranına kadar büyütün. Eğer bu görünümde ekrana sığmayan bir bölüm görüyorsanız. Bu alanları optimize edin. Genellikle image’lerin sabit bir boyutta eklenmiş olması bu hatayı getiriyor olabilir.

Taşmayı bir id veya class’da tespit ederseniz bu alanların css kodunda (-) eksi padding veya margin değeri olan bölümler varsa bu alanları optimize etmeyi deneyin. Taşma düzelmezse aşağıdaki kodu CSS kaynağına ekleyebilirsiniz.

.ornek {overflow:hidden}

Taşma eğer bir görselde ise, görselin classında responsive kodu ekli olduğundan emin olun. Eğer bootstrap alt yapısı kullanıyorsanız class bölümüne aşağıdaki kodu ekleyebilirsiniz.

class=”img-fluid”

Bu kod aşağıdaki anlama gelir.

.img-fluid {max-width: 100%; height: auto;}

4. Görünüm ayarlanmadı

Görünüm ayarlanmadı hatası, kullanıcıların görüntülediği bir internet sayfasının genişlik oranları ile ilgilidir. Web sitemizin görünüm meta etiketini doğru yapılandırmazsak, kullanıcılar içerikleri görüntülemek için ekranı yakınlaştırmak zorunda kalırlar. Google sayfanın görünümünü ve ölçeklendirmesini bu şekilde tespit ederse bu hata ile karşılaşırsınız.

Sorunun Çözümü:

Görünüm ayarlanmadı hatası çözümü için web sitenizin header alanının en üst bölümüne aşağıdaki kodu ekleyerek bu sorunu çözebilirsiniz.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Search Console URL Denetimi

Şimdi tüm bu hataları düzelttiysek şimdi düzelttiğimiz hatayı Google’a bildirelim. Önce sorunu gerçekten düzelttik mi bunu kontrol edelim. Google Search Console‘daki sol bölümden URL denetimi alanına tıklayıp, ilgili URL’leri analiz edelim.

---

Analiz sonucunda karşınıza çıkan sonuç sizin Google’daki mevcut durumunuzu ifade eder. Yani sorun düzelmiş olsa bile henüz Google bu sayfayı incelemediği için size mevcut durumu gösterir. Hatanın düzelip düzelmediğini anlamak için sağ üst bölümdeki “CANLI URL’Yİ TEST ET” butonuna tıklayın.

Eğer canlı Url testi sonucunda herhangi bir sorun almazsanız “DİZİNE EKLENMESİNİ İSTE” alanına tıklayın. Daha sonra sol menüden Mobil Kullanılabilirlik bölümüne gidin ve düzelttiğiniz sorunları seçerek “Doğrulamayı Başlat” butonuna tıklayın!

Artık mobil kullanılabilirlik sorunlarıyla ilgili, biz webmasterlar olarak üzerimize düşen görevi yapmış olduk. Bu hataları sürekli olarak ve zaman içinde almaya devam ediyorsanız, bu sorunları düzeltmeye çalışmak en iyisidir. Ancak siteniz Google mobil uyumlu testten geçiyorsa çok fazla endişelenmenize gerek olmayabilir.

Benzer sorunları Yandex Webmaster aracında da yaşıyorsanız aşağıdaki rehberi incelemenizi tavsiye ederiz.

Yandex Webmaster Aracı (2021 Kapsamlı Rehber)

---

Web sitenizdeki mobil kullanılabilirlik sorunları makalemizin sonuna geldik. Umarız bu makale sizin için faydalı olmuştur. Mobil kullanılabilirlik sorunlarını nasıl çözeceğinizi bilmiyorsanız, web site adresinizi yorumlarda yazarak sorunlarınızı bize iletebilirsiniz.