Mobil Uyumlu Web Sitesi: Responsive Tasarım Rehberi (2026)

Mobil uyumlu web sitesi, tek bir kod ve tek bir adresle her ekran genişliğine kendini uyarlayan sitedir. Türkiye'de web trafiğinin %75,94'ü mobil cihazlardan geliyor ve Google 5 Temmuz 2024'ten beri siteleri yalnızca mobil sürümleriyle indeksliyor. Mobil uyum bu yüzden artık bir tercih değil, görünürlük şartı.

Buna rağmen "sitemiz responsive" cümlesi çoğu zaman yanıltıcıdır. Sayfa telefonda açılıyor, menü bir hamburger ikonuna dönüşüyor, görseller taşmıyor; ama form alanına dokunmak için iki kez denemek gerekiyor, sepet düğmesi başparmağın ulaşamadığı köşede duruyor ve 4G bağlantıda ilk görsel dört saniyede geliyor. Bu rehberde responsive tasarımın temel mantığını kısaca özetleyip asıl soruya odaklanıyoruz: siteniz mobilde gerçekten iş görüyor mu, bunu nasıl ölçersiniz ve eksikleri hangi sırayla kapatırsınız?

İçindekiler

• Mobil uyumlu web sitesi nedir?
• Türkiye'de mobil trafiğin gerçek ağırlığı
• Responsive, adaptive ve ayrı mobil site: hangisi?
• "Mobilde açılıyor" ile "mobilde çalışıyor" aynı şey değil
• Breakpoint mantığı: cihaz değil, içerik
• Dokunmatik arayüz kuralları: hedef boyutu, başparmak ve formlar
• Mobil hız: responsive olmak tek başına yetmiyor
• Mobil uyumluluk nasıl test edilir?
• Mobile-first indeksleme: SEO tarafında dikkat edilecekler
• Mevcut siteyi düzeltmek mi, yeniden yapmak mı?
• Sıkça Sorulan Sorular

Mobil uyumlu web sitesi nedir?

Mobil uyumlu web sitesi, içeriğini ve arayüzünü ziyaretçinin ekran genişliğine, giriş yöntemine (parmak, fare, klavye) ve bağlantı koşullarına göre uyarlayan sitedir. Terimin teknik karşılığı responsive web tasarım yani duyarlı tasarımdır: aynı HTML sayfası her cihaza gönderilir, CSS ise ekranın genişliğine bakarak yerleşimi yeniden düzenler.

Kavram 2010'da Ethan Marcotte'un aynı adlı makalesiyle yaygınlaştı ve üç temel yapı taşına dayanır. Birincisi esnek ızgara: sütunlar sabit piksel yerine oranlarla tanımlanır, böylece ekran daraldıkça kutular da daralır. İkincisi esnek medya: görseller ve videolar bulundukları kutudan taşmaz. Üçüncüsü media query: belirli bir genişliğin altında veya üstünde farklı stil kuralları devreye girer; örneğin üç sütunlu ürün listesi telefonda tek sütuna iner.

2026'da bu üçlüye iki araç daha eklendi. Container query bir bileşenin ekrana değil, içinde durduğu kutuya göre şekil almasını sağlıyor. clamp() gibi akışkan değerler ise yazı boyutu ve boşlukların kırılma noktası beklemeden kademesiz ölçeklenmesine imkân veriyor. Bu araçlar sayesinde "masaüstü tasarımı yap, sonra mobile sıkıştır" yaklaşımı tamamen geride kaldı.

Önemli bir ayrım: mobil uyumluluk görsel bir özellik değil, bir kullanılabilirlik ölçütüdür. Sayfanın telefona sığması başlangıçtır. Yazının zoom yapmadan okunması, düğmelerin tek dokunuşta seçilmesi, formun doğru klavyeyi açması ve sayfanın mobil ağda makul sürede yüklenmesi aynı tanımın parçasıdır.

Türkiye'de mobil trafiğin gerçek ağırlığı

