Mobil Uyumlu Web Tasarım: Adım Adım Rehber

Mobil uyumlu (responsive) web tasarım, aynı sayfanın telefon, tablet ve masaüstü ekranlarında ayrı bir sürüme ihtiyaç duymadan, ekran genişliğine göre yeniden düzenlenmesidir. Bunun için üç temel araç kullanılır: doğru ayarlanmış bir viewport etiketi, ekrana göre esneyen ızgara ve görseller, ve belirli genişliklerde düzeni değiştiren CSS medya sorguları. Ancak iyi bir mobil deneyim yalnızca "sayfa ekrana sığıyor" demek değildir; başparmakla rahatça dokunulabilen butonlar, okunabilir yazılar, kolay doldurulan formlar ve mobilde de eksiksiz içerik gerekir.

Bu rehberde responsive tasarımı, projelerimizde izlediğimiz sırayla adım adım anlatıyoruz. Sayfa hızı ayrı ve geniş bir konu olduğu için onu PageSpeed ve Core Web Vitals rehberimize bıraktık; burada düzen, dokunma, tipografi, formlar ve test üzerinde duruyoruz.

Neden önemli: Google sitenizi telefondan okuyor

Google, siteleri dizine eklerken ve sıralarken ağırlıklı olarak sayfaların mobil sürümünü kullanır; buna mobil öncelikli dizine ekleme (mobile-first indexing) denir. Google'ın kendi dokümantasyonu, mobil ve masaüstü sürümlerde ana içeriğin, başlıkların, meta açıklamaların ve yapısal verinin eşdeğer olmasını önerir. Pratikteki sonucu şudur: Mobilde gizlediğiniz ya da kaldırdığınız içerik, arama motoru açısından hiç yokmuş gibi değerlendirilebilir.

Kullanıcı tarafında ise durum daha da basittir: Telefondan gelen bir ziyaretçi, yakınlaştırmak ve yatay kaydırmak zorunda kaldığında genellikle geri döner ve bir sonraki sonuca tıklar.

1. Adım: Planlama — içerik önceliği ve kırılma noktaları

Responsive tasarım kodla değil, içeriğin önceliklendirilmesiyle başlar.

İçeriği önem sırasına koyun. Masaüstünde yan yana duran üç sütun, telefonda alt alta dizilir. Hangisinin önce görüneceğine baştan karar verin. Örneğin bir hizmet sayfasında sıra genellikle şöyledir: başlık ve kısa açıklama, ana çağrı butonu, hizmet ayrıntıları, referanslar, sorular. Hangi sayfaların olacağını henüz netleştirmediyseniz kurumsal site içerik planı rehberimiz iyi bir başlangıçtır.
Mobilden başlayın (mobile-first). Tasarımı ve CSS'i önce en dar ekran için yazıp genişledikçe düzeni zenginleştirmek, tersinden daha temiz sonuç verir. Masaüstü tasarımı sıkıştırmaya çalışmak, genellikle "mobilde gizleyelim" kararlarına ve içerik kaybına yol açar.
Kırılma noktalarını cihazlara göre değil, içeriğe göre seçin. Belirli telefon modellerinin genişliklerini ezberlemek yerine, tarayıcı penceresini yavaşça daraltın ve düzenin bozulmaya başladığı yeri bir kırılma noktası olarak işaretleyin. Çoğu kurumsal site için üç-dört kırılma noktası yeterlidir.

Sık hata: Tasarımın yalnızca masaüstü için hazırlanıp mobil görünümün geliştiriciye bırakılması. Mobil ekranlar tasarım dosyasında ayrıca çizilmeli ve onaylanmalıdır.

2. Adım: Temel kurulum — viewport ve esnek düzen

