Diller

Duyarlı Web Tasarımı

Duyarlı tasarımın ne olduğu, Google'ın bunu dinamik sunum veya ayrı mobil URL'ler yerine neden önerdiği, viewport meta etiketinin nasıl çalışmasını sağladığı ve sıralama efsanesi.

İlk yayın tarihi: 2 Tem 2026 · Son güncelleme: 8 Ağu 2026 · Advanced
Diller
AIYazanAI v2

Duyarlı web tasarımı her cihaza aynı HTML'yi aynı URL'de sunar ve düzeni viewport'a uyarlamak için CSS medya sorgularını kullanır. Google'ın önerdiği mobil yapılandırmadır; bunun nedeni daha iyi sıralama sağlaması değil (Google açıkça böyle olmadığını söyledi), taranıp dizine eklenecek tek bir URL ve tek bir HTML kümesi olmasıdır; bu da uygulanmasını ve sürdürülmesini kolaylaştırır. Çalışması için doğru bir viewport meta etiketine ihtiyaç duyar; bu etiket olmadan telefonlar masaüstü genişliğinde bir viewport varsayar ve medya sorgularınız hiç çalışmaz. Dinamik sunumla (aynı URL, Vary başlığı üzerinden farklı HTML) ve ayrı URL'lerle (m-dot) karşılaştırılır. Duyarlı tasarım otomatik olarak hızlı değildir: düzen uyarlaması performans değildir, bu nedenle Core Web Vitals ayrıca ele alınmalıdır.

TL;DR — Duyarlı web tasarımı her cihaza aynı HTML’yi aynı URL’de sunar ve düzeni viewport’a uyarlamak için CSS medya sorgularını kullanır. Google bunu önerir — “the easiest design pattern to implement and maintain” (Türkçe çeviri) “uygulanması ve sürdürülmesi en kolay tasarım deseni” — ancak dinamik sunumun veya ayrı URL’lerin üstünde sıralamaz. Gerçek avantajı operasyoneldir: tek URL ve tek HTML kümesi olduğundan içerik eşliği otomatiktir ve Google’ın kendi mobil öncelikli dizine ekleme kontrol listesi “only applies to dynamic serving and separate URL configurations.” (Türkçe çeviri) “yalnızca dinamik sunum ve ayrı URL yapılandırmaları için geçerlidir.” Çalışması için doğru bir viewport meta etiketi gerekir; bu etiket olmadan telefonlar masaüstü genişliğinde bir viewport (iOS’ta 980px / eski Android’de 800px) varsayar ve medya sorgularınız hiç çalışmaz. Karşılaştırma için: dinamik sunum (aynı URL, Vary: User-Agent üzerinden farklı HTML) ve ayrı URL’ler (m-dot). Duyarlı tasarım düzeni kontrol eder, hızı değil; duyarlı bir site Core Web Vitals’ta yine başarısız olabilir.

Evidence for this claim Responsive design differs from dynamic serving, which changes HTML by user agent at one URL, and separate mobile URLs, which use distinct URLs. Scope: mobile and desktop rendered web documents Confidence: high · Verified: Mobile-first indexing best practices Evidence for this claim Responsive design serves the same HTML at the same URL while CSS adapts display to screen size. Scope: Google definition of responsive web design. Confidence: high · Verified: Google Search Central: Responsive design Evidence for this claim Google recommends responsive design because it is the easiest mobile pattern to implement and maintain. Scope: Google configuration recommendation. Confidence: high · Verified: Google Search Central: Mobile configurations

Tanım, tam olarak

Google’ın kendi sözleriyle duyarlı tasarım şunu “serves the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size.” (Türkçe çeviri) “kullanıcının cihazından bağımsız olarak (örneğin masaüstü, tablet, mobil veya görsel olmayan tarayıcı) aynı HTML kodunu aynı URL’de sunar, ancak içeriği ekran boyutuna göre farklı gösterebilir.” Bu cümle bütün fikri içerir:

  • Aynı HTML — cihaza özel değil, tek bir işaretleme yükü.
  • Aynı URL — m.example.com adresine yönlendirme ve user-agent çatallanması yok.
  • Ekran boyutuna göre farklı gösterim — CSS medya sorguları aracılığıyla.

