Sayılarla ne demek?
Responsive tasarım, bir sayfanın telefon, tablet ve masaüstü ekranlarda aynı adreste ve aynı HTML ile sunulup yalnızca düzeninin ekrana göre değişmesidir; mobil uyumluluğu sağlamanın en yaygın yoludur. Masaüstünde dört sütunlu ürün ızgarası, tablette üç, telefonda iki sütuna iner; menü yatay çubuktan açılır bir panele dönüşür.
Google, mobil uyumlu siteler için üç yapıyı destekler ama responsive tasarımı önerir. Dinamik sunumda aynı adres cihaza göre farklı HTML gönderir; ayrı mobil sitede ise mobil kullanıcılar m. alt alan adına yönlendirilir. Bu iki yapıda içerik, bağlantı ve yapılandırılmış veri iki sürümde ayrı ayrı yönetilmek zorundadır. Responsive tasarımda ise tek bir sürüm vardır ve hata payı çok daha düşüktür.
Responsive olmak tek başına iyi mobil deneyim anlamına gelmez. Masaüstü için hazırlanmış 2.000 piksellik görseller telefona küçültülerek gönderiliyorsa, sayfa görsel olarak uyumlu ama performans açısından ağırdır. Görsel optimizasyonunun parçası olan esnek görseller (srcset ve sizes) ile her cihaza uygun boyutta dosya göndermek, responsive tasarımın tamamlayıcısıdır.
Mobil yapı seçenekleri
| Yapı | Adres | HTML | SEO notu |
|---|---|---|---|
| Responsive tasarım | Tek | Aynı | Google'ın önerisi; en az hata riski |
| Dinamik sunum | Tek | Cihaza göre farklı | Vary: User-Agent başlığı ve içerik eşitliği gerekir |
| Ayrı mobil adresler | İki (www ve m.) | Farklı | Karşılıklı canonical/alternate ve yönlendirme bakımı gerekir |
Yeni bir site kurulurken ya da yeniden tasarlanırken, bugün için mantıklı seçim neredeyse her zaman responsive tasarımdır.
Responsive tasarım kurarken
- Viewport etiketini ekle. width=device-width, initial-scale=1.
- Mobilden başla. Önce küçük ekran, sonra genişlet.
- Esnek görsel kullan. srcset ve sizes ile doğru boyut.
- İçeriği gizleme. Mobilde de aynı ana içerik.
- Gerçek cihazlarda test et. Farklı ekran ve tarayıcılar.
Uygulamada ne oluyor?
En sık durum, masaüstü tasarımının küçültülerek mobile uyarlanması. Öğeler sıkışıyor, yazılar küçülüyor, dokunma alanları daralıyor; sayfa teknik olarak responsive ama kullanımı zor.
İkinci gözlem, mobilde içeriğin CSS ile gizlenmesi. Tasarımı sadeleştirmek için bölümler kaldırılıyor; responsive yapının asıl avantajı olan içerik eşitliği bozuluyor ve mobil öncelikli dizinde bu içerik zayıf değerlendiriliyor.
Üçüncüsü, görsellerin tek boyutta sunulması. Masaüstü görseli telefona da gidiyor; mobil LCP ve veri kullanımı gereksiz yere artıyor.
Dördüncüsü, ayrı mobil sitenin bakım yükü. m. sürüm yıllar önce kurulmuş, yeni ürünler ve içerikler ona eklenmiyor; iki site giderek ayrışıyor.
Beşincisi, kırılım noktalarının cihaz modellerine göre seçilmesi. Belirli telefon genişlikleri hedefleniyor; arada kalan ekranlarda düzen bozuluyor.
Altıncısı, tablo ve uzun kod bloklarının taşması. Geniş içerikler mobil ekranı aşıyor; bütün sayfa yatay kayıyor.
Yedincisi, yatay ekran kullanımının unutulması. Telefon yan çevrildiğinde sabit başlık ve alt çubuk ekranın yarısını kaplıyor.
Sekizincisi, mobil menüde önemli bağlantıların kaybolması. Masaüstü menüsündeki kategoriler mobil menüye taşınmıyor; iç bağlantı yapısı mobil sürümde zayıflıyor.
Dokuzuncusu, dokunmatik kullanım için hover etkileşimlerine güvenilmesi. Masaüstünde fareyle açılan alt menüler mobilde hiç açılmıyor.
Onuncusu, tasarım testinin yalnızca tarayıcı küçültülerek yapılması. Gerçek cihazlarda klavye açılması, adres çubuğu ve ekran çentiği farklı davranıyor; sorunlar kullanıcıda ortaya çıkıyor.
On birincisi, mobil formların masaüstünden kopyalanması. Uygun klavye türleri ve otomatik doldurma kullanılmıyor; mobil dönüşüm düşüyor.
On ikincisi, responsive geçişte adres yapısının değiştirilmesi. Ayrı mobil siteden responsive yapıya geçerken m. adresleri yönlendirilmiyor; mobil bağlantıların değeri kayboluyor.
Neyi garanti etmez?
Responsive tasarım, hızlı ve kullanışlı bir mobil deneyimi garanti etmez. Görsel boyutları, JavaScript yükü ve dokunma alanları ayrıca optimize edilmelidir.
Sıkça sorulan sorular
Google hangi mobil yapıyı öneriyor?
Responsive tasarımı; tek adres ve tek HTML ile en az hata riski taşıyan yapı olduğu için.
Ayrı mobil site hala kullanılabilir mi?
Desteklenir ama karşılıklı işaretleme ve içerik eşitliği gerektirir; bakımı zordur.
Responsive tasarım sıralamayı artırır mı?
Doğrudan değil; mobil öncelikli dizinde içerik tutarlılığını ve kullanıcı deneyimini güvenceye alır.
Bu kavramın bütün resim içindeki yerini SEO Danışmanlığı Rehberi içinde ayrıntılı anlattım.
Teknik SEO, içerik stratejisi, kategori mimarisi, otorite ve organik trafiği dönüşüme çeviren bütünsel SEO danışmanlığı.
