Mobil uyumlu web sitesi nedir, siteniz telefonda nasıl görünmeli?

Mobil uyumlu site, aynı adresin aynı içeriği ekran genişliğine göre yeniden yerleştirerek sunmasıdır. Telefon için ayrı bir adres, ayrı bir içerik ya da ayrı bir yazılım yoktur; sayfa dar ekranda kendini toplar, geniş ekranda açılır.

Bize en çok gelen cümle şu: "Bilgisayarda gayet güzel duruyor ama telefonda her şey kaymış." Bu yazı tam olarak onun cevabı.

Mobil uyum neden bu kadar konuşuluyor?

İki sebebi var ve ikisi de romantik değil.

Birincisi ziyaretçi. Bir kurumsal sitede trafiğin çoğunluğu artık telefondan geliyor. Kendi sitenizde oran ne, tahmin etmenize gerek yok: Google Analytics 4'te Raporlar > Teknoloji bölümündeki cihaz kırılımı size kesin sayıyı verir. Oraya bakın, sonra o oranın ne kadarının forma ulaşabildiğini düşünün.

İkincisi Google. Arama motoru sitenizi tararken masaüstü sürümü değil, telefon sürümünü esas alıyor. Yani telefonda gizlediğiniz bir metin, Google için pratikte o sayfada olmayan bir metindir. Menüyü sadeleştireyim derken içeriğin yarısını mobil görünümden çıkaran siteler bu yüzden sıralama kaybeder.

Responsive, ayrı mobil site ve uygulama arasındaki fark ne?

Üç ayrı şey, sık sık birbirine karıştırılıyor:

Uygulama sorusu özellikle sık geliyor, o yüzden açık konuşalım. Yılda birkaç kez ziyaret edilen bir kurumsal site için uygulama yaptırmak para kaybıdır. Kimse bir kez teklif almak için telefonuna uygulama indirmez. Uygulama, müşterinin haftada birkaç kez geri döndüğü işlerde (sipariş takibi, bayi paneli, abonelik) anlam kazanır.

Telefonda en sık hangi hatalar çıkıyor?

Denetimlerde döne döne aynı şeyleri görüyoruz:

• Yatay kaydırma. Sayfa sağa sola kayıyorsa genelde sebep tek bir öğedir: sabit genişlik verilmiş bir tablo, taşan bir görsel ya da uzun bir e-posta adresi.
• Küçük yazı. Okumak için ekranı büyütmek gerekiyorsa gövde metni fazla küçüktür.
• Yan yana duran küçük butonlar. Parmak farenin ucu kadar hassas değil. Dokunulacak öğeler arasında boşluk yoksa yanlış tuşa basılır ve ziyaretçi geri döner.
• Üzerine gelince açılan menüler. Dokunmatik ekranda "üzerine gelmek" diye bir şey yok. Masaüstünde hover ile açılan alt menüler telefonda ya hiç açılmaz ya da tek dokunuşta yanlış sayfaya götürür.
• Ekranı kaplayan açılır pencereler. Kapatma tuşu görünmüyorsa o sayfa kaybedilmiştir.
• Telefon numarasının düz metin olması. Numara tel: bağlantısıyla verilmeliyse dokununca arama başlar. Düz metin numara, kopyalanıp yapıştırılmayı bekler ki kimse bunu yapmaz.
• Ağır görseller. Masaüstü için hazırlanmış 2000 piksel genişliğindeki fotoğraf, mobil veriyle açılan sayfayı yavaşlatan ilk kalemdir.

Sitenizi kendiniz nasıl test edersiniz?

Ajans beklemeden yapabileceğiniz üç kontrol var.

Gerçek telefonunuzla gezin. Emülatör değil, kendi cihazınız. Ana sayfadan girin, hizmete bakın, iletişime gidin, formu doldurun, gönder tuşuna basın. Yolda bir yerde sinirlendiyseniz orası sorunlu bölümdür.

Tarayıcının cihaz modunu açın. Chrome'da sayfaya sağ tıklayıp "İncele" dedikten sonra cihaz simgesine basarsanız farklı ekran genişliklerini deneyebilirsiniz. 360 piksel genişlik, sahadaki en dar yaygın ekranı temsil eder; orada bozulmuyorsa iyisiniz.

Search Console'un Core Web Vitals raporuna bakın. Burada laboratuvar testi değil, sitenizi gerçekten ziyaret eden insanların verisi var. Mobil sekmesi masaüstünden belirgin şekilde kötüyse sorun tasarımda değil, çoğu zaman görsel boyutlarında ve yüklenen betiklerdedir. Bu tarafı sayfa hızı yazımızda ayrıntılı anlattık.

Mobil öncelikli tasarım pratikte nasıl kuruluyor?

Ekibin çizime nereden başladığı sonucu değiştiriyor. Masaüstü tasarımı bitip sonra "bunu bir de telefona sığdıralım" denirse, sığdırma işlemi hep budama olur. Dar ekranla başlanırsa sıralama tersine döner: neyin şart olduğuna önce karar verilir, geniş ekranda üstüne eklenir.

Karar verirken sorduğumuz sorular şunlar:

Ziyaretçi bu sayfaya telefondan girdiğinde ilk ekranda ne görmeli? Kurumsal bir sitede bu genellikle ne yaptığınızı anlatan tek cümle ve bir iletişim yoludur, kayan slayt değil.

Formu kaç alanla bitirebiliriz? Telefonda yazmak zahmetlidir. Klavye tipini doğru seçmek de işin parçası: telefon alanına dokununca sayısal klavye açılmalı, e-posta alanında @ tuşu elin altında olmalı.

Menü kaç başlıktan oluşsun? Üç dokunuş derinliğindeki bir menü ağacı dar ekranda labirente dönüşür. Kurumsal bir sitede beş ila yedi ana başlık genelde yeter.

Var olan siteyi mobile uyarlamak mı, baştan yapmak mı?

Bu, sitenin yaşına ve altyapısına bakan bir karar. Kabaca şöyle ayırıyoruz:

Tema tabanlı, nispeten yeni bir site sadece birkaç bölümde taşıyorsa bu bir düzeltme işidir; yeniden yapım gerekmez ve gerekmediğini söylemek bizim işimiz. Birkaç günlük bir müdahaleyle çözülür.

Site sabit piksel genişliğiyle kurulmuşsa, yani hiç esnemiyor sadece küçülüyorsa, ya da mobil için ayrı bir adres besleniyorsa, uyarlama maliyeti yeniden yapıma yaklaşır. Böyle bir durumda kararın nasıl verileceğini site yenileme yazımızda adım adım anlattık; en kritik kısım eski adreslerin yönlendirilmesidir.

Kısa cevap

Telefonda düzgün açılan bir site, ekranı küçültülmüş masaüstü sitesi değildir. İçerik aynıdır ama sıra, boşluk ve dokunma alanları o ekran için yeniden düşünülmüştür. Kontrolü kendi telefonunuzdan yapın: forma ulaşana kadar hiçbir yerde ekranı büyütmeniz gerekmiyorsa tasarım işini yapıyor demektir.

Mevcut sitenizin dar ekranda nerede takıldığına bakmamızı isterseniz iletişim sayfasından yazabilir, yeni bir site düşünüyorsanız web tasarım hizmetimize göz atabilirsiniz.