Skip to main content

BREAKPOINT

WAS IST EIN BREAKPOINT IM RESPONSIVE DESIGN?

Im Responsive Webdesign müssen Inhalte skalieren, das heißt sie passen sich an die Größe des Displays – Desktop, Tablet oder Mobil – an. Für solch anpassungsfähige Designs werden verschiedene Pixelwerte festgelegt. Sie geben an, bei welchen Layoutveränderungen die Seitenelemente eine andere Position einnehmen müssen. Hierfür werden Umbrüche (Breakpoints) definiert. Wann wird aus einem einspaltigen Layout ein zweispaltiges Layout? Wie ordnen sich die Elemente im jeweiligen Layout neu an? Breakpoints werden in den CSS-Stilen festgehalten.

GIBT ES STANDARDS BEI DEN BREAKPOINTS?

Es gibt keine Standards bei Breakpoints. Die Definition der Breakpoints orientiert sich an der Breite des jeweiligen Bildschirms. Bei der Vielzahl an verschiedenen Bildschirmgrößen ist das eine enorme Herausforderung. Das Ziel eines jeden Webdesigns ist es, dass die Inhalte auf jedem Display, egal welcher Größe, optimal wirken können.

WELCHE ÄNDERUNGEN GIBT ES IN BEZUG AUF DAS RESPONSIVE DESIGN UND BREAKPOINTS?

Zum Beginn der Entwicklung für das Web wurde mit fixen Bildschirmgrößen gearbeitet, das war 1991. Das Design konnte so im genau gleichen Maßstab in HTML und CSS umgesetzt werden, wie es designt wurde. Das CSS sah ein starres Raster vor. Die Entwicklung des Web schritt voran und somit auch die Endgeräte, deren Größen und auch die Browser konnten Inhalte anders präsentieren. Alles orientierte sich am Desktop.

Dann wurde das Web mobil – zeitgleich mit dem Aufkommen eines mobilen Endgerätes von Apple im Jahre 2007. Immer mehr fand das Geschehen auf mobilen Endgeräten statt. Dieser Entwicklung folgte auch das Webdesign. Heute kommt man bei der Entwicklung einer Seite nicht mehr um Mobile First herum. Selbst Google hat das in seinen Algorithmus zum Standard erhoben. Die Darstellung der Webinhalte muss also auf mobile Endgeräten abgestimmt sein. 

Heute sind die Nutzerszenarien so vielfältig wie die Endgeräte selbst – neben Desktops und Mobile Phones gibt es natürlich auch Laptops, Tablets, Smart Watches, TV-Geräte und so weiter. Die mobile Nutzung entwickelt sich weiter fort und Bildschirmgrößen werden auch immer variabler. 

Künftig wird es darum gehen, dass aus dem Responsive Webdesign eher ein fluides Webdesign wird. Flexible Content-Anpassungen werden immer mehr zur größten Herausforderung im Webdesign.

HÄUFIG VERWENDETE BREAKPOINTS IM RESPONSIVE WEBDESIGN

Die folgenden responsiven Breakpoints 2022 werden am häufigsten für Bildschirmgrößen definiert:

  • Mobil: 360 x 640

  • Mobil: 375 x 667

  • Mobil: 360 x 720

  • iPhone X: 375 x 812

  • Pixel 2: 411 x 731

  • Tablette: 768 x 1024

  • Laptop: 1366 x 768

  • Laptop oder Desktop mit hoher Auflösung: 1920 x 1080

BEISPIELE FÜR UX-/UI-DESIGNS VON ION ONE

Wir sehen uns als Design-Scientists und analysieren jedes Produkt bis ins kleinste „ION“ und können auf Basis dessen Optimierungen und ein neuartiges Produkterlebnis kreieren. Ergebnisse unserer Arbeit sind in unseren Case Studies erlebbar.

NEUGIERIG
GEWORDEN?

Wir möchten nicht selbst über unsere Projekte reden.
Unsere Referenzen tun es für uns.

ENTDECKEN SIE UNSERE CASE STUDIES

ES BRAUCHT MUT, NEU ZU DENKEN. WIR HELFEN IHNEN DABEI.
LASSEN SIE UNS ÜBER IHRE IDEEN REDEN.

Grant McGillivray

COO

„Wir gehen an jedes Projekt und jede UX-Herausforderung mit prozessorientierter Intention heran, um die von uns geschaffenen Identitäten und Erfahrungen zu vermitteln. Wir bemühen uns um eine Arbeit, die zum Handeln anregt und Ergebnisse erzeugt. Wollen Sie eine größere Wirkung erzielen? Wir helfen Ihnen gerne.“

E-Mail:

Telefon: