Mobil Uyumlu (Responsive) Web Tasarım
Ziyaretçilerinizin büyük çoğunluğu sitenize telefondan geliyor ve Google da siteleri telefon görünümüne göre değerlendiriyor. Mobil uyumlu bir site, ekranın küçülmesiyle her şeyi küçülten değil, telefonda kullanılmak için ayrıca düşünülmüş sitedir. Tasarıma telefondan başlıyorum.
Responsive tasarım ne demek?
Responsive (duyarlı) tasarım, sayfanın ekran genişliğine göre kendini yeniden düzenlemesidir. Bilgisayarda yan yana duran üç kart telefonda alt alta dizilir, menü telefonda başparmağın ulaştığı yere taşınır, görseller ekrana göre boyutlanır. Tek bir site, tek bir adres; her cihazda doğru düzen.
Telefonda iyi görünmek yetmez, iyi çalışmalı
Yaptığım sitelerde telefon için şunlara bakıyorum:
- Başparmak menüsü. Telefonda ana menü ekranın altında, ikonlu bir çubuk olarak durur; tek elle ulaşılır. Bu site de böyle çalışıyor.
- Dokunma alanları. Butonlar ve bağlantılar parmakla rahat basılacak büyüklükte ve aralıkta.
- Okunur yazı. Yakınlaştırmadan okunabilen yazı boyutu ve satır uzunluğu.
- Tek dokunuşla iletişim. WhatsApp, arama ve e-posta butonları; telefon numarasına basınca doğrudan arama.
- Hafif görseller. Telefona bilgisayardaki büyük görsel değil, ekranına uygun küçük bir kopya gönderilir. Görseller panelden yüklenirken bu kopyalar kendiliğinden oluşur.
- Formlar. Telefon alanında rakam klavyesi, e-posta alanında @ işaretli klavye açılır.
- Koyu tema. Telefonunuz koyu moddaysa site de ona uyabilir.
Mobil uyum ve Google
Google, bir sitenin sıralamasını belirlerken önce telefon görünümüne bakar (mobile-first indexing). Telefonda yavaş açılan, yazıları küçük kalan ya da yatay kayan bir site, bilgisayarda ne kadar iyi görünürse görünsün geriler. Hız ve mobil uyum aynı zamanda SEO uyumlu web tasarımın temelidir.
Nasıl test ediyorum?
- Gerçek telefonlarda (iPhone ve Android) ve tablette açıp tüm sayfaları dolaşıyorum.
- Dar ekranlardan geniş ekranlara kadar farklı genişliklerde yatay kayma ve taşma olup olmadığına bakıyorum.
- Google PageSpeed ile telefon hızını ölçüyorum; hedef 90'ın üstü.
- Formları ve butonları telefonda tek tek deniyorum.
Mevcut siteniz telefonda nasıl?
Telefonunuzdan sitenizi açın ve şunlara bakın: Sayfa 3 saniyede açılıyor mu? Yazıları yakınlaştırmadan okuyabiliyor musunuz? Ekran yana kayıyor mu? Telefon numaranıza basınca arama başlıyor mu? Bir tanesine "hayır" dediyseniz siteniz ziyaretçi kaybediyor. İçeriğinizi koruyarak sitenizi mobil uyumlu hale getirebilir ya da kurumsal web sitenizi baştan yapabilirim.
Sık sorulan sorular
Mobil uyumlu site için ayrı bir mobil site mi yapılıyor?
Hayır. Tek site, tek adres; sayfa ekran genişliğine göre kendini düzenliyor. Ayrı mobil site (m.site.com) eski bir yöntem ve artık önerilmiyor.
Eski sitemi mobil uyumlu yapabilir misiniz?
Çoğu zaman eski kodu düzeltmek yerine içeriği koruyup siteyi yeniden yazmak daha hızlı ve sağlam oluyor. Sitenize baktıktan sonra hangisinin mantıklı olduğunu söylüyorum.
Tablette de düzgün görünür mü?
Evet. Telefon, tablet ve bilgisayar için ayrı düzenler kuruluyor ve hepsi teslimden önce test ediliyor.
Mobil uyum fiyata dahil mi?
Evet. Yaptığım her site mobil uyumlu olarak yapılıyor; ayrı bir kalem değil.