Responsive design

Responsive (web) design is a design principle based on HTML format for displaying web pages or documents in a clear and user-friendly manner on the respective end devices used. The display reacts or “responds” to the respective characteristics of the smartphone or tablet and adapts flexibly in layout, formatting, and positioning. The focus is on the multitude and diversity of mobile devices, which is why the term “mobile optimization” is used. Under the motto “mobile first,” it has largely replaced the traditional prioritization of desktop display. The characteristic elements of Responsive Design are:

Read more
With the Serie M/

Documents in responsive design

The technical basis for dynamic, non-page-based HTML is the marking up of the documents with structural information such as paragraph, heading, graphic, etc.. The Serie M/ automatically equips the documents with this metadata in the form of “”. This “tagging” is elementary to keep the basic structure of the HTML document – to indicate where a new paragraph starts, where there is another column, where there is a heading, a table, etc.? Accessible documents in PDF/UA format are also based on this tagging, which ensures that e.g. screen readers recognize the correct reading order of columns/sections based on the structural information.

With the Serie M/ it is very easy to create non-page-bound, HTML documents in responsive layout. Once it is in the graphical editor, the template designer defines different orientations (portrait and landscape) andformats, then assigns them the breakpoints, from which, based on media width, the layout change takes place. Once it is done, the HTML renderer automatically syncs all the templates to the rest of the documents.

Dynamic documents

The dynamics and usability of HTML documents in responsive design can be increased even further. The Cascading Style Sheets technique allows the layout and positioning of content elements to be changed dynamically and interactively. The following example, for example, is based on a responsive HTML document created with the Serie M/, to which prepared CSS style sheets have been added. For example, you can

  • show and hide details,
  • focus on specific persons or topics
  • or choose between different display styles of graphics (bar vs. pie chart).

Related topics

Other output formats

Omnichannel Output Management with M/OMS

Can we call you back?

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