Giriş: Veri Yoğunluğu ve Mobil Ekran Çıkmazı

Geniş veri tabloları dar ekranlara sığmaz. Yanlış tasarım yatay kaydırma çubuklarına, layout bozulmasına ve düşük dönüşüm oranlarına yol açar. Bu rehber, veri yoğun arayüzleri modern web standartlarına uygun şekilde optimize etme adımlarını içerir.

Adım 1: Responsive Tablo Stratejisi Belirleme

Her veri seti aynı yöntemle küçülmez. Tablonun tipine göre yöntem seçin:

Yatay Kaydırma (Scroll-wrapper): Finansal tablolar, çok sütunlu karşılaştırmalar. Veri bütünlüğü bozulmaz.
Karta Dönüştürme (Stacking): Kullanıcı listeleri, e-ticaret sipariş geçmişi. Her satır bağımsız karta döner.
Sütun Gizleme (Priority-based): Analitik paneller. Kritik sütunlar kalır, ikincil veriler modal veya akordeon içine taşınır.

Adım 2: Saf CSS ile Tablodan Kart Görünümüne Geçiş

JavaScript ek yükü olmadan data-* öznitelikleri ve CSS kullanarak mobilde tabloyu karta çevirin.

@media (max-width: 768px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  td { position: relative; padding-left: 50%; }
  td:before {
    position: absolute;
    left: 10px;
    content: attr(data-label);
    font-weight: bold;
  }
}

HTML tarafında her hücreye data-label="Başlık" ekleyin. Ekstra DOM elemanı gerekmez.

Adım 3: SVG ve Canvas Tabanlı Veri Görselleştirme

Grafik ve dashboard tasarımlarında piksel tabanlı raster görseller kullanmayın. Vektörel ve CSS kontrollü çözümlere odaklanın:

ViewBox ile SVG Ölçekleme: svg etiketine sabit genişlik/yükseklik yerine viewBox="0 0 800 400" ve width="100%" verin.
Container Queries: Grafiğin boyutu ekran genişliğine değil, içinde bulunduğu grid sütununa göre tepki versin (@container).
CSS Aspect Ratio: Grafik konteynerine aspect-ratio: 16 / 9; vererek Cumulative Layout Shift (CLS) sorununu önleyin.

Adım 4: Dijital Ajans Trendleri ve UI İncelikleri

Başarılı bir dijital ajans iş akışında uygulanan güncel trendler:

Sticky İlk Sütun: Mobilde yatay kaydırma kullanılırken kimlik/isim sütununu position: sticky; left: 0; ile sabitleyin.
Mikro-Etkileşimler: Kalabalık grafikler yerine dokunulduğunda detay gösteren lazy-tooltip yapıları kurun.
Figma Token Entegrasyonu: Tablo boşluklarını (padding, typography) CSS değişkenleri (Design Tokens) ile tek merkezden yönetin.

İpucu: Performans için ağır grafik kütüphaneleri (D3.js vb.) yerine basit çubuk ve çizgi grafiklerde hafif alternatifleri (uPlot, Chart.js) ya da saf CSS Grid/Flexbox grafiklerini tercih edin.

Adım 5: Erişilebilirlik (A11y) ve Klavye Navigasyonu

Responsive yaparken anlamsal (semantic) yapıyı bozmayın:

Tablo görünümü CSS ile değişse bile <table>, <th>, <td> hiyerarşisini koruyun.
Grafiklerde sadece renge güvenmeyin; desenler ve veri etiketleri (data labels) ekleyin.
Ekran okuyucular için grafik arkasına aria-hidden="true" ekleyip veriyi gizli bir <table class="sr-only"> içinde sunun.