Google’ın belgelediği diğer iki yapılandırmadan ayrıldığı çizgi budur. Dinamik sunum, “uses the same URL regardless of device… relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices.” (Türkçe çeviri) “cihazdan bağımsız olarak aynı URL’yi kullanır; farklı cihazlara HTML’nin farklı bir sürümünü sunmak için user-agent tespitine ve Vary: user-agent HTTP yanıt başlığına dayanır.” Ayrı URL’ler ise “serves different HTML to each device, and on separate URLs,” (Türkçe çeviri) “her cihaza farklı HTML’yi ayrı URL’lerde sunar” ve kullanıcıları cihaza uygun sürüme yönlendirir. Üçü arasında tek HTML kaynağına sahip olan yalnızca duyarlı tasarımdır.

Evidence for this claim Responsive design differs from dynamic serving, which changes HTML by user agent at one URL, and separate mobile URLs, which use distinct URLs. Scope: mobile and desktop rendered web documents Confidence: high · Verified: Mobile-first indexing best practices

Google neden öneriyor — sıralama avantajı değil, basitlik

Google doğrudan söylüyor: “recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.” (Türkçe çeviri) “Duyarlı Web Tasarımını önerir; çünkü uygulanması ve sürdürülmesi en kolay tasarım desenidir.” Bu gerekçenin ne olduğuna ve ne olmadığına dikkat edin: bu bir operasyon argümanıdır (tek kod tabanı, daha az hareketli parça), sıralama argümanı değil.

Evidence for this claim Google recommends responsive design because it is the easiest mobile pattern to implement and maintain. Scope: Google configuration recommendation. Confidence: high · Verified: Google Search Central: Mobile configurations

Google’ın mobil öncelikli en iyi uygulamalar belgesindeki en yararlı — ve en az kullanılan — satır kapsam notudur: “The contents of this guide only apply to dynamic serving and separate URL configurations. In case of responsive design, the content and the metadata are the same on the mobile and desktop version of the pages.” (Türkçe çeviri) “Bu kılavuzun içeriği yalnızca dinamik sunum ve ayrı URL yapılandırmaları için geçerlidir. Duyarlı tasarımda sayfaların mobil ve masaüstü sürümlerindeki içerik ve meta veriler aynıdır.” Bunu tekrar okuyun. Google, uzun mobil öncelikli kontrol listesinin çoğunun — sürümler arasında yapılandırılmış verileri ve robots meta etiketlerini eşleştirmek, alt metni eşleştirmek, Vary başlıklarını ayarlamak, rel=alternate/canonical bildirimlerini bağlamak — duyarlıysanız sizin için geçerli olmadığını söylüyor; çünkü doğru tutulması gereken tek bir sürüm var. Bu, RWD’nin en güçlü pratik gerekçesidir ve neredeyse hiç kimse meseleyi bu şekilde çerçevelemez.

Devam eden faydaların tümü “tek URL, tek HTML” ilkesinden akar:

  • example.com/page ile m.example.com/page arasında yinelenen içerik veya eşlik riski yoktur — birbirinden ayrılacak hiçbir şey yoktur.
  • Dinamik sunumun taşıdığı Vary: User-Agent kırılganlığı yoktur (başlığı yok sayan bir önbellek yanlış HTML’yi yanlış cihaza — veya Googlebot’a — sunabilir).
  • Masaüstü ve mobil URL’ler arasında yönlendirme zinciri veya bağlantı değeri bölünmesi yoktur.
  • Sürdürülecek ve yanlış yapılandırılabilecek bildirim mekanizması yoktur (masaüstünde rel=alternate, mobilde rel=canonical).

Tam olarak bu nedenle, mobil öncelikli dizine ekleme hakkındaki Ahrefs rehberimde “use responsive design” ifadesi mobil uyumlu bir site oluşturmak için on ipucunun ilkidir: sorunların bütün kategorilerini başlamadan ortadan kaldırır.

Duyarlı tasarım sıralamaları doğrudan iyileştirir mi? Hayır.

