Responsive tasarım, Figma’da desktop frame’i 1440’tan 390’a küçültüp kolonları alt alta dizmek değildir. Gerçek sistem; içerik ne zaman sıkışıyor, hangi component ne zaman kırılıyor, DOM okuma sırası nasıl korunuyor, görsel hangi boyutta indiriliyor ve touch/keyboard interaction nasıl çalışıyor sorularını birlikte çözer. En sık hata, breakpoint’i içeriğin ihtiyacına göre değil cihaz isimlerine göre seçmektir.
Hata 1: Breakpoint’i iPhone/iPad isimlerine göre belirlemek
MDN responsive design rehberi breakpoints’i layout’un değişmesi gereken noktalar olarak tanımlar ve relative unit kullanımını teşvik eder. Pratikte breakpoint’in nedeni “tablet başladı” değil, component artık mevcut alana sığmıyor olmalıdır.
| Yaklaşım | Örnek | Sorun/avantaj |
|---|---|---|
| Cihaz odaklı | 768px = tablet | Yeni cihaz veya içerik uzunluğu geldiğinde kırılgan |
| İçerik odaklı | Kart başlığı üçüncü satıra taşıyor → layout değişsin | Component gerçekten ihtiyaç duyduğu yerde davranır |
Hata 2: Desktop’u orantılı küçültmeye çalışmak
Desktop’ta 3 kolon + büyük media + side rail mantıklı olabilir. Mobilde hepsini daha küçük hale getirmek yerine bilgi akışını yeniden düzenlemek gerekir. Bazı dekoratif media kaybolabilir, iki CTA tek bir primary action’a dönebilir, horizontal tab yapısı farklı interaction’a dönüşebilir.
- Desktop grid’i mobile stack’e bilinçli çevir.
- Display typography’yi yalnız scale-down değil line length ve wrap üzerinden yeniden ayarla.
- Wide data tables için overflow/alternate presentation tasarla.
- Sidebar içeriğinin mobilde nereye taşınacağını belirle.
Hata 3: DOM order ile görsel order’ı birbirinden koparmak
CSS Grid/Flex ile öğeleri görsel olarak farklı sıraya taşımak kolaydır; fakat keyboard ve screen-reader reading order hâlâ DOM yapısına bağlı olabilir. Desktop’ta görsel sağda, metin solda iken mobile’da media önce geliyor diye DOM’u rastgele kurmak accessibility ve içerik akışını bozabilir.
Tasarımdan önce semantic source order seç. CSS’i bu sırayı destekleyen visual layout için kullan; yalnız ekran görüntüsü uğruna anlamlı okuma sırasını tersine çevirme.
Hata 4: Sabit genişlik ve yüksekliği component’e gömmek
Card height, hero height, button width veya text box için sabit değerler gerçek içerik geldiğinde kırılabilir. İngilizce/Türkçe localization, accessibility text scaling ve CMS’den gelen uzun içerik sabit ölçüleri zorlar.
| Kırılgan | Daha esnek |
|---|---|
| height: 420px | min-height + content flow |
| button width: 180px | padding + max constraints |
| card title: 1 line varsayımı | 2–3 line gerçek content testi |
| absolute layout her yerde | normal flow + grid/flex gerektiği yerde |
Hata 5: Tek dev görseli bütün cihazlara göndermek
Bir 2000px image’i CSS ile 320px’e küçültmek responsive görünüm yaratır ama responsive delivery yaratmaz. web.dev ve MDN, `srcset`, `sizes` ve `<picture>` gibi araçlarla browser’a uygun image source seçme imkânı verilmesini önerir.
Ayrıca image’in width/height attributes ile intrinsic ratio’sunu vermek layout shift riskini azaltır. Above-the-fold LCP image’i lazy-load etmek ise sayfanın en önemli görselini gereksiz geciktirebilir.
- Responsive `srcset`/`sizes` kullan.
- Art direction gerekiyorsa `<picture>` düşün.
- Hero/LCP image’i otomatik `loading=lazy` yapma.
- Below-the-fold media için lazy loading kullan.
- width/height ile layout alanını önceden rezerve et.
Hata 6: Hover davranışını tek interaction modeli sanmak
Desktop mouse hover ile çalışan gizli bilgi, touch cihazda doğrudan karşılık bulmayabilir. Card details, tooltip, mega menu veya image overlay yalnız hover olduğunda erişilebiliyorsa mobile ve keyboard interaction ayrıca tasarlanmalıdır.
Hata 7: Yalnız viewport breakpoint düşünmek
Modern responsive design, page-level viewport değişiminden fazlasıdır. Aynı card component’i full-width landing page’de, narrow sidebar’da veya modal içinde kullanılabilir. Component’in kendi available space’ine tepki vermesi gereken durumlarda container-aware düşünmek daha ölçeklenebilir bir design system üretir.
Her component için “mobile/tablet/desktop” varyantı açmak yerine hangi content constraint’in davranışı değiştirdiğini tanımla: min readable width, number of columns, text length, media ratio veya control density.
Hata 8: Overflow’u yalnız son cihaz testinde fark etmek
- Uzun URL veya teknik kelime text container’ı itiyor.
- Data table viewport dışına taşıyor.
- Absolute decorative shape horizontal scroll oluşturuyor.
- 100vw scrollbar genişliğini hesaba katmadığı için taşma yaratıyor.
- SVG veya video intrinsic size nedeniyle container’dan çıkıyor.
- Fixed header küçük ekran yüksekliğinde gereğinden fazla yer kaplıyor.
Responsive QA checklist
- Viewport’u sürekli resize et
Sadece cihaz preset snapshot’larına bakma.
- TR ve EN uzun metinleri karşılaştır
Localization component stress testidir.
- Keyboard ile dolaş
Focus order visual order ile mantıklı mı?
- Touch hedeflerini test et
Hover-only veya aşırı küçük controls var mı?
- Network throttling ile image delivery’ye bak
Mobil kullanıcı gereksiz dev asset indiriyor mu?
- Horizontal scroll ara
Body’de istemsiz overflow varsa kaynağını bul.
- Text zoom/resize dene
Sabit height ve truncate kararları içerik kaybına yol açıyor mu?