Responsives Layout mit der Serie M/

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:

Formatierung von Fließtext innerhalb der vorgefundenen Bildschirmbreite (bzw. Zoom-Faktor, Bildschirmausrichtung, Auflösung etc.), so dass horizontales Scrollen nicht erforderlich ist.

Neupositionierung von Content-Elementen, so dass beispielsweise Spalten untereinander angeordnet werden, sobald der benötigte Platz für ein mehrspaltiges Layout nebeneinander unterschritten wird.

Schrittweise Skalierung bzw. Ausblenden von Bildelementen, sobald ein definierter Platzbedarf unter- oder überschritten wird.

Diese Anpassungen des responsive Design werden ausgelöst, sobald eine definierte Bildschirmbreite, ein sogenannter Breakpoint, über- oder unterschritten wird. Im Gegensatz dazu kennt das Fluid Layout keine festen Breakpoints, sondern es füllt den jeweils zur Verfügung stehenden Platz in einem definierten prozentualen Verhältnis zur Bildschirmgröße „fließend“ aus.

Mehr zu den Outputformaten der Serie M/

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. 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.

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)

HTML-Beispiel