Mobil Öncelikli Web Sitesi Tasarımı: Pratik Rehber
Mobil öncelikli tasarımın gerçekte ne anlama geldiği, duyarlı tasarımdan nasıl farklılaştığı ve mobil öncelikli bir site nasıl tasarlanıp oluşturulur: içerik sırası, dokunma hedefleri, CSS min-width kesme noktaları, görseller ve test; çok konumlu işletmeler için notlarla.
Sıkça sorulan sorular
Mobil öncelikli ve duyarlı tasarım arasındaki fark nedir?
Duyarlı tasarım, düzenini her ekran boyutuna uyarlayan tek bir site demektir. Mobil öncelikli, tasarladığınız ve kodladığınız sıradır: küçük ekranla başlayın ve daha büyük ekranlar için düzen ekleyin. Mobil öncelikli bir site duyarlıdır, ancak masaüstü öncelikli oluşturulmuş duyarlı bir site çoğu zaman sıkışık, sonradan akla gelmiş bir mobil sürümle biter.
Mobil öncelikli tasarım SEO için neden önemli?
Google mobil öncelikli dizinleme kullanır; yani dizinleme ve sıralama için öncelikle bir sayfanın mobil sürümünü kullanır. İçerik, başlıklar, yapılandırılmış veri veya bağlantılar mobilde eksikse Google onları görmeyebilir.
Mobil öncelikli bir site için hangi kesme noktalarını kullanmalıyım?
Karar içeriğe bırakın: düzen gerilmiş görünene kadar tarayıcıyı genişletin, sonra orada bir kesme noktası ekleyin. Yaygın başlangıç noktaları, birçok CSS çerçevesinin kullandığı, min-width medya sorguları olarak yazılan yaklaşık 640px, 768px, 1024px ve 1280px'tir.
Mobilde düğmeler ne kadar büyük olmalı?
WCAG 2.2 standardı minimum hedef boyutunu 24 x 24 CSS pikseli (AA düzeyi) olarak belirler ve 44 x 44'ü (AAA düzeyi) önerir. Apple'ın yönergeleri 44 nokta, Google'ın Material rehberi 48dp kullanır. Menülerdeki birincil düğmeler ve bağlantılar için yaklaşık 44 ile 48 piksel hedefleyin.
Franchise'lar mobil öncelikli web sitelerini nasıl ele almalı?
Her franchise için bir konum sayfası olan tek bir ortak şablon kullanın; her biri üstte dokunarak arama, dokunarak yol tarifi, saatler ve mağazaya özel bir rezervasyon veya sipariş eylemi içersin. 'Yakınımda' arayan mobil ziyaretçiler hemen harekete geçmek ister, bu yüzden konum bulucu ve birincil eylem tek başparmakla çalışmalıdır.
Kısa cevap: mobil öncelikli web tasarımı, bir sayfanın telefon sürümünü önce tasarlayıp oluşturduğunuz, sonra ekran genişledikçe tabletler ve masaüstleri için düzen eklediğiniz anlamına gelir. Kodda, temel CSS'iniz mobil düzendir ve onu geliştirmek için min-width medya sorguları kullanırsınız. Her sayfada en önemli olanın ne olduğuna karar vermenizi zorlar ve Google'ın bugün siteleri nasıl dizinlediğiyle örtüşür.
Mobil öncelikli ve duyarlı: gerçek fark
İnsanlar bu terimleri birbirinin yerine kullanır ama farklı soruları yanıtlarlar.
Duyarlı tasarım
Mobil öncelikli tasarım
Ne olduğu
Düzeni ekran boyutuna uyum sağlayan tek bir site
Bir süreç: küçük başla, yukarı doğru geliştir
CSS stili
max-width (masaüstünü küçült) veya min-width olabilir
min-width (mobili büyüt)
İçerik önceliği
Çoğu zaman masaüstünde belirlenir, sonra sıkıştırılır
En küçük ekranda belirlenir
Tipik başarısızlık
Gizli içerik, küçük dokunma hedefleri, telefonlarda ağır sayfalar
En iyi uygulama ikisidir: mobil öncelikli oluşturulmuş duyarlı bir site.
Adım 1: Bir telefonda içerik sırasına karar verin
Dar bir ekranda her şey tek sütundur, bu yüzden sıra tüm düzeninizdir. Her sayfa için, telefondaki bir ziyaretçinin ihtiyaç duyduğu sırayla bölümlerin numaralı bir listesini yazın.
Yerel bir hizmet ana sayfası için şöyle olabilir:
Ne yaptığınız ve nerede (tek satır)
Birincil eylem: ara veya rezervasyon yap
Kanıt: puan, yorumlar veya tanınabilir müşteriler
Hizmetler, kısa dokunulabilir kartlar olarak
Hizmet bölgesi veya konumlar
İkincil kanıt: fotoğraflar, öncesi ve sonrası
SSS
Saatler, adres ve iletişim içeren alt bilgi
Bu listede yer hak etmeyen hiçbir şey muhtemelen masaüstünde de yer almamalıdır.
Adım 2: Başparmaklar için tasarlayın
Dokunma hedefleri: düğmeleri ve menü bağlantılarını aralarında boşlukla en az 44 ile 48 piksel yüksekliğinde yapın. WCAG 2.2'nin minimumu 24 x 24 CSS pikselidir; bu bir hedef değil, bir tabandır.
Erişilebilir birincil eylem: "Ara" ve "Rezervasyon yap" içeren yapışkan bir alt çubuk yerel işletmeler için iyi çalışır. İçeriği kapatmaması için kısa tutun.
Gezinme: tam ekran bir liste açan bir menü düğmesi uygundur. Listeyi beş ile yedi öğeyle sınırlayın ve ana eylemi menünün dışına koyun.
Formlar: tek sütun, alanların üstünde etiketler ve telefonların doğru klavyeyi göstermesi için doğru girdi türleri (tel, email, number). Tarayıcıların adları ve adresleri doldurabilmesi için autocomplete özniteliklerini kullanın.
Metin: 16px gövde metni yaygın bir minimumdur ve iOS Safari'nin form alanlarına yakınlaştırmasını durdurur. Satır uzunluğunu rahat ve gövde metni için kontrastı en az 4.5:1 tutun (WCAG AA).
Adım 3: Kodda mobil öncelikli oluşturun
Her sayfanın head bölümünde viewport etiketiyle başlayın:
Akışkan yazı ve boşluk clamp() ile, örneğin bir başlık için font-size: clamp(1.75rem, 5vw, 3rem); böylece daha az kesme noktasına ihtiyacınız olur.
auto-fit ile Flexbox ve Grid: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) yalnızca yer olduğunda sütun oluşturur.
Kapsayıcı sorguları (güncel büyük tarayıcılarda desteklenir), bir kartın düzenini tüm ekranın değil kapsayıcısının genişliğine göre değiştirmesine izin verir; bu, yeniden kullanılabilir bileşenler için yararlıdır.
Tailwind CSS gibi yardımcı çerçeveler varsayılan olarak mobil önceliklidir: önek almayan sınıflar tüm boyutlara uygulanır ve md: gibi önekler o genişlikten yukarı uygulanır.
Kesme noktalarını belirli telefon modelleri için değil, içeriğinizin bozulduğu yerlere seçin.
Adım 4: Gerçek bir telefon bağlantısında hızlı yapın
Telefonlar, tasarım yaptığınız dizüstü bilgisayardan daha yavaş işlemcilere ve daha az güvenilir ağlara sahiptir. Google'ın Core Web Vitals'ı bunu ölçer: Largest Contentful Paint (yükleme), Interaction to Next Paint (yanıt verme) ve Cumulative Layout Shift (görsel kararlılık).
Duyarlı görseller: telefonların daha küçük dosyalar indirmesi için srcset ve sizes ile WebP veya AVIF gibi modern biçimleri kullanın.
Düzen kaymasını önlemek için görsellerde ve gömmelerde her zaman genişlik ve yükseklik (veya aspect-ratio) ayarlayın.
Kıvrımın altındaki görselleri loading="lazy" ile tembel yükleyin, ancak ana hero görselini değil.
Yazı tiplerini bir veya iki aile ve birkaç kalınlıkla sınırlayın.
Üçüncü taraf betikleri azaltın: sohbet widget'ları, izleyiciler ve gömmeler telefonlarda yavaş etkileşimin sık nedenleridir. Onları geç veya yalnızca gereken yerde yükleyin.
Adım 5: Daha büyük ekranlar için geliştirin
Telefon düzeni çalıştığında, tarayıcıyı genişletin ve yalnızca genişlik değil değer ekleyin:
Çok sütunlu hizmet ve ürün ızgaraları
Menü düğmesi yerine tam gezinme çubuğu
Yan yana metin ve görseller
Uzun makaleler veya rezervasyon özetleri için yapışkan bir kenar çubuğu
Üzerine gelme durumları, ancak asla yalnızca üzerine gelmeyle görünen bilgi, çünkü dokunmatik ekranlar üzerine gelemez
Adım 6: Bir ziyaretçi gibi test edin
Tarayıcı geliştirici araçları cihaz modu ile 360px, 390px ve 414px genişliğinde ve tablet boyutlarında hızlı kontroller.
En az bir gerçek Android ve bir gerçek iPhone, çünkü emülatörler kaydırma tuhaflıklarını, alanları kapatan klavyeleri ve yavaş CPU'ları kaçırır.
Chrome DevTools'ta Lighthouse ve bir site yeterli trafiğe sahip olduğunda gerçek Chrome kullanıcılarından saha verisi de gösteren PageSpeed Insights.
Yatay moda çevirin ve yapışkan çubukların ekranın yarısını kapatmadığını kontrol edin.
Ana görevi tamamlayın (rezervasyon, satın alma, arama) mobil veriyle tek başparmakla.
Franchise'lar ve çok konumlu işletmeler için mobil öncelikli
Franchise ve çok konumlu sitelerin belirli bir mobil sorunu vardır: çoğu ziyaretçi bir telefonda "yakınımda" aramasından gelir ve bir konumun ayrıntılarını hemen ister.
Önce konum bulucu: bir posta kodu veya şehir aramasıyla birlikte "Konumumu kullan", sonuçlar dokunulabilir kartlar olarak.
Tek bir ortak şablondan oluşturulmuş konum başına bir sayfa: adres, saatler, telefon, harita bağlantısı, hizmetler ve yerel bir rezervasyon veya sipariş eylemi; arama düğmesi üstte.
Farklılaşan yerel ayrıntılar: her sayfanın, yalnızca değiştirilmiş bir şehir adı değil, mümkünse kendi fotoğrafları, personeli veya yorumları olmalıdır.
Tutarlı marka, yerel kontrol: franchise sahipleri düzene dokunmadan saatleri ve teklifleri güncelleyebilmelidir.
Yapılandırılmış veri: her konum sayfasında doğru ad, adres ve telefonla LocalBusiness şeması.
Mobil öncelikli kontrol listesi
[ ] Her sayfada viewport meta etiketi
[ ] Tek sütun için yazılmış içerik sırası
[ ] Birincil eylem bir telefonda kaydırmadan görünür
[ ] Aralıklı, yaklaşık 44 ile 48px dokunma hedefleri
[ ] 16px+ gövde metni, 4.5:1 kontrast
[ ] Mobil için temel CSS, daha büyük ekranlar için min-width sorguları
[ ] Boyutları ayarlanmış duyarlı görseller
[ ] Mobil ve masaüstünde aynı içerik ve yapılandırılmış veri
[ ] Gerçek iOS ve Android cihazlarda test edildi
Sıfırdan başlamadan bir tane oluşturmak
We.Inc'in oluşturduğu her site baştan duyarlıdır ve telefon düzenini düzenleyicide önizleyebilir, sonra görsel olarak veya kodda ayarlayabilirsiniz. Düzenlerin tek sütuna nasıl çöktüğünü görmek için şablonlara göz atın veya işletmenizi anlatın ve kendi telefonunuzda test edeceğiniz bir ilk taslak alın.