Web Tasarım
Mobil Uyumlu Web Tasarım Nedir? Responsive Site Rehberi
Responsive tasarımın nasıl çalıştığı, mobil uyumlu bir sitede bulunması gerekenler ve kendi sitenizi test etme adımları.
Mobil uyumlu web tasarım, bir sitenin telefon, tablet ve masaüstü ekranlarda aynı içeriği okunabilir ve kullanılabilir biçimde sunmasıdır. Ziyaretçi yakınlaştırmak, yana kaydırmak veya küçük bir linke isabet ettirmeye çalışmak zorunda kalmaz.
Bu rehber responsive tasarımın nasıl çalıştığını, mobil uyumlu bir sitede nelerin bulunması gerektiğini ve kendi sitenizi nasıl test edebileceğinizi anlatır.
Mobil uyumlu ve responsive tasarım aynı şey mi?
Günlük kullanımda aynı anlamda kullanılırlar, ama teknik olarak küçük bir fark vardır
Responsive tasarım
Tek bir site, ekran genişliğine göre yerleşimini akışkan biçimde değiştirir.
Adaptif tasarım
Belirli ekran genişlikleri için önceden hazırlanmış sabit yerleşimler sunulur.
Ayrı mobil site
M.ornek.com gibi farklı bir adreste ikinci bir site çalışır.
Bugün standart yaklaşım responsive tasarımdır: tek adres, tek içerik, tek bakım süreci. Ayrı mobil site hem bakım hem SEO açısından gereksiz karmaşıklık üretir.
Mobil uyumluluk neden önemli?
- Ziyaretçilerin büyük kısmı siteye telefondan ulaşır; ilk izlenim mobilde oluşur.
- Google siteleri mobil sürümleri üzerinden değerlendirir (mobil öncelikli indeksleme).
- Mobilde zor kullanılan bir sitede form doldurma ve arama oranı düşer.
- Reklamdan gelen trafiğin karşılığı, açılan sayfanın mobildeki kalitesine bağlıdır.
Dikkat
Önemli: mobil sürümde gizlenen veya kaldırılan içerik, Google açısından sitede yok sayılabilir. Mobilde sadeleştirmek, içeriği silmek anlamına gelmemelidir.
Responsive tasarım nasıl çalışır?
Akışkan ızgara
Genişlikler sabit piksel yerine oran ve esnek birimlerle tanımlanır. Üç sütunlu bir yapı dar ekranda iki, sonra tek sütuna iner.
Kırılım noktaları
Yerleşimin değiştiği ekran genişlikleridir. Kırılım noktaları belirli cihaz modellerine göre değil, içeriğin bozulmaya başladığı yere göre seçilmelidir.
Esnek görseller
Görseller kapsayıcısından taşmaz ve cihazın ihtiyacından büyük dosya indirilmez. Aynı görselin farklı boyutları hazırlanır, tarayıcı uygun olanı seçer.
Viewport ayarı
Sayfanın cihaz genişliğine göre ölçeklenmesini sağlayan meta etiketidir. Eksikse site telefonda küçültülmüş bir masaüstü sayfası gibi görünür.
Mobil uyumlu bir sitede neler olmalı?
- Okunabilir yazı: gövde metni yakınlaştırma gerektirmeyecek boyutta
- Yeterli dokunma alanı: buton ve linkler parmakla rahat seçilebilmeli
- Yatay kaydırma olmaması
- Tek elle ulaşılabilir, sade bir menü
- Tıklanınca arama başlatan telefon numarası
- Kısa ve doğru klavye tipini açan form alanları
- İçeriğin üzerini kapatmayan açılır pencereler
- Hızlı açılan, sıkıştırılmış görseller
Mobil öncelikli (mobile-first) tasarım ne demek?
Tasarıma en dar ekrandan başlanması ve ekran genişledikçe yerleşimin zenginleştirilmesidir. Bu yaklaşım, neyin gerçekten gerekli olduğuna erken karar vermeyi zorunlu kılar.
| Kriter | Masaüstünden başlamak | Mobilden başlamak |
|---|---|---|
| İçerik | Geniş ekrana göre yazılır, mobilde sıkıştırılır | Öncelik sırası baştan netleşir |
| Performans | Ağır öğeler sonradan ayıklanır | Hafif yapı varsayılan olur |
| Risk | Mobilde taşan, gizlenen bölümler | Masaüstünde boş görünen alanlar |
Özetle
Hangi yönden başlanırsa başlansın, sonuç her iki ekranda da ayrı ayrı test edilmelidir.
Mobilde hız neden ayrı bir konudur?
Telefonlar masaüstüne göre daha zayıf işlemciye ve daha değişken bağlantıya sahiptir. Masaüstünde hızlı görünen bir sayfa mobilde belirgin biçimde yavaş kalabilir.
- Görselleri modern formatlarda ve doğru boyutta sunun.
- İlk ekranda görünmeyen görselleri gecikmeli yükleyin.
- Gereksiz eklenti ve üçüncü taraf kodları azaltın.
- Yazı tiplerinin yüklenirken metni gizlemesine izin vermeyin.
Sitenizin mobil uyumluluğunu nasıl test edersiniz?
- Siteyi kendi telefonunuzda açın ve bir ziyaretçi gibi iletişim formuna kadar ilerleyin.
- Tarayıcının geliştirici araçlarındaki cihaz modunda farklı genişlikleri deneyin.
- PageSpeed Insights ile mobil sonuçları inceleyin.
- Search Console’da Core Web Vitals raporunun mobil sekmesine bakın.
- Farklı bir işletim sistemi ve tarayıcıda tekrar kontrol edin.
Özetle
Yalnızca ana sayfayı test etmek yeterli değildir. Hizmet sayfaları, blog yazıları ve formlar ayrı ayrı denenmelidir.
Sık yapılan mobil tasarım hataları
- Masaüstü tasarımı küçültüp mobil sürüm saymak
- Mobilde önemli içeriği veya menü öğelerini gizlemek
- Birbirine çok yakın, küçük linkler kullanmak
- Tablo ve geniş görsellerin sayfayı yana taşırması
- Ekranın tamamını kaplayan açılır pencereler
- Yalnızca fareyle üzerine gelince çalışan menüler
- Sabit üst ve alt çubukların ekranın büyük kısmını kaplaması
Mobil uyumluluk kontrol listesi
- Viewport etiketi tanımlı
- Yatay kaydırma yok
- Metin yakınlaştırmadan okunuyor
- Butonlar parmakla rahat seçiliyor
- Menü tek elle kullanılabiliyor
- Telefon numarası tıklanabilir
- Formlar mobilde kolay doluyor
- Görseller ekrana göre boyutlanıyor
- Mobil ve masaüstü içerik aynı
- Mobil hız sonuçları kabul edilebilir
Özetle
Mobil uyumluluk sonradan eklenen bir özellik değil, tasarımın başlangıç koşuludur.
İçindekiler
İçindekiler
Sık Sorulan Sorular
Eski sitem mobil uyumlu hale getirilebilir mi?
Çoğu zaman mümkündür, ama yapı çok eskiyse yama yapmak yerine yeniden tasarlamak daha sağlıklı ve daha az maliyetli olabilir. Karar için mevcut altyapının incelenmesi gerekir.
Mobil uyumluluk SEO’yu etkiler mi?
Evet. Google sayfaları mobil sürümleri üzerinden değerlendirir. Mobilde eksik içerik, yavaşlık veya kullanım sorunları görünürlüğü olumsuz etkileyebilir.
Mobil uygulama mı, mobil uyumlu site mi?
Çoğu işletme için öncelik mobil uyumlu sitedir; arama sonuçlarından gelen ziyaretçi siteye ulaşır. Uygulama, sık ve tekrarlı kullanım gerektiren işler için ayrıca değerlendirilir.
Hazır temalar mobil uyumlu mu?
Güncel temaların çoğu responsive gelir. Ancak eklenen içerik, eklentiler ve özelleştirmeler uyumu bozabilir; yayına almadan önce gerçek cihazda test edilmelidir.
Fentra
Sitenizin mobil deneyimini birlikte inceleyelim.
Mevcut sitenizin telefonda nasıl çalıştığını ve nerede ziyaretçi kaybettiğini birlikte değerlendirebiliriz.
İlgili rehberler
Web Tasarım
UX ve UI Tasarım Nedir?
Kullanıcı deneyimi ile arayüz tasarımının farkı, süreç adımları ve iyi bir arayüzün ölçütleri.
Teknik SEO
Web Sitesi Hızlandırma
LCP, INP ve CLS üzerinden ölçüp görsel, JavaScript, font ve cache optimizasyonlarını uygulama rehberi.
Web Tasarım
Web Tasarım Örnekleri
İyi bir web sitesini estetik değil; UX, hız, mobil deneyim ve dönüşüm açısından değerlendirme rehberi.