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.
Inhalt
Was ist ein Breakpoint im Responsive Design
Gibt es Standards bei den Breakpoints
Häufig verwendete Breakpoints im Responsive Webdesign
Welche Änderungen gibt es in Bezug auf das Responsive Design und Breakpoints
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.
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
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.
Weitere UX-Glossar Beiträge
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.
Kostenfreie UX-Sprechstunde
Schnell und unkompliziert die kleinen und großen Fragen des UX klären – regelmäßig, kostenfrei und angepasst an Ihren Bedarf.
Usability-
Check
Wir bieten Ihnen einen zweistündigen Workshop zur Optimierung der Usability Ihrer Website oder digitalen Anwendung.
Workshop Guided Selling
Den B2B-Vertrieb unterstützen mithilfe von Guided Selling – potenzielle Kunden effektiv beraten und vom Kauf überzeugen.
Neugierig geworden?
Wir möchten nicht selbst über unsere Projekte reden.
Unsere Referenzen tun es für uns.
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:
grant.mcgillivray@ionone.io
Telefon:
+49 30 24627-532