Mobil Öncelikli Web Tasarımı: Ne Demek ve Nasıl Yapılır
Mobil öncelikli web tasarımı, önce telefon ekranı için tasarlamak ve daha büyük ekranlar için düzeni sonra eklemek demektir. Neyi değiştirdiği, küçük işletme için ödünleşimler, doldurulmuş çalışılmış örnek ve kopyalayabileceğiniz bir kontrol listesi.
Mobil öncelikli web tasarımı, her sayfayı önce küçük bir telefon ekranı için planlayıp kurmanız, ekran genişledikçe sütunlar ve ek düzen eklemeniz demektir. Neyin en önemli olduğuna karar vermenizi zorlar, çünkü telefon aynı anda yalnızca tek şey gösterir. Ayrıca Google'ın siteleri değerlendirme biçimiyle de örtüşür: Google dizinleme ve sıralama için ağırlıklı olarak bir sayfanın mobil sürümünü kullanır.
Mobil öncelikli ile "duyarlı" karşılaştırması
Duyarlı tasarım tekniktir: bir viewport etiketi ve medya sorguları kullanarak düzeni ekrana uyum sağlayan tek bir sayfa. Mobil öncelikli, tasarım yaptığınız sıradır. Masaüstü öncelikli duyarlı bir site geniş düzeni sıkıştırır; mobil öncelikli olan dar başlar ve üzerine kurar. İkisi de duyarlı olabilir; mobil öncelikli olan genellikle telefonlarda daha az dağınıklıkla sonuçlanır.
Küçük bir işletme için karar ölçütleri
| Soru | Mobil öncelikli seçim | Ödünleşim |
|---|---|---|
| İlk ekran ne için? | Ad, ne yaptığınız, nerede ve tek bir düğme | Sloganlara ve büyük görsellere daha az yer |
| Ana eylem | Dokunarak arama veya başparmakla ulaşılabilen kısa bir form | Uzun formlar telefonlarda terk edilir; daha azını isteyin |
| Gezinme | Az sayıda üst düzey bağlantı; küçük ekranlarda bir menü düğmesi | Gizli menüler kolay gözden kaçar, bu yüzden temel bağlantıları sayfada tekrarlayın |
| Görseller | Sıkıştırılmış, ekrana göre boyutlandırılmış | Çok büyük fotoğraflar mobil veride telefonları yavaşlatır |
| Tablolar ve geniş içerik | Kartlar hâlinde istiflenir veya kendi kutusunun içinde kayar | Masaüstü tablosundan daha fazla tasarım işi gerektirir |
Dokunma hedefleri ve metin boyutu aynı zamanda erişilebilirlik konularıdır; WCAG 2.2 hedef boyutu asgari 24'e 24 CSS pikseli belirler.
Çalışılmış örnek (etiketli bir gösterim)
Ana sayfasını önce telefon için planlayan kurgusal bir fırın, "Flour Lane Bakery". Gerçek bir işletme değildir; hiçbir sonuç iddia edilmemektedir.
Telefon ekranı 1: "Flour Lane Bakery - ekşi maya ve pastalar, Leith"
düğme: "Pasta sipariş et" | bağlantı: "Bugünün saatleri"
Telefon ekranı 2: üç kart: Ekmek / Kutlama pastaları / Toptan
Telefon ekranı 3: sipariş adımları (seç, bir tarih seç, teslimatta kapora öde)
Telefon ekranı 4: adres, harita bağlantısı, saatler, telefon (dokunarak ara)
Tablet+: kartlar 3 sütun olur; saatler haritanın yanında durur
Masaüstü+: üstbilgi tüm bağlantıları gösterir; ana görsel ikinci bir fotoğraf ekler
Telefondan çıkarılan: Instagram ızgarası (bunun yerine bağlantı), uzun tarihçe (Hakkında sayfası)
Kopyalanacak mobil öncelikli kontrol listesi
[ ] İlk telefon ekranında görünen tek ana eylem
[ ] İşletme adı, ne yaptığınız ve nerede, ilk ekranda
[ ] Telefon numarasında dokunarak arama bağlantısı
[ ] Metin en az 16px; okumak için çimdikle yakınlaştırma gerekmez
[ ] Düğmelere ve bağlantılara dokunması kolay, aralarında boşluk var
[ ] Formlar: yalnızca ihtiyaç duyduğunuz alanlar; doğru klavye (tel, e-posta)
[ ] Görseller sıkıştırılmış ve boyutlandırılmış; ekrandan geniş hiçbir şey yok
[ ] 360px genişlikte yatay kaydırma yok
[ ] Menü tek başparmakla çalışıyor; temel bağlantılar sayfada tekrarlanıyor
[ ] Yalnızca masaüstü penceresinde değil, gerçek bir telefonda mobil veriyle test edildiBilinen sınırlamalar
- Bazı kitleler çoğunlukla masaüstündedir (örneğin B2B hizmetlerinin ofis alıcıları). Varsaymadan önce kendi analitiğinizi kontrol edin.
- Mobil öncelikli bir tasarım sırasıdır, hız veya sıralama garantisi değildir. Hızı ayrıca test edin; bkz. web sitesi hızı nasıl optimize edilir.
Sonraki adım
We.Inc web sitesi oluşturucusunda bir iş şablonundan başlayın; şablonlar duyarlıdır ve telefon, tablet ve masaüstünü önizleyebilirsiniz. Ardından web sitesi notlandırıcısını çalıştırın. Ücretsiz plan bir we.inc adresinde 3 şablon siteye kadar verir (yapay zeka kredisi yok, özel alan adı yok); Starter ayda $20'dan yapay zeka ile kurulum ve özel alan adları ekler (fiyatlandırma). Bir yapım için bütçe mi yapıyorsunuz? Web sitesi maliyet hesaplayıcısını kullanın.
İş web sitenizi kurmaya başlayın
Sıkça sorulan sorular
Mobil öncelikli web tasarımı nedir?
Her sayfayı önce telefon ekranı için tasarlamak, sonra daha büyük ekranlar için düzen eklemek. Telefonlarda en önemli içeriği ve eylemi üstte tutar.
Mobil öncelikli, duyarlı tasarımla aynı şey mi?
Hayır. Duyarlı tasarım, tek bir sayfanın herhangi bir ekrana uyum sağlamasını sağlayan tekniktir. Mobil öncelikli, tasarım yaptığınız sıradır: önce en küçük ekran.
Google sitemin mobil sürümünü kullanıyor mu?
Evet. Google, dizinleme ve sıralama için bir sitenin içeriğinin ağırlıklı olarak mobil sürümünü kullandığını söylüyor.
Ücretsiz başlayın · Kredi kartı gerekmez
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App