Mobil uyumluluk, bir web sayfasının telefon ve tablet gibi küçük ekranlarda da masaüstündeki kadar rahat okunup kullanılabilmesi demektir. Ziyaretçilerin büyük bölümü habere artık cepten ulaştığı için bu, hem kullanıcı deneyiminin hem de arama görünürlüğünün temelidir. Bu yazıda mobil uyumluluğun ne olduğunu ve bunu sağlamanın en yaygın yolu olan responsive (duyarlı) tasarımın temellerini anlatıyoruz.
Bu içerik, SEO uyumlu haber yazılımı rehberi başlıklı ana rehberimizin bir parçasıdır. Haber sitelerine özgü ayrıntılar için haber sitelerinde mobil uyumluluk yazısına da göz atabilirsiniz.
Mobil Uyumluluk Nedir?
Mobil uyumluluk, bir sitenin farklı ekran boyutlarına, dokunmatik girişe ve mobil ağ koşullarına uyum sağlama becerisidir. Uyumlu bir sayfada metin yatay kaydırma gerektirmeden okunur, bağlantılar ve butonlar parmakla rahatça hedeflenebilir, görseller taşmaz ve sayfa makul sürede yüklenir.
Uyumsuz bir sayfada ise tipik belirtiler şunlardır: masaüstü düzeninin küçültülmüş hâlinin gösterilmesi, okumak için sürekli yakınlaştırma gereği, ekrandan taşan tablolar ve birbirine çok yakın yerleştirildiği için yanlış basılan bağlantılar. Mobil uyumluluk bu sorunların hepsini ortadan kaldırmayı hedefler.
Kavramı somutlaştırmak gerekirse: uyumlu bir sayfa, aynı içeriği farklı ekranlara göre yeniden düzenleyerek sunar. Masaüstünde yan yana duran üç haber kartı, telefonda alt alta dizilir; geniş bir menü, dar ekranda katlanır bir menüye dönüşür. İçerik değişmez, yalnızca yerleşimi ekranın imkânlarına uyarlanır. Mobil uyumluluk bu nedenle bir tasarım kararı olduğu kadar bir mühendislik kararıdır.
Neden Önemlidir?
İlk neden okuyucudur: kötü bir mobil deneyim, ziyaretçinin siteyi hemen terk etmesine yol açar. İkinci neden aramadır. Google, bir sayfayı dizine eklerken ve sıralarken öncelikli olarak mobil sürümü değerlendirir; buna mobile-first indexing (mobil öncelikli dizine ekleme) denir. Yani sitenizin mobilde nasıl göründüğü, arama sonuçlarındaki yerini doğrudan etkiler.
Haber siteleri için bu ikili etki daha da belirgindir. Okuyucular manşeti çoğunlukla telefonda, çoğu zaman da sosyal medya bağlantısıyla açar; ilk birkaç saniyede okuma deneyimi bozuksa geri dönmeleri zordur. Aynı okuyucu kitlesi, arama sonuçlarından da büyük ölçüde mobil cihazla gelir. Dolayısıyla mobil deneyim, trafiğin hem elde tutulmasını hem de en baştan kazanılmasını doğrudan etkiler.
Responsive, Adaptive ve Ayrı Mobil Site
Mobil uyumluluğa ulaşmanın birden çok yolu vardır. Aralarındaki farkı bilmek doğru yaklaşımı seçmeyi kolaylaştırır.
| Yaklaşım | Nasıl çalışır | Artıları / Eksileri |
|---|---|---|
| Responsive (duyarlı) | Tek HTML, esnek düzen; CSS ekran genişliğine göre uyarlanır | Tek kod tabanı, tek URL; bakımı kolay. En yaygın önerilen yöntem. |
| Adaptive (uyarlanabilir) | Sunucu veya istemci, cihaza göre önceden tanımlı birkaç sabit düzenden birini seçer | Belirli cihazlara ince ayar mümkün; daha çok düzen bakımı gerektirir. |
| Ayrı mobil site (m.site) | Mobil için farklı URL ve farklı şablon (ör. m.example.com) | Tam kontrol; ama çift içerik, çift bakım ve yönlendirme karmaşası riski. |
Bugün önerilen varsayılan yaklaşım responsive tasarımdır: tek bir adres ve tek bir kod tabanıyla çalışması, hem bakımı hem de arama motorlarının işini kolaylaştırır. Ayrı mobil site kurmak yerine tek adreste kalmak, kanonik URL, yönlendirme ve SEO uyumlu URL yapısı gibi konularda da işinizi basitleştirir; içerik tek yerde durduğu için tutarsızlık riski ortadan kalkar.
Responsive Tasarımın Üç Temel Bileşeni
Responsive tasarım terimi ilk kez 2010 yılında yaygınlaştı ve üç klasik yapı taşına dayanır:
- Akışkan ızgara (fluid grid): Genişlikler sabit piksel yerine yüzde veya esnek birimlerle tanımlanır; böylece düzen ekranla birlikte büyüyüp küçülür.
- Esnek görseller (flexible media): Resim ve videolar kapsayıcılarını aşmayacak şekilde ölçeklenir (genellikle
max-width: 100%ile). - Medya sorguları (media queries): CSS, ekran genişliği gibi koşullara göre farklı kurallar uygular; düzen belirli eşiklerde yeniden düzenlenir.
Viewport Meta Etiketi
Responsive tasarımın çalışması için sayfanın, tarayıcıya kendini cihazın gerçek genişliğinde ölçeklemesini söylemesi gerekir. Bunu <head> içine eklenen viewport meta etiketi yapar. Bu satır olmadan mobil tarayıcı sayfayı geniş bir masaüstü ekranıymış gibi işler ve küçültür.
<meta name="viewport" content="width=device-width, initial-scale=1">Kesme Noktaları (Breakpoints)
Kesme noktası, düzenin değiştiği ekran genişliği eşiğidir. Örneğin dar ekranda tek sütun olan bir haber listesi, geniş ekranda iki veya üç sütuna geçebilir. İyi bir yaklaşım, kesme noktalarını belirli cihaz modellerine göre değil, içeriğin bozulmaya başladığı noktaya göre belirlemektir.
Uygulamada birkaç yaygın eşik değeri işe yarar; ancak bunları katı kural değil, başlangıç noktası olarak görün. Cihaz çeşitliliği çok fazla olduğu için asıl ölçüt her zaman içeriğinizin belirli bir genişlikte iyi görünüp görünmediğidir.
| Yaklaşık genişlik | Tipik cihaz sınıfı |
|---|---|
| < 600 px | Telefonlar (dikey) |
| 600 – 1024 px | Tabletler ve büyük telefonlar (yatay) |
| > 1024 px | Dizüstü ve masaüstü ekranlar |
Medya Sorgusu Örnekleri
Aşağıdaki basit örnek, mobile-first bir yaklaşımla önce tek sütunlu bir düzen tanımlar, ardından ekran genişledikçe sütun sayısını artırır:
/* Temel (mobil) düzen: tek sütun */
.haber-listesi {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet ve üzeri: iki sütun */
@media (min-width: 600px) {
.haber-listesi {
grid-template-columns: 1fr 1fr;
}
}
/* Masaüstü: üç sütun */
@media (min-width: 1024px) {
.haber-listesi {
grid-template-columns: repeat(3, 1fr);
}
}Görsellerin taşmasını önlemek de tek satırlık bir kuralla mümkündür:
img,
video {
max-width: 100%;
height: auto;
}Esnek Tipografi ve Ölçü Birimleri
Düzen kadar yazının kendisi de esnek olmalıdır. Sabit piksel yerine kullanıcının tarayıcı ayarına saygı gösteren göreli birimler tercih edilir. rem ve em birimleri, temel yazı boyutuna göre ölçeklenir; bu, kullanıcı yazıyı büyüttüğünde tüm arayüzün orantılı biçimde büyümesini sağlar.
- rem: Kök (html) yazı boyutuna göre hesaplanır; tutarlı ve öngörülebilir bir ölçek verir.
- em: En yakın üst öğenin yazı boyutuna göre hesaplanır; iç içe yapılarda dikkatli kullanılmalıdır.
- %, vw, vh: Kapsayıcıya veya görüntü alanına göre oranlar için kullanışlıdır.
Yazı boyutunu ekran genişliğine göre yumuşakça değiştirmek için clamp() işlevi pratik bir çözümdür; asgari, tercih edilen ve azami değeri tek satırda tanımlar:
h1 {
/* en az 1.5rem, en fazla 2.5rem, arada esner */
font-size: clamp(1.5rem, 4vw, 2.5rem);
line-height: 1.2;
}Responsive Görseller: srcset ve sizes
Küçük bir telefon ekranına devasa bir masaüstü görseli göndermek hem gereksiz veri harcar hem de sayfayı yavaşlatır. HTML’in srcset ve sizes nitelikleri, tarayıcının ekran boyutuna ve çözünürlüğe göre en uygun görseli seçmesini sağlar.
<img
src="haber-800.webp"
srcset="haber-400.webp 400w,
haber-800.webp 800w,
haber-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Haber görseli"
loading="lazy">Burada tarayıcı, dar ekranda görüntü alanının tamamını (100vw), geniş ekranda ise yarısını (50vw) kaplayacağını bilerek listedeki en uygun dosyayı indirir. loading="lazy" ise ekran dışındaki görsellerin yüklenmesini erteler.
Dokunmatik Etkileşim ve Erişilebilirlik
Mobil uyumluluk yalnızca düzeni daraltmaktan ibaret değildir; girişin de parmakla yapıldığını unutmamak gerekir. Fare imlecinin aksine parmak kaba bir işaretleyicidir ve ekranın bir kısmını da kullanıcının kendi eli kapatır. İyi bir mobil arayüz, sık kullanılan eylemleri başparmağın rahatça ulaşabileceği bölgelerde konumlandırır ve yanlışlıkla tetiklenebilecek işlevleri birbirinden ayırır.
- Dokunma hedeflerini (buton, bağlantı) yeterince büyük ve aralarında boşluk bırakacak şekilde tasarlayın; erişilebilirlik kılavuzları bu konuda asgari boyutlar önerir.
- Fareye bağlı hover (üzerine gelme) etkileşimlerine kritik işlevleri bağlamayın; dokunmatik cihazlarda hover güvenilir değildir.
- Form alanlarında doğru
typedeğerlerini kullanın (ör.type="email",type="tel") ki uygun sanal klavye açılsın. - Metin boyutunu okunabilir tutun ve kullanıcı yakınlaştırmasını engellemeyin.
Mobilde Performans
Mobil cihazlar genellikle masaüstünden daha yavaş işlemcilere ve daha değişken ağ bağlantılarına sahiptir. Bu nedenle uyumlu bir düzen, hızla birlikte gelmelidir. Google’ın kullanıcı deneyimini ölçtüğü Core Web Vitals metrikleri de büyük ölçüde mobil koşulları temsil eder.
Uyumluluk ile hız birbirini tamamlar: ekrana sığan ama saniyelerce yüklenmeyen bir sayfa, kullanıcı için hâlâ kötü bir deneyimdir. Bu yüzden düzeni daraltırken indirilen veri miktarını da düşürmek gerekir. Mobilde en sık karşılaşılan yavaşlık nedenleri, aşırı büyük görseller, gereğinden ağır betikler ve önbelleklenmemiş tekrarlı isteklerdir.
- Görselleri modern biçimlerde ve doğru boyutlarda sunun — ayrıntılar için görsel optimizasyonu yazımıza bakın.
- Tekrarlı isteklerin yükünü azaltmak için önbelleklemeyi devreye alın.
- Kritik olmayan betik ve stilleri erteleyin; ilk ekranın hızla çizilmesine öncelik verin.
Mobil Uyumluluğu Nasıl Test Edersiniz?
Uyumluluğu tahmin etmek yerine ölçmek gerekir. Pratik yöntemler:
- Tarayıcının geliştirici araçlarındaki cihaz simülasyon (responsive) modunda farklı genişlikleri test edin.
- Gerçek telefon ve tabletlerde, mümkünse yavaş bir bağlantı taklidiyle deneyin.
- Google Search Console’un sayfa deneyimi ve Core Web Vitals raporlarını izleyin.
- Sayfayı daraltıp genişlettiğinizde yatay kaydırma çubuğu çıkıp çıkmadığını kontrol edin; bu, taşan bir öğenin en yaygın işaretidir.
Sık Yapılan Hatalar
| Hata | Sonucu | Çözüm |
|---|---|---|
| Viewport meta etiketinin unutulması | Sayfa masaüstü gibi küçültülür | width=device-width etiketini ekleyin |
| Sabit piksel genişlikleri | Düzen dar ekrana sığmaz, yatay kaydırma oluşur | Yüzde, esnek birim veya grid kullanın |
| Çok küçük dokunma hedefleri | Yanlış tıklama, sinirli kullanıcı | Butonları büyütün ve aralarına boşluk koyun |
| Mobilde içerik gizlemek | İçerik hem kullanıcıdan hem aramadan kaybolur | Aynı içeriği daha uygun bir düzende sunun |
| Yakınlaştırmayı kapatmak | Erişilebilirlik ihlali | user-scalable=no değerini kaldırın |
Sık Sorulan Sorular
Responsive tasarım ile mobil uyumluluk aynı şey mi?
Tam olarak değil. Mobil uyumluluk bir hedeftir: sitenin mobil cihazlarda iyi çalışması. Responsive tasarım ise bu hedefe ulaşmanın en yaygın yöntemidir. Adaptive tasarım veya ayrı mobil site gibi başka yollar da vardır.
Ayrı bir mobil site (m.site) yapmalı mıyım?
Çoğu durumda hayır. Ayrı mobil site, çift bakım ve içerik tutarlılığı sorunları getirir. Tek adres üzerinden çalışan responsive tasarım, günümüzde daha basit ve sürdürülebilir bir seçenektir.
AMP kullanmak zorunda mıyım?
Hayır. AMP, mobilde hız için geliştirilmiş bir çerçevedir ama zorunlu değildir. İyi yazılmış, hafif ve önbelleklenmiş responsive bir sayfa da hızlı olabilir.