Mobile-first, bir web sitesinin önce küçük ekran için tasarlanıp kodlanması, ardından büyük ekranlara doğru genişletilmesi ilkesidir; amaç en kısıtlı cihazda bile temel içeriğin ve işlevin eksiksiz çalışmasıdır.
Mobile-first, tasarım ve geliştirme sürecine küçük ekrandan başlama yaklaşımıdır. Ekip önce telefon ekranına neyin sığacağına karar verir: en önemli mesaj, en önemli buton, en gerekli menü. Sonra tablet ve masaüstü için ek alan açıldıkça yerleşim zenginleştirilir. Teknik tarafta CSS varsayılan olarak mobil kuralları içerir; geniş ekran kuralları medya sorgularıyla üstüne eklenir. Böylece telefon, gereksiz masaüstü kodunu yüklemek zorunda kalmaz.
İşletme sahibi için neden önemli
Masaüstünden başlayan projelerde mobil sürüm çoğu zaman sona kalır ve sıkıştırılmış bir kopyaya dönüşür: küçültülmüş yazılar, üst üste binen kutular, gizlenen içerik. Mobile-first bu sırayı tersine çevirir ve önceliklendirmeyi baştan zorunlu kılar. Sonuç, telefonda daha hızlı açılan ve daha az kafa karıştıran bir sitedir. Google'ın sayfaları öncelikle mobil sürüm üzerinden değerlendirdiği düşünülürse bu yaklaşım arama görünürlüğünü de doğrudan etkiler.
Örnek
Bir diş kliniği web sitesinde ekip önce telefon ekranını tasarlar: üstte klinik adı, hemen altında tek dokunuşla arama butonu, ardından randevu formu. Masaüstü sürümünde aynı öğeler korunur, yanlarına hekim tanıtımı ve harita eklenir. Telefondan giren hasta, ihtiyacı olan tek şeyi kaydırmadan bulur.
Sık yapılan hata
Mobile-first'ü yalnızca görünüm meselesi sanmaktır. Asıl konu içerik önceliğidir: telefonda gizlenen bir bölüm, o bölümün gerçekten gerekli olup olmadığını sorgulatmalıdır. İkinci hata, masaüstünde tasarlanmış büyük görselleri ve betikleri telefona olduğu gibi göndermek, ardından sitenin mobilde neden yavaş olduğunu anlamamaktır.
Teklif alırken sorulacak soru
Tasarım sürecine hangi ekrandan başlanacak ve mobil taslakları onaylamadan masaüstüne geçilecek mi? Telefon için görsel ve kod boyutları ayrıca optimize edilecek mi?
Sık sorulanlar
Mobile-first masaüstü deneyimini zayıflatır mı?
Hayır. Masaüstü sürümü, mobil temelin üzerine ek alan ve zenginlik eklenerek kurulur; kaybedilen bir şey yoktur, öncelik sırası netleşir.
Mobile-first ile responsive tasarım arasındaki fark nedir?
Responsive, sitenin her ekrana uyum sağlamasıdır; mobile-first ise bu uyumu kurarken hangi ekrandan başlanacağına dair bir yöntemdir.
