Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Breakpoints, Makro- & Mikrolayouts im Responsive Design

Seit der Erfindung des Begriffs Responsive Design im Jahre 2010 hat sich das Konzept zur Gestaltung von Websites erheblich weiterentwickelt. Anfangs lag der Fokus auf der Anpassung einzelner Seitentypen an typische Bildschirmgrößen wie Smartphone, Tablet und Computer.

Die Anzahl der verschiedenen Displaygrößen ist längst unüberschaubar geworden und Websites werden heute viel modularer geplant. Einzelne Seitentypen setzen sich aus inhaltlichen Segmenten zusammen und Konzepte wie Atomic Design haben starke Verbreitung gefunden. Breakpoints werden nicht mehr global festgelegt, sondern sowohl pro Layout als auch pro Komponente, was zu einem perfekt austarierten Design auf allen Displaygrößen führt.

Makrolayouts (Page Layouts)

Als Makrolayout bezeichnet man die Anordnung der wesentlichen Inhaltsbereiche einer Website oder App. Bei einer klassischen Website sind das beispielsweise der Header, die Navigation, der Hauptinhalt, die Seitenleiste und der Footer. Viele dieser Bereiche stellen im HTML-Code übrigens die sog. »Landmarks« dar, die für Suchmaschinenoptimierung und barrierefreie Websites relevant sind.

Häufig unterscheiden sich die Makrolayouts verschiedener Websites in erster Linie durch die unterschiedlichen Website-Typen. Innerhalb der Typen haben sich Standards etabliert.

Schematische Darstellung vier verschiedener Makrolayouts.
Vier verschiedene Beispiele für Makro-Layouts mit typischen Inhaltsbereichen

Major-Breakpoints

Die meisten Layouts können nicht endlos gestaucht oder auseinander gezogen werden, ohne dass es zu einer unschönen Darstellung kommt. Um dem entgegenzuwirken, wird ein sog. Breakpoint gesetzt. Das Layout ändert am Breakpoint die Struktur und ordnet die Inhalte neu an. Es gibt zahlreiche responsive Designtechniken um Inhalte anzuordnen. Auch haben sich verschiedene Design Pattern etabliert.

Das Makrolayout wird im responsive Design mit sog. Major-Breakpoints in unterschiedliche Layouts für verschiedene Größen unterteilt. Mit zwei Breakpoints entstehen beispielsweise drei Layouts. Jedes dieser Layouts hat eine variable Breite vom unteren bis zum oberen Breakpoint. Es wird folglich für einen Variablen Bereich (eine sog. »Range«) gestaltet, nicht für eine feste Pixelgröße.

Beispiel für ein Makro-Layout mit zwei Breakpoints und drei Layouts variabler Breite

Wenn der Design-Prozess in einem Grafikprogramm stattfindet, werden normalerweise die jeweils kleinsten Abmessungen einer Layout-Range gestaltet. Die Flexibilität zwischen den Breakpoints wird dann in der Frontend-Umsetzung realisiert. Alternativ findet der Layout-Prozess direkt im Browser statt.

Technologisch werden Major-Breakpoints mit CSS Media Queries umgesetzt, da diese sich auf das Browserfenster beziehen.

Animation des Makrolayouts über zwei Breakpoints hinweg

Wo sollten Breakpoints gesetzt werden?

Grundsätzlich sollten Breakpoints so gewählt werden, dass der jeweilige Inhalt bestmöglich dargestellt wird. Es ist nicht empfehlenswert, Breakpoints auf typische Displaygrößen zu setzen – auch wenn dies in der Vergangenheit gängige Praxis war. Breakpoints sollten immer dann gesetzt werden, wenn das Design und der Inhalt den Breakpoint benötigen und nicht, wenn eine zuvor festgelegte Größe erreicht wird. In der Level 4-Spezifikation von CSS Media Queries ist das Abfragen der Displaygröße daher auch wieder entfernt worden. Einzig entscheidend ist der verfügbare Raum im Browser (Viewport).

Don’t define breakpoints based on device classes. Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare.

Google Developers

Gibt es Standard-Breakpoints?

Auch, wenn es als »Best Practise« gilt Breakpoints auf Grundlage des Layouts und der Inhalte zu setzen, gibt es doch auch einige Frameworks und Design Systeme an denen man sich orientieren kann. Interessant ist u.a. das Design System »Material Design« von Google, dass mit fünf Layoutgrößen arbeitet.

Ihr solltet euch hierbei allerdings in Erinnerung rufen, dass Frameworks und Vorlagen die Breakpoints unabhängig von einem konkreten Projekt festlegen und somit immer einen Kompromiss finden wollen, der für möglichst viele Projekte funktioniert.

Schematische Darstellung der Breakpoint-Struktur von Material Design.
Breakpoint-Struktur im Material Design-Framework von Google

