Duyarlı web tasarımı: açıklama ve teknik kontrol listesi

Duyarlı web tasarımı nedir?

Duyarlı web tasarımı (responsive web design), aynı içerik ve URL yapısını koruyarak farklı ekran boyutlarına ve cihazlara uygun düzen, tipografi ve medya davranışı sağlayacak şekilde tasarım ve front-end uygulama teknikleri kullanmaktır. Temel bileşenler arasında esnek gridler, CSS media query'leri, responsive görsel teknikleri (srcset/picture) ve uygun viewport meta yer alır.

Duyarlı web tasarımının SEO için önemi

Duyarlı tasarımın SEO değeri üç alana dokunur: erişim (crawling), indeksleme ve kullanıcı davranışı. Google, Search için tarama ve indeksleme temelini mobil sürüme göre alır; Temmuz 2024'ten bu yana Googlebot Smartphone varsayılan tarayıcıdır. Bu yüzden mobil sürümde eksik olan içerik indekslenmeyebilir. Ancak indeksleme aşaması tek başına sıralamayı belirlemez: sıralama, çok sayıda sinyalin birleşimiyle belirlenir.

Ayrıca Core Web Vitals, sayfa hızı ve kullanılabilirlik metrikleri arama sonuçlarıyla ilişkili olduğundan, mobilde iyi çalışan, hızlı ve erişilebilir bir düzen organik performansı destekler. Duyarlı tasarım, bakım kolaylığı ve URL/kanonik tutarlılığı sayesinde yanlış yapılandırılmış ayrı mobil sitelere kıyasla genellikle daha az teknik risk getirir.

Duyarlı web tasarımı nasıl çalışır

Teknik açıdan duyarlı tasarım şu prensiplere dayanır:

- Esnek grid ve akış düzenleri: yüzde tabanlı genişlikler ve esnek kutu modeline dayalı düzenler.
- CSS media query'leri ile kırılma noktalarında stil değişiklikleri.
- Responsive görseller: <img srcset="..." sizes="..."> veya <picture> elemanı ile uygun çözünürlüğü sunma.
- Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1">.
- Progressive enhancement: içerik ilk yüklemede erişilebilir olmalı; görselleştirme katmanları daha sonra eklenebilir.

Duyarlı web tasarımı türleri

Aşağıdaki üç yaygın yaklaşımı karşılaştırın:

Responsive (CSS tabanlı)
• Avantajlar: Tek URL ve tek HTML, bakım kolaylığı, SEO açısından daha az yanlış yapılandırma riski.
• Dezavantajlar: Başlangıçta tasarım ve performans optimizasyonu gerekebilir.

Adaptive / Dynamic serving (aynı URL, sunucu farklı HTML gönderir)
• Avantajlar: Cihaza özel HTML ile daha ince kontrollü deneyim.
• Dezavantajlar: Vary: User-Agent başlığı doğru yönetilmezse cache ve indeksleme sorunları; yanlış yapılandırma cloaking algısıyla karışabilir.

Ayrı URL'ler (m.example.com gibi)
• Avantajlar: Tam ayrılmış mobil deneyim mümkün.
• Dezavantajlar: Çok daha fazla bakım, yanlış kanonik/varyant yapılandırma endişesi, URL eşleştirme hataları.

Duyarlı tasarıma başlarken: temel adımlar

1) Mevcut durumu denetleyin: Lighthouse, PageSpeed Insights ve Chrome DevTools ile mobil görünümü, Core Web Vitals ve render sürelerini ölçün.
2) Viewport meta ve temel CSS grid/sıfırlama kurun.
3) Görselleri responsive hale getirin (modern formatlar, srcset/sizes, lazy-loading).
4) Dokunma hedefleri ve erişilebilirlik kontrolleri ekleyin.
5) Performans optimizasyonu: boyut küçültme, ön yükleme, kritik CSS.
6) Test otomasyonu: farklı cihaz emülasyonları ve gerçek cihaz testleri.

Yaygın duyarlı web tasarımı hataları

• Viewport meta eksikliği — sayfa mobil cihazlarda ölçeklenmez.
• Sabit genişlikli öğeler (px ile) — yatay kaydırma ve kırılma noktası sorunları yaratır.
• Büyük, optimize edilmemiş görseller — mobil veri ve hız sorunları.
• Dynamic serving kullanırken Vary başlığını atlamak — önbellekleme ve indeksleme hatalarına yol açar.
• İçeriğin mobilde gizlenmesi veya içerik farklılığı (kullanıcılarla botlara farklı içerik sunma gibi) — cloaking algısı riski.
• Sadece emülasyonla yetinip gerçek cihazlarda test etmeme.

Duyarlı web tasarımı kontrolü: teknik kontrol listesi

**ViewPort meta** — nerede doğrulanır — geçer when <meta name="viewport" content="width=device-width, initial-scale=1"> mevcut.
**Mobil rendelemenin eşdeğerliği** — nerede doğrulanır — geçer when URL Inspection (Google Search Console, kendi siteniz) veya Chrome DevTools cihaz modu ile masaüstü ve mobil versiyonlarda kritik içerik görünür.
**Responsive görseller (srcset/picture)** — nerede doğrulanır — geçer when sayfa kaynak kodunda <img srcset> veya <picture> kullanımı ve tarayıcıda uygun çözünürlüklerin yüklendiği doğrulanır.
**Vary: User-Agent başlığı (dynamic serving kullanılıyorsa)** — nerede doğrulanır — curl -I https://example.com ile başlık kontrolü; geçer when cevap başlıklarında Vary: User-Agent varsa ve HTML içeriği cihaz sınıfına göre tutarlı ise.
**Core Web Vitals** — nerede doğrulanır — PageSpeed Insights, Lighthouse veya Search Console Core Web Vitals raporu; geçer when LCP/INP/CLS hedeflerine göre kabul edilebilir seviyedeyse.
**İndekslenebilirlik** — nerede doğrulanır — kendi sayfalarınız için Google Search Console URL Inspection; üçüncü taraf sayfalar için site: operatorü ve birebir içerik aramaları göstergedir; geçer when sayfa Google tarafından görüntülenebiliyor ve robots/meta direktifleri indexlenmeye izin veriyorsa.
**Görsel erişilebilirlik ve dokunma hedefleri** — nerede doğrulanır — DevTools veya gerçek cihaz; geçer when buton ve linkler mobilde yeterli boyutta ve aralarında uygun boşluk varsa.

Sıkça yapılan doğrulama ve hata ayıklama komut örnekleri

• Sunucunun hangi başlıkları döndürdüğünü görmek için (başlıklar sadece): curl -I https://ornek-site.com
• Mobil kullanıcı aracıyla tüm HTML'i görmek için: curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1" https://ornek-site.com
Not: curl -I yalnızca başlıkları getirir; -A user-agent ile HTML almak istiyorsanız -I kullanmayın.
• Kendi sayfanızın Google’ın mobil render halini görmek için Google Search Console → URL Inspection kullanın (sahip olduğunuz mülklerde).

Site: operatörü üçüncü taraf sayfalar için faydalı bir gösterge sağlar ama kesin indexasyon kanıtı değildir; kendi siteniz için URL Inspection yetkili ve kesin sonuç verir.

Duyarlı tasarım için başlangıç kaynakları

Kısa araç listesi: Chrome DevTools Device Toolbar, Lighthouse (tarayıcı içi), PageSpeed Insights, Google Search Console URL Inspection (kendi siteleriniz için), WebPageTest. Bu araçlar hem performans hem de görsel uyumluluk sorunlarını tespit eder.

Teknik SEO ile ilgili daha geniş rehber için:

Teknik SEO Rehberi'ni okuyun

Sıkça Sorulan Sorular