Responsive tasarım ile mobil-önce tasarım aynı şey mi?

Hayır. Responsive, sitenin farklı ekran boyutlarına uyum sağlaması demektir. Mobil-önce ise tasarım kararlarının önce küçük ekran için verilip sonra büyük ekrana genişletilmesidir. İkincisi içeriğin önceliklendirilmesini baştan zorunlu kıldığı için, çoğu işletme sitesinde daha net ve hızlı sonuç verir. Pratikte iyi bir proje ikisini birlikte uygular: mobil-önce düşünür, responsive olarak kodlar.

Google mobil uyumluluğu sıralamada kullanıyor mu?

Google, indeksleme için sayfaların mobil sürümünü esas alır; buna mobile-first indexing denir. Mobilde eksik veya bozuk görünen içerik, sıralamaya da yansıyabilir. Bu nedenle masaüstünde bulunan tüm önemli içeriğin mobil sürümde de erişilebilir olması ve gizlenmemesi gerekir. Bu yüzden mobil sürümde başlıklar, metinler, görseller ve bağlantılar masaüstüyle aynı olmalıdır.

Dokunma hedefleri en az ne kadar büyük olmalı?

WCAG 2.2, web için en az 24x24 CSS piksellik dokunma hedefi ister. Apple 44 puntoluk, Material Design 48 dp'lik hedef önerir. Pratikte 44 piksel civarı hedef boyutu ve hedefler arasında en az 8 piksel boşluk, yanlış dokunmaları belirgin biçimde azaltır ve kullanımı rahatlatır.

Mobil uyumluluğu nasıl test ederim?

Tarayıcı geliştirici araçlarındaki cihaz modu hızlı bir başlangıçtır ama gerçek cihazın yerine geçmez. Bir Android ve bir iPhone'da ana sayfa, menü, form ve iletişim düğmelerini deneyin, yavaş bağlantıda da açın. Ek olarak Lighthouse raporuyla hız ve erişilebilirliği, ekran okuyucuyla da gezinmeyi kontrol edin.

Mobil Uyumlu Web Sitesi Tasarımı: 10 Kural

Q: Mobil uyumlu web sitesi nedir?

Mobil uyumlu web sitesi, ekran boyutuna göre düzenini otomatik ayarlayan; telefonda yatay kaydırma gerektirmeyen, metni yakınlaştırmadan okutan ve düğmelerine parmakla rahat basılan sitedir. Teknik olarak genellikle duyarlı (responsive) tasarım ve doğru viewport ayarıyla sağlanır, ancak asıl belirleyici tasarım kararlarının mobil koşullara göre verilmesidir.

Mobil uyumlu web sitesi tasarımı, artık masaüstü sitesinin küçültülmüş hali değil, tasarımın başlangıç noktasıdır. Birçok işletme sitesini bilgisayarında inceleyip onaylar; müşteri ise siteye telefondan, çoğu zaman acele ederek girer. Bu iki deneyim arasındaki fark, kaçırılan aramaların ve terk edilen formların büyük bir kısmının nedenidir.

Mobil Uyumlu Web Sitesi Nedir?

Mobil uyumlu web sitesi, ekran genişliğine göre düzenini ayarlayan ve telefonda rahat kullanılan sitedir. Metin yakınlaştırmadan okunur, yatay kaydırma gerekmez, düğmeler parmakla isabetle basılır, form alanları küçük ekranda kolay doldurulur. Teknik olarak bunu duyarlı (responsive) tasarım sağlar; ancak asıl belirleyici, tasarım kararlarının mobil kullanım koşullarına göre verilmesidir.

Neden Zorunlu?

Google, sayfaları indekslerken ve değerlendirirken öncelikle mobil sürümü kullanır; bu yaklaşıma mobile-first indexing denir. Bunun pratik sonucu şudur: masaüstünde bulunan ama mobilde gizlenen veya eksik olan içerik, Google'ın gördüğü içerik olmayabilir. Ayrıca mobil kullanıcı daha az sabırlıdır; hız ve netlik beklentisi daha yüksektir.

