Mobile first web tasarım stratejisi nedir, neden önemlidir? Mobil kullanıcı davranışı, touch arayüz, hız optimizasyonu ve Google mobil indeksleme. Solid Medya'dan mobil öncelikli kurumsal site tasarım rehberi.
Birçok işletmenin sitesi hâlâ önce masaüstü ekranda tasarlanıyor, telefon sürümü ise en sonda ve sıkıştırılarak hazırlanıyor. Oysa ziyaretçilerinizin önemli bir bölümü sizi telefondan buluyor ve Google da sitenize öncelikle telefon gözüyle bakıyor. Mobile first yaklaşımı, bu gerçeği tasarımın başına koyar.
Bu yazıda yaklaşımın ne olduğunu, responsive tasarımdan farkını, Google'ın mobil öncelikli dizinlemesinde nelere dikkat etmeniz gerektiğini, dokunmatik arayüz kurallarını ve mobilde hızın nasıl korunacağını bulacaksınız.
Mobile first web tasarım nedir?
Mobile first web tasarım, tasarım ve geliştirmeye önce en küçük ekrandan başlayıp ancak gerektiğinde daha geniş ekranlara özellik ekleyen yaklaşımdır. Masaüstü tasarımı küçültmenin tam tersidir: küçük ekran kısıtlayıcıdır, çünkü yer azdır, bağlantı yavaş olabilir ve kullanıcının dikkati dağınıktır.
Bu kısıtlar neyin gerçekten önemli olduğuna karar vermeyi zorunlu kılar. Telefon ekranında yer bulamayan bir bölüm çoğu zaman masaüstünde de gereksizdir. Sonuçta sade, hızlı ve odaklı bir sayfa elde edilir; geniş ekranlarda ise bu temel üzerine ek sütunlar, büyük görseller ve yan paneller eklenir.
Bu yaklaşım aşamalı geliştirme (progressive enhancement) ilkesiyle uyumludur: önce her cihazda çalışan sade bir çekirdek kurulur, güçlü cihazlar ve geniş ekranlar için ek özellikler üstüne eklenir. Böylece zayıf bağlantıda ya da eski bir telefonda bile temel işlev, yani okuma, arama ve form gönderme çalışır.
Mobile first ile responsive tasarım arasındaki fark nedir?
Responsive tasarım sayfanın ekrana uyum sağlama tekniğidir, mobile first ise sayfanın hangi sırayla ve neyi öncelikleyerek tasarlandığını belirleyen yaklaşımdır. Bir site responsive olduğu halde mobile first olmayabilir; masaüstü için kurgulanıp sonradan küçük ekrana sıkıştırılmış olabilir ve telefonda kullanım deneyimi bunu hissettirir.
Teknik tarafta fark CSS yazımında da görünür. Mobile first CSS, temel stilleri küçük ekran için yazar ve min-width sorgularıyla genişletir. Masaüstü öncelikli yazımda ise küçük ekranlarda önceki stilleri geri almak gerekir; bu daha fazla kod ve daha ağır sayfa demektir. Kısacası mobile first bir düşünce biçimi, responsive ise onu hayata geçiren tekniktir; ikisi birbirini tamamlar.
Google'ın mobil öncelikli dizinlemesi ne anlama gelir?
Mobil öncelikli dizinleme (mobile-first indexing), Google'ın sitenizi dizine alıp değerlendirirken esas olarak mobil sürümünü kullanması demektir. Başka bir deyişle Google sayfanıza bir telefon kullanıcısı gibi bakar. Mobil sürümde eksik kalan içerik, başlık ya da yapılandırılmış veri, masaüstünde bulunsa bile sıralamaya yansımayabilir. Google'ın açıklamalarına göre bu geçiş uzun süredir tüm siteler için uygulanıyor ve mobilde düzgün çalışmayan siteler dizinde sorun yaşayabiliyor.
Aşağıdaki kontroller bu açıdan en çok işe yarayanlardır:
- Masaüstündeki ana metin mobilde de bulunmalıdır; "devamını oku" ile katlanan içerik genellikle sorun çıkarmaz, ancak mobilde tamamen kaldırılan içerik çıkarır.
- Title, meta description, başlıklar ve yapılandırılmış veri iki sürümde de aynı olmalıdır.
- Görsellerde alt metin bulunmalı, videolar mobilde de erişilebilir ve oynatılabilir olmalıdır.
- robots.txt dosyası CSS, JavaScript ve görsel kaynaklarını mobil tarayıcıya kapatmamalıdır.
- İçeriği kaydırınca ya da tıklayınca yükleyen yapılarda içeriğin Google tarafından da görüldüğünü Search Console'daki URL Denetimi aracıyla doğrulayın.
Mobil kullanıcı davranışı tasarımı nasıl etkiler?
Mobil kullanıcılar çoğunlukla kısa oturumlarda, tek elle ve bölünmüş dikkatle gezindikleri için tasarım tek bir net amaca ve hızlı erişime odaklanmalıdır. Kişi kuyrukta, yolda ya da başka bir işle uğraşırken telefona bakıyor olabilir ve konum, telefon numarası, çalışma saatleri gibi "şimdi lazım" bilgilere hemen ulaşmak ister.
Bu yüzden kritik bilgi ve eylemler ilk ekranda yer almalı, uzun paragraflar kısa bloklara ve ara başlıklara bölünmelidir. Ekranda yazı yazmak zahmetli olduğu için formlar kısa tutulmalı, otomatik doldurma desteklenmelidir. Mobil davranış sektöre göre değişir; Google Analytics'te kendi cihaz kırılımınızı inceleyerek kararlarınızı genel kabullere değil gerçek verinize dayandırın.
Telefon numarasını dokunulabilir bir bağlantı olarak, adresi ise harita uygulamasını açan bir bağlantı olarak ekleyin. Bu küçük ayrıntı, "şimdi ara" ya da "yol tarifi al" niyetiyle gelen ziyaretçi için kopyala-yapıştır zahmetini ortadan kaldırır.
Dokunmatik arayüz nasıl tasarlanmalı?
Dokunmatik arayüz tasarımının temel kuralı, hedefleri büyük, aralıklı ve başparmağın doğal erişim alanında tutmaktır. Birçok kullanıcı telefonu tek elle tutup başparmağıyla kullanır; ekranın alt yarısı rahat erişilen, üst köşeler ise zor ulaşılan bölgedir. Bu nedenle ana eylemleri ve gezinmeyi mümkün olduğunca alt tarafa yakın konumlandırmak kullanım rahatlığı sağlar.
- Dokunma hedeflerini yaklaşık 44 piksel ve üzerinde tutun; WCAG 2.2 en az 24 piksellik bir hedef boyutu ister, ancak daha büyük hedefler yanlış dokunmayı azaltır.
- Bilgi ya da menüyü yalnızca hover (üzerine gelme) durumuna bağlamayın, dokunmatik ekranda hover yoktur.
- Sabit alt çubuk veya buton kullanıyorsanız içerikten fazla yer kaplamasın ve ekran klavyesi açıldığında alanı kapatmasın.
- Telefon alanında sayısal, e-posta alanında e-posta klavyesi çıkacak şekilde doğru girdi türlerini kullanın.
- İlk ekranı kaplayan açılır pencerelerden kaçının; Google müdahaleci tam ekran geçişleri olumsuz değerlendirebilir.
Mobilde hız nasıl sağlanır?
Mobilde hız sağlamanın yolu, baştan bir performans bütçesi koymak ve her öğenin ağırlığını bu bütçeye göre ölçmektir. Telefonlar masaüstü bilgisayarlardan daha zayıf işlemciyle ve çoğu zaman dalgalı bir bağlantıyla çalışır, bu yüzden aynı sayfa telefonda daha geç açılır. Performans bütçesi; toplam sayfa boyutu, görsel ağırlığı ya da JavaScript miktarı için koyduğunuz üst sınırdır.
Önce görsellere bakın: modern biçim, doğru boyut ve ilk ekran dışında gecikmeli yükleme. Sonra JavaScript'i sadeleştirin; kullanılmayan kütüphaneleri çıkarın, ağır slider ve animasyon eklentilerini sorgulayın. Yazı tiplerini en fazla iki ağırlıkla sınırlayın. Core Web Vitals değerlerini mobil için ayrı izleyin: LCP 2,5 saniye, INP 200 milisaniye ve CLS 0,1 sınırlarının içinde kalmak hedeflenmelidir. Chrome geliştirici araçlarında ağ hızını sınırlandırarak sayfayı yavaş 4G koşullarında denemek, hızlı ofis bağlantısında fark edilmeyen sorunları ortaya çıkarır.
Mobile first bir projeye nasıl başlanır?
Önce ziyaretçinin sitede yapmak istediği en önemli üç görevi belirleyin, sonra bu görevleri yaklaşık 360 piksel genişliğindeki bir ekranda çizin. Hangi içeriğin ilk ekranda görüneceğini sıralayın, tek sütunlu temel tasarımı ve CSS'i kurun, ardından geniş ekranlarda eklenecek özellikleri tanımlayın. Her aşamada gerçek bir telefonla deneyin; emülatör tek başına yeterli değildir. Tasarım onayında da ekran görüntülerini telefon boyutunda isteyin; onayı masaüstü görünümle başlatmak, mobil önceliğini en baştan zayıflatır.
Mevcut bir siteyi dönüştürüyorsanız önce Search Console ve analitik verisinden mobil ziyaretçilerin en çok hangi sayfalara girdiğine ve nerede ayrıldığına bakın; dönüşümü bu sayfalardan başlatın. Yayından sonra Search Console'daki dizinleme ve Core Web Vitals raporlarını izleyerek mobilde ortaya çıkabilecek sorunları erken yakalayın. Yeni bir siteyi mobil öncelikli kurdurmak ya da mevcut sitenizin telefon deneyimini gözden geçirtmek isterseniz Solid Medya ekibiyle iletişime geçebilirsiniz.