Hızlı Özet (TL;DR)
Günümüzde B2B ve kurumsal web sitelerinin dahi toplam ziyaretçi trafiğinin %65’inden fazlası akıllı telefonlar ve tabletler üzerinden gerçekleşmektedir. Google, 2019 yılından bu yana tüm web sitelerini Mobil Öncelikli İndeksleme (Mobile-First Indexing) algoritmasıyla dizine eklemektedir. Bir web sitesini masaüstü ekranda tasarlayıp sonra mobilde “uydurmaya çalışmak” yerine; doğrudan mobil ekranın kısıtları, dokunmatik ergonomisi ve dikey gezinme mantığıyla tasarlamak (Mobile-First) hem SEO hem de dönüşüm için zorunluluktur.
Mobil Öncelikli Tasarımın 5 Altın Kuralı
| Kural | Teknik Standart | Neden Önemli? |
|---|---|---|
| Dokunmatik Hedef Alanı | Minimum 44x44 piksel buton boyutu | Kullanıcının parmağıyla yanlış linke tıklamasını önler |
| Yazı Tipi Okunabilirliği | Gövde metinlerinde minimum 16px font | Ziyaretçinin sayfayı yakınlaştırmak zorunda kalmaması |
| Yatay Kaydırmanın Sıfırlanması | overflow-x gizleme ve esnek genişlik | Sayfanın sağa-sola taşarak kullanıcı deneyimini bozmasını engeller |
| Hızlı Eylem Çubukları | Ekranın altında sabitlenen Ara/WhatsApp barı | Kullanıcının başparmağıyla tek tıkla firmaya ulaşabilmesi |
| Responsive Görseller | picture ve srcset ile mobil boyutlu görsel | Mobilde 4K masaüstü görseli indirip hücresel veriyi harcamamak |
CSS Grid ve Modern Flexbox ile Esnek Düzenler
Geleneksel medya sorgusu karmaşası yerine modern CSS fonksiyonları sayfa düzeninin ekrana göre kendiliğinden akmasını sağlar:
/* Cihaz genişliğine göre otomatik 1, 2 veya 3 kolonlu olan modern ızgara */
.kart-izgarasi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
Mobil Form Tasarımında Ergonomi
Teklif ve iletişim formları mobilde en çok terkedilen alanlardır:
- Sayısal alanlarda (telefon, vergi no) type=tel veya inputmode=numeric kullanarak doğru klavyeyi açın.
- Otomatik tamamlama için autocomplete özniteliklerini ekleyin.
- Açılır menü (select) yerine büyük dokunmatik seçim butonları (radio chips) tercih edin.
Mobilde ve masaüstünde kusursuz çalışan kurumsal web projeleriniz için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızla iletişime geçin.