Responsives Layout

Flexible Anzeige von Inhalten auf mobilen Endgeräten

Das responsive (Web)Design ist ein auf HTML Format basierendes Gestaltungsprinzip, um Webseiten oder Dokumente übersichtlich und benutzerfreundlich auf den jeweils benutzten Endgeräten anzuzeigen. Die Anzeige reagiert oder „antwortet“ auf die jeweils vorgefundenen Eigenschaften des Smartphones oder Tablets und passt sich in Layout, Formatierung und Positionierung flexibel an. Die Vielzahl und Vielfalt mobiler Endgeräte steht dabei im Fokus und so spricht man auch von „mobiler Optimierung“. Unter dem Motto „mobile first“ hat sie die historisch gewachsene Priorisierung der Desktop-Anzeige weitgehend abgelöst. Die charakteristischen Elemente des Responsive Design sind:

Weiterlesen
Mit der 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. 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.

Dynamische Dokumente

Dynamik und Usability von HTML-Dokumenten im responsiven Design lassen sich noch steigern. Mit der Technik der Cascading Style Sheets lassen sich Layout und Positionierung von Inhaltselementen dynamisch und interaktiv verändern. Das folgende Beispiel etwa basiert auf einem mit der Serie M/ erzeugten responsivem HTML-Dokument, das mit vorbereiteten CSS-Stylesheets ergänzt wurde. So können Sie beispielsweise

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

Verwandte Themen

Weitere Output-Formate

Omnichannel Output Management mit M/OMS

Rückrufservice für Ihre Fragen

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.
Tabea Tischler