Mobil uyumun neden öncelik olması gerektiğini rakamlar net biçimde gösteriyor. StatCounter'ın Türkiye platform verilerine göre Ağustos 2026'da sayfa görüntülemelerinin %75,94'ü mobil, %23,54'ü masaüstü ve yalnızca %0,52'si tabletten geldi. Yani ortalama bir Türk web sitesinde her dört ziyaretçiden üçü sitenizi telefon ekranında görüyor.

İnternet kullanımının yaygınlığı da bu tabloyu güçlendiriyor. TÜİK'in Hanehalkı Bilişim Teknolojileri Kullanım Araştırması 2026 sonuçlarına göre 16-74 yaş grubunda internet kullanım oranı %92,3'e yükseldi, internetten alışveriş yapanların oranı ise %60'a ulaştı. Ticaret Bakanlığı'nın Türkiye'de E-Ticaretin Görünümü Raporu ise 2025 yılı e-ticaret hacmini 4,57 trilyon TL olarak açıkladı.

Küresel veriler aynı yöne işaret ediyor ama önemli bir uyarıyla. Contentsquare'in 6.000'i aşkın sitede 99 milyar oturumu inceleyen 2026 Dijital Deneyim Benchmark raporuna göre trafiğin %69,9'u mobilden geliyor. Buna karşın masaüstünde dönüşüm oranı mobile göre %74 daha yüksek. Trafik mobilde, fakat satış ve form doldurma hâlâ büyük ekranda daha kolay gerçekleşiyor.

Bu fark, işletmeler için en somut fırsat alanıdır. Mobil ziyaretçiyi masaüstü kadar rahat dönüştüremeyen bir site, ne kadar yeni görünürse görünsün gerçek anlamda mobil uyumlu web sitesi sayılmaz; trafiğinin dörtte üçünü eksik kapasiteyle çalıştırıyor demektir. Aradaki farkın önemli bölümü teknik değil, tasarım kararlarından kaynaklanır: uzun formlar, küçük düğmeler, gereksiz açılır pencereler ve yavaş görseller.

Responsive, adaptive ve ayrı mobil site: hangisi?

Mobil deneyim sunmanın üç yolu var ve Google bunların hepsini destekliyor. Ancak Google Search Central'ın mobile-first indeksleme belgelerinde açıkça belirtildiği gibi önerilen yapılandırma responsive tasarımdır; çünkü uygulaması ve bakımı en kolay olan modeldir.

Ayrı mobil site yapısı 2010'ların başında yaygındı ve Türkiye'de hâlâ m. alt alan adıyla çalışan kurumsal siteler görüyoruz. Mobile-first indeksleme sonrasında bu modelin riski arttı: mobil sürümde eksik kalan her içerik, yapısal veri veya meta etiketi artık sıralamada da eksik sayılıyor. Böyle bir yapıdaysanız responsive yapıya geçiş, genellikle bir web sitesi yenileme projesi kapsamında 301 yönlendirmeleriyle birlikte planlanmalı.

"Mobilde açılıyor" ile "mobilde çalışıyor" aynı şey değil

Bir sitenin responsive olup olmadığını anlamak kolaydır; tarayıcı penceresini daraltırsınız ve yerleşimin değiştiğini görürsünüz. Asıl zor olan, mobil ziyaretçinin hedefine ulaşıp ulaşamadığını ölçmektir. Aşağıdaki on kontrolü kendi telefonunuzla, masaüstü tarayıcı simülasyonu kullanmadan yapabilirsiniz. Her biri iki dakikadan kısa sürer.

