Responzivní web a responzivní design: co to je a jak poznat špatný

Responzivní web je web, který se sám přizpůsobí šířce displeje. Na mobilu se obsah srovná do jednoho sloupce a přečtete ho bez roztahování prsty, na tabletu a počítači využije celou šířku. Responzivní design je způsob návrhu, při kterém se rozvržení stránky mění podle toho, jak široký je displej, na kterém se zobrazí.

Vypadá to jako detail, ale rozhoduje o tom, jestli zákazník, který vás našel v telefonu, zůstane, nebo se vrátí zpátky do výsledků. Níže uvidíte na smyšleném webu pět nejčastějších chyb vedle správného řešení a pak test, který zvládnete na vlastním webu za dvě minuty.

Responzivní web, adaptivní web a mobilní verze

Webu se na různé displeje dá přizpůsobit třemi způsoby:

• Responzivní web má jednu adresu a jeden kód. Rozvržení se plynule mění podle šířky okna, takže funguje i na displeji, který v době tvorby webu neexistoval.
• Adaptivní web má několik pevných rozvržení pro vybrané šířky a mezi nimi se přepíná skokem. Na rozměr mezi nimi už nepamatuje.
• Samostatná mobilní verze (kdysi třeba m.firma.cz) je druhý web s jiným kódem. Znamená dvojí údržbu a dnes se skoro nepoužívá.

Dnes se dělá responzivní web. Google ho sám doporučuje jako nejjednodušší řešení.

Špatně a správně: pět chyb na příkladech

Ukázkový web (Střechy Novák) je smyšlený. Telefony jsou zmenšené, uvnitř jsou ale skutečné rozměry: text 16 px, tlačítko 48 px. Poměry tedy sedí tak, jak je uvidí návštěvník.

01 Web se na mobilu jen zmenší

Bez jedné řádky v hlavičce stránky nechá mobil web vykreslit, jako by měl displej široký asi 980 px, a výsledek zmenší na šířku telefonu. Text pak měří pět šest pixelů a návštěvník ho musí roztahovat prsty. Řešením je nastavení zobrazení (viewport) a rozvržení, které se šířce displeje opravdu přizpůsobí. Samotný řádek s viewportem nestačí:

<meta name="viewport" content="width=device-width, initial-scale=1">

02 Obsah přetéká a stránka se posouvá do strany

Prvek s pevnou šířkou, třeba obrázek nebo tabulka široká 600 px, se na telefonu nevejde. Buď se uřízne, nebo vznikne vodorovný posuvník a návštěvník čte nadpis po kouscích. Pevné šířky se proto v pixelech nepíšou. Obrázky mají max-width: 100% a sloupce se na úzkém displeji skládají pod sebe.

03 Drobné, světlé a nahuštěné písmo

Šedý text #999 na bílé má kontrast necelé 3 : 1, doporučený je aspoň 4,5 : 1. Na slunci se takový text nedá přečíst vůbec. Na mobilu platí: odstavce aspoň 16 px, řádkování kolem 1,5, tmavý text a krátké odstavce. Víc o písmu najdete v článku Jak zvolit fonty na web.

04 Malá tlačítka a odkazy těsně u sebe

Prst je větší než kurzor myši. Když jsou tlačítka nízká a odkazy těsně vedle sebe, lidé ťukají vedle nebo na špatný odkaz. Apple doporučuje cíl aspoň 44 × 44 bodů, Google 48 × 48 px. Standard přístupnosti WCAG 2.2 vyžaduje aspoň 24 × 24 px s odstupy. Telefon u firmy má být největší tlačítko na stránce, ne drobný odkaz v patičce.

05 Menu, které se nevejde

Šest odkazů vedle sebe se na úzký displej nevejde. Správné řešení je menu schované za tlačítko a vedle něj největší akce, tedy telefon. Mobilní návštěvník nepotřebuje devět položek, potřebuje vám zavolat.

Další chyby, které poznáte hned

• Text vložený do obrázku. Banner se zmenší i s písmem a na mobilu se nedá přečíst. Vyhledávače ho navíc nepřečtou vůbec. Text patří do stránky jako text, obrázek je jen pozadí.
• Ceník v tabulce s pěti sloupci. Na telefonu se stlačí do nečitelných proužků. Tabulka se má posouvat uvnitř vlastního rámečku, nebo se řádky skládají do karet.
• Úvodní fotka přes celou výšku displeje. Nadpis i tlačítko vyjedou pod okraj a návštěvník vidí jen fotku.
• Menu, které se otevře najetím myši. Na dotykovém displeji žádné najetí neexistuje.
• Lišta s cookies přes půl displeje. Nezbyde místo na obsah, kvůli kterému člověk přišel.
• Formulář bez správné klávesnice. Pole pro telefon s type="tel" otevře číselnou klávesnici, pole pro e-mail s type="email" klávesnici se zavináčem.

Jak otestovat responzivitu vlastního webu

Stačí telefon a dvě minuty:

1. Otevřete web v telefonu. Dá se všechno přečíst bez roztahování prsty?
2. Přejeďte prstem do strany. Pokud se stránka pohne vodorovně, něco přetéká.
3. Otočte telefon na šířku a zase zpět. Rozvržení se má přeskládat, ne rozbít.
4. Klepněte palcem na každé tlačítko a položku menu. Trefíte vždy ten správný odkaz?
5. Na počítači zúžte okno prohlížeče nebo v Chromu stiskněte F12 a pak Ctrl+Shift+M (na Macu Cmd+Shift+M). Zkuste šířku 320 px, tak úzké jsou nejmenší telefony.
6. Změřte rychlost na mobilu na pagespeed.web.dev (otevře se v novém okně), karta Mobil. Pomalé načítání na telefonu je pro návštěvníka stejně velký problém jako špatné rozvržení.

Jak responzivní web funguje

Technika je jednoduchá. Rozvržení se mění podle šířky displeje a hranice se volí podle obsahu, ne podle konkrétních telefonů: web se přeskládá tam, kde se začne kazit.

img { max-width: 100%; height: auto; }

.sluzby { display: grid; gap: 1rem; }

@media (min-width: 768px) {
  .sluzby { grid-template-columns: repeat(3, 1fr); }
}

Karty služeb jsou na telefonu pod sebou, od šířky 768 px vedle sebe a obrázky se nikdy nezvětší přes svůj sloupec. Typické šířky displejů a co se na nich obvykle mění:

Responzivní web a vyhledávání

Google hodnotí web podle jeho mobilní verze (mobile-first indexing). Obsah, který se na telefonu nezobrazí, tak při hodnocení nemusí vidět vůbec. Web, který se na mobilu rozbije, proto ztrácí návštěvníky i pozice. Co dalšího Google u webu hodnotí, najdete na stránce SEO optimalizace.

Jak je to u webů, které dělám

Každý web, který pro vás udělám, je responzivní. Není to příplatek, je to součást ceny od 8 900 Kč. Návrh webu zdarma si můžete otevřít na vlastním telefonu a ověřit si to dřív, než se rozhodnete. Ukázky hotových webů najdete v portfoliu, stačí je otevřít na mobilu. Pokud hledáte web na míru, začněte u tvorby webových stránek pro firmy a živnostníky. Firmám z hlavního města se věnuje stránka o tvorbě webu v Praze.

Nevíte, jak se váš web chová na mobilu? Pošlete mi jeho adresu a v návrhu webu zdarma uvidíte, co se na telefonu dá zlepšit.