Puan
18
Çözümler
0
- Katılım
- 3 Kas 2025
- Mesajlar
- 99
- Tepkime puanı
- 0
Mobil Site Nedir? Responsive Tasarım Nasıl Yapılır?
Bir web sitesini telefonda açtığınızda yazıları okumak için ekranı büyütmeniz, menüye dokunmak için birkaç kez denemeniz veya sayfayı sağa sola kaydırmanız gerekiyorsa mobil deneyimde sorun vardır. Site masaüstünde düzgün görünebilir; ancak küçük ekranda ziyaretçinin işini zorlaştırır.Mobil uyumluluk, sayfayı telefon ekranına sığdırmaktan daha kapsamlıdır. İçeriğin okunması, menünün kullanılması, formun doldurulması ve alışverişin tamamlanması birlikte düşünülmelidir.
Bu yazıda mobil sitenin ne anlama geldiğini, responsive tasarımın nasıl çalıştığını, mevcut bir sitenin nasıl iyileştirilebileceğini ve WordPress tarafında nelere dikkat edilmesi gerektiğini ele alıyoruz.
Mobil Site Nedir?
Mobil site, telefon ve tablet gibi cihazlarda rahatça kullanılabilecek şekilde hazırlanmış web sitesidir. Yazılar, görseller, menüler ve etkileşim alanları ekranın özelliklerine uygun biçimde yerleşir.Örneğin masaüstünde üç sütunda gösterilen ürünler telefonda tek veya iki sütuna geçebilir. Geniş bir gezinme menüsü açılır menüye dönüşebilir. Form alanları, ekran klavyesi açıldığında da kullanılabilir durumda kalır.
Mobil site için ayrı bir alan adı veya ikinci bir web sitesi kurmak şart değildir. Aynı adres üzerinden çalışan site, responsive tasarımla farklı ekran genişliklerine uyum sağlayabilir.
Mobil uyumlu bir sitede ziyaretçi şu işlemleri zorlanmadan yapabilmelidir:
- İçeriği okuyabilmek.
- İstediği sayfaya ulaşabilmek.
- Buton ve bağlantılara doğru şekilde dokunabilmek.
- Formları doldurup gönderebilmek.
- Ürün seçeneklerini inceleyip satın alma işlemini tamamlayabilmek.
Responsive Tasarım Nedir?
Responsive, Türkçede “duyarlı tasarım” olarak kullanılan bir yaklaşımdır. Sayfa düzeni, kullanılabilir ekran alanına göre değişir.Bu yapıda aynı URL ve HTML üzerinden farklı ekranlara uygun görünüm oluşturulur. Google, uygulanması ve bakımının daha kolay olması nedeniyle responsive tasarımı önerir. Aynı adreste cihazlara göre farklı HTML sunmak veya ayrı mobil URL’ler kullanmak da teknik olarak mümkündür.
| Yaklaşım | Çalışma biçimi | Yönetimde dikkat edilmesi gereken |
|---|---|---|
| Responsive tasarım | Aynı sayfanın düzeni ekran genişliğine uyarlanır | Esnek yerleşim ve farklı genişliklerde test |
| Dinamik sunum | Aynı URL’de cihazlara göre farklı HTML sunulur | Cihaz algılama, önbellek ve içerik tutarlılığı |
| Ayrı mobil URL | Mobil sürüm farklı bir adreste yayımlanır | Yönlendirmeler ve iki sürümün eşleştirilmesi |
“Adaptive tasarım” ifadesi ise genellikle belirli genişliklere hazırlanmış farklı düzenleri anlatır. Ekran düzenini tanımlayan bu kavramı, sunucunun farklı HTML göndermesiyle birebir aynı kabul etmemek gerekir.
Yeni bir proje için responsive yaklaşım çoğu zaman yönetimi kolay bir başlangıçtır. Mevcut ayrı mobil siteyi dönüştürmek ise içerik ve URL yapısı incelenerek planlanmalıdır.
Responsive Tasarımın Temel Bileşenleri
Duyarlı tasarımda üç unsur birlikte kullanılır:- Esnek yerleşim: İçerik alanları kullanılabilir genişliğe uyum sağlar.
- Esnek görseller: Görseller kapsayıcılarının dışına taşmaz.
- Media query: Belirli koşullarda farklı CSS kuralları uygulanır.
Viewport etiketi
HTML belgesinin<head> bölümündeki temel tanımlardan biri şudur:<meta name="viewport" content="width=device-width, initial-scale=1">Bu etiket, mobil tarayıcının sayfa genişliğini cihazın görünüm alanına göre değerlendirmesini sağlar. Eksik olduğunda tarayıcı geniş bir masaüstü sayfasını küçülterek gösterebilir.
Etiketi eklemek tek başına yeterli değildir. Sayfadaki sabit genişlikler ve diğer yerleşim kuralları da düzenlenmelidir. Kullanıcının yakınlaştırmasını kapatmak ise okunabilirlik sorununa çözüm olarak kullanılmamalıdır.
Basit bir responsive CSS örneği
Aşağıdaki örnek,.kartlar alanını küçük ekranda tek, daha geniş ekranda üç sütuna geçirir:
Kod:
*,
*::before,
*::after {
box-sizing: border-box;
}
.kapsayici {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.kartlar {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.kartlar > * {
min-width: 0;
overflow-wrap: anywhere;
}
img {
max-width: 100%;
height: auto;
}
@media (min-width: 48rem) {
.kartlar {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}48rem, örnek bir kırılım noktasıdır. Kendi tasarımınızda sütunların ve içeriğin rahatça yerleşebildiği genişliği esas alın.Mobil Öncelikli Tasarım Nasıl Planlanır?
Mobil öncelikli tasarımda önce dar ekran için kullanılabilir bir düzen hazırlanır. Daha geniş ekranlarda sütunlar, boşluklar ve ek yerleşim seçenekleri devreye girer.Planlamaya ziyaretçinin yapmak istediği işlemlerle başlayabilirsiniz. Bir hosting sitesinde paket karşılaştırması ve sipariş butonu; bir forumda konu okuma, arama ve cevap yazma; bir mağazada ürün seçimi ve ödeme akışı öne çıkabilir.
Küçük ekranda alan kazanmak için önemli içeriği silmek yerine yerleşimi değiştirin. Ürün özelliklerini açılır bölümlerde sunabilir, uzun menüyü gruplandırabilir veya karşılaştırma alanını yeniden düzenleyebilirsiniz.
Kırılım noktalarını yalnızca telefon modellerine göre belirlemek de gerekli değildir. Tarayıcı genişliğini değiştirerek menünün, başlıkların ve kartların hangi noktada sıkıştığını gözlemleyin. Tasarımın ara genişliklerde de çalışmasını sağlayın.
Ayrıca mobil öncelikli tasarım ile Google’ın mobil öncelikli indekslemesi farklı kavramlardır. İlki tasarım sürecini, ikincisi Google’ın indeksleme için hangi içerik sürümünü esas aldığını anlatır.
Mevcut Siteyi Mobil Uyumlu Hale Getirme
Elinizde çalışan bir site varsa önce sorunların hangi sayfalarda ortaya çıktığını belirleyin. Ana sayfa düzgün görünürken ürün detayları, tablolar veya üyelik ekranları taşabilir.1. Taşan alanları bulun
Sabit genişlikte hazırlanmış kapsayıcılar, reklamlar, videolar, uzun bağlantılar ve tablolar yatay taşmaya yol açabilir.Sayfanın tamamına
overflow-x: hidden eklemek, taşan içeriği görünmez hale getirebilir. Sorunun kaynağını bulup ilgili bileşeni düzeltmek daha sağlıklıdır.Geniş bir veri tablosu için kendi alanı içinde yatay kaydırma kullanılabilir. Böylece bütün sayfanın sağa sola hareket etmesi önlenir.
2. Yazıları gerçek içerikle kontrol edin
Kısa demo başlıkları tasarımdaki sorunları gizleyebilir. Uzun Türkçe başlıklar, fiyatlar, kullanıcı adları ve açıklamalarla test yapın.Gövde metni için
1rem, başlangıç değeri olarak kullanılabilir; fakat okunabilirlik yazı tipine, satır aralığına ve kontrasta da bağlıdır. Kullanıcı metni büyüttüğünde içerik kesilmemelidir.3. Menüyü dokunarak deneyin
Fareyi üzerine getirince açılan bir menü, telefonda aynı biçimde kullanılamayabilir. Alt menülere dokunarak erişilebildiğini ve menünün kolayca kapatıldığını kontrol edin.Menü düğmesinin anlaşılır bir adı olmalı. Açılır menü, klavye ve ekran okuyucu kullanan ziyaretçiler için de erişilebilir şekilde hazırlanmalıdır.
4. Formları uçtan uca test edin
Ad, e-posta ve telefon alanlarına uygun giriş türleri seçin. Etiketleri yalnızca alanın içindeki geçici metne bırakmayın; kullanıcı yazmaya başladıktan sonra da hangi bilgiyi girdiğini anlayabilsin.Ekran klavyesi açıldığında gönderme butonu veya hata mesajı görünmez hale geliyor mu? Doğrulama hatasından sonra doldurulan bilgiler korunuyor mu? Bunları gerçek cihazda deneyin.
Dokunma Alanları ve Erişilebilirlik
Küçük ikonlar, birbirine çok yakın bağlantılar ve dar butonlar yanlış dokunmaları artırabilir. Görünen ikonla tıklanabilir alanın aynı boyutta olması gerekmez; çevresindeki boşlukla dokunma alanı büyütülebilir.WCAG 2.2’nin AA düzeyindeki hedef boyutu ölçütü, belirli istisnalarla en az 24 × 24 CSS piksel veya uygun aralık koşullarını ele alır. Daha yüksek düzeydeki ölçütte 44 × 44 CSS piksel bulunur. Bu nedenle “bütün bağlantılar için zorunlu minimum 44 piksel” ifadesi doğru değildir.
Ana işlemlerde geniş ve rahat dokunulan alanlar tercih edin. Menü açma, sepete ekleme, cevap gönderme ve ödeme gibi düğmeleri özellikle kontrol edin.
Görselleri Mobil Ekrana Uygun Hazırlama
Bir görselin CSS ile küçültülmesi, indirilen dosyanın küçüldüğü anlamına gelmez. Telefonda küçük görünen bir görselin masaüstü için hazırlanmış büyük dosyası yükleniyor olabilir.srcset ve sizes, tarayıcının uygun görsel kaynağını seçmesine yardımcı olur. Gerektiğinde <picture> ile farklı kaynaklar veya farklı kırpılmış görseller sunulabilir.Görsel hazırlarken şunları kontrol edin:
- Kullanılan alana uygun çözünürlük.
- Kabul edilebilir kalite ve dosya boyutu.
- Görsel yüklenmeden önce ayrılmış alan.
- Anlamlı görseller için uygun alternatif metin.
- Ekranın altında kalan görseller için gecikmeli yükleme.
WebP veya AVIF kullanmak faydalı olabilir; yine de format değişikliğinden sonra kaliteyi ve dosya boyutunu karşılaştırın.
WordPress’te Mobil Uyumlu Site Yapımı
WordPress’te başlangıç noktası, temanın gerçek sayfalarda nasıl davrandığını incelemektir. Demo sayfasının düzgün olması, kendi içeriklerinizin de sorunsuz yerleşeceğini garanti etmez.Tema değişikliğinden önce dosya ve veritabanı yedeği alın. Mümkünse değişikliği test ortamında deneyin. Ardından şu sayfaları kontrol edin:
- Ana sayfa ve yazı detayları.
- Kategori ve arama sonuçları.
- İletişim ve üyelik formları.
- Kullanılıyorsa ürün, sepet ve ödeme ekranları.
Sayfa oluşturucu kullanıyorsanız mobil ayarları tek tek inceleyin. Sabit yükseklikler, büyük iç boşluklar ve üst üste yerleştirilmiş bileşenler telefonda sorun çıkarabilir.
Eklentileri de etkilerine göre değerlendirin. Her eklenti ziyaretçi tarafında JavaScript yüklemez; buna karşılık tek bir ağır bileşen belirgin yavaşlama oluşturabilir. Önbellekleme ve kod optimizasyonundan sonra menü, form ve ödeme işlemlerini yeniden test edin.
Mobil Uyumluluk ile Sayfa Hızı Aynı Şey mi?
Bir site ekrana düzgün yerleştiği halde yavaş çalışabilir. Hızlı açılan bir sayfada da okunamayan metin veya kullanılamayan menü bulunabilir.Core Web Vitals, yükleme, etkileşim ve görsel kararlılık alanlarını ölçer:
| Ölçüm | Değerlendirdiği alan | İyi kabul edilen değer |
|---|---|---|
| LCP | Ana içeriğin görünme süresi | 2,5 saniye veya daha az |
| INP | Etkileşimlere yanıt | 200 milisaniye veya daha az |
| CLS | Beklenmedik yerleşim kaymaları | 0,1 veya daha az |
Değerlendirmede mobil ve masaüstü kullanıcıları için 75. yüzdelik değer esas alınır. Bu ölçümler, menünün anlaşılır olduğunu veya formun eksiksiz kullanılabildiğini tek başına kanıtlamaz.
Sunucu yanıtı, görseller, JavaScript, yazı tipleri ve üçüncü taraf hizmetler performansa katkıda bulunur. Sorunu ölçmeden yalnızca hosting değiştirmek beklenen sonucu vermeyebilir.
Mobil Site Nasıl Test Edilir?
Tarayıcı araçları
Chrome’un geliştirici araçlarındaki cihaz görünümüyle farklı genişlikleri ve bağlantı koşullarını deneyebilirsiniz. Ancak bu görünüm gerçek telefonun bütün davranışlarını taklit etmez.PageSpeed Insights
PageSpeed Insights, laboratuvar testi ve yeterli örnek varsa gerçek kullanıcı verileri sunar. Laboratuvar sonuçlarıyla gerçek kullanım sonuçlarının farklı olması mümkündür. Kullanıcı verisinin bulunmaması da otomatik olarak sorun olduğu anlamına gelmez.Search Console
Core Web Vitals raporuyla performans sorunlarını takip edebilirsiniz. Eski rehberlerdeki Mobile-Friendly Test ve Mobil Kullanılabilirlik raporu kullanımdan kaldırılmıştır. Ayrı Sayfa Deneyimi raporu da kaldırılmıştır.Gerçek cihaz kontrolü
| Kontrol | Denenecek işlem |
|---|---|
| Gezinme | Menüyü açma, alt sayfaya geçme ve geri dönme |
| Okuma | Uzun yazı, liste ve tablo görüntüleme |
| Formlar | Bilgi girme, hata alma ve yeniden gönderme |
| E-ticaret | Varyasyon seçme, sepete ekleme ve ödeme |
| Görünüm | Ekranı döndürme ve metni büyütme |
| Sabit öğeler | Çerez bildirimi veya sohbet kutusu açıkken işlem yapma |
Yalnızca ana sayfayı test etmek yerine ziyaretçinin tamamlamasını istediğiniz işlemi baştan sona deneyin.
Mobil Uyumluluk Google Sıralamasını Etkiler mi?
Google, indeksleme ve sıralama için sitenin mobil içerik sürümünü esas alır. Bu nedenle önemli metinlerin, bağlantıların ve diğer bilgilerin mobil görünümde de erişilebilir olması gerekir.Ancak mobil uyumluluk veya yüksek performans puanı, üst sıraya çıkmayı garanti etmez. Google, iyi Core Web Vitals sonuçlarının tek başına yüksek sıralama sağlamadığını açıkça belirtir.
Hedefiniz, ziyaretçinin ihtiyaç duyduğu içeriği rahatça okuyabildiği ve işlemini tamamlayabildiği bir site oluşturmak olmalıdır.