Bu, erkenden ortadan kaldırılması gereken efsanedir. Google’dan Zineb Ait Bahajji bunu açıkça ifade etti: Google, duyarlı tasarım kullanan siteleri diğer yapılandırmaları (ayrı mobil siteler veya dinamik sunum) kullanan sitelerden daha iyi sıralamaz. Google yine de RWD’yi tercih eder — sürdürülmesi daha kolay, geleceğe uyumlu ve daha az yapılandırma hatası görüyor — ancak “daha az hata” ile “sıralama bonusu” aynı şey değildir. Eşliği koruyan iyi uygulanmış dinamik sunumlu veya m-dot bir site aynı şekilde sıralanabilir; bunlardaki risk, sürümlerin ayrışmasıdır ve sizi inciten de bu ayrışmadır.

Dolayısıyla dürüst çerçeve şu: duyarlı tasarım size sıralama kazandırmaz. Bir eşlik hatası yüzünden sıralamanızı kaybetmenizi önler ve bakım zamanından tasarruf ettirir. İkisi de çok değerlidir; hiçbiri algoritmik artış değildir.

Nasıl çalışır: viewport meta etiketi bir önkoşuldur, incelik değil

Çoğu rehber viewport meta etiketini birçok CSS ipucundan biri olarak listeler. Bu bir ipucu değildir; duyarlı tasarımın çalışmasını sağlayan şeydir. Google’ın neden kendisinin duyarlı tasarıma geçtiğini açıklayan 2012 Search Central yazısı bunu açıkça söyler: “By default, smartphone browsers pretend to be high-resolution desktop browsers, and lay out a page as if you were viewing it on a desktop monitor… The default viewport width for the default Android browser is 800px, and 980px for iOS, regardless of the number of actual physical pixels on the screen.” (Türkçe çeviri) “Akıllı telefon tarayıcıları varsayılan olarak yüksek çözünürlüklü masaüstü tarayıcıları gibi davranır ve sayfayı masaüstü monitöründe görüntülüyormuşsunuz gibi düzenler… Varsayılan Android tarayıcısının varsayılan viewport genişliği, ekrandaki gerçek fiziksel piksel sayısından bağımsız olarak 800px, iOS içinse 980px’tir.”

Hata biçimi şöyledir: viewport etiketi olmadan telefon sayfanızı 980px genişliğinde bir tuvale işler ve sonra tamamını sığacak şekilde küçültür — küçük metin, “genel bakış modu” ve özenle yazdığınız max-width: 479px medya sorgusu hiç devreye girmez; çünkü tarayıcı kendisinin 980px genişliğinde olduğunu düşünür. Çözüm tek satırdır: “In order to trigger the browser to render your page at a more readable scale, you need to use the viewport meta element: <meta name="viewport" content="width=device-width, initial-scale=1">.” (Türkçe çeviri) “Tarayıcının sayfanızı daha okunabilir bir ölçekte oluşturmasını sağlamak için viewport meta öğesini kullanmanız gerekir.” width=device-width ayarı, kullanıcı cihazı döndürdüğünde düzenin güncellenmesi anlamına da gelir; medya sorgularının yönelime yanıt vermesini sağlayan budur. Ayrıntılı mekanikler — initial-scale ve erişilebilirlik tuzakları olan user-scalable/maximum-scale — özel viewport meta etiketi makalesindedir.

Nasıl çalışır: CSS medya sorguları

Viewport doğru ayarlandığında düzen, yalnızca belirli viewport genişliklerinde uygulanan kurallar olan CSS medya sorgularıyla uyarlanır:

<style>
/* Base styles apply everywhere */
@media screen and (max-width: 479px) {
  /* Portrait smartphones: stack columns, hide the sidebar, grow tap targets */
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  /* Tablets */
}
</style>

Yukarıdaki piksel değerlerini kopyalanacak bir kontrol listesi değil, örnek olarak değerlendirin. MDN’nin medya sorgusu başvurusu ve web.dev’in duyarlı tasarım kursunda da vurgulanan kalıcı uygulama şudur: kesme noktalarını cihaz listesi değil, düzen kararı olarak ele alın; onları kendi içeriğinizin gerçekten bozulduğu yerlere (menünün kötü sarılması, sütunların fazla daralması, metnin kısa satırlara bölünmesi) koyun ve yalnızca adlandırılmış birkaç ekran boyutunu değil, kesme noktaları arasındaki aralıkları da test edin. Cihaz viewport genişlikleri her ürün döngüsünde değişir; içerik odaklı kesme noktalarının, cihazlar değiştiğinde güncellenmesi gerekmez.

