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/

Dokumente im responsive Design

Die technische Basis für dynamisches, nicht seitenbasiertes HTML ist die Auszeichnung der Dokumente mit Strukturinformationen wie Absatz, Überschrift, Grafik etc. Die Serie M/ stattet die Dokumente automatisch mit diesen Metadaten in Form von <tags>  aus. Dieses „tagging“ ist elementar, um die Grundstruktur des HTML Dokuments beizubehalten – wo beginnt ein neuer Absatz, wo eine weitere Spalte, wo steht eine Überschrift, eine Tabelle etc.? Auch barrierefreie Dokumente im PDF/UA Format basieren auf diesem tagging, das dafür sorgt, dass z.B. Screenreader anhand der Strukturinformationen die richtige Leseabfolge der Spalten/Abschnitte erkennen.

Mit der Serie M/ ist es ganz leicht, nicht-seitengebundene, HTML-Dokumente im responsiven Layout zu erstellen. Die Vorlagendesingerin und der Vorlagendesigner definiert einmalig im grafischen Editor die unterschiedlichen Ansichten für z.B. Hoch- und Querformat und ordnet ihnen die Breakpoints zu, ab welcher Medienbreite der Layoutwechsel stattfinden soll – fertig, den Rest erledigt der HTML-Renderer automatisch für alle Vorlagen.

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

  • Detailangaben ein- und ausblenden,
  • den Fokus auf bestimmte Personen oder Themen legen,
  • oder zwischen unterschiedlichen Darstellungsstilen von Grafiken wählen (Balken- vs. Kuchendiagramm)
HTML-příklad

Související témata

Weitere Output-Formate

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