Responsive web design describes the goal of building a website so it can be adapted for different output devices with just one source code.
In order to operate on different types of devices with different resolutions and screen sizes as optimally as possible, different viewports are defined; above a certain size (window width) a different media query is activated within the CSS.If the media query that corresponds to the window width is activated, the appearance of the page elements can be adjusted. Thus, in addition to size other properties can be adjusted as well, such as color.
Important: In the context of this style guide, we strongly recommend that the desktop and smartphone viewports be covered, at minimum. It should also be noted that applications generally need to be suitable for touch media due to the increasing use of tablets.
In general, the content displayed on mobile devices should not be reduced. However, in developing smartphone views there is a focus on the absolute essential: What are the key site functions and content and what elements can be for mobile use omitted? The same applies for the display here, too, the focus is on clarity and precision. Following this approach, one often speaks of the so-called content-first paradigm: the content and the way it is displayed are paramount. If it is not relevant to the user, it becomes less important and, depending on one's viewpoint, it may become less visible as well. Content-first always involves a strong user orientation.