Mobil Uyumlu Web Sitesi Nedir, Neden Önemlidir?

Mobil uyumlu web sitesi, telefonda ayrı bir sürüme ihtiyaç duymadan, ekran boyutuna göre düzenini ayarlayan ve rahat kullanılan sitedir. Yani telefondan açan ziyaretçi yakınlaştırmadan okuyabilir, yana kaydırmadan gezebilir ve parmağıyla düğmelere doğru basabilir. Bu yazı, mobil uyumun ne olduğunu, Google'ın mobil öncelikli dizinleme hakkında söylediklerini, sık görülen sorunları ve sitenizi telefonda nasıl test edeceğinizi anlatıyor.

Mobil uyum, genel tasarım kararlarının bir parçasıdır; tasarımın bütününü web sitesi tasarımı nasıl yapılır rehberinde ele aldık. Burada yalnızca mobil kısma odaklanıyoruz.

Kısa cevap: mobil uyumlu ne demek?

Mobil uyumlu site, aynı adreste aynı içeriği sunar ve görünümünü telefonun, tabletin ya da bilgisayarın ekranına göre düzenler. Buna duyarlı (responsive) tasarım denir. Ayrı bir "mobil site" kurmak değil, tek sitenin her ekranda doğru çalışmasıdır. Mobil uyumlu olduğunu şu üç işaretle anlarsınız:

• Telefonda yakınlaştırmadan okunuyor.
• Yana kaydırmak gerekmiyor; içerik ekrana sığıyor.
• Düğmeler ve bağlantılar parmakla rahat dokunulacak boyutta ve aralıkta.

Duyarlı tasarım nasıl çalışır?

web.dev'in duyarlı tasarım temelleri belgesine göre duyarlı tasarım birkaç temel parçaya dayanır. Hepsini bilmeniz gerekmez ama ne yaptıklarını bilmek, sorunu tanımanıza yardım eder.

• Viewport etiketi: sayfanın başındaki küçük bir ayardır. Belgeye göre bu etiket yoksa mobil tarayıcılar sayfayı masaüstü genişliğinde çizip küçülterek sığdırmaya çalışır ve yazılar okunmaz hale gelir. Etiket tarayıcıya sayfayı cihazın gerçek genişliğine göre göstermesini söyler.
• İçeriği ekrana sığdırmak: görseller ve düzen sabit genişlikle değil esnek ölçülerle tanımlanır; böylece içerik ekrandan taşmaz ve yatay kaydırma çıkmaz.
• Esnek yerleşim: düzen, genişliğe göre sütunlarını değiştirir; masaüstünde yan yana duran kartlar telefonda alt alta dizilir.
• Medya sorguları: ekran belirli bir genişliğin altına ya da üstüne geçtiğinde farklı stil uygulayan kurallardır. Belge, küçük ekrandan başlayıp yerleşim bozulduğunda genişletmeyi önerir.

Pratik sonuç şudur: Bir hazır oluşturucu kullanıyorsanız bu parçalar genellikle tasarımın içinde hazır gelir; ajans ya da özel yazılımla çalışıyorsanız teslim almadan önce bunların yapıldığını sormak ve telefonda denemek sizin hakkınızdır.

Mobil uyum, ayrı bir mobil site değildir. Telefon için ayrı bir adreste farklı bir sürüm yayınlamak mümkündür, ama Google duyarlı tasarımı uygulaması ve bakımı en kolay yöntem olarak tanımlar ve önerir; çünkü her cihaza aynı adresten aynı sayfa sunulur. İki ayrı sürümü güncel ve eşit tutmak ise ayrı bir iş yüküdür.

Google'ın mobil öncelikli dizinlemesi: ne söylüyor?

Google'ın mobil öncelikli dizinleme belgesine göre Google, bir sitenin dizinlenmesi ve sıralanması için sitenin mobil sürümündeki içeriği, akıllı telefon tarayıcısıyla tarayarak kullanır. Bunun işletme sitesi sahibi için üç sonucu vardır:

1. İçerik eşitliği: Belge, mobil sitenizin masaüstü sitenizle aynı içeriği taşımasını ister. Telefonda gizlediğiniz ya da kısalttığınız bir metin, Google'ın gördüğü içerikte de eksik olabilir.
2. Başlık ve açıklama eşitliği: Sayfa başlıklarının ve açıklamalarının iki sürümde eşdeğer olması gerekir.
3. Yapı farkları risktir: Belge, masaüstü ve mobil arasındaki yapı ve düzen farklarının Google'ın içeriği farklı anlamasına yol açabileceğini ve eksik görsel ya da içerik gibi farkların sıralama kaybına neden olabileceğini söyler.

Bu bilgi doğrudan şu soruyu cevaplar: Mobil uyum sıralamayı etkiler mi? Google'ın belgesi, mobil sürümün dizinleme ve sıralamada kullanılan sürüm olduğunu ve mobilde içerik eksikse bunun görünürlüğü etkileyebileceğini söyler. Bu, "mobil uyumlu yaparsanız üst sıraya çıkarsınız" demek değildir; belge böyle bir vaatte bulunmaz. Doğru okuma şudur: mobil sürümünüzde içerik, başlık ve açıklama eksiksizse Google sitenizi doğru anlar; eksikse sorun çıkabilir. Asıl fayda ise ziyaretçinin sitede kalıp ihtiyacını bulabilmesidir.

