Mobil Navigasyon Tasarımı: Modern Web İçin Temel Gereksinim

Mobil cihaz trafiği web projelerinin omurgasını oluşturur. Doğru yapılandırılmış mobil navigasyon, kullanıcı deneyimini (UX) ve dönüşüm oranlarını doğrudan artırır. Profesyonel bir dijital ajans yaklaşımıyla, performans ve erişilebilirliği ön planda tutan bir menü mimarisi kuralım.

1. Adım: UX Trendleri ve Ergonomi Kuralları

Tasarım aşamasında başparmak erişim bölgesi (thumb zone) gözetilmelidir. Trendler ekranın alt kısmına konumlandırılan navigasyon öğelerini öne çıkarır.

Dokunma Alanı (Hit Area): Tıklanabilir butonlar en az 48x48 piksel olmalıdır.
Hiyerarşi: Menü katmanları 2 seviyeyi geçmemelidir. Derin katmanlar kullanıcıyı kaybettirir.
Açık Göstergeler: Alt menü içeren öğeler için standart chevron (ok) ikonları kullanılmalıdır.

Başarılı bir modern web arayüzü, kullanıcının nereye tıklayacağını düşünmesini engeller.

2. Adım: Semantik HTML ve Erişilebilirlik (A11y)

Sadece görsel tasarım yeterli değildir. Ekran okuyucular için ARIA nitelikleri zorunludur.

<nav> etiketi ana kapsayıcı olmalıdır.
Tetikleyici butona aria-expanded="false" ve aria-controls="mobile-menu" eklenmelidir.
Menü açıldığında aria-expanded="true" olarak güncellenmelidir.
Klavye odağı (tab focus) menü açıkken içeride tutulmalı (focus trap), Escape tuşu ile menü kapanmalıdır.

3. Adım: CSS ile Donanım Hızlandırmalı Animasyonlar

Menü kayma (drawer) veya açılma animasyonlarında left, top, height yerine transform ve opacity kullanılmalıdır. Bu pratik, Core Web Vitals metriklerinde Layout Shift (CLS) oluşmasını önler.

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  transition: transform 0.3s ease;
  will-change: transform;
}
.mobile-menu.is-active {
  transform: translateX(-100%);
}

4. Adım: Hafif ve Bağımlılıksız JavaScript Mantığı

Ağır kütüphaneler yerine saf JavaScript (Vanilla JS) tercih edilmelidir. Sayfa kaydırmasını kilitlemek ve dış tıklamayı yakalamak temel gereksinimdir.

Body Scroll Lock: Menü açıkken arka plan kaydırılması overflow: hidden ile durdurulmalıdır.
Click Outside: Menü dışına dokunulduğunda menü otomatik kapanmalıdır.
Yeniden Boyutlandırma (Resize Listener): Ekran genişliği masaüstü boyutuna ulaştığında açık mobil durumlar temizlenmelidir.

5. Adım: Test ve Optimizasyon Kontrol Listesi

Bu rehber doğrultusunda canlıya çıkmadan önce tamamlanması gereken testler:

Farklı ekran boyutlarında (320px - 480px arası) yatay taşma (horizontal scroll) kontrolü.
Lighthouse Erişilebilirlik (Accessibility) skorunun 95+ olması.
Düşük donanımlı cihazlarda 60 FPS animasyon akıcılığı.