Ebenfalls sehr interessant ist das Design System »Fluent« von Microsoft, das mit lediglich drei Gerätekategorien arbeitet.

Screenshot einer Tabelle von Microsoft mit Angaben zu verschiedenen Gerätekategorien wie TV, Computer, Tablet, Smartphone, Spielekonsole usw.
Breakpoint-Struktur bei Microsofts Design System »Fluent«

Auch stark verbreitete Frameworks wie Bootstrap und Tailwind haben eine eigene Breakpoint-Struktur etabliert. Eine einheitliche Lösung existiert nicht. Letztendlich muss man sich mit der Struktur einer Vorlage anfreunden können, wenn man die Vorlage einsetzt.

Screenshot aus Polypane mit dem Vergleich der Breakpointstruktur verschiedener Frameworks.
Stilisierte Darstellung der Breakpoint-Struktur verschiedener populärer Frameworks

Der Trend zu linearen Makro-Layouts

Ein Makro-Layout mit Inhaltsbereich und Seitenleiste war um 2010 noch sehr stark verbreitet, gilt heute jedoch als nicht mehr zeitgemäß. Inhalte, die auf einem großen Bildschirm in der Seitenleiste oben angeordnet sind, werden auf dem Smartphone ganz weit nach unten rutschen. Von der Hierarchie und der Priorisierung der Inhalte ist das unglücklich, denn in den meisten Fällen ändert sich die Wichtigkeit einer Information nicht, wenn der Viewport eine andere Größe hat.

Schematische Darstellung eines Layouts mit Sidebar.
Klassischer Aufbau eines Layouts mit Hauptinhalt und Seitenleiste. Nachteil: Die Inhalte in der Seitenleiste rutschen auf dem Smartphone sehr weit nach unten

Moderner und einfacher ist ein lineares Makrolayout mit sog. Sektionen. Visuell unterscheidet sich die Ansicht auf einem großen Bildschirm fast gar nicht von der klassischen Variante. Die inhaltliche Struktur auf dem Smartphone wird jedoch deutlich besser. Inhalte, die am Desktop zusammen gelesen werden können, sind auch auf kleinen Bildschirmen in räumlicher Nähe.

Schematische Darstellung eines Layouts mit Sidebar – aufgebaut in Sektionen.

Mikrolayouts (Component Layouts)

Als Mikrolayout bezeichnet man das Layout in einem Teilbereich des Makrolayouts. Moderne Websites sind modular gestaltet und setzen sich aus einzelnen Komponenten zusammen. Das Mikrolayout einer einzelnen Komponente hat daher einen hohen Stellenwert.

Schematische Darstellung einer Komponente mit zwei Layouts (Klein, Groß)

Minor-Breakpoints

Sobald eine Komponente komplexer wird, gestaltet man verschiedene Layouts – je nachdem wieviel Platz die Komponente zur Verfügung hat. Jedes dieser Layouts ist in der Breite variabel, mit Breakpoints schaltet man zwischen den verschiedenen Mikrolayouts um. Auch die Breakpoints innerhalb von Komponenten sollten dann gesetzt werden, wenn die jeweilige Komponente aus gestalterischer Sicht den Breakpoint braucht. Es gibt keine Standardwerte, an denen man sich orientiert. Durch diese Entkoppelung von Makro- und Mikrolayout entstehen sehr flexible Layouts.

Technologisch werden Minor-Breakpoints mit CSS Container Queries realisiert, da diese auf den verfügbaren Platz einer Komponente reagieren.

Drei Makrolayouts mit integrierter Card-Komponente. Die Card verfügt über ein eigenes Layout und ändert sich – je nachdem wieviel Platz ihr zur Verfügung steht. Mit der Displaygröße hat das nichts zu tun.

Fluides Font-Scaling

Als Ergänzung zu Mikro- & Markolayouts wird häufig eine stufenlose Skalierung der Schriften eingesetzt. Da alle Abstände (padding, margin, gap) ebenfalls von dieser Schriftgröße abhängig sind, erreicht ihr eine Art Zoom-Effekt. Technisch wird das Font-Scaling mit clamp() ermöglicht: Die Basisschriftgröße wird hierbei in Abhängigkeit zur Viewport-Breite zwischen einem minimalen und einem maximalen Wert skaliert.

Makrolayout, Mikrolayout und Font-Scaling in Kombination: Auf mittleren Viewports vergrößert sich das Layout proportional und zoomt bis zur maximalen Schriftgröße.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Stephan
    schrieb am 14.09.2023 um 15:42 Uhr:

    Toller Bericht den ich erstmal verankern muss ;- Vor allem die Lösung zum linearen Makrolayout finde ich sehr interessant, da muss ich bei meiner neuen Site mal drüber nachdenken.
    Herzlichen Dank für deine Mühe!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →