Responzivní design je způsob tvorby webu, při kterém se stránka sama přizpůsobí velikosti obrazovky, na které ji někdo právě prohlíží. Na širokém monitoru se obsah rozloží do několika sloupců vedle sebe, na mobilu se tytéž prvky poskládají pod sebe, písmo zůstane čitelné a menu se schová pod tlačítko. Je to pořád jedna a ta samá stránka, jen jinak naskládaná.

Přirovnat se to dá k vodě v nádobě. Nalijete ji do sklenice a je vysoká a úzká, nalijete ji do talíře a je nízká a široká – objem je stejný, tvar se přizpůsobí. Opakem je pevné rozvržení navržené na jednu šířku: to se na malé obrazovce buď celé zmenší do nečitelna, nebo z něj kus vyčnívá a návštěvník musí posouvat do stran.

Proč to dnes není volba, ale nutnost:

  • Většina lidí přichází z telefonu. U běžného firemního webu i e-shopu tvoří mobilní návštěvy zpravidla víc než polovinu.
  • Vyhledávače to hodnotí. Použitelnost na mobilu je jedním z kritérií, podle kterých se řadí výsledky vyhledávání – patří tedy k základní hygieně SEO.
  • Nepohodlný web lidé opustí. Kdo musí přibližovat prsty text nebo trefovat drobné odkazy, odejde ke konkurenci dřív, než něco přečte.
  • Obrazovek je nepřeberně. Telefony, tablety, notebooky, velké monitory i televize. Navrhovat pro každou zvlášť nejde.

Technicky za tím stojí kaskádové styly, tedy soubory určující vzhled HTML stránky. Autor v nich zapíše pravidla typu „je-li obrazovka užší než šest set bodů, zobraz obrázky pod sebou". Šířky se zadávají v procentech místo v pevných bodech, obrázky se dodávají ve více velikostech a menu se na úzké obrazovce mění na známé tlačítko se třemi čárkami. Nic z toho nemusíte psát sami – naprostá většina hotových témat pro WordPress je responzivní už z výroby a stačí to při výběru ověřit.

Otestovat si to zvládne každý bez jediného nástroje: zmenšujte na počítači okno prohlížeče do úzkého proužku a sledujte, jestli se obsah přeskládá, nebo jestli se objeví vodorovný posuvník. Potom si web otevřete na vlastním telefonu a zkuste projít objednávku nebo odeslat formulář. Nejčastější prohřešky jsou široké tabulky, natvrdo zadané šířky obrázků a příliš malá tlačítka.

Nezaměňujte to s rychlostí. Responzivní web se hezky poskládá, ale pokud stahuje osmimegabajtové fotky, bude na mobilních datech pomalý dál – přizpůsobení vzhledu a optimalizace načítání jsou dvě oddělené věci. Dělejte obojí; teprve dohromady z toho vyjde web, který se na telefonu dobře vypadá i rychle otevře.