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:

Formatting of body text within the found screen width (or zoom factor, screen orientation, resolution, etc.) so that horizontal scrolling is not required.

Repositioning of content elements so that, for example, columns are arranged one below the other as soon as the required space for a multi-column layout next to each other is not reached.

Gradual scaling or hiding of image elements as soon as a defined space requirement is under- or exceeded.

These responsive design adjustments are triggered as soon as a defined screen width, a so-called breakpoint, is exceeded or not reached. In contrast, the fluid layout does not know any fixed breakpoints, but it fills the available space “fluidly” in a defined percentage ratio to the screen size.

Read more
More about the output formats of the Serie M/
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).
HTML example (German)

Related topics

Other output formats

Read more

Omnichannel Output Management with M/OMS

Read more

Can we call you back?

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