Google'ın eski Mobil Uyumluluk Testi aracını ve Search Console'daki Mobil Kullanılabilirlik raporunu 2023 sonunda kaldırdığını da bilmek gerekir. Bu yüzden artık Lighthouse ve gerçek cihaz testi gibi yöntemlere ihtiyaç var.

Responsive mi, Mobil-Önce mi?

Yaklaşım	Nasıl çalışır?	Riski
Masaüstü-önce responsive	Önce geniş ekran tasarlanır, sonra küçük ekrana sıkıştırılır	Mobilde gereksiz öğeler ve ağır sayfalar
Mobil-önce responsive	Önce en küçük ekran tasarlanır, sonra genişletilir	Geniş ekranda alanı iyi kullanmak için ek emek gerekir
Ayrı mobil site (m.site.com)	İki ayrı site yönetilir	İçerik farkı, bakım yükü, SEO karmaşası

Çoğu işletme sitesi için en sağlam tercih mobil-önce responsive yaklaşımdır: içerik önceliklendirmeyi baştan zorunlu kılar ve tek kod tabanı sunar.

Mobil Uyum İçin 10 Kural

1. Viewport ayarını doğru yapın

Sayfanın <head> bölümünde width=device-width, initial-scale=1 ayarı bulunmalı. Bu ayar olmadan tarayıcı sayfayı masaüstü genişliğinde çizip küçültür ve bütün ölçüler bozulur. Yakınlaştırmayı devre dışı bırakmayın; bu, görme zorluğu yaşayan kullanıcıları dışlar.

2. Dokunma hedeflerini büyütün

Düğmeler ve bağlantılar için hedef boyut 44 piksel civarında, aralarındaki boşluk en az 8 piksel olsun. WCAG 2.2 web için alt sınırı 24x24 CSS piksel olarak belirler, ancak bu asgari değerdir; parmakla kullanımda rahatlık daha büyük hedeflerle gelir.

3. Okunabilir metin boyutu

Gövde metni en az 16 piksel olsun. Bu boyut ayrıca form alanlarında iOS'un otomatik yakınlaştırma davranışını da önler. Satır uzunluğu telefonda doğal olarak kısadır; satır aralığını (yaklaşık 1,5) cömert tutun.

4. Yatay kaydırmayı ortadan kaldırın

Sabit genişlikli görsel, tablo veya gömülü içerik yatay kaydırma yaratır. Görselleri kapsayıcı genişliğine sığdırın; geniş tabloları kaydırılabilir bir kapsayıcıya alın ya da mobilde kart düzenine çevirin.

5. Menüyü mobil için ayrıca tasarlayın

Masaüstü menüsü telefonda çalışmaz. Açılır menü tek elle erişilebilir, kapatma düğmesi belirgin ve klavye ile erişilebilir olmalı. İletişim eylemi menüde her zaman görünür kalsın. Menü başlıklarının nasıl seçileceğini bilgi mimarisi yazımızda anlattık.

6. Formları kısaltın ve doğru alan tipi kullanın

Telefonda yazmak zordur. Yalnızca gerçekten gerekli alanları isteyin; e-posta için type="email", telefon için type="tel" kullanın, böylece uygun klavye açılır. Her alanın görünür bir etiketi olsun; yalnızca yer tutucu (placeholder) metne güvenmeyin, çünkü yazmaya başlayınca kaybolur.

7. Tıkla-ara ve tıkla-yaz bağlantılarını ekleyin

Telefon numarası tel: bağlantısı, e-posta mailto: bağlantısı olmalı; WhatsApp için ilgili sohbet bağlantısı kullanılmalı. Yerel işletmelerde mobil trafikten gelen eylemin çoğu bu üç düğmeden biridir. Yerel işletmeler için ayrıntılı ele aldık: yerel işletmeler için web sitesi tasarımı.

8. Görselleri cihaza göre sunun

Telefona masaüstü boyutunda görsel yollamak hem veri hem hız kaybıdır. srcset ve sizes ile cihaza uygun boyut sunun, modern biçimler (WebP, AVIF) kullanın, genişlik ve yükseklik değerlerini belirterek düzen kaymasını önleyin.

9. Ekranı kaplayan pencerelerden kaçının

Açılışta ekranı kaplayan çerez, bülten veya kampanya pencereleri mobilde içeriği tamamen kapatır. Google da erişimi engelleyen bu tür araya giren ögeleri (interstitial) olumsuz değerlendirebileceğini belirtir. Gerekli çerez bildirimini alt şerit olarak ve içeriği kapatmadan gösterin.

10. Hızı mobil koşullarda ölçün

Telefonlar daha yavaş işlemci ve değişken ağ koşullarında çalışır. Sitenizi yalnızca hızlı bilgisayar ve kablolu bağlantıda test etmek yanıltıcıdır. Ölçütler ve iyileştirmeler için web sitesi hızı ve Core Web Vitals yazımıza bakın.

Masaüstünden Mobile Dönüştürme Örnekleri

Masaüstü öğesi	Mobilde sorun	Çözüm
Geniş menü çubuğu	Sığmaz, küçük hedefler	Açılır menü, belirgin iletişim düğmesi
Çok sütunlu hizmet kartları	Metin sıkışır	Tek sütun, kart aralıkları büyütülür
Geniş karşılaştırma tablosu	Yatay kaydırma	Kaydırılabilir kapsayıcı veya kart düzeni
Hover ile açılan alt menü	Dokunmatikte hover yoktur	Dokunarak açılan menü
Yan yana form alanları	Küçük ve zor doldurulur	Tek sütun, tam genişlik alanlar
Arka plan videosu	Veri ve pil tüketir	Statik görsel veya isteğe bağlı oynatma

Breakpoint'leri Cihaza Değil İçeriğe Göre Belirleyin

Popüler cihazların genişliklerine göre kırılma noktası belirlemek kırılgandır; çünkü cihaz çeşitliliği sürekli değişir. Daha sağlam yöntem, tarayıcıyı yavaşça daraltıp genişleterek içeriğin bozulduğu noktada düzen değiştirmektir. Bu "içerik odaklı" yaklaşım, yeni bir cihaz çıktığında da düzenin bozulmamasını sağlar.

Mobil Uyum Test Listesi

Gerçek bir Android ve bir iPhone'da ana sayfayı açın; yatay kaydırma var mı?
Menüyü açıp kapatın; kapatma düğmesine tek elle ulaşabiliyor musunuz?
Telefon numarasına dokunun; arama ekranı açılıyor mu?
Formu doldurup gönderin; doğru klavye açılıyor, hata mesajları anlaşılır mı?
Sayfayı yavaş bağlantıda açın; içerik kayıyor mu, düğmeler geç mi beliriyor?
Cihazı yan çevirin; düzen bozuluyor mu?
Klavye ile gezinin (tablet klavyesi veya masaüstünde Tab tuşu); odak halkası görünüyor mu?
Lighthouse mobil raporunda erişilebilirlik ve performans uyarılarına bakın.

Sık Yapılan Mobil Tasarım Hataları

Mobilde içeriği gizlemek: Google mobil sürümü esas aldığı için gizlenen içerik görünürlüğü etkileyebilir.
Yalnızca hover'a dayalı etkileşim: Dokunmatik cihazlarda erişilemez.
Çok küçük, birbirine yapışık bağlantılar: Yanlış dokunmalara neden olur.
Yakınlaştırmayı engellemek: Erişilebilirlik sorunu yaratır.
Mobilde ağır animasyon ve video: Hızı ve pil ömrünü olumsuz etkiler.

Mobil sorunların dönüşüme etkisini tasarım hataları yazımızda ayrıca ele aldık.

Mobil İlk Ekranın Tasarımı

Telefonda ziyaretçi sayfa açıldığında yalnızca ilk ekranı görür ve devam edip etmeyeceğine büyük oranda oradan karar verir. Mobil ilk ekranda şunlar bulunmalı: ne yaptığınızı söyleyen net bir başlık, tek bir birincil eylem (örneğin "Ara" veya "Teklif al") ve küçük bir güven işareti (bir referans adı, sertifika veya "1 iş günü içinde dönüş"). Logo ve menü bu düzeni ezmemelidir.

Bir teknik ayrıntı sık atlanır: mobil tarayıcılarda adres çubuğu kaydırdıkça küçülüp büyüdüğü için 100vh yüksekliğinde bir bölüm, içeriği ekranın dışına taşırabilir. Modern tarayıcılarda bunun için dinamik görünüm alanı birimi olan dvh kullanılır:

.hero { min-height: 100dvh; }
/* eski tarayıcılar için yedek */
@supports not (height: 100dvh) { .hero { min-height: 100vh; } }

Ayrıca ilk ekranın altına yapışan bir "Ara" veya "WhatsApp" çubuğu, yerel işletmeler ve hizmet firmaları için çoğu zaman en verimli mobil eylem çağrısıdır; yeter ki içeriği kapatmasın ve dokunma hedefi yeterince büyük olsun.

Mobil Formlarda Mikro Ayrıntılar

Telefonda form doldurmak masaüstünden çok daha zahmetlidir; küçük ayrıntılar terk oranını doğrudan etkiler:

Doğru otomatik doldurma: autocomplete="name", autocomplete="tel", autocomplete="email" gibi öznitelikler tarayıcının bilgileri tek dokunuşla doldurmasını sağlar.
Doğru klavye: Telefon için type="tel", e-posta için type="email"; sayısal alanlarda inputmode="numeric".
Görünür etiket: Yalnızca yer tutucu metin yazmaya başlayınca kaybolur; etiket alanın üstünde kalmalı.
Hatalar alanın yanında: Sayfa başında toplu hata listesi yerine, ilgili alanın altında net mesaj gösterin.
Gönderim geri bildirimi: Gönderirken düğmeyi devre dışı bırakıp durum gösterin; gönderim sonrası ne olacağını açıkça yazın.
Spam korumasını sade tutun: Ziyaretçiyi zorlayan görsel doğrulamalar yerine, görünmez yöntemler (gizli alan gibi) tercih edin.

Mobil Trafiği Analizde Nasıl Okursunuz?

Mobil sorunu tahminle değil veriyle görün. Analiz aracınızda cihaz kategorisine göre şu karşılaştırmaları yapın:

Mobil ve masaüstü ziyaret oranı: Hedef kitlenizin ağırlıklı olarak hangi cihazdan geldiğini gösterir; tasarım önceliği buna göre belirlenir.
Cihaza göre eylem oranı: Masaüstünde form gönderiliyor ama mobilde gönderilmiyorsa, sorun büyük olasılıkla mobil form veya düzendedir.
Cihaza göre çıkış oranı: Mobilde belirgin biçimde yüksek çıkış, hız veya düzen sorununa işaret eder.
Search Console cihaz filtresi: Arama performansını mobil ve masaüstü olarak ayırıp görünürlük farkına bakın.

Bu karşılaştırmaların anlamlı olması için önce eylemleri (telefon, form, WhatsApp) ölçmek gerekir; ölçüm yoksa mobil sorunu görmek mümkün değildir.

Mobilde Zor İçerikler: Tablo, Görsel, Video ve PDF

Tablolar: Geniş tabloyu ya kaydırılabilir bir kapsayıcıya alın ya da mobilde her satırı bir kart olarak gösterin. Önemli karşılaştırmalar için kart düzeni daha okunaklıdır.
Görseller: Geniş bir manzara fotoğrafı telefonda anlamsızlaşabilir. picture öğesiyle mobil için farklı kadraj sunabilirsiniz.
Video: Otomatik oynatmayın, kapak görseli (poster) gösterin ve videoyu kullanıcı başlatınca yükleyin; veri ve pil tasarrufu sağlar.
PDF kataloglar: Telefonda ağır ve zor okunur. Kritik bilgiyi PDF'te değil, sayfada HTML olarak verin; PDF yalnızca isteğe bağlı indirme olsun.
Harita: Etkileşimli gömme harita hem ağırdır hem sayfa kaydırmayı zorlaştırır. Statik bir görsel ve "Yol tarifi al" bağlantısı çoğu işletme için yeterlidir.