Google’ın 2012 tarihli yazısı, duyarlı bir düzenin bozulmasını önleyen CSS disiplinine de dikkat çekti: “Instead of specifying width for container elements, we started using max-width instead. In place of height we used min-height, so larger fonts or multi-line text don’t break the container’s boundaries.” (Türkçe çeviri) “Kapsayıcı öğeleri için width belirtmek yerine max-width kullanmaya başladık. height yerine min-height kullandık; böylece daha büyük yazı tipleri veya çok satırlı metin kapsayıcının sınırlarını bozmaz.” Üç yol gösterici ilkeleri de aynı derecede basitti: sayfalar her çözünürlükte okunabilir biçimde oluşturulmalı, tek bir içerik kümesi her cihazda görüntülenebilmeli ve “never show a horizontal scrollbar, whatever the window size.” (Türkçe çeviri) “pencere boyutu ne olursa olsun hiçbir zaman yatay kaydırma çubuğu gösterilmemeli.” Akışkan yazı tipi için clamp(), kapsayıcı sorguları, cihaza uygun görseller için srcset/<picture> gibi modern iyileştirmeler bu temelin üzerine eklenir; gerçekten duyarlı olmak için zorunlu değildir. SEO çerçevesinin ötesinde uygulama derinliği için Google’ın kendi web.dev Learn Responsive Design kursu doğru yerdir.

Duyarlı tasarım ile dinamik sunum ve ayrı URL’ler

Google’ın belgelediği üç yapılandırma yan yana:

Duyarlı tasarımDinamik sunumAyrı URL’ler (m-dot)
URLTek URLTek URLFarklı URL’ler (m.example.com)
HTMLHerkes için aynı HTMLCihaz başına farklı HTMLCihaz başına farklı HTML
Uyarlanma biçimiCSS medya sorgularıSunucunun user-agent tespitiCihaza özel siteye yönlendirme
Ek gereklilikViewport meta etiketiVary: User-Agent başlığıSürümler arasında rel=alternate + rel=canonical, hreflang
Eşlik riskiDüşük — tek sürümOrta — kolayca ayrışırYüksek — eşlenecek iki site
Google’ın tutumuÖnerilenDestekleniyorDestekleniyor, en az önerilen

Dinamik sunum, zaman zaman hâlâ anlamlıdır (örneğin tek bir şablonun makul biçimde ifade edemeyeceği ölçüde farklı cihaz deneyimleri); ayrı URL’ler ise artık çoğunlukla mirastır. Bunlardan birini kullanıyorsanız, dinamik sunumda Vary başlığının mekanikleri de dâhil olmak üzere kapsamlı incelemeler dinamik sunum makalesindedir. Ancak sıfırdan bir kurulum için varsayılan yanıt duyarlı tasarımdır ve başka bir şey seçmenin kanıt yükü size aittir.

Bing’in yaklaşımı: mimari değil, ölçütler

Bing sonuç konusunda hemfikirdir, ancak bunu farklı çerçeveler. Google gibi “Responsive Web Design” adını desteklemek yerine mobil uyumluluk testi; viewport ve yakınlaştırma denetimi yapılandırmasını, sayfa içeriğinin genişliğini, metnin okunabilirliğini, bağlantıların ve diğer dokunma hedeflerinin aralığını ve uyumsuz eklentilerin kullanımını ölçülebilir ölçütlerle değerlendirir. Google’ın önerdiği viewport etiketinin aynısını önerir ve içerik genişliği kuralını “the content width should not exceed the screen width” (Türkçe çeviri) “içerik genişliği ekran genişliğini aşmamalıdır” şeklinde belirtir; taşma da “Page content does not fit device width” olarak işaretlenir. Bing ile Google’ın ikisinin de mobil uyumlu oluşturmayı desteklediğini söylemek güvenlidir; ancak açık önerilen yapılandırma dilini özellikle Google’a atfedin.

