Wie geht ihr mit Breakpoints (MediaQuery um?

[NETrix]

Hallo Freunde des hemmungslosen codens,

ich mach mich bald ran, das erste Mal meine Seite responsive zu machen...
Mal eine allgemeine Frage... Wie geht ihr mit dem Thema um? Wonach richtet ihr euch beim setzen von Breakpoints. Benutzt ihr standardmässig bestimmte Angaben wie z.B.
* =========== Tablets =========== */
@media(max-width: 980px) {

}
/* =========== Smartphones =========== */
@media(max-width: 760px) {

oder geht ihr da ganz individuell ran... sobald es nicht mehr passt, wird nach justiert...

Ich tendiere eher zur zweiten Methode (ohne Erfahrungswerte)

Desweiteren würde ich gerne Fragen ob ihr ein Tool kennt, dass mir beim verkleinern des Browserfensters anzeigt, wieviel px die Breite momentan ist... Ohne diese Infos müsste ich mich immer rantasten...
Das geht auch besser, bin ich der Meinung...

Vielen dank schon mal für die kommenden Antworten :)

 

[Tronjer]

Üblich sind 4 Breakpoints und zur Umsetzung gibt es CSS-Frameworks. Wenn es minimalistisch sein und nur das Grid betreffen soll, nimm das hier.
http://flexboxgrid.com/

 

[MrMurphy]

Hallo

Hier muss zwischen dem sinnvollsten Vorgehen und dem, welches die Masse der Webseitenersteller verwendet, unterschieden werden.

Die Masse der Webseitenersteller ist mit den HTML- und CSS-Regeln überfordert, pickt sich die für sie einfachsten Regeln heraus und erstellt damit seine Webseiten. Die wollen dann möglichst vorgegebene Werte wie

* =========== Tablets =========== */
@media(max-width: 980px) {

}
/* =========== Smartphones =========== */
@media(max-width: 760px) {

Das funktioniert zwar in der Regel, hat aber viele Nachteile. Das beginnt zum Beispiel mit der Verknüpfung, Tablets oder Smartphones bestimmte Breiten zuordnen zu wollen, die es in der Praxis überhaupt nicht gibt. Bereits seit Jahren haben Tablets und Smartphones häufig viel höhere Auflösungen als Desktopbildschirme.

Der sinnvollere Weg ist deshalb

geht ihr da ganz individuell ran... sobald es nicht mehr passt, wird nach justiert...

Das Layout sollte sich nach dem Inhalt richten. Den Inhalt in ein vorgegebenes Muster zu quetschen ist immer die zweitbeste Lösung.

Desweiteren würde ich gerne Fragen ob ihr ein Tool kennt, dass mir beim verkleinern des Browserfensters anzeigt, wieviel px die Breite momentan ist...

Für den Firefox gibt es ein AddOn names Firesizer, welches die aktuelle Fenstergröße anzeigt.

Gruss

MrMurphy

 

[NETrix]

MrMurphy... vielen dank wiedermal für die nützliche Antwort.. Genau aus diesen von dir beschriebenen Grund, dass sich die Formate verändern mit der Zeit, hatte ich meine Bedenken... und tendierte zu Methode 2 (individuell)...
*thumbUp*

LG

Codrix

 

[Tronjer]

Es geht ja nicht nur um Breakpoints, sondern generell um UI-Verhalten, Transitions, etc.

Aus dem Grunde einigt man sich in der Planungsphase erstmal auf ein UI-Framework, Anschließend erstellt der Designer pro Seite 4 Layouts anhand des vereinbarten Grids und liefert einen Styleguide mit Werten für Farben, Fonts, Abstände. Diese Frameworks sind in der Regel als unkompilierte SCSS-Versionen verfügbar, und da gibt es dann extra Dateien, in denen sich vorgegebene Farben, Größe, usw. anpassen und auch noch nachträglich ändern lassen.

 

[NETrix]

danke für diese Einsicht in den Prozess, Tronjer... Interessant...
momentan geht s mir jedoch nur um die Responsivität... und da im speziellen um die Breakpoints...
Aber sehr interessant für mich dein post... :)

 

[NETrix]

Ein nützliches Tool zur Ermittlung der Browsergrösse zwecks Responsives Design (Breakpoints)

:) http://lab.maltewassermann.com/viewport-resizer/ :)