Viewport etiketini ekleyin. Bu etiket olmadan mobil tarayıcılar sayfayı masaüstü genişliğinde çizer ve küçültür. Standart kullanım şudur: <meta name="viewport" content="width=device-width, initial-scale=1">. Kullanıcının yakınlaştırmasını engelleyen user-scalable=no ya da maximum-scale=1 eklemeyin; az gören kullanıcıların metni büyütmesini engeller.
Sabit genişlik yerine esnek birimler kullanın. Kapsayıcılar için piksel yerine yüzde, max-width ve fr gibi birimler; yazı ve boşluklar için rem tercih edin. Böylece kullanıcı tarayıcıda yazı boyutunu büyüttüğünde düzen de orantılı biçimde büyür.
Düzeni Flexbox ve Grid ile kurun. Örneğin hizmet kartları için grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) kuralı, kartların ekrana sığdığı kadar yan yana dizilmesini, sığmadığında alt satıra geçmesini sağlar; çoğu durumda ayrı bir medya sorgusuna bile gerek kalmaz.
Bileşen düzeyinde düşünün. Bir kart bazen geniş ana alanda, bazen dar kenar çubuğunda kullanılır. Kapsayıcı sorguları (container queries), bileşenin ekran genişliğine değil, içinde bulunduğu alana göre düzenlenmesini sağlar ve güncel tarayıcılarda geniş destek görür.

Sık hata: Sayfada yatay kaydırma çubuğu çıkması. Genellikle sabit genişlikli bir öğe, taşan uzun bir kelime ya da tam genişlikte verilmiş bir iframe'den kaynaklanır. Tarayıcının geliştirici araçlarında taşan öğeyi bulmak birkaç dakikanızı alır.

3. Adım: Görseller ve medya

Görselleri kapsayıcıya sığdırın. img { max-width: 100%; height: auto; } kuralı, görselin kapsayıcısından taşmasını engeller.
Ekrana uygun boyutta görsel sunun. srcset ve sizes öznitelikleriyle tarayıcıya farklı genişlikte görsel seçenekleri verin; telefon, masaüstü için hazırlanmış büyük dosyayı indirmesin.
Gerektiğinde farklı kadraj kullanın. Masaüstündeki geniş panoramik bir kapak görseli, telefonda küçük ve anlamsız bir şeride dönüşebilir. <picture> öğesiyle mobil için daha dar, konuya yakın kadrajlı bir görsel sunabilirsiniz.
Genişlik ve yüksekliği belirtin. Görsellere width ve height değerleri vermek, görsel yüklenirken sayfanın zıplamasını önler.
Video ve haritalarda oran koruyun. Gömülü videolar ve haritalar için aspect-ratio özelliği, ekran daraldığında oranın bozulmamasını sağlar.

4. Adım: Dokunma alanları ve gezinme

Fare imleci piksel hassasiyetindedir; parmak değildir. Mobil tasarımın en sık ihmal edilen kısmı dokunma alanlarıdır.

Dokunma alanlarını yeterince büyük yapın. web.dev, dokunma hedefleri için yaklaşık 48 piksellik bir alanı ve hedefler arasında 8 piksel civarında boşluğu önerir. WCAG 2.2'deki asgari kriter (2.5.8, AA seviyesi) ise 24×24 CSS pikseldir. Küçük bir ikonun görünür boyutunu büyütmeden, iç boşluk (padding) ekleyerek dokunma alanını genişletebilirsiniz.
Önemli butonları başparmak bölgesine yakın tutun. Telefonda "Ara", "WhatsApp" veya "Teklif iste" gibi ana eylemler için ekranın altına sabitlenmiş ince bir çubuk iyi çalışır. Ancak bu çubuk içeriği kapatmamalı ve çerez bildirimiyle üst üste binmemelidir.
Menüyü sadeleştirin. Hamburger menü yaygın ve anlaşılır bir kalıptır; ancak içine onlarca öğe doldurmak yerine ana bölümleri öne çıkarın. Alt menüler dokunarak açılmalı, açık olduğu belli olmalıdır.
Fareyle üzerine gelmeye (hover) bağlı işlev bırakmayın. Dokunmatik ekranda hover yoktur. Yalnızca üzerine gelince açılan menüler ya da görünen bilgiler mobilde erişilemez hâle gelir.
Telefon ve e-postayı tıklanabilir yapın. href="tel:+90..." ve href="mailto:..." bağlantıları, ziyaretçinin numarayı kopyalayıp yapıştırma zahmetini ortadan kaldırır.

Sık hata: Birbirine çok yakın yerleştirilmiş bağlantılar, özellikle footer'daki küçük yasal metin linkleri. Kullanıcı istemediği sayfaya gider, geri döner, sonunda vazgeçer.

5. Adım: Tipografi ve okunabilirlik

