Duyarlı web tasarımı, yani responsive tasarım, sitenin düzenini ekranın boyutuna göre kendiliğinden ayarlamasıdır. Aynı site telefonda tek sütun, bilgisayarda çok sütun görünür. Ziyaretçi yakınlaştırmadan ya da yana kaydırmadan okur. Mobil deneyimi önceliklendirin; ziyaretçilerinizin cihaz dağılımını analitik verilerinizden kontrol edin. Bu özellik artık bir tercih değil, beklentidir.
Bu yazıda mantığı sade bir dille anlatıyor, mobil uyumun SEO ile ilişkisini açıyor ve siteyi kendi telefonunuzdan nasıl test edeceğinizi gösteriyoruz. Yeni bir site planlıyorsanız web tasarım hizmetimiz kapsamında mobil uyumu baştan düşünüyoruz. Önce kavramı netleştirelim.
Duyarlı web tasarımı nedir ve nasıl çalışır?
Duyarlı web tasarımı, tek bir sitenin farklı ekran genişliklerine uyum sağlayacak şekilde kurulmasıdır. Sayfadaki kutular, yazılar ve görseller sabit bir ölçüye bağlı kalmaz; ekrana göre küçülür, büyür ya da alt alta dizilir. Bu sayede ayrı bir mobil site gerekmez.
Çalışma mantığını mutfak dolabına benzetebiliriz. Geniş bir mutfakta dolaplar yan yana dizilir. Dar bir mutfakta aynı dolaplar üst üste konur. Dolapların sayısı aynıdır, yalnızca yerleşim değişir. Duyarlı tasarım da aynı içeriği farklı ekranlara farklı yerleştirir.
Teknik olarak üç yapı taşı kullanılır:
- Esnek ölçüler: Kutular sabit piksel yerine ekranın oranına göre genişler.
- Esnek görseller: Görseller bulundukları kutudan taşmaz, onunla birlikte küçülür.
- Ekran kuralları: Belirli bir genişlikten sonra düzen değişir. Örneğin menü, dar ekranda “üç çizgi” simgesine dönüşür.
Bu yaklaşımın temelini web.dev’deki duyarlı tasarım temelleri sayfasında görebilirsiniz. Kod bilmiyorsanız ayrıntıya girmenize gerek yok. Önemli olan, sitenizin bu mantıkla yapıldığını bilmek ve test edebilmektir.
Eski yöntemde işletmeler masaüstü site için bir adres, telefon için ayrı bir adres tutardı. İki site de ayrı güncellenir, ayrı bakım isterdi. Duyarlı tasarımda tek adres, tek içerik vardır. Metni bir kez değiştirirsiniz, her ekranda güncellenir.
Mobil uyumlu tasarım ile duyarlı tasarım aynı şey midir?
Günlük dilde aynı anlamda kullanılırlar, ama küçük bir fark vardır. Mobil uyumlu site, telefonda sorunsuz açılan sitedir. Duyarlı tasarım ise bu uyumu sağlamanın bir yoludur ve tüm ekranlara uyum içerir. Yani duyarlı tasarım mobil uyumluluğun yolu, mobil uyum da hedeftir.
Bir site telefonda küçük bir masaüstü sayfası gibi açılıyorsa, “mobilde açılıyor” denebilir ama mobil uyumlu sayılmaz. Yazılar çok küçük kalır, düğmelere basmak zorlaşır. Gerçek uyum, kullanıcının telefonda rahat okuyup işlem yapabilmesidir.
Piyasada üç farklı yaklaşımla karşılaşabilirsiniz:
- Duyarlı tasarım: Tek site, esnek düzen. En yaygın ve en kolay yönetilen yöntemdir.
- Ayrı mobil site: Telefon için ayrı bir adres ve ayrı içerik. Bakımı zordur, bugün nadiren tercih edilir.
- Uyarlanabilir tasarım: Sunucu cihaza bakıp uygun sürümü gönderir. Daha karmaşıktır ve özel gereksinim varsa seçilir.
Çoğu işletme için doğru yol birincisidir. Özel bir gerekçe olmadıkça yapı karmaşıklaştırılmaz. “Mobil uyumlu web tasarım” aradığınızda genellikle bu yöntemi kastedersiniz.
Markanıza uygun bir tasarımın nasıl olacağı konusunda web tasarım nedir yazısı genel çerçeveyi verir. Orada tasarımın yalnızca görünüş olmadığını, yapı ve işlevle birlikte düşünüldüğünü göreceksiniz.
Mobil uyumluluk SEO’yu nasıl etkiler?
Google, sitelerin çoğunu mobil sürüm üzerinden tarar ve değerlendirir. Buna mobil öncelikli dizinleme denir. Mobilde eksik ya da bozuk açılan bir site, aramada da zayıf değerlendirilebilir. Mobil uyum tek başına sıralama getirmez, ama eksikliği sıralamayı zorlaştırır.
Google’ın bu konudaki resmî açıklaması mobil öncelikli dizinleme rehberinde yer alıyor. Rehberin özü şudur: masaüstünde var olan içeriğin mobilde de bulunması gerekir. Mobilde gizlenen ya da sadeleştirilen metin, Google tarafından görülmeyebilir.
Mobil uyumun SEO’ya dokunduğu başlıca noktalar şunlardır:
- İçerik eşitliği: Masaüstündeki metin, görsel ve bağlantılar mobilde de olmalı.
- Kullanıcı deneyimi: Sayfadan hemen çıkan ziyaretçi, siteden memnun kalmadığını gösterir.
- Hız: Telefon bağlantısı çoğu zaman daha yavaştır. Ağır sayfalar mobilde daha çok zorlanır.
- Tarama: Google’ın botu da mobil cihaz gibi davranarak sayfayı okur.
Önemli bir uyarı yapalım. Mobil uyumlu olmak sıralama garantisi vermez. İçerik, bağlantılar, rekabet ve birçok başka etken de işin içindedir. Ama mobil uyumsuz bir site, ciddi bir engelle yarışa başlar. Teknik zemini daha geniş görmek için teknik SEO yazısına bakabilirsiniz.
Hız boyutu ayrı bir konudur. Sayfanın telefonda ne kadar çabuk açıldığı, Core Web Vitals başlığı altında ölçülür. Mobil uyum ile hız birlikte düşünülmelidir.
Siteniz mobil uyumlu mu, telefondan nasıl test edersiniz?
En kolay test, sitenizi kendi telefonunuzda açıp gerçek bir müşteri gibi kullanmaktır. Yazılar rahat okunuyor mu, menüye kolay ulaşılıyor mu, telefon numarasına tek dokunuşla arama yapılıyor mu, form doldurulabiliyor mu diye bakın. Beş dakikalık bu deneme çoğu sorunu ortaya çıkarır.
Adım adım deneme şöyle yapılır:
- Siteyi telefonun tarayıcısında açın. Ana sayfadan başlayın.
- Yazıları yakınlaştırmadan okumayı deneyin.
- Menüyü açın ve her hizmet sayfasına gidin.
- İletişim formunu doldurup göndermeyi deneyin.
- Telefonu yatay çevirin; düzenin bozulup bozulmadığına bakın.
- Telefon numarasına ve haritaya dokunun; çalışıp çalışmadığını görün.
- Mümkünse farklı bir telefonda, farklı bir tarayıcıda da tekrarlayın.
Bilgisayarda hızlı kontrol için tarayıcının geliştirici araçlarındaki telefon görünümü kullanılabilir. Chrome’da sayfada sağ tıklayıp “İncele” seçeneğine girin ve telefon simgesine basın. Ekran boyutunu değiştirerek düzenin nasıl tepki verdiğini izleyebilirsiniz. Ancak bu görünüm gerçek telefonun yerini tutmaz.
Google’ın PageSpeed Insights aracı da mobil sonuçları ayrı gösterir. Sayfa adresini yazıp “Mobil” sekmesine bakın. Rapordaki uyarılar sorunun nerede olduğuna dair ipucu verir. Search Console kullanıyorsanız oradaki raporlar da yardımcı olur; kullanımı için Google Search Console kullanımı yazısına bakabilirsiniz.
Test sırasında bir arkadaşınıza ya da müşterinize de siteyi gösterin. Siz siteyi çok iyi bildiğiniz için sorunları göremeyebilirsiniz. Yabancı bir göz, tıklanmayan düğmeyi ilk dakikada bulur.
Mobil uyumlu sitelerde en sık yapılan hatalar nelerdir?
En sık hatalar küçük yazı, birbirine çok yakın düğmeler, yana kaydırma gerektiren sayfa ve kapatılamayan açılır pencerelerdir. Hepsi ziyaretçiyi yorar ve siteden çıkarır. Çoğu da tasarım aşamasında telefon ekranı hesaba katılmadığı için ortaya çıkar.
Çok küçük yazı. Masaüstünde okunur görünen yazı, telefonda ancak yakınlaştırınca okunur. Ziyaretçi yakınlaştırmak zorunda kalıyorsa sayfa mobil için hazırlanmamış demektir. Ana metin, telefonda göz yormadan okunacak büyüklükte olmalıdır.
Birbirine yakın düğmeler. Parmak, fare imleci kadar hassas değildir. İki bağlantı yan yana sıkışmışsa yanlış olana basılır. Düğmelerin ve bağlantıların arasında rahat bir boşluk bırakılmalıdır. Telefon numarası ve “Teklif iste” gibi önemli düğmeler büyük ve kolay erişilir olmalıdır.
Yatay kaydırma. Sayfa ekrandan taşıyorsa ziyaretçi sağa sola kaydırmak zorunda kalır. Genellikle sabit genişlikli bir görsel, tablo ya da gömülü içerik buna yol açar. Bu hata görsel olarak hemen fark edilir ve güveni sarsar.
Kapatılamayan pencere. Açılır pencere ya da çerez bildirimi telefon ekranının büyük kısmını kaplıyor, kapatma düğmesi de ekranın dışında kalıyorsa ziyaretçi içeriğe ulaşamaz. Pencerenin kapatma düğmesi her zaman görünür olmalıdır.
Ağır görseller. Büyük bir fotoğraf masaüstünde fark edilmeyebilir, ama mobil bağlantıda sayfayı yavaşlatır. Görseller ekran boyutuna uygun hazırlanmalı ve sıkıştırılmalıdır.
Eksik mobil içerik. Masaüstünde görünen bir bölümün mobilde gizlenmesi, SEO açısından da risk taşır. Mobil sürümde önemli içerik bulunmuyorsa Google da onu görmez.
Bu hataların hepsini tek bir telefon denemesiyle yakalayabilirsiniz. Düzeltme için bir tasarımcıya ya da geliştiriciye ihtiyaç duyabilirsiniz; ama sorunu bilmek, doğru isteği iletmenizi sağlar.
Yeni bir site yaptırırken mobil uyum için neler istenmeli?
Teklif aşamasında tasarımın önce telefon ekranı düşünülerek hazırlanmasını, gerçek cihazlarda test edilmesini ve teslim öncesi hız ölçümü yapılmasını isteyin. Üç talep de yazılı olursa, mobil uyum sonradan düzeltilecek bir ayrıntı olmaktan çıkar ve işin parçası olur.
Bir kontrol listesi hazırlayalım:
- Tasarım taslakları telefon ve bilgisayar için ayrı gösterilsin.
- Teslimden önce en az iki farklı telefonda test yapılsın.
- Düğmeler ve bağlantılar parmakla rahat basılacak büyüklükte olsun.
- Görseller her ekran için uygun boyutta hazırlansın.
- Açılır pencere ve çerez bildirimi mobilde içeriği kapatmasın.
- Hız ölçümü mobil sonuçlarla birlikte paylaşılsın.
Bu istekleri ajansa iletmeden önce bütçenin neye göre şekillendiğini bilmek de yardımcı olur. Mobil uyum ek bir paket değil, düzgün yapılan bir sitenin normal parçasıdır. Ücret konusunda web tasarım fiyatları yazısı, hangi kalemlerin bedeli etkilediğini anlatıyor.
SEO açısından bakıldığında, siteyi kurarken doğru yapı kurmak sonradan onarım yapmaktan kolaydır. Bu bakış açısını SEO uyumlu web sitesi yazısında ayrıntılı bulabilirsiniz. Projeniz için görüşmek isterseniz iletişim sayfamız açık.
Sık sorulan sorular
Responsive tasarım ile mobil uygulama aynı mıdır?
Hayır. Responsive tasarım, tarayıcıda açılan web sitesinin ekrana uyum sağlamasıdır. Mobil uygulama ise telefona indirilen ayrı bir yazılımdır. Çoğu işletme için uyumlu bir web sitesi yeterlidir. Uygulama ancak özel bir ihtiyaç olduğunda gündeme gelir.
Mobil uyumlu site Google’da daha üst sırada çıkar mı?
Mobil uyum tek başına sizi üst sıraya taşımaz. Ama Google mobil sürümü esas aldığı için mobilde bozuk bir site dezavantajlı olur. Sıralamada içerik kalitesi, hız, bağlantılar ve rekabet de rol alır. Mobil uyum zemini hazırlar, sonucu garanti etmez.
Eski sitem mobil uyumlu değilse ne yapmalıyım?
Önce telefondan test ederek sorunun boyutunu görün. Küçük hatalar tema ayarıyla düzelebilir. Tasarım baştan masaüstüne göre yapılmışsa, çoğu zaman yeniden tasarım daha sağlıklıdır. Karar vermeden önce hangi sayfaların en çok ziyaret aldığına bakın.
Duyarlı tasarım siteyi yavaşlatır mı?
Doğru yapıldığında yavaşlatmaz. Yavaşlığın sebebi genellikle büyük görseller ve gereksiz betiklerdir. Her ekran için uygun boyutta görsel kullanmak ve sayfayı sade tutmak hızı korur. Hız ölçümünü hem mobil hem masaüstü için yapın.
Mobil uyumluluğu ne sıklıkla kontrol etmeliyim?
Sitede büyük bir değişiklik yaptığınızda, yeni bir sayfa ya da eklenti eklediğinizde ve üç ila altı ayda bir kontrol etmek yeterlidir. Reklam verdiğiniz sayfaları ise daha sık kontrol edin; çünkü reklamla gelen ziyaretçilerin hangi cihazı kullandığını analitik verilerinizden görebilirsiniz.