Erişilebilirlik ve Mobil: Ekran Okuyucularla Deneyin

Mobil erişilebilirliğin en pratik testi, telefonun kendi ekran okuyucusunu (iPhone'da VoiceOver, Android'de TalkBack) açıp sitenizde gezinmektir. Şunlara bakın: düğmelerin ve bağlantıların anlaşılır adları var mı, görseller için alternatif metin okunuyor mu, başlık sıralaması mantıklı mı, odak sırası görsel sırayla uyumlu mu? Bu test on beş dakikanızı alır ve hem erişilebilirliği hem de genel yapı kalitesini doğrudan gösterir. Erişilebilirlik ölçütleri için W3C WCAG yönergelerine başvurabilirsiniz.

Dokunmatik Cihazlarda Etkileşim Kalıpları

Fare ile parmak farklı çalışır; masaüstünde doğal olan bazı kalıplar dokunmatik ekranda bozulur. Bilinmesi gereken başlıca noktalar:

Hover (üzerine gelme) yoktur: Üzerine gelince açılan menü, ipucu veya bilgi dokunmatikte erişilemez. Aynı bilgiyi dokunarak açılan bir öğeyle de sunun.
Sabit (sticky) öğeler dikkatli kullanılmalı: Ekranın önemli bir kısmını kaplayan sabit başlık veya alt çubuk, küçük ekranda içeriği boğar. Sabit öğeler ince olmalı ve odaklanan öğeyi kapatmamalı.
Karusel ve kaydırma kalıpları: Yatay kaydırmalı galeriler, sayfanın dikey kaydırmasıyla çakışabilir. Kritik bilgiyi karusele koymayın ve kaydırma dışında görünür kontroller sunun.
Ekran klavyesi düzeni değiştirir: Klavye açıldığında görünür alan küçülür; formdaki odaklanan alanın ve gönder düğmesinin klavyenin arkasında kalmadığını test edin.
Yanlış dokunmaya tolerans: Yıkıcı veya geri alınamaz eylemleri (silme, gönderme) yakın, küçük hedeflerle yan yana koymayın.

Bu kalıpların tümünü yalnızca kılavuza bakarak değil, gerçek bir telefonda kullanarak denemek gerekir. Parmak, tasarımdaki sorunu çoğu zaman ilk dokunuşta ortaya çıkarır.

Özet Notlar: Mobil Uyum İçin 5 Cümle

Google mobil sürümü esas aldığı için mobil uyum bir tercih değil zorunluluktur.
Mobil-önce tasarım, içeriğin önceliklendirilmesini baştan zorunlu kılar ve daha net sonuç verir.
Dokunma hedefleri 44 piksel civarında, metin en az 16 piksel ve yatay kaydırma sıfır olmalıdır.
Formu kısaltın, doğru alan tiplerini ve otomatik doldurmayı kullanın, tıkla-ara bağlantısı ekleyin.
Test için gerçek bir Android ve bir iPhone kullanın; ekran okuyucuyla da gezinin.

Mobil Uyumu Baştan Planlamak

Mobil uyum, sonradan eklenen bir katman değil, tasarım kararlarının başlangıcıdır. Sürecin nerede yapılacağını tasarım süreci yazımızda görebilirsiniz. Siteniz için mobil-önce tasarım planlamak ve mevcut sitenizin mobil durumunu değerlendirmek isterseniz web site geliştirme hizmetimizi inceleyebilir veya bize ulaşabilirsiniz.

Web Sitesi Tasarımı Rehber Serisindeki Diğer Yazılar

Bu yazı, işletmeler için web sitesi tasarımını farklı açılardan ele alan bir serinin parçası. İlgilendiğiniz konuya doğrudan geçebilirsiniz:

Mobil Uyumlu Web Sitesi Tasarımı: Telefonda Müşteri Kaybetmemenin 10 Kuralı

⚡ TL;DR — Hızlı Özet