Responsive design v roce 2024: Co musí zvládnout váš web

V roce 2024 je responsive design již naprostým standardem. Přesto vidíme desítky webů, které na mobilech skřípou. Pojďme si říct, co by měl moderní web v roce 2024 zvládnout.

1. Mobile-first přístup Návrhujte od nejmenší obrazovky. Proč? Protože přidat funkce na desktop je snazší než je ubírat na mobile.

2. Touch-friendly prvky Minimální velikost tlačítek a odkazů: 44x44 pixelů. Proč? Velikost průměrného prstu je cca 40-45 pixelů. Menší prvky jsou špatně klikatelné.

3. Rychlost načítání

• Optimalizujte obrázky (WebP formát)
• Lazy loading pro obrázky pod fold
• Minimalizujte JavaScript
• Používejte CDN

Cílová rychlost: < 3 sekundy na 3G síti.

4. Responzivní obrázky Používejte srcset a sizes atributy:

<img
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="medium.jpg"
  alt="Popis"
>

5. Responzivní typografie Používejte fluid typography:

font-size: clamp(1rem, 2vw + 0.5rem, 2rem);

Text se přizpůsobí velikosti obrazovky plynule.

6. Hamburger menu? Ano, ale... Hamburger menu je OK, ale:

• Hlavní CTA musí být viditelné vždy
• Max 5-7 položek v menu
• Rychlé otevření (< 300ms)

7. Formuláře na mobilech

• Správné type atributy (email, tel, number)
• autocomplete pro autofill
• Velká input pole (minimálně 16px font)
• Viditelné labely (ne jen placeholdery)

8. Testování na reálných zařízeních Emulátory nestačí. Testujte na:

• iOS Safari (iPhone)
• Android Chrome
• Tablety

9. Breakpointy v roce 2024:

• Mobile: 320px - 480px
• Phablet: 481px - 768px
• Tablet: 769px - 1024px
• Desktop: 1025px+

10. Dark mode support Respektujte prefers-color-scheme, ale nechte uživatele přepnout manuálně.

Náš tip: Používejte nástroje jako Google PageSpeed Insights, Lighthouse a WebPageTest pro pravidelné kontroly výkonu.

Závěr: Responsive design není jen o CSS media queries. Je to komplexní přístup k UX, výkonu a přístupnosti. V roce 2024 již není výhodou - je nutností.