Gövde metnini küçültmeyin. Mobilde yazıyı masaüstünden küçük yapmak yaygın bir alışkanlıktır; oysa telefon göze yakın tutulsa bile ekran küçük olduğu için okunabilirlik zaten zorlanır. Gövde metni için tarayıcı varsayılanı olan 16 pikselin altına inmemek iyi bir başlangıç noktasıdır.
Başlıkları akışkan ölçeklendirin. font-size: clamp(1.75rem, 5vw, 3rem) gibi bir kural, başlığın ekran genişliğine göre belirli sınırlar arasında büyüyüp küçülmesini sağlar. Masaüstünde etkileyici duran dev bir başlık, telefonda dört satıra bölünüp ilk ekranı tamamen kaplamamalıdır.
Satır uzunluğunu ve aralığını ayarlayın. Geniş ekranlarda metin sütununu sınırlayın (ör. max-width: 70ch); mobilde ise kenar boşluklarının metni ekran kenarına yapıştırmadığından emin olun. Satır aralığı gövde metninde genellikle 1,5 civarında rahat okunur.
Paragrafları kısa tutun. Masaüstünde dört satır olan bir paragraf, telefonda on iki satırlık bir bloğa dönüşür. Ara başlıklar ve listeler mobil okuyucunun taramasını kolaylaştırır.
Kontrastı ihmal etmeyin. Açık gri üstüne beyaz yazı, güneş altında telefon ekranında neredeyse görünmez. Erişilebilir kontrast oranları WCAG'de tanımlıdır.

6. Adım: Formlar ve tablolar

Formlar

Doğru giriş türlerini kullanın. type="tel" telefonda sayısal tuş takımını, type="email" @ işaretini öne çıkaran klavyeyi açar.
Otomatik doldurmayı açın. autocomplete="name", autocomplete="email", autocomplete="tel" gibi değerler, kullanıcının bilgilerini tek dokunuşla doldurmasını sağlar.
Etiketleri alanın dışında tutun. Yalnızca alanın içinde görünen ve yazmaya başlayınca kaybolan açıklamalar (placeholder), kullanıcının ne yazdığını kontrol etmesini zorlaştırır.
Giriş alanlarındaki yazı boyutuna dikkat edin. Bazı mobil tarayıcılar, yazı boyutu küçük olan bir alana dokunulduğunda sayfayı otomatik yakınlaştırır. Alanlarda 16 piksel ve üzeri yazı boyutu bu davranışı genellikle önler.
Alan sayısını azaltın. Mobilde her ek alan, formun yarım bırakılma ihtimalini artırır. Gerçekten gerekli olmayan her alanı çıkarın.

Tablolar

Geniş tablolar telefonda en zor içerik türüdür. Üç yaygın çözüm vardır: tabloyu kendi içinde yatay kaydırılabilir bir kapsayıcıya almak (sayfanın tamamı değil, yalnızca tablo kayar), her satırı mobilde bir karta dönüştürmek ya da en önemli sütunları gösterip ayrıntıyı açılır bir bölüme taşımak. Hangisinin doğru olduğu, tablonun karşılaştırma mı yoksa liste mi olduğuna bağlıdır.

7. Adım: Test ve yayın öncesi kontrol

Tarayıcının cihaz modunu kullanın. Chrome, Firefox ve Safari'nin geliştirici araçlarında farklı ekran genişliklerini hızlıca deneyebilirsiniz. Ancak bu bir simülasyondur; dokunma hissini ve gerçek performansı göstermez.
Gerçek cihazlarda test edin. En az bir iOS ve bir Android telefonda, hem dikey hem yatay konumda gezinin. Eski ve düşük donanımlı bir Android cihaz, sorunları en hızlı ortaya çıkaran test ortamıdır.
Lighthouse raporuna bakın. Chrome'daki Lighthouse, dokunma hedefleri, viewport, kontrast ve okunabilirlik gibi konularda otomatik kontroller sunar. Google'ın eski bağımsız mobil uyumluluk test aracı kullanımdan kaldırıldığı için bu kontroller artık büyük ölçüde Lighthouse ve geliştirici araçları üzerinden yapılır.
Search Console'u takip edin. Yayından sonra hangi sayfaların mobil aramalarda nasıl performans gösterdiğini Google Search Console rehberimizde anlattığımız raporlardan izleyebilirsiniz.
Bir kontrol listesiyle bitirin. Aşağıdaki listeyi her sayfa şablonu için tek tek işaretleyin.