Duyarlı tasarım ve mobil öncelikli dizine ekleme (Temmuz 2024 sonrası)

Mobil öncelikli dizine ekleme tamamlandı — Google kullanıma sunma sürecini bitirdi ve artık varsayılan olarak sayfanızın mobil taranan sürümünü dizine ekleme ve sıralama için kullanıyor. Neredeyse her rehber hâlâ duyarlı tasarımı “mobil öncelikli dizine eklemeye hazırlanma” şeklinde gelecek zamanlı bir adım olarak yazıyor. Bu çerçeve eskimiştir. Kullanıma sunma tamamlandı ve zaten duyarlı olan bir site için hiçbir şeyi değiştirmiyor; tek sürüm olduğu için içeriğiniz ve meta verileriniz mobil ile masaüstünde zaten aynıdır. Bu bir tesadüf değildir; bütün amaç budur. Sitenin mobil öncelikli dizine ekleme makalesi zaman çizelgesini ve eşlik kurallarını eksiksiz ele alır.

Duyarlı ≠ otomatik olarak hızlı

En büyük tuzak budur. Duyarlı tasarım düzeni kontrol eder, performansı değil. Duyarlı bir site, telefonların CSS ile küçülteceği 3 MB’lık bir masaüstü hero görseli gönderebilir veya masaüstü ağırlığında JavaScript’i mobil cihaza yollayabilir; bu da LCP ya da CLS açısından ciddi başarısızlığa yol açar. “Duyarlı” olmak Core Web Vitals geçişi değildir. Gerçek optimizasyon, CSS’nin büyük görselleri küçültmesine izin vermek değil, her kesme noktasında uygun boyutlu varlıklar sunmaktır (srcset/<picture> ve duyarlı görseller bunun içindir). Performansı ayrıca düzeltin; nasıl yapılacağını Core Web Vitals içeriğinde ve duyarlı görseller materyalinde görebilirsiniz.

Performans, otomatik olarak geçerli olmayan tek varsayım değildir. Tek bir kod tabanı, tarayıcılar ve cihazlar CSS, yazı tipleri ve JavaScript’e bağlı düzeni ele alışlarında yeterince farklı kaldığı için oluşturmanın, erişilebilirliğin veya arama sonucu sunumunun da aynı olacağını garanti etmez; cihazlar arası ve tarayıcılar arası testler, diğer herhangi bir yapılandırmada olduğu gibi işin parçası olmaya devam eder. “Duyarlı” bir mimariyi tanımlar, doğrulanmış bir sonucu değil; başka her şeyi test ettiğiniz gibi bunu da test edin.

Kısa bir tarihçe

Bütün “en iyi uygulama”yı yeniden çerçevelediği için bir paragrafı hak ediyor. Google önce duyarlı tasarımı önermedi ve sonra benimsemedi; mühendislik nedenleriyle önce kendi mülklerinde duyarlı tasarıma geçti ve öneri bunu izledi. 2012 tarihli yazısında Google, “faced a stark choice between creating mobile specific websites, or adapting existing sites… Creating two sites would allow us to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses.” (Türkçe çeviri) “mobil cihazlara özel web siteleri oluşturmak veya mevcut siteleri uyarlamak arasında keskin bir seçimle karşı karşıya kaldığını… iki site oluşturmanın belirli donanımları daha iyi hedeflemeyi sağlayacağını, ancak tek bir paylaşılan siteyi sürdürmenin canonical URL’yi koruyarak karmaşık yönlendirmeleri önlediğini ve web adreslerinin paylaşımını kolaylaştırdığını” açıklar. Canonical URL’yi koruma, yönlendirme karmaşıklığının olmaması, daha kolay paylaşım: bunlar biri SEO en iyi uygulaması demeden önceki nedenlerdi ve hâlâ nedenler bunlar.

Büyük resimdeki yeri şudur: duyarlı tasarım, mobil kullanılabilirlik, müdahaleci geçiş reklamları, AMP’nin tarihi ve bunları birbirine bağlayan mobil SEO kontrol listesiyle birlikte daha geniş mobil SEO hikâyesinin bir parçasıdır. Bu makale “mobil sunumu nasıl yapmalıyım?” parçasıdır; diğerleri geri kalanını ele alır.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.