1. Zoom testi: Ana sayfadaki paragraf metnini yakınlaştırmadan rahatça okuyabiliyor musunuz? Gövde metni için 16 px altına inmek genellikle okunabilirliği bozar.
2. Yatay kaydırma testi: Sayfayı yukarıdan aşağıya kaydırırken ekran sağa sola kayıyor mu? Taşan tek bir tablo veya görsel bile bu hatayı üretir.
3. Başparmak testi: Telefonu tek elle tutun. Ana eylem düğmesine (Teklif Al, Sepete Ekle, Ara) başparmağınızla, tutuşu değiştirmeden ulaşabiliyor musunuz?
4. Yanlış dokunuş testi: Menüdeki bağlantılar veya filtre seçenekleri birbirine çok yakın mı? Üç denemede bir yanlış öğeye dokunuyorsanız hedefler küçüktür.
5. Form testi: İletişim formunda e-posta alanına dokunduğunuzda @ işaretli klavye, telefon alanında rakam klavyesi açılıyor mu? Klavye açıldığında gönder düğmesi görünür kalıyor mu?
6. Açılır pencere testi: Sayfaya girer girmez ekranı kaplayan bir kampanya, çerez veya bülten penceresi içeriği kapatıyor mu? Kapatma düğmesi rahat seçiliyor mu?
7. Sabit öğe testi: Yapışkan header, WhatsApp balonu ve çerez bandı birlikte ekranın ne kadarını kaplıyor? Küçük telefonlarda bu üçlü, içeriğe ayrılan alanı ciddi biçimde daraltabilir.
8. Yatay mod testi: Telefonu yan çevirdiğinizde içerik bozuluyor veya menü ekranın tamamını kaplıyor mu?
9. Mobil ağ testi: Wi-Fi'yi kapatıp mobil veriyle açın. İlk anlamlı içerik (başlık ve ana görsel) makul sürede geliyor mu?
10. İçerik eşitliği testi: Masaüstünde görünen bir bilgi (fiyat tablosu, SSS, adres, çalışma saatleri) mobilde gizlenmiş veya kaldırılmış mı?

İlk dört testten ikisinde takılıyorsanız sorun kod değil, tasarım kararıdır ve çözümü bileşen düzeyinde yeniden düşünmeyi gerektirir. Beşinci ve dokuzuncu testlerdeki sorunlar ise çoğunlukla geliştirme tarafında hızla düzeltilebilir. Onuncu test SEO açısından en kritik olanıdır; bir sonraki bölümlerde nedenini açıklıyoruz.

Breakpoint mantığı: cihaz değil, içerik

Breakpoint (kırılma noktası), yerleşimin değiştiği ekran genişliğidir. Eski yaklaşım belirli cihazları hedeflerdi: "iPhone için 375 px, iPad için 768 px." Bu yöntem her yeni telefon modeliyle eskidi. Güncel yaklaşım ise tersini söylüyor: kırılma noktasını içeriğin bozulduğu yere koyun.

Uygulaması basittir. Tarayıcı penceresini en geniş hâlinden yavaşça daraltın. Bir satırdaki metin okunamayacak kadar uzadığında, bir görsel orantısızlaştığında veya menü ikinci satıra taştığında durun. O genişlik sizin kırılma noktanızdır. Çoğu sitede bu yöntemle üç-dört anlamlı kırılma noktası ortaya çıkar.

Yine de başlangıç için gerçek kullanıcı ekranlarını bilmek işe yarar. StatCounter'ın Türkiye mobil ekran çözünürlüğü verileri Ağustos 2026'da en yaygın genişliklerin 360 ile 414 CSS piksel arasında toplandığını gösteriyor (414×896, 393×873, 390×844 ve 360×800 ilk sıralarda). Tasarımınızın en az 360 px genişlikte kusursuz çalışması bu yüzden pazarlığa açık değil.

Bu aralıklar bir başlangıç şablonudur, kural değildir. Önemli olan yazma sırasıdır. Mobile-first yaklaşımda temel CSS en küçük ekran için yazılır, daha geniş ekranlar min-width sorgularıyla kademeli olarak zenginleştirilir. Böylece telefon yalnızca ihtiyaç duyduğu stilleri işler ve masaüstü için yazılmış ağır kurallar mobile yük olmaz.

2026'nın asıl değişikliği bileşen düzeyinde yaşanıyor. MDN'nin container query rehberinde anlatıldığı gibi bir ürün kartı, ekranın genişliğine değil kendi kutusunun genişliğine göre düzen değiştirebiliyor. Boyut tabanlı container query'ler Ağustos 2025'te Baseline "yaygın destekli" statüsüne ulaştı; yani güncel projelerde güvenle kullanılabilir. Pratik sonuç şu: aynı kart ana sayfada üç sütunlu ızgarada, blog kenar çubuğunda ise dar bir kutuda ek kod yazmadan doğru görünüyor.

Dokunmatik arayüz kuralları: hedef boyutu, başparmak ve formlar

Fare imleci birkaç piksellik bir noktaya isabet eder; parmak ucu ise çok daha geniş bir alana dokunur. Bu yüzden mobil arayüzde en sık yapılan hata, masaüstündeki küçük bağlantı ve ikonları olduğu gibi telefona taşımaktır. Platformların ve standartların bu konuda somut sayıları var.

Pratik önerimiz basit: ana eylemler için 48 px, ikincil bağlantılar için en az 44 px dokunma alanı hedefleyin; WCAG'ın 24 px değerini tavan değil taban olarak görün. Görsel olarak küçük bir ikon kullanmak isterseniz dolgu (padding) ile tıklanabilir alanı genişletebilirsiniz. Türkiye'de 2025/10 sayılı Genelge ile erişilebilirlik bazı sektörler için yasal zorunluluk hâline geldi; hedef boyutu bu uyumun en kolay ölçülen kriterlerinden biri. Ayrıntılar için web erişilebilirliği rehberimize bakabilirsiniz.

Başparmak bölgesi ikinci kuraldır. Telefonu tek elle kullanan biri ekranın alt ve orta kısmına rahat ulaşır; üst köşeler ise tutuşu değiştirmeyi gerektirir. Bu nedenle sık kullanılan eylemleri (sepet, arama, iletişim) ekranın alt yarısına veya yapışkan bir alt çubuğa yerleştirmek, "Geri" ve "Kapat" gibi ikincil eylemleri üst bölgede bırakmak mantıklıdır.

Formlar üçüncü ve dönüşüm açısından en kritik alandır. Mobilde form doldurmak masaüstüne göre belirgin biçimde daha zahmetlidir; Baymard Institute'un 2026 mobil UX kıyaslamasında incelenen mobil e-ticaret sitelerinin %75'i yalnızca "vasat" olarak derecelendirildi ve sitelerin %93'ü uyarlanabilir hata mesajı sunmuyordu. Formlarınızda şu dört düzenleme çoğu zaman en hızlı kazancı sağlar:

• Alan türünü doğru belirleyin: e-posta için type="email", telefon için type="tel", sayısal değerler için inputmode="numeric". Doğru klavye açıldığında yazım hatası azalır.
• Otomatik doldurmayı açın: autocomplete nitelikleri ad, adres ve telefon bilgisinin tek dokunuşla gelmesini sağlar.
• Alan sayısını azaltın: teklif formunda şirket unvanı, vergi numarası ve adres ilk temasta gerçekten gerekli mi?
• Hata mesajını alanın hemen altında, ne yapılması gerektiğini söyleyerek gösterin: "Geçersiz giriş" yerine "Telefon numarası 10 haneli olmalı".

Mobil hız: responsive olmak tek başına yetmiyor

Responsive bir site, masaüstü için hazırlanmış 2.400 piksellik bir görseli telefona da gönderiyorsa görsel olarak uyumlu, performans olarak uyumsuzdur. Mobil kullanıcı çoğu zaman daha zayıf işlemciyle ve değişken bir ağ bağlantısıyla gezinir. Bu yüzden hız, mobil uyumun ayrılmaz bir parçasıdır.

Etkisi ölçülmüş bir konu. Deloitte'un Google için 37 marka ve 30 milyon oturum üzerinde yürüttüğü Milliseconds Make Millions çalışmasına göre mobil site hızındaki 0,1 saniyelik iyileşme, perakende sitelerinde dönüşümü %8,4, ortalama sepet tutarını ise %9,2 artırdı. Seyahat sitelerinde aynı iyileşme dönüşümü %10,1 yükseltti.

Google'ın kullanıcı deneyimi ölçütleri olan Core Web Vitals üç eşik tanımlar: en büyük içeriğin yüklenmesi (LCP) 2,5 saniyenin, etkileşime yanıt süresi (INP) 200 milisaniyenin, düzen kayması (CLS) ise 0,1'in altında olmalıdır. Responsive tasarımda bu üç ölçütü en çok etkileyen kararlar şunlardır:

• Duyarlı görseller: srcset ve sizes nitelikleriyle tarayıcıya aynı görselin farklı boyutlarını sunun; telefon 400 piksellik sürümü, geniş ekran 1.600 piksellik sürümü indirsin. MDN'nin duyarlı görseller rehberi iyi bir başlangıç noktası.
• Boyut rezervasyonu: Görsellere ve reklam alanlarına genişlik-yükseklik verin; aksi hâlde yüklenirken metni aşağı iterek CLS sorununa yol açarlar.
• Tembel yükleme: Ekranın altında kalan görselleri loading="lazy" ile erteleyin, ancak ilk ekrandaki ana görseli asla ertelemeyin.
• Üçüncü taraf script disiplini: Canlı destek, ısı haritası ve reklam etiketleri mobil işlemciyi en çok yoran unsurlardır. Her birinin gerçekten kullanılıp kullanılmadığını üç ayda bir gözden geçirin.

Hız optimizasyonunun ayrıntılı adımları için web sitesi hızlandırma ve Core Web Vitals rehberimizi okuyabilirsiniz; orada ölçüm yöntemini ve 30 günlük uygulama planını adım adım anlattık.

Mobil uyumluluk nasıl test edilir?

Uzun yıllar boyunca bu sorunun cevabı tek bir bağlantıydı: Google'ın Mobil Uyumluluk Testi. Ancak Google bu aracı, Search Console'daki Mobil Kullanılabilirlik raporunu ve ilgili API'yi Aralık 2023'te emekliye ayırdı ve kullanıcıları Lighthouse'a yönlendirdi. Hâlâ bu araca atıf yapan rehberler güncelliğini yitirmiş durumda. 2026'da sağlıklı bir test üç katmandan oluşur.

1. Laboratuvar testi. Chrome'a gömülü Lighthouse ve PageSpeed Insights, sayfanızı simüle edilmiş bir orta segment telefonda ve yavaşlatılmış ağda çalıştırır. Viewport ayarı, erişilebilirlik sorunları, ağır görseller ve Core Web Vitals göstergeleri burada raporlanır. Laboratuvar testi tekrarlanabilir olduğu için değişiklik öncesi ve sonrası karşılaştırma yapmaya uygundur.

2. Saha verisi. PageSpeed Insights'ın üst bölümünde ve Search Console'un Core Web Vitals raporunda gördüğünüz değerler, Chrome kullanıcılarından toplanan gerçek ölçümlerdir (CrUX). Laboratuvar skorunuz 95 olsa bile gerçek kullanıcılarınız eski cihazlarla geliyorsa saha verisi kötü çıkabilir. Google'ın sıralamada dikkate aldığı veri de budur.

3. Gerçek cihaz testi. Hiçbir simülasyon başparmağınızın yerini tutmaz. Ekibinizde en az bir Android ve bir iPhone ile, tercihen biri üç-dört yıllık bir cihaz olacak şekilde, önceki bölümdeki on maddelik kontrolü uygulayın. Chrome DevTools'taki cihaz modu yerleşim hatalarını yakalar ama dokunma hassasiyetini ve gerçek işlemci yavaşlığını yansıtmaz.

Hızlı bir ön tarama için sitemizdeki ücretsiz site analizi aracını kullanabilirsiniz; teknik SEO, hız ve temel mobil sinyalleri tek raporda özetler. Yeni bir siteyi yayına almadan önce ise SEO lansman kontrol listesi mobil kontrolleri de içeren adım adım bir liste sunar.

Mobile-first indeksleme: SEO tarafında dikkat edilecekler

Google, Ekim 2023'te geçişin büyük ölçüde tamamlandığını duyurdu ve masaüstü tarayıcıyla taranan son siteleri de 5 Temmuz 2024 itibarıyla akıllı telefon Googlebot'una aktardı. Bunun anlamı açık: Google sitenizi bir telefon kullanıcısı gibi görür, sıralamayı da o görüntüye göre yapar. Masaüstünde ne kadar zengin içerik olursa olsun, mobilde yoksa Google açısından da yoktur.

Responsive sitelerde bu kural genellikle sorun çıkarmaz, çünkü HTML aynıdır. Yine de sık gördüğümüz beş hata var:

• Mobilde içerik gizlemek: Masaüstündeki uzun açıklama metnini, SSS bölümünü veya karşılaştırma tablosunu "telefonda kalabalık oluyor" diye display: none ile kaldırmak. Akordeon veya sekme içinde tutmak kabul edilebilir; tamamen silmek değildir.
• Etkileşimle yüklenen içerik: Kullanıcı kaydırmadan veya dokunmadan hiç yüklenmeyen içerikleri Google göremeyebilir. Tembel yüklemeyi yalnızca görsellerde kullanın, metin içeriğinde değil.
• Farklı meta veriler: Ayrı mobil site veya dinamik sunum kullanıyorsanız başlık etiketi, meta açıklama ve yapısal verinin iki sürümde aynı olduğunu doğrulayın.
• Engellenmiş kaynaklar: robots.txt dosyasında CSS veya JavaScript klasörlerini engellemek, Googlebot'un sayfayı mobil düzende işlemesini engeller.
• Rahatsız edici geçiş reklamları: Sayfaya girişte içeriği tamamen kapatan açılır pencereler, Google'ın sayfa deneyimi yönergelerinde olumsuz örnek olarak geçer.

Mobil uyum ile sıralama arasındaki ilişki doğrudan bir "bonus puan" değildir. Mobil deneyim zayıfsa ziyaretçi hızla geri döner, sayfada etkileşim düşer ve içerik Google'a tam aktarılamaz. Sıralama kaybı çoğunlukla bu dolaylı etkilerin toplamıdır.

Mevcut siteyi düzeltmek mi, yeniden yapmak mı?

On maddelik testi uyguladınız ve eksikler çıktı. Şimdi karar anı: mevcut sitede iyileştirme mi yapılmalı, yoksa baştan mı tasarlanmalı? Cevap, sorunların kaynağına bağlı.

Yeniden tasarım kararı verirseniz mobile-first bir süreç isteyin: tasarım dosyalarının önce telefon görünümüyle sunulmasını, ürün ve form akışlarının gerçek cihazda test edilmesini ve teslimde Lighthouse ile saha verisi hedeflerinin yazılı olarak belirlenmesini talep edin. Bütçenin kabaca nereye düşeceğini görmek için web sitesi fiyat hesaplayıcımızı kullanabilirsiniz; sayfa sayısı ve özelliklere göre bir aralık verir. Kurumsal bir sitenin mobil dahil hangi kriterleri karşılaması gerektiğini ise kurumsal web sitesi nasıl olmalı rehberimizde ayrıntılı anlattık.

Bir Türkiye örneği üzerinden düşünelim: İzmir'de hizmet veren bir klinik, reklam trafiğinin büyük bölümünü Instagram ve Google aramalarından telefonla alıyorsa, randevu formunun mobilde üç alanla ve tek ekranda tamamlanması, masaüstü ana sayfasındaki animasyonlardan çok daha fazla randevu getirir. Mobil uyum projelerinde bütçenin önceliği her zaman para kazandıran akışlar olmalıdır: iletişim, teklif, sepet ve ödeme.

Sıkça Sorulan Sorular

Sitemin mobil uyumlu olup olmadığını nasıl anlarım?

Sayfayı telefonunuzda açın ve yakınlaştırmadan okuyup yatay kaydırma olmadan gezinebildiğinizi kontrol edin. Ardından PageSpeed Insights veya Lighthouse ile mobil testi çalıştırın. Google'ın eski Mobil Uyumluluk Testi Aralık 2023'te kapatıldığı için güncel yöntem bu iki araç ve gerçek cihaz testidir.

Responsive tasarım ile mobil uyumlu site aynı şey mi?

Pratikte büyük ölçüde örtüşürler ama aynı değildir. Responsive tasarım, yerleşimin ekran genişliğine göre uyarlanmasını sağlayan tekniktir. Mobil uyumlu site ise buna ek olarak okunabilir yazı, yeterli dokunma alanı, hızlı yükleme ve mobilde eksiksiz içerik gibi kullanılabilirlik koşullarını da karşılar.

Mobil uyumlu olmayan site Google sıralamasını etkiler mi?

Evet, dolaylı ama güçlü biçimde etkiler. Google 5 Temmuz 2024'ten beri tüm siteleri mobil sürümleriyle indeksliyor. Mobilde eksik içerik, yavaş yükleme veya kullanılamayan arayüz; hem Google'ın sayfayı anlamasını hem de ziyaretçinin sayfada kalmasını zorlaştırır.

Mobil uyumlu site için hangi breakpoint'ler kullanılmalı?

Sabit bir liste yerine içeriğin bozulduğu genişlikleri kırılma noktası olarak seçin. Başlangıç için 480, 768, 1024 ve 1280 piksel yaygın kabul gören değerlerdir. Türkiye'deki mobil ekranların çoğu 360-414 CSS piksel aralığında olduğundan tasarımın 360 px'te sorunsuz çalışması gerekir.

Mobil uyumlu hâle getirmek için siteyi baştan yapmak gerekir mi?

Her zaman gerekmez. Site zaten responsive bir altyapıya sahipse görsel, yazı boyutu, form ve hız düzenlemeleri yeterli olabilir. Sabit genişlikli eski temalarda veya ayrı mobil site yapısında ise yeniden tasarım genellikle daha ekonomik ve sürdürülebilir çözümdür.

Mobilde düğmeler ne kadar büyük olmalı?

WCAG 2.2 yasal uyum için en az 24 × 24 CSS piksel ister. Apple 44 × 44 nokta, Google ise Android için 48 × 48 dp dokunma alanı önerir. Ana eylem düğmelerinde 48 piksel hedeflemek hem erişilebilirlik hem dönüşüm açısından güvenli bir tercihtir.

Mobil uygulama varken web sitesinin mobil uyumlu olması gerekir mi?

Evet. Ziyaretçilerin çoğu sizi ilk kez Google araması, sosyal medya bağlantısı veya reklam üzerinden mobil tarayıcıda bulur ve bu aşamada uygulama indirmez. Uygulama sadık kullanıcı içindir; mobil uyumlu web sitesi ise yeni müşteriyi karşılayan kapıdır. İkisi arasında bir ara çözüm arıyorsanız PWA nedir rehberimizde anlattığımız progressive web app modeli değerlendirilebilir.

Container query nedir, her sitede kullanılmalı mı?

Container query, bir bileşenin ekran genişliğine değil, içinde bulunduğu kutunun genişliğine göre görünüm değiştirmesini sağlayan CSS özelliğidir. Ağustos 2025'ten beri tüm güncel tarayıcılarda yaygın desteğe sahiptir. Aynı kartın farklı genişlikteki alanlarda tekrar kullanıldığı sitelerde özellikle faydalıdır.

Mobil uyumlu web sitesi 2026'da bir "özellik" değil, sitenin varsayılan hâli. Ziyaretçilerinizin dörtte üçü sizi telefondan görüyor, Google da sitenizi o ekrandan değerlendiriyor. Fark yaratan şey, responsive bir şablonun ötesine geçip dokunma alanlarını, formları, hızı ve içerik eşitliğini gerçek cihazda ölçmek.

Mobil uyumlu web sitesi hedefine ulaşmak için bu hafta on maddelik testi kendi sitenizde uygulayın ve takıldığınız noktaları listeleyin. Listeyi mobile-first bir yol haritasına dönüştürmek isterseniz web tasarım hizmetimiz kapsamında mevcut sitenizi analiz edip yerinde iyileştirme mi yoksa yeniden tasarım mı gerektiğini birlikte netleştiriyoruz. Bizimle iletişime geçin; sitenizin mobil karnesini birlikte çıkaralım.