Yatay kaydırma yok; hiçbir öğe ekrandan taşmıyor.
Kullanıcı sayfayı yakınlaştırabiliyor.
Ana çağrı butonu ilk ekranda veya ona çok yakın.
Butonlar ve bağlantılar parmakla rahatça dokunulabiliyor.
Menü açılıyor, kapanıyor ve alt menülere ulaşılabiliyor.
Formlar doğru klavyeyi açıyor ve otomatik doldurma çalışıyor.
Tablolar, videolar ve haritalar düzeni bozmuyor.
Mobil ve masaüstü sürümlerde ana içerik aynı.
Pop-up ve çerez bildirimi içeriği tamamen kapatmıyor, kolayca kapatılabiliyor.

Sık yapılan hatalar özeti

Mobilde içerik gizlemek: Kalabalık görünmesin diye bölümleri display: none ile kaldırmak. İçerik çok uzunsa akordeon veya sekme kullanın; Google'ın mobil öncelikli dizine ekleme rehberi de bu yaklaşımı mümkün görür.
Ayrı mobil site (m.alanadi.com): Bakımı iki katına çıkarır ve içerik tutarsızlığı riskini artırır. Yeni projelerde responsive tek bir site tercih edin.
Tam ekran açılır pencereler: Sayfa açılır açılmaz içeriği kapatan pencereler hem kullanıcıyı hem arama görünürlüğünü olumsuz etkileyebilir.
Yalnızca bir telefonda test: Tasarımcının kendi telefonunda kusursuz görünen sayfa, daha küçük ya da daha eski bir ekranda dağılabilir.
Hazır temaya güvenip kontrol etmemek: "Tema responsive" ifadesi, sizin içeriğinizle de sorunsuz çalışacağı anlamına gelmez. Bu konudaki görüşümüzü hazır tema mı özel tasarım mı yazısında paylaştık.

Sık Sorulan Sorular

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

Günlük kullanımda çoğunlukla aynı anlamda kullanılır. Teknik olarak "mobil uyumlu" daha geniş bir ifadedir; ayrı bir mobil site de mobil uyumlu olabilir. Responsive ise tek bir sitenin ekran genişliğine göre uyum sağlamasını anlatır ve bugün önerilen yaklaşım budur.

Mevcut sitemi baştan yapmadan mobil uyumlu hâle getirebilir miyim?

Sitenin yapısına bağlıdır. Düzen tablolarla veya sabit genişliklerle kurulmuşsa yeniden yazmak, yamamaktan daha hızlı ve ucuz olabilir. Modern bir altyapıda ise genellikle CSS düzenlemeleriyle iyileştirme mümkündür.

Mobilde bazı bölümleri gizlemek SEO'yu etkiler mi?

Ana içeriği tamamen kaldırmak etkileyebilir, çünkü Google mobil sürümü esas alır. İçeriği akordeon veya sekme içinde tutmak ise sorun yaratmaz; içerik sayfada durur, yalnızca görünümü sadeleşir.

Tablet için ayrı tasarım gerekir mi?

Genellikle ayrı bir tasarım gerekmez; içeriğe göre seçilmiş kırılma noktaları tableti de kapsar. Yine de tablet genişliğinde düzenin "ne masaüstü ne mobil" gibi garip bir ara hâle düşmediğini mutlaka kontrol edin.

Mobil uyumluluk için hangi aracı kullanmalıyım?

Geliştirme sırasında tarayıcının cihaz modu ve Lighthouse; yayından sonra Search Console ve gerçek kullanıcı verileri. Hiçbir araç, gerçek bir telefonda sayfayı kendiniz gezmenin yerini tutmaz.

Sonuç

İyi bir mobil deneyim, masaüstü tasarımın küçültülmüş hâli değil, telefonda neyin önemli olduğuna verilmiş bilinçli kararların toplamıdır: içerik sırası, parmağa uygun butonlar, okunabilir yazı ve zahmetsiz formlar. Bu adımları tasarım aşamasında uygulamak, yayından sonra yamamaktan her zaman daha kolaydır.

Nexova Studio olarak web tasarım ve geliştirme projelerimizde mobil ekranları tasarım aşamasında ayrıca çizip onaylatıyor, yayından önce gerçek cihazlarda test ediyoruz. Mevcut sitenizin mobil deneyimini birlikte değerlendirmek isterseniz bize ulaşın.