Mobil uyumlu web sitesi, içeriği telefon, tablet ve bilgisayar ekranlarında okunabilir ve kullanılabilir biçimde sunan internet sitesidir. Bunun için yalnızca sayfayı küçültmek yeterli değildir: menüler, görseller, metinler, formlar ve kart düzeni ekran genişliğine göre uyarlanmalıdır. Bu rehberde mobil uyumlu web sitesi nasıl yapılır sorusunu responsive CSS örnekleri, WordPress adımları ve gerçek cihazlarda uygulanabilecek testlerle yanıtlıyoruz.
Mobil uyumlu web sitesi nedir?
Mobil uyumlu site, küçük ekranlarda ziyaretçinin yatay kaydırmaya veya sürekli yakınlaştırma yapmaya zorlanmadan temel bilgileri okuyabildiği, menüler arasında gezinebildiği ve işlemlerini tamamlayabildiği sitedir. Bu yaklaşımda metin boyutları, sütun sayısı, görseller ve form alanları ekranın kullanılabilir genişliğine göre ayarlanır.
Mobil uyumluluk yalnızca telefonlar için düşünülmemeli. Tabletler, küçük dizüstü bilgisayarlar, büyük ekranlar ve tarayıcı yakınlaştırması da tasarımın sınırlarını etkiler. W3C’nin erişilebilirlik kılavuzları, olağan içerikte 320 CSS piksel eşdeğerinde iki yönde kaydırma gerektirmeyen bir düzeni hedefler; harita ve geniş veri tabloları gibi bazı içerik türlerinin istisnaları vardır.
Responsive tasarım ile mobil site arasındaki fark nedir?
Responsive tasarım (duyarlı web tasarımı), genellikle aynı URL ve aynı HTML üzerinde CSS kurallarıyla görünümü uyarlayan yaklaşımdır. Ayrı mobil site yaklaşımında masaüstü ve telefon için farklı adresler veya sunucu çıktıları bulunabilir. Google Search Central, bakım ve uygulama kolaylığı nedeniyle responsive tasarımı önerir. Ayrı mobil URL’ler de teknik olarak mümkündür ancak yönlendirme, eşdeğer içerik ve kanonik bağlantı yönetimi ek iş çıkarabilir.
Bir sayfa telefon ekranına sığıyor gibi görünse bile çok küçük metinler, üst üste gelen butonlar veya çalışmayan menü nedeniyle kullanılamaz olabilir. Responsive tasarımın amacı yalnızca görüntüyü sığdırmak değil, tüm temel işlevlerin farklı ekranlarda korunmasıdır.
Mobil uyumlu web sitesi nasıl yapılır? 10 adım
1. Önce mobil ekranda içerik sırasını belirleyin
Masaüstü tasarımı hazırlayıp en sonunda küçültmek yerine en küçük kullanışlı ekranda hangi bilginin önce görünmesi gerektiğini düşünün. Örneğin hizmet sitesi için başlık, kısa değer önerisi, hizmet listesi ve iletişim bağlantısı önemlidir. Yan paneldeki ikincil içerik ve büyük dekoratif öğeler daha aşağı taşınabilir. Bu yöntem mobile-first tasarım olarak adlandırılır.
2. Viewport ayarını ekleyin
Tarayıcının sayfayı cihazın kullanılabilir genişliğine göre ölçekleyebilmesi için HTML belgesinin head bölümünde viewport tanımı bulunmalıdır. Yeni nesil temalar ve site oluşturucular genellikle bunu otomatik ekler. Eksikse standart örnek şöyledir:
<meta name="viewport" content="width=device-width, initial-scale=1">Bu ayar tek başına responsive tasarım üretmez; sayfa genişliklerini, görselleri ve düzeni uyarlayan CSS kodları da gerekir. Kullanıcının yakınlaştırmasını engelleyen ayarlardan kaçının.
3. Sabit genişlik yerine esnek kapsayıcılar oluşturun
Bir kapsayıcıya genişliği 1200 piksel olarak zorlamak, telefon ekranında taşmaya yol açabilir. Bunun yerine yüzde tabanlı genişlik ve maksimum genişlik kullanın. Tasarım içeriği dar ekranda kenar boşluklarıyla sığar, büyük ekranda aşırı genişlemez.
.page-container {
width: min(100% - 32px, 1100px);
margin-inline: auto;
}
img, video { max-width: 100%; height: auto; }4. CSS Grid veya Flexbox ile sütunları uyarlayın
Üç sütunlu ürün kartları küçük ekranda tek sütuna dönüştürülebilir. CSS Grid’deki minmax() ve auto-fit gibi özellikler bunu esnek biçimde gerçekleştirebilir. Breakpoint’leri belirli telefon markalarına göre değil, içerik sıkışmaya başladığında seçmek daha sürdürülebilir bir yaklaşımdır.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap: 20px;
}
.card { min-width: 0; }5. Media query ile büyük ekran düzenini geliştirin
Mobile-first CSS yaklaşımında temel kurallar dar ekran için yazılır. Yeterli alan oluştuğunda düzen değiştirmek için media query kullanılır. Aşağıdaki örnekte tek sütun, 768 CSS piksel ve üzerinde iki sütuna geçiyor. 768 değeri evrensel bir zorunluluk değil, yalnızca örnektir.
.layout { display: grid; gap: 24px; }
@media (min-width: 768px) {
.layout { grid-template-columns: 2fr 1fr; }
}6. Mobil menüyü gerçekten kullanılabilir yapın
Menü simgesinin görünmesi, menünün düzgün çalıştığı anlamına gelmez. Açma-kapama işlemi klavye ve dokunmatik ekranla çalışmalı; odak sırası anlaşılır olmalı ve açıldığında menü maddeleri ulaşılabilir kalmalıdır. Menü düğmelerinde açıklayıcı erişilebilir isim ve uygun durum bilgileri kullanılmalıdır. Menüde fazla bağlantı varsa kullanıcıların en sık kullandığı sayfaları öne çıkarın.
7. Yazı boyutu, buton ve formları düzenleyin
Telefon ekranında metinlerin okunabilir olması için satır aralığı, paragraf uzunluğu ve kontrastı kontrol edin. Form alanlarına görünür etiket verin; yalnızca placeholder kullanmak yeterli değildir. Butonların yakın yerleşmesi yanlış dokunmalara neden olabilir. WCAG 2.2, hedef boyutu için belirli koşullarda en az 24 × 24 CSS piksel gibi ölçütler içerir; daha büyük ve rahat dokunulabilir alanlar pratikte yararlı olabilir.
8. Görselleri uygun boyutta sunun
Mobil kullanıcıya gereksiz büyüklükte masaüstü görseli göndermek veri kullanımını ve yüklenme süresini artırabilir. srcset ve sizes kullanarak tarayıcının uygun görsel sürümünü seçmesine yardımcı olun. En önemli sayfa görselinin yüklenmesini geciktirmemeye dikkat edin. Görsellere genişlik ve yükseklik bilgisi vermek yerleşim kaymalarını azaltabilir. Alt metinleri ise görselin amacını açıklamak için kullanın.
<img
src="/images/ornek-800.webp"
srcset="/images/ornek-400.webp 400w, /images/ornek-800.webp 800w"
sizes="(max-width: 600px) 100vw, 600px"
width="800" height="500"
alt="Örnek mobil uyumlu ürün sayfası">9. Yatay taşan tabloları ve gömülü içerikleri kontrol edin
Fiyat karşılaştırmaları, kod blokları, haritalar veya videolar telefon ekranını genişletebilir. Sıradan metin için yatay kaydırmadan kaçınırken, geniş veri tablosunu gerektiğinde kendi kaydırılabilir kapsayıcısına yerleştirebilirsiniz. YouTube videoları ve iframe içerikleri için orantılı en-boy oranı tanımlayın. Harita veya grafik gibi iki boyutlu etkileşim gerektiren öğeleri erişilebilir alternatiflerle destekleyin.
10. Yayımlamadan önce gerçek kullanıcı akışını test edin
Chrome DevTools’un cihaz moduyla farklı genişlikleri deneyin; ardından en az bir gerçek telefonda açın. Menü, arama, iletişim formu, ürün seçimi, sepet ve varsa giriş işlemini baştan sona test edin. Klavye ile gezinmeyi ve büyütülmüş yazı boyutlarını da kontrol edin. Ekranın dikey ve yatay yönlerini deneyin; uygulamanın daha yavaş bağlantıda davranışını inceleyin.
WordPress’te mobil uyumlu web sitesi yapma
WordPress’te ilk adım mobil uyumlu bir tema seçmektir. Tema önizlemesini yalnızca ekran görüntüsünde değil, kendi içeriklerinizi ekledikten sonra da test edin. Blok editör veya sayfa oluşturucu ile hazırlanan sütunların telefon görünümünde hangi sırada yer aldığına bakın. Gereksiz kenar çubukları ve büyük boşluklar mobilde sorun yaratabilir.
Tema dosyalarını doğrudan düzenlemek yerine uygun olduğunda çocuk tema veya özelleştirme alanları kullanın. CSS değişikliklerinden önce yedek alın. Önbellek ve optimizasyon eklentilerini kurduktan sonra menü, form ve etkileşimli bileşenleri tekrar test edin; bazı JavaScript küçültme ayarları görünümü değil işlevleri bozabilir. WordPress kurulumuyla ilgili temel adımlar WordPress site kurma rehberinde bulunuyor.
Wix ve hazır site oluşturucularda mobil görünüm
Hazır site oluşturucuların pek çoğu responsive şablonlar veya mobil düzenleme seçenekleri sunar. Ancak masaüstünde yapılan her düzenleme mobilde kusursuz görünmeyebilir. Şablon seçiminde menü, galeri ve form bileşenlerinin telefon sürümünü kontrol edin. Özel HTML ya da dış kaynaklı widget eklediyseniz bunların da ekran genişliğine uyduğundan emin olun. Site oluşturucunun sunduğu telefon önizlemesi başlangıçtır; gerçek cihaz testinin yerini tamamen tutmaz.
Mobil uyumlu web sitesi SEO’yu nasıl etkiler?
Google’ın mobile-first indexing sisteminde sayfanın mobil sürümündeki içerik dizine ekleme ve sıralama için temel alınır. Mobilde önemli metin, başlık, görsel veya yapılandırılmış veriler kaldırılıyorsa Google içeriği farklı değerlendirebilir. Responsive düzenin temel avantajı, aynı URL ve içerik üzerinde çalışarak masaüstü ve telefon arasında tutarlılığı korumasıdır. Öte yandan yalnızca mobil uyumlu olmak Google’da üst sıralara çıkma garantisi değildir.
SEO ile ilgili başlık, site haritası, kanonik URL ve içerik stratejisi gibi daha geniş konular bu rehberin ana odağı değildir; bunları SEO uyumlu web sitesi rehberinde ayrıntılı ele alıyoruz. Böylece benzer anahtar kelimeler için gereksiz tekrar yapan ayrı sayfalar yerine birbiriyle bağlantılı, farklı amaçlara hizmet eden rehberler oluşturuyoruz.
Mobil site hızı nasıl ölçülür?
Performans değerlendirmesinde Google’ın Core Web Vitals metrikleri yararlıdır. İyi kullanıcı deneyimi için önerilen sınırlar: LCP en fazla 2,5 saniye, INP en fazla 200 milisaniye ve CLS en fazla 0,1. Bu eşikler gerçek kullanıcı yüklemelerinin 75. yüzdelik diliminde yorumlanır. LCP ana içeriğin yüklenme hissini, INP etkileşime verilen tepkiyi, CLS ise beklenmedik yerleşim kaymalarını ölçer.
PageSpeed Insights ile mobil ve masaüstü değerlendirmesini ayrı inceleyin. Yalnızca test puanını yükseltmeye odaklanmayın; ağır görseller, büyük JavaScript dosyaları ve üçüncü taraf reklam/izleme kodları gibi gerçek yük kaynaklarını ölçün. Önemli içerik görselini geç yüklemeye almak, bazı sayfalarda LCP değerini olumsuz etkileyebilir.
Mobil uyumluluk testi nasıl yapılır?
- Chrome’da sayfayı açın, geliştirici araçlarının cihaz modunda 320, 375, 390, 768 ve daha geniş CSS piksel aralıklarını deneyin. Bunlar örnek test genişlikleridir.
- Telefonu yatay çevirdiğinizde menü, formlar ve videoların görünümünü kontrol edin.
- Tarayıcı yakınlaştırması veya daha büyük yazı ayarında içerik kaybı olmadığını doğrulayın.
- Arama ve iletişim formlarında hata mesajlarının ekran dışında kalıp kalmadığına bakın.
- Yatay taşma varsa hangi öğenin sayfa genişliğini büyüttüğünü bulun.
- DevTools otomatik önizlemesinin yanında gerçek Android/iPhone cihazında da test yapın.
- PageSpeed Insights ve Search Console raporlarını inceleyin; sorunların gerçek kullanıcıları etkileyip etkilemediğine bakın.
Mobil uyumlu web sitesi yaparken sık yapılan hatalar
- Sayfa genişliğini sabit piksele bağlayıp dar ekranlarda yatay kaydırmaya neden olmak.
- Metni ve butonları küçük tutarak kullanıcıyı sürekli yakınlaştırmaya zorlamak.
- Masaüstündeki önemli içeriği telefon sürümünde tamamen kaldırmak.
- Sadece bir telefon modeli üzerinden test yapıp tablet ve yakınlaştırılmış görünümü atlamak.
- Büyük görselleri sıkıştırmadan ve uygun boyutları sağlamadan yüklemek.
- Menü simgesini tasarlayıp klavye erişimini, odak durumunu ve açma-kapama işlevini test etmemek.
- İletişim formunu ve ödeme akışını küçük ekranda baştan sona denememek.
- Mobil görünüm düzeldikten sonra değişikliğin masaüstü ve diğer sayfalara etkisini kontrol etmemek.
Yayımlama öncesi mobil uyumluluk kontrol listesi
- Ana başlık ve ilk paragraf telefonda rahat okunuyor mu?
- Menü açık ve kapalı durumlarda çalışıyor mu?
- Kartlar ve tablolar ekran genişliğini bozuyor mu?
- Görsellerin en-boy oranı ve alt metni doğru mu?
- Formlar, hata mesajları ve butonlar kolay kullanılabiliyor mu?
- Mobil ve masaüstü ana içeriği eşdeğer mi?
- Önemli içerik kullanıcı etkileşimi olmadan erişilebilir mi?
- HTTPS, temel yönlendirmeler ve site haritası doğru mu?
- Core Web Vitals ölçümleri kontrol edildi mi?
- Bir gerçek telefonda temel görev akışları tamamlandı mı?
Sık sorulan sorular
Mobil uyumlu web sitesi ile responsive site aynı mı?
Günlük kullanımda çoğu zaman aynı anlamda kullanılır. Teknik olarak responsive tasarım, mobil uyumluluğu sağlamanın yöntemlerinden biridir. Ayrı mobil URL veya dinamik sunum gibi başka yöntemler de vardır.
Mobil uyumlu site yapmak için yazılım bilmek gerekir mi?
Hazır mobil uyumlu şablonlarla temel bir site kurmak için kod yazmak şart olmayabilir. Özel tasarım, karmaşık bileşen veya mevcut sitedeki uyumsuzlukların giderilmesi için HTML/CSS bilgisi gerekebilir.
Mobil uyumluluk testi ücretsiz mi?
Chrome DevTools ve PageSpeed Insights gibi ücretsiz araçlar kullanılabilir. Gerçek cihazlarda test etmek için ayrı cihazlara veya ek test hizmetlerine ihtiyaç duyabilirsiniz.
Google mobil uyumlu olmayan siteleri tamamen kaldırır mı?
Hayır. Google, mobil sürüm bulunmasının arama sonuçlarında yer almak için mutlak zorunluluk olmadığını, ancak mobil uyumlu siteyi güçlü biçimde önerdiğini belirtiyor. Dizine eklenme ile iyi mobil deneyim ayrı konulardır.
Mobil uyumlu bir site kaç günde yapılır?
Yeni bir hazır şablonu uyarlamak ile yüzlerce sayfalı eski bir sitenin mobil sorunlarını düzeltmek aynı iş değildir. Kesin süre; tema, sayfa sayısı, formlar, entegrasyonlar ve test kapsamına bağlıdır.
Kaynakça
- Google Search Central – Mobile-first indexing best practices (erişim: 13 Kasım 2026).
- web.dev – Responsive web design basics (erişim: 13 Kasım 2026).
- W3C WAI – Understanding Reflow (WCAG 2.2) (erişim: 13 Kasım 2026).
- W3C – Web Content Accessibility Guidelines 2.2 (erişim: 13 Kasım 2026).
- web.dev – Web Vitals (erişim: 13 Kasım 2026).