Mobilde sık görülen sorunlar

W3C'nin erişilebilirliğe giriş sayfası, erişilebilir tasarımın küçük ekranlı mobil cihaz kullanıcılarına ve parlak güneş gibi geçici koşullardaki kişilere de fayda sağladığını belirtir. Yani küçük ekranda okunur ve dokunulur site yapmak, ayrı bir iş değil, aynı kalitenin parçasıdır.

Kendi sitenizi telefonda nasıl test edersiniz?

Siteyi telefonda nasıl test ederim sorusunun cevabı: gerçek bir telefon, birkaç ayrı sayfa ve kısa bir yürüyüş. Aşağıdaki sırayı izlemek yeterlidir; ücretli bir araç gerekmez.

1. Ana sayfayı açın. Yakınlaştırmadan okuyabiliyor musunuz? İlk ekranda ne yaptığınız ve bir sonraki adım görünüyor mu?
2. Yana kaydırmayı deneyin. Sayfa parmakla yana kayıyorsa bir öğe ekrandan taşıyordur.
3. Menüyü açın. Açılıyor mu, kapanıyor mu, her öğeye rahat basılıyor mu?
4. Telefon numarasına dokunun. Arama ekranı açılıyor mu?
5. Formu doldurun. Klavye açıldığında alanlar görünür kalıyor mu, gönder düğmesine ulaşılıyor mu?
6. Hizmet ya da ürün sayfasını gezin. Görseller yüklenip düzgün görünüyor mu, tablolar taşmıyor mu?
7. Telefonu yatay çevirin. Düzen bozuluyor mu?
8. Açık havada ya da ekran parlaklığını düşürerek bakın. Metin hâlâ okunuyor mu?
9. Başka bir telefonda tekrarlayın. Farklı ekran boyutu, farklı sorun ortaya çıkarabilir.
10. Masaüstüyle karşılaştırın. Masaüstünde olan önemli bir bilgi telefonda eksik mi?

Bilgisayarda çalışıyorsanız tarayıcınızın geliştirici araçlarındaki cihaz görünümü de bir ön fikir verir, ama dokunma deneyimi, klavye ve gerçek ışık koşulları için gerçek telefonu yerine koymaz. Bunu bir kez yapıp sitede önemli bir değişiklik yaptıkça tekrarlayın.

Telefon ve WhatsApp butonları

Telefondan gelen ziyaretçi için en doğal eylem, aramak ya da mesaj yazmaktır. Bu yüzden iletişim bilgileri mobilde özellikle öne çıkmalıdır:

• Aranabilir telefon: numaranın dokunulduğunda arama başlatan bir bağlantı olması gerekir; düz metin olarak yazılmış numarayı ziyaretçi kopyalamak zorunda kalır.
• Görünür konum: düğme ilk ekranda ya da sayfa boyunca kolay ulaşılabilir bir yerde olsun, ama içeriği örtmesin.
• Doğru bilgi: yalnızca gerçekten yanıt verdiğiniz bir numarayı ve mesaj kanalını koyun; yanıtsız kalan bir buton güveni azaltır.
• Tek net eylem: arama, mesaj, yol tarifi gibi birden çok düğmeyi arka arkaya sıralamak yerine, işletmeniz için en çok işe yarayanı öne çıkarın.
• Dokunma hedefi: düğmeler parmakla rahat basılacak büyüklükte olmalı ve başka düğmelere çok yakın durmamalı.

Bu düğmelerin hangi sayfada nasıl yer alacağı, sitenin sayfa yapısıyla da ilgilidir; bunun için işletme web sitesinde olması gereken sayfalar yazısındaki iletişim sayfası bölümüne bakabilirsiniz.

Hazır tasarımlarda mobil uyum

Site Oluşturucu'nun tasarım yönetimi sayfası, tüm tasarımların masaüstü, tablet ve mobilde ayrı ayrı çalışacak şekilde hazırlandığını belirtir. Tasarımlar sayfasındaki her tasarımın önizlemesinde masaüstü, tablet ve telefon görünümleri vardır; bu önizlemeyle tasarımın telefonda nasıl durduğunu görebilirsiniz.

Ancak tasarımın mobil uyumlu olması, sizin sitenizin mobilde sorunsuz olacağı anlamına gelmez. Metinleriniz, görselleriniz ve eklediğiniz bölümler tasarımın düzenini farklı yükler: çok uzun bir başlık, büyük bir görsel ya da geniş bir tablo mobilde sorun çıkarabilir. Bu yüzden yayına almadan önce yukarıdaki test sırasını kendi içeriğinizle uygulayın.

Yayına almadan önce mobil kontrol

• Viewport ve yerleşim tasarım tarafından sağlanıyor mu, telefonda gerçekten doğrulandı mı?
• Yana kaydırma yok mu?
• Gövde yazısı yakınlaştırmadan okunuyor mu?
• Düğmeler ve menü parmakla rahat kullanılıyor mu?
• Telefon numarası aranıyor mu, form telefonda doldurulabiliyor mu?
• Masaüstündeki önemli içerik telefonda da var mı?
• Sayfa başlıkları ve açıklamaları iki görünümde de aynı mı?