Web Tasarımında Yapılan 5 Kritik Hata ve Çözümleri

Son güncelleme: Nisan 2026 · AnomixLabs Teknik Ekibi

Web tasarımında yapılan hatalar kullanıcıyı sayfadan kaçırır, arama motorlarını şaşırtır ve erişilebilirlik standartlarını çiğner. Bu beş hata, projelerin büyük çoğunluğunda tekrar tekrar görülüyor.

Hata 1: Mobil Uyumsuzluk ve Mobile-First İhmalı

Google 2023'ten bu yana mobile-first indexing'i tamamen zorunlu kıldı: arama motoru sitenizi önce mobil versiyonuyla indeksler. Bu, masaüstü öncelikli tasarım yapan sitelerin Google'da görünürlük kaybetmesi anlamına gelir.

Türkiye'de internet kullanımının %75'inden fazlası mobil cihazlardan gerçekleşiyor (We Are Social 2025). Buna rağmen AnomixLabs'ın denetlediği projelerde masaüstü öncelikli tasarım hâlâ yaygın.

Belirtiler: Sayfayı telefonda açınca yatay scroll çıkması, butonların parmakla tıklanamayacak kadar küçük olması (Google minimum 48x48px önerir), metnin okunmayacak kadar küçük görünmesi.

Çözüm: CSS'i mobile-first yaklaşımla yazın — varsayılan stiller mobil için, media query'ler büyük ekranlar için:

/* Yanlış: desktop-first */
.card { width: 300px; }
@media (max-width: 768px) { .card { width: 100%; } }

/* Doğru: mobile-first */
.card { width: 100%; }
@media (min-width: 768px) { .card { width: 300px; } }

Hata 2: Yavaş Sayfa Yükleme ve Core Web Vitals Başarısızlığı

Google'ın Core Web Vitals metrikleri doğrudan sıralama faktörüdür. 2026 hedef değerleri:

• LCP (Largest Contentful Paint): <2.5s — En büyük görünür elementin yüklenmesi
• INP (Interaction to Next Paint): <200ms — Kullanıcı etkileşimine yanıt (Mart 2024'te FID'nin yerini aldı)
• CLS (Cumulative Layout Shift): <0.1 — İçerik kayması skoru

CLS gerçek örnek: Reklam banner'ı sayfa yüklenirken DOM'a ekleniyor ve altındaki içeriği aşağı itiyor. Kullanıcı linke tıklamak üzereyken içerik kayar, yanlış şeye tıklar. Çözüm: reklam konteyneri için boyut rezerve edin:

/* CLS için alan rezervasyonu */
.ad-container {
  min-height: 90px;  /* banner boyutunu önceden rezerve et */
  width: 100%;
}

LCP için sık hatalar: hero image lazy loading (above-the-fold için kullanmayın), büyük, optimize edilmemiş PNG/JPEG'ler, render-blocking CSS/JS, yavaş sunucu yanıtı.

<!-- Yanlış: above-the-fold hero'da lazy loading -->
<img src="hero.jpg" loading="lazy" alt="Hero">

<!-- Doğru: fetchpriority + preload ile LCP optimizasyonu -->
<link rel="preload" as="image" href="hero.webp"
      imagesrcset="hero-800.webp 800w, hero-1200.webp 1200w"
      imagesizes="100vw">
<img src="hero.webp"
     srcset="hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="100vw"
     fetchpriority="high"
     width="1200" height="750"
     alt="Ana görsel">

Hata 3: Zayıf Renk Kontrastı ve Erişilebilirlik İhmalı

WCAG 2.1 (Web Content Accessibility Guidelines) AA standardı, normal metin için 4.5:1 kontrast oranı, büyük metin (18px bold veya 24px) için 3:1 gerektirir. Bu standartları karşılamak yasal zorunluluktur — Avrupa'da EAA (European Accessibility Act) 2025'te yürürlüğe girdi.

Yaygın ihlal: açık gri metin (#aaaaaa) beyaz arka plan üzerinde. Bu 2.32:1 kontrast oranı — hem WCAG AA hem AAA standardını kaçırır.

/* Yanlış: yetersiz kontrast */
.subtitle { color: #aaaaaa; background: white; }  /* 2.32:1 */

/* Doğru: WCAG AA uyumlu */
.subtitle { color: #767676; background: white; }  /* 4.54:1 - tam uyumlu */

Erişilebilirlik araçları: browser DevTools Accessibility paneli, WebAIM Contrast Checker (webaim.org/resources/contrastchecker/), Lighthouse erişilebilirlik auditi, axe DevTools browser extension.

Ek erişilebilirlik sorunları: alt text eksik görseller (ekran okuyucular için kritik), form label eksikliği, klavye navigasyonu kırıklığı, yetersiz focus göstergesi.

Hata 4: Kötü Tipografi ve Okunabilirlik Sorunları

Tipografi, web tasarımının en çok ihmal edilen ancak en etkili unsurlarından biridir. AnomixLabs projelerinde en sık görülen tipografi hataları:

• Çok küçük font boyutu: 12-13px body metin — minimum 16px önerilir (özellikle mobilde)
• Yetersiz satır yüksekliği: line-height: 1.2 — okunabilirlik için 1.5-1.6 önerilir
• Çok geniş satır uzunluğu: 900px genişlikte full-width paragraf — max-width: 65-75 karakter idealdir
• Font yükleme performansı: font-display: block kullanımı FOUT/FOIT sorununa yol açar

/* Tipografi best practices */
body {
  font-size: 16px;       /* minimum */
  line-height: 1.6;      /* okunabilirlik */
}

.content p {
  max-width: 70ch;       /* ~70 karakter genişlik */
}

@font-face {
  font-display: swap;    /* FOUT önlemek için */
}

Hata 5: Anlamsız HTML ve Semantik Eksikliği

Div ve span'larla oluşturulmuş butonlar, başlık hiyerarşisi olmayan sayfalar, listelerin span ile yapılması — semantik HTML hatası hem SEO'yu hem erişilebilirliği hem de performansı etkiler.

<!-- Yanlış: div/span ile tıklanabilir eleman -->
<div onclick="submitForm()" class="btn">Gönder</div>
<span onclick="submitForm()">Gönder</span>

<!-- Doğru: semantik buton -->
<button type="submit">Gönder</button>

<!-- Yanlış: başlık hiyerarşisi yok -->
<div class="page-title">Site Başlığı</div>
<div class="subtitle">Alt bölüm</div>

<!-- Doğru: semantik heading yapısı -->
<h1>Site Başlığı</h1>
<h2>Bölüm</h2>
<h3>Alt Bölüm</h3>

Semantik HTML avantajları: ekran okuyucular sayfayı doğru yorumlar, Google içerik hiyerarşisini anlar, tarayıcı varsayılan stil ve davranışları kullanılabilir.

Lighthouse ile Audit Süreci

Google Lighthouse (Chrome DevTools > Lighthouse sekmesi veya CLI) dört kategoride audit sunar:

• Performance: Core Web Vitals + genel hız puanı
• Accessibility: WCAG ihlalleri, eksik ARIA, label sorunları
• Best Practices: HTTPS, modern API kullanımı, güvenlik
• SEO: meta description, canonical, robots.txt, crawlability

Her kategori için 90+ puan hedefleyin. Mobile audit özellikle önemli — masaüstünden genellikle 15-20 puan düşük çıkar.

Image Optimizasyonu

Optimize edilmemiş görseller LCP'nin en büyük düşmanıdır:

• Format: WebP (PNG'den %30, JPEG'den %25-35 daha küçük); modern tarayıcılar AVIF de destekliyor
• Boyutlandırma: srcset ile ekran boyutuna göre farklı çözünürlük
• Lazy loading: above-the-fold dışındaki görseller için loading='lazy'
• Alt text: Her görsel için açıklayıcı, anahtar kelime içeren alt text

Özet

Bu beş hata ayrı ayrı da ciddi sorun yaratır ama birlikte bulunduklarında web projesi başarısızlığa mahkumdur. Lighthouse audit ile başlayın — ücretsiz, kapsamlı ve öncelik sıralaması sunar. Her büyük özellik geliştirme öncesinde audit çalıştırmayı rutin haline getirin.