Müşterileriniz sitenize bir gün bilgisayardan, ertesi gün telefondan, akşam da tabletten girebilir. Her ekranda menünün açılması, yazıların okunması ve düğmelere rahatça basılabilmesi gerekir. Responsive (duyarlı) tasarım tam olarak bunu sağlar: site, açıldığı ekranın boyutuna göre kendini yeniden düzenler.
Responsive tasarım ne demek?
Responsive tasarımda tek bir site vardır ve bu site ekran genişliğine göre farklı yerleşimler kullanır. Bilgisayarda yan yana duran üç kutu, telefonda alt alta dizilir. Geniş menü, küçük ekranda bir menü simgesinin arkasına saklanır. Görseller ekrana sığacak şekilde küçülür.
Eskiden bazı işletmeler telefon için ayrı bir “m.” adresli site kurardı. Bu yöntem hem iki ayrı içerik yönetmeyi gerektirdiği hem de güncellemelerde tutarsızlık yarattığı için artık pek tercih edilmiyor. Bugün yaygın yaklaşım, tek bir sitenin her ekrana uyum sağlamasıdır.
Neden bu kadar önemli?
Ziyaretçilerin büyük kısmı telefondan geliyor
Bir kafede, toplu taşımada ya da dükkân önünde arama yapan kişi büyük ihtimalle telefonunu kullanır. Siteniz telefonda küçük yazılarla, yana kayan sayfalarla açılıyorsa ziyaretçi birkaç saniye içinde geri dönüp başka bir siteye geçer.
Arama motorları mobil görünümü esas alıyor
Google, siteleri değerlendirirken öncelikle sitenin mobil sürümüne bakar. Telefonda eksik içerik gösteren ya da kullanımı zor olan bir site, arama sonuçlarında da dezavantajlı duruma düşebilir.
Güven ve satış doğrudan etkilenir
Bozuk görünen bir sayfa, işletmenin özensiz olduğu izlenimini verir. Formu dolduramayan, sepet düğmesine basamayan ya da telefon numarasına dokunarak arayamayan ziyaretçi, müşteriye dönüşmeden ayrılır.
Bakım tek yerden yapılır
Tek bir site olduğu için içerik, fiyat ya da kampanya güncellemesi bir kez yapılır ve her ekranda aynı anda görünür.
İyi bir responsive sitede neler olmalı?
- Okunabilir yazı boyutu: Telefonda yakınlaştırmadan okunabilen metin.
- Parmakla rahat basılan düğmeler: Bağlantılar ve düğmeler birbirine çok yakın olmamalı.
- Yana kaymayan sayfa: Sayfa yalnızca aşağı doğru kaydırılmalı, yatay kaydırma çubuğu çıkmamalı.
- Kolay bulunan menü: Menü simgesi belirgin olmalı, açılan menü tek elle kullanılabilmeli.
- Hafif görseller: Telefonda büyük boyutlu görseller sayfayı yavaşlatır; uygun boyutta ve sıkıştırılmış olmalı.
- Dokununca arayan telefon numarası: Numaraya dokunulduğunda arama ekranı açılmalı.
- Kısa ve sade formlar: Gereksiz alan sorulmamalı, klavye türü alana uygun açılmalı (e-posta alanında @ işaretli klavye gibi).
Sitenizi nasıl kontrol edersiniz?
Teknik bilgi gerektirmeyen basit bir kontrolle başlayabilirsiniz:
- Kendi telefonunuzdan açın. Ana sayfa, hizmetler, iletişim ve varsa sepet sayfalarını tek tek gezin. Yazıları okumak için yakınlaştırmanız gerekiyor mu, not alın.
- Farklı cihazlarda deneyin. Bir yakınınızın farklı marka telefonundan ve bir tabletten de bakın. Ekran boyutu değiştikçe sorunlar ortaya çıkabilir.
- Telefonu yan çevirin. Yatay görünümde menünün ve görsellerin bozulup bozulmadığına bakın.
- Bilgisayarda tarayıcı araçlarını kullanın. Chrome, Edge ya da Firefox’ta sayfaya sağ tıklayıp “İncele”yi seçtikten sonra cihaz görünümüne geçerek farklı ekran genişliklerini deneyebilirsiniz.
- Google Search Console’a göz atın. Siteniz bağlıysa, Google’ın sayfa deneyimi ve dizine ekleme raporlarında mobil tarafta bir sorun görünüp görünmediğini kontrol edin.
- Bir işlemi baştan sona yapın. Telefondan form gönderin, ürün sepete ekleyin ya da WhatsApp düğmesine basın. Ziyaretçinin yapacağı asıl işin sorunsuz çalıştığından emin olun.
Sık yapılan hatalar
- Bilgisayar ekranında beğenilip telefonda hiç denenmeden yayına alınan tasarımlar.
- Telefonda ekranın büyük kısmını kaplayan açılır pencereler ve kapatma düğmesi bulunamayan duyurular.
- Yazı içeren görseller: Görselin içindeki yazı telefonda okunamayacak kadar küçülür.
- Tabloların telefonda taşması. Uzun tablolar ya kaydırılabilir bir alana alınmalı ya da kart görünümüne dönüştürülmeli.
- Telefonda bazı içerikleri tamamen gizlemek. Önemli bilgi her ekranda erişilebilir olmalı.
Hız da responsive tasarımın parçasıdır
Telefonda düzgün görünmek tek başına yetmez; sayfanın mobil veriyle de makul sürede açılması gerekir. Bilgisayarda fark edilmeyen büyük bir görsel ya da ağır bir kaydırmalı vitrin, zayıf bağlantıda ziyaretçiyi bekletir. Görselleri WebP gibi güncel biçimlerde ve gerektiği boyutta yüklemek, ekranın altında kalan görsellerin sayfa kaydırıldıkça yüklenmesini sağlamak ve gereksiz eklentileri kaldırmak bu konuda en çok fark yaratan adımlardır. Google’ın ücretsiz PageSpeed Insights aracıyla sayfanızın mobil sonucuna ve önerilerine bakabilirsiniz.
Nasıl başlanır?
Yeni bir site yaptıracaksanız tasarım sürecinde telefon görünümünü ayrıca isteyin ve onaylayın. Mümkünse tasarımın önce telefon için düşünülüp sonra büyük ekranlara genişletildiği “mobil öncelikli” yaklaşımı tercih edin; küçük ekranda neyin gerçekten gerekli olduğunu belirlemek, sitenin genelini de sadeleştirir.
Mevcut siteniz eskiyse önce yukarıdaki kontrol listesiyle sorunları not edin. Birkaç küçük düzeltmeyle çözülebilecek durumlar olduğu gibi, altyapının artık yetersiz kaldığı ve yenilemenin daha mantıklı olduğu durumlar da vardır. Yeni bir yapı düşünüyorsanız kurumsal web sitesi hizmetimizin kapsamına göz atabilirsiniz.
Kısa kontrol listesi
- Telefonda yazılar yakınlaştırmadan okunuyor mu?
- Sayfa yana kayıyor mu?
- Menü kolayca açılıp kapanıyor mu?
- Telefon numarası ve WhatsApp düğmesi dokununca çalışıyor mu?
- Formlar telefondan gönderilebiliyor mu?
- Sayfalar mobil veriyle makul sürede açılıyor mu?
Sitenizin telefonda nasıl göründüğünden emin değilseniz ya da yeni bir site planlıyorsanız alpinnext.tr üzerinden ya da WhatsApp 0510 220 33 51 numarasından bize ulaşabilirsiniz.