Responzivní rozvržení

Responzivní (webový) design je princip designu založený na formátu HTML, který umožňuje zobrazovat webové stránky nebo dokumenty přehledně a uživatelsky přívětivě na příslušných koncových zařízeních. Displej reaguje na příslušné vlastnosti chytrého telefonu nebo tabletu a pružně se přizpůsobuje v rozvržení, formátování a umístění. Důraz je kladen na množství a rozmanitost mobilních zařízení, proto se používá termín „mobilní optimalizace“. Pod heslem „mobile first“ do značné míry nahradil historicky rozšířené upřednostňování zobrazení na stolním počítači. Charakteristickými prvky responzivního designu jsou:

Formátování souvislého textu v rámci zjištěné šířky obrazovky (nebo faktoru zvětšení, orientace obrazovky, rozlišení atd.) tak, aby nebylo nutné horizontální posouvání.

Změna umístění prvků obsahu tak, že se například sloupce uspořádají jeden pod druhým, jakmile není dosaženo požadovaného prostoru pro vícesloupcové uspořádání vedle sebe.

Postupné zmenšování nebo skrývání prvků obrazu, jakmile je překročen nebo nedosažen definovaný požadavek na prostor.

Tyto úpravy responzivního designu se spustí, jakmile je překročena nebo nedosažena definovaná šířka obrazovky, tzv. breakpoint. Naproti tomu fluidní rozvržení nemá pevné breakpointy, ale vyplňuje dostupný prostor „plynule“ v definovaném procentuálním poměru k velikosti obrazovky.

Číst dál
Více k výstupním formátům Serie M/
S pomocí Serie M/

Dokumenty v responzivním designu

Technickým základem dynamického, nestránkového jazyka HTML je označování dokumentů strukturálními informacemi, jako jsou odstavce, nadpisy, grafika atd. Serie M/ automaticky vybavuje dokumenty těmito metadaty ve formě <tags>. Toto „značkování“ je nezbytné pro zachování základní struktury dokumentu HTML – kde začíná nový odstavec, kde je další sloupec, kde je nadpis, tabulka atd. Na tomto tagování jsou založeny i přístupné dokumenty ve formátu PDF/UA, které zajišťují, že například čtečky obrazovky na základě strukturálních informací rozpoznají správné pořadí čtení sloupců/oddílů.

Serie M/ umožňuje velmi snadno vytvářet nestránkové dokumenty HTML v responzivním rozvržení. Návrhář šablony jednou v grafickém editoru definuje různé pohledy například pro formát na výšku a na šířku a přiřadí jim body zlomu, od které šířky média má dojít ke změně rozložení – to je vše, zbytek zařídí vykreslovač HTML automaticky pro všechny šablony.

Dynamické dokumenty

Dynamiku a použitelnost dokumentů HTML v responzivním designu lze ještě zvýšit. Pomocí techniky kaskádových stylů lze dynamicky a interaktivně měnit rozvržení a umístění prvků obsahu. Následující příklad je například založen na responzivním dokumentu HTML vytvořeném pomocí řady M/, do kterého byly přidány připravené styly CSS. Můžete například

  • Zobrazení a skrytí detailů,
  • zaměřit se na konkrétní osoby nebo témata,
  • nebo si vybrat mezi různými styly zobrazení grafiky (sloupcový a koláčový graf).
HTML-příklad

Související témata

Další výstupní formáty

Přečtěte si více

Omnichannel Output Management s pomocí M/OMS

Přečtěte si více

Služba zpětného volání pro vaše dotazy

  • This field is for validation purposes and should be left unchanged.

Christel Heusler