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:
S pomocí Serie M/
Dokumenty v responzivním rouložení
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ě <tagů>. Toto „tagování“ je elementární pro zachování základní struktury dokumentu HTML – kde začíná nový odstavec, kde je další sloupec, kde je nadpis, tabulka atd.?
Také bezbariérové dokumenty ve formátu PDF/UA jsou založeny na tomto tagování, které zajišťuje, že například čtečky obrazovky rozpoznají správné pořadí sloupců/oddílů na základě strukturálních informací.
Se Serie M/ lze 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ř. pro formát na výšku a na šířku a přiřadí jim breakpointy, od které šířky média se má změnit rozložení – hotovo, zbytek provede 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í Serie M/, do kterého byly přidány připravené styly CSS. Můžete například