• Thema

  • Technologie

Raster, Breakpoints und Frameworks für Web-Designer

Vielen Designer mit einem Hintergrund aus der Print-Branche, stellt sich bei der Umsetzung einer Webseite die Frage, worauf muss ich acht geben? Der neue Webauftritt sollte ja nicht nur schön aussehen, sondern auch Responsive sein. Welches Raster soll ich verwenden, welche Breite für den Inhalt, wann bricht meine Webseite um?

Wissen welche Technik verwendet wird

Zuerst stellt sich die Frage, welches Framework verwendet werden soll? Ein Framework ist eine Art Bibliothek, welche es dem Umsetzenden einfacher macht, Gestaltungen und vor allem Funktionalitäten zuzuweisen und auf vordefinierte Werte zurückzugreifen. Dabei sind Raster- aber auch komplexere Javascript-Funktionalitäten bereits vorgegeben und können einfach abgerufen werden. Bekannte Frameworks sind z.B.:

 

 

Das Erste ist das MaterializeCss, welches auf dem Material Design Konzept von Google aufbaut. Das Zweite ist Bootstrap, welches von einem Twitter-Designer und Developer entwickelt wurde. Beide erfreuen sich einer grossen Verbreitung und Akzeptanz.

Raster und Breakpoints mit Bootstrap

Da die meisten Frameworks auch ein Raster anbieten, wird es hier nun für Designer interessant. Bei Bootstrap z.B. wird ein 12er Raster verwendet. Auch die sogenannten Breakpoints (Browsergrössen, bei welchen das Design umbricht) und die jeweilige Inhaltsgrösse sind hier vorgegeben. Bootstrap bricht bei < 1200 Pixel um, also wenn das Browserfenster kleiner als 1200 Pixel ist. Bis dahin ist der Inhalts-Bereich, auf welcher das 12er Raster angewendet wird, 1170 Pixel breit. Der nächste Breakpoint ist bei < 992 und die Inhaltsgrösse 970 Pixel. Das heisst, dass der Inhalt bei einer Browser-Grösse von 992 – 1199 Pixel 970 Pixel entspricht. In folgender Tabelle sind alle Breakpoints unter Bootstrap nochmals aufgeführt:

Gerät Browser-Fenster Grösse Inhaltsgrösse
Desktop > 1200 px 1170 px
Laptops, Tablet landscape 992 px – 1199 px 970 px
Tablet portrait 768 px – 991 px 750 px
Smartphones 0 – 767 px auto

 

Der Leerraum zwischen jeder Spalte im Raster beträgt 30 Pixel und zu Begin und am Ende jeweils noch 15 Pixel. Wie in dieser Tabelle ersichtlich, haben Bildschirme unterhalb von 768 Pixel keine fixe Inhalts-Breite mehr. Das heisst, dass sich der Inhaltsbereich bei jedem Pixel Bildschirm-Veränderung wieder neu anpasst. Bei dieser Grösse benütze ich nur noch ein 2er Raster.

Meistens setze ich ein Layout in folgenden drei Grössen um. Ich lasse die «Tablet landscape» meist weg, denn die Anordnung ist dort meist ähnlich wie auf dem Desktop:

Gerät Arbeitsfläche Inhaltsgrösse Raster
Normaler Desktop 1920 px 1170 px 12er
Tablet portrait, z.B. iPad 768 px 750 px 12er
kleinstes Smartphone, z.B. iPhone 5 320 px 320 px 2er

 

In der Inhaltsgrösse sind 15 Pixel Abstand auf jeder Seite beinhaltet. Das Desktop-Layout hat nun folgendes Raster:

 

Das Tablet-Layout sieht ähnlich aus wie das Desktop-Layout, nur mit weniger Leerraum an den Seiten und kleineren Spaltengrössen im Raster.

Das Smartphone Layout sieht wie folgt aus:

Noch mehr finden:

  • Thema

  • Technologie

Beitrag teilen
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on xing
Was denkst du dazu?
yeah!
1
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

5 Antworten

  1. Also Rechnen kannst du aber nicht. Deine Berechnung unten mit dem Layout 68/30 gibt am Ende 1146 und nicht 1140.
    Hättest mal besser in der Schule etwas aufgepasst.

    1. Kein Grund gleich beleidigend zu werden. Mit halben Pixeln zu arbeiten ist in Designprogrammen sehr mühsam. Daher macht es Sinn, 68 Pixel Breite für die Spalten zu verwenden. Aber mathematisch korrekt ist natürlich 67.5 Pixel. Aber mit den 6 Pixeln zu viel kann der Frontender in der Regel umgehen.

    2. Danke Joel für den spannenden Beitrag, wenn auch schon etwas älter 🙂

      Abgesehen davon, dass es sehr mühsam ist, gibt es keine halben Pixel an einem Bildschirm. Klar kann man mit Graustufen und Anti-Aliasing den Anschein erwecken, dass dem so wäre. Beim Designen einer Webseite ergibt das aber wenig Sinn in meinen Augen.

      Meines Erachtens sollte man sowieso wann immer möglich versuchen, auf Dezimalstellen beim Design zu verzichten. Egal, ob Web oder Print.

  2. Passt das denn immer mit den 30px Spalten-Abstand? Bzw. was bedeutet es, wenn man den Spaltenabstand verringern würde? Hat dann der Entwickler viel mehr Arbeit? Danke!

    1. Das ist einfach die Vorgabe des Frameworks. Man kann Regeln auch bewusst brechen, für den Entwickler bedeutet das nicht viel mehr Aufwand und visuell kann das manchmal gut wirken. Aber normalerweise bewegt man sich innerhalb der Raster und der gegebenen Abstände. Diese können natürlich auch generell auf weniger als 30px gesetzt werden, dass bedingt dann aber etwas mehr Aufwand.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • publishingblog-News
    jeden Dienstag die neusten Blogposts in deiner Inbox
    • Online Print Symposium

    Noch mehr finden:

    • Thema

    • Technologie

    Dein Gerät ist aktuell offline.