1. Mobil Trafik Hakimiyeti ve Google Mobile-First İndeksleme
Günümüzde internet trafiğinin büyük bölümü akıllı telefonlar üzerinden akmaktadır. B2B ve kurumsal sektörlerde dahi satın alma kararı veren yöneticilerin, mühendislerin ve şirket sahiplerinin önemli bir kısmı ilk araştırmalarını mobil cihazlarından gerçekleştirmektedir. Bu radikal dönüşüm karşısında Google, dizine ekleme yaklaşımını değiştirmiş ve Mobile-First Indexing (Mobil Öncelikli İndeksleme) yöntemini tüm siteler için varsayılan hale getirmiştir. Artık masaüstü siteniz ne kadar ihtişamlı olursa olsun, Google web sitenizi bir akıllı telefon gözüyle test etmekte ve sıralamasını buna göre vermektedir.
Bu nedenle işletmeler için web tasarımı artık masaüstünde tasarlanıp sonradan cep telefonuna sıkıştırılan bir işlem olmaktan çıkmıştır. Başarılı bir dijital varlık oluşturmanın yolu, doğrudan küçük ekranlardan başlayıp yukarı doğru genişleyen modern web tasarım standartları ve akışkan layout disiplinini benimsemekten geçer.
Mobile-First İndekslemede Dikkat: Google dizine ekleme için sitenizin mobil sürümünün HTML'ini esas alır. Mobil HTML'de hiç yer almayan metinler, başlıklar veya yapılandırılmış veri (Schema) etiketleri masaüstünde var olsa dahi dizine eklenmez ve sıralamada kullanılmaz. Mobilde CSS ile gizlenen (örneğin akordeon içindeki) içerik ise mobil HTML'de bulunduğu sürece dizine eklenir.
2. Responsive Tasarımın 4 Temel Teknik Standardı
Bir web sitesinin sadece ekrana sığması onun gerçek anlamda "mobil uyumlu" olduğu anlamına gelmez. Profesyonel bir responsive mimari aşağıdaki 4 temel mühendislik kuralı üzerine inşa edilir:
Akışkan Izgara Sistemleri
Sabit pikseller yerine modern CSS Grid, Flexbox, clamp() ve minmax() kullanılır. Konteyner ekran değiştikçe matematiksel olarak pürüzsüzce akar.
Cihaza Özel Görseller (srcset)
HTML5 <picture> etiketi ve srcset özniteliğiyle dar ekranlı telefonlara optimize hafif WebP, retina ekranlara yüksek yoğunluklu görsel aktarılır.
Dokunmatik Hedef Ergonomisi
Butonlar ve form alanları WCAG 2.2'nin en az 24×24 piksel (AA) hedef boyutu kuralını karşılar; mümkün olduğunda 44×44 piksel (AAA) ve Material Design'ın önerdiği 48×48 piksellik dokunma alanı ile yeterli boşluk hedeflenir.
Sayfada Yatay Taşma Yok
Sayfanın bütününde sağa-sola kaydırma oluşması engellenir. Geniş tablolar yalnızca kendi içinde yatay kaydırılabilen kapsayıcılara alınır, tüm taşmalar CSS ile denetlenir.
3. Ekran Çözünürlükleri ve Örnek Breakpoint Tablosu
Piyasada binlerce farklı ekran boyutu ve en-boy oranı bulunmaktadır. Alaska Medya projelerinde cihaz odaklı değil, içerik odaklı modern CSS Breakpoint stratejisi uygulanır; aşağıdaki cihaz örnekleri yalnızca yol göstericidir, kırılma noktaları içeriğin gerektirdiği genişliklere göre ayarlanır:
| Cihaz & Ekran Türü | CSS Breakpoint | Mizanpaj & Izgara | Kritik UX / UI Kuralları |
|---|---|---|---|
| Kompakt Mobil iPhone SE, Galaxy S, birçok Android |
< 380px | Tek Kolon (100% Genişlik) | Font boyutu minimum 16px (iOS otomatik zoom engelleme), tam ekran açılır çekmece menü. |
| Standart / Pro Mobil iPhone 15/16, Pixel |
380px - 576px | Tek Kolon + 2'li Rakam Grid | Ekranın alt kısmında tek dokunuşla arama/WhatsApp yapışkan (sticky) eylem butonu. |
| Tablet & Dikey iPad iPad Mini/Air, Katlanabilir |
577px - 991px | 2 Kolonlu Hibrit Grid | Dokunmatik dostu genişletilmiş kartlar, esnek yan sütun (sidebar) alt bölüme aktarılır. |
| Dizüstü & Desktop MacBook, Dizüstü Ekranlar |
992px - 1440px | Çok Kolonlu (3-4 Kolon) + Sidebar | Geniş açılır mega menü, zengin veri tabloları, fare hover mikro etkileşimleri. |
| Ultra Geniş Ekran 1080p, 2K, 4K & Kavisli Monitör |
> 1440px | Maksimum 1200-1320px Sınır | Metin satırlarının aşırı uzamasını önleyen ortalanmış kabuk (margin: 0 auto; max-width). |
4. Mobil Uyumsuzluğun Kurumsal Firmalara Doğrudan Maliyeti
Birçok B2B üreticisi ve sanayi kuruluşu "Biz kurumsal firmalara iş yapıyoruz, müşterilerimiz bizi bilgisayardan inceler" yanılgısıyla hareket etmektedir. Oysa fuarda tanıştığınız bir satın alma müdürü, fabrikanızdan teklif bekleyen bir bayi veya akşam saatinde firmanızı inceleyen bir yatırımcı web sitenize akıllı telefonundan giriş yapar.
Telefonda yazıları okunmayan, butonlarına basılamayan veya formları çalışmayan bir site; firmanızın ne kadar köklü olduğu fark etmeksizin "çağın gerisinde kalmış bir şirket" algısı yaratır. Bu sebeple günümüzde kurumsal prestiji korumanın ilk adımı, her detayı titizlikle planlanmış bir mobil uyumlu kurumsal web sitesi altyapısına sahip olmaktır.
B2B Gerçeği: B2B alıcılarının büyük bölümü satın alma araştırmasında mobil cihazlarını aktif olarak kullanmakta; mobil deneyimi olumsuz olan bir firma, teklif aşamasına gelmeden elenebilmektedir.
5. Mobil Performans: Core Web Vitals ve Dokunmatik UX Optimizasyonu
Mobil tasarım yalnızca ekran ölçülerinin daralmasından ibaret değildir; cihazın işlemci gücünü, pil tüketimini ve hücresel ağ gecikmelerini de gözetmek zorundadır. Kullanıcı sayfadaki bir menüye veya filtreye dokunduğunda anında tepki alamazsa sayfayı terk edebilir. Google bu süreci ölçmek için sayfa ömrü boyunca dokunmatik gecikmeleri denetleyen INP metriğini kullanır.
Sitenizin mobil arayüzünde kullanılan ağır JavaScript kodları ana işlemciyi kilitlerse, ziyaretçinin parmak hareketleri havada kalır ve sayfa donar. Kusursuz bir mobil kullanıcı deneyimi elde etmek ve arama sıralamalarını korumak için Google Core Web Vitals metrikleri (özellikle mobil LCP ve INP) tasarımın ilk aşamasından itibaren hedeflenmeli, ölçülmeli ve sürekli denetlenmelidir.