Kısaca: Responsive tasarım, tek bir sayfanın ekran genişliğine göre düzenini değiştirmesidir: telefonda tek sütun, masaüstünde birkaç sütun. Mobil öncelikli (mobile first) tasarım ise işe en küçük ekrandan başlayıp büyük ekranlara doğru genişletmektir. Google Temmuz 2024’ten bu yana siteleri yalnızca mobil tarayıcısıyla tarıyor; yani mobil sürümünüz artık sitenizin asıl sürümü. Kırılma noktalarını cihazlara göre değil, düzenin bozulmaya başladığı genişliğe göre seçin.
Kısa cevap
Bugün bir web sitesini tasarlamak, aynı içeriği 360 piksellik bir telefondan 2560 piksellik bir monitöre kadar her ekranda çalışacak şekilde düzenlemek demek. Bunun iki temel kavramı var: responsive tasarım ve mobil öncelikli yaklaşım. Bu yazıda ikisini, kırılma noktası seçmeyi ve çok tekrarlanan “ekranın üstü” kuralının ne kadarının doğru olduğunu anlatıyorum.
Responsive tasarım nedir?
Terimi 2010’da Ethan Marcotte A List Apart’ta yayımladığı makaleyle ortaya koydu (A List Apart). Fikir üç parçadan oluşuyordu: esnek (yüzdelik) ızgaralar, esnek görseller ve CSS media query’ler. Bugün bunlara Flexbox ve CSS Grid eklendi, ama mantık aynı: Tek bir HTML, ekran genişliğine göre farklı düzen.
Responsive için olmazsa olmazlar
- Viewport etiketi:
<meta name="viewport" content="width=device-width, initial-scale=1">olmadan telefon sayfayı masaüstü genişliğinde çizip küçültür. - Esnek görseller:
max-width: 100%ve WordPress’in otomatik ürettiği farklı boyutlar (srcset). - Göreli birimler: Sabit piksel genişlikler yerine yüzde,
remvefr. - Dokunmaya uygun hedefler: Mobilde butonlar parmakla rahat basılabilecek boyutta olmalı.
Mobil öncelikli (mobile first) tasarım nedir?
Luke Wroblewski’nin 2011’de aynı adlı kitabıyla yaygınlaşan bu yaklaşım, tasarıma en küçük ekrandan başlamayı önerir. Küçük ekran sizi önceliklendirmeye zorlar: Telefona sığmayan şeyin gerçekten gerekli olup olmadığını sorarsınız. Ardından ekran büyüdükçe düzeni genişletirsiniz. CSS’te de bu yaklaşım, temel stilleri mobil için yazıp min-width media query’leriyle büyük ekranlara eklemeler yapmak şeklinde uygulanır.
Google için mobil sürüm asıl sürüm
Google, siteleri mobil sürümleriyle dizine eklemeye 2016’da başladı ve geçişi Temmuz 2024’te tamamladı: Artık siteler Googlebot Smartphone ile taranıyor ve mobil cihazlarda erişilemeyen siteler dizine eklenmiyor (Google Search Central). Yani masaüstünde görünen ama mobilde gizlenen bir içerik, Google için büyük ölçüde yok sayılabilir.
Mobil öncelikli, yalnızca mobil demek değil
Nielsen Norman Group burada önemli bir uyarı yapıyor: Mobil için tasarlanmış düzeni masaüstüne olduğu gibi taşımak, örneğin geniş ekranda da menüyü hamburger simgesinin altına saklamak, masaüstü kullanıcısının deneyimini bozuyor (NN/g). Mobilden başlayın, ama her ekranı kendi imkânlarıyla tasarlayın. Menü konusunu arayüz öğeleri yazısında ayrıntılı anlattım.
Kırılma noktası nasıl seçilir?
Kırılma noktası (breakpoint), düzenin değiştiği ekran genişliğidir. Yeni başlayanlar genellikle popüler cihazların genişliklerini kırılma noktası yapar. Daha sağlam yöntem, içeriğe bakmaktır:
- Tasarımı en dar ekranda kurun.
- Tarayıcı penceresini yavaşça genişletin.
- Satırlar okunamayacak kadar uzadığında, kartlar gereksiz genişlediğinde ya da boşluk dengesizleştiğinde durun. Bu genişlik bir kırılma noktasıdır.
- Orada düzeni değiştirin (örneğin tek sütundan iki sütuna) ve genişletmeye devam edin.
Pratikte çoğu site üç dört kırılma noktasıyla yetinir. Sık kullanılan başlangıç değerleri şunlardır, ama bunları içeriğinize göre kaydırmaktan çekinmeyin:
| Aralık | Tipik düzen |
|---|---|
| 0–599 px | Tek sütun, tam genişlik butonlar |
| 600–899 px | İki sütun, daha geniş kenar boşlukları |
| 900–1199 px | Üç sütun, görünür menü |
| 1200 px ve üstü | Sabit maksimum içerik genişliği, ortalanmış düzen |
Geniş ekranlarda içeriği sonsuza kadar genişletmeyin; metin satırları 75 karakteri geçtiğinde okunabilirlik düşer. Bunu font seçimi yazısında anlattım.
“Ekranın üstü” (above the fold) efsanesi
Gazete diliyle “katlamanın üstü”, sayfa açıldığında kaydırmadan görünen alan. Yıllarca “kullanıcı kaydırmaz, her şey ilk ekranda olmalı” denildi. Bu kural bugün yarı doğru:
NN/g’nin göz izleme araştırmasına göre kullanıcılar görüntüleme sürelerinin yaklaşık %57’sini ilk ekranda, %17’sini ikinci ekranda geçiriyor. 2010’da ilk ekranın payı %80’di. Yani insanlar artık daha çok kaydırıyor, ama dikkat hâlâ sayfanın üstünde yoğunlaşıyor (NN/g).
Bundan çıkan sonuç “her şeyi ilk ekrana sığdırın” değil:
- İlk ekranda sayfanın ne olduğu ve ziyaretçiye ne sunduğu net olsun.
- En önemli eylem (örneğin teklif isteme) ilk ekranda görünsün, sayfanın sonunda da tekrarlansın.
- İçeriğin aşağıda devam ettiğini belli edin. Tam ekran kapak görselleri, sayfanın orada bittiği yanılgısını yaratabilir.
- Her şeyi yukarıya sıkıştırmayın; kalabalık bir ilk ekran, hiçbir şeyin öne çıkmamasına yol açar.
Responsive tasarımı nasıl test edersiniz?
- Tarayıcının geliştirici araçlarındaki cihaz görünümünü kullanın, ama yalnızca ona güvenmeyin.
- Siteyi gerçek bir telefonda, mümkünse orta seviye bir Android cihazda açın.
- Yatay (landscape) ekranı unutmayın.
- Yazı boyutunu tarayıcıdan büyüttüğünüzde düzenin bozulup bozulmadığına bakın.
- Hız ölçümünde önce mobil sonuçlara bakın; siteniz neden yavaş yazısında anlattığım gibi sorunlar orada daha belirgin.
Sık sorulan sorular
Responsive ile adaptive tasarım arasındaki fark nedir?
Responsive tasarım akışkandır: Düzen her genişlikte esneyerek uyum sağlar. Adaptive tasarımda ise belirli ekran boyutları için ayrı sabit düzenler hazırlanır ve cihaz algılanıp uygun olan sunulur. Bugün web’de çoğunlukla responsive yaklaşım kullanılıyor.
Ayrı bir mobil site (m.site.com) gerekli mi?
Hayır. Ayrı mobil siteler bakım yükünü ikiye katlar ve içerik farkları arama sonuçlarında sorun çıkarabilir. Tek bir responsive site çoğu durumda en doğru seçimdir.
Kaç kırılma noktası olmalı?
İçeriğiniz ne kadar gerektiriyorsa. Çoğu kurumsal site için üç dört kırılma noktası yeterlidir. Her bileşenin kendi kırılma noktası da olabilir; modern CSS’teki container query’ler bunu kolaylaştırıyor.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
