Respnosive Webdesign

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Die Frage ist halt immer die, wie viel sind das eine Prozent?
Und kann man darauf "verzichten"?

Und da sollte auch nicht eine n%-Hürde aufgebaut werden, sondern das Kosten-Nutzen-Verhältnis abgewogen werden.

Wenn ein Fallback für die 1% (wenn schon nicht auf progressive enhancement gesetzt wird) in einem Wimpernschlag erledigt werden kann (also si gut wie nichts kostet), dann sollte man das tun.

Wenn ein Fallback sehr aufwendig wäre, kann auch die Entscheidung gegen 10% evtl. eine sinnvolle sein.

Sorry, aber 20 oder mehr MQs halte ich persönlich für völlig unsinnig.

Kommt auf die Zählweise an.

Wenn man die Gestaltung von innen nach außen entwickelt (was man tun sollte) und die Breakpoints nach dem Inhalt setzt (was man tun sollte), kann schon sowas bei rauskommen:

html { … }  
@media (min-width: 24em) { html { … } }  
@media (min-width: 30em) { html { … } }  
  
foo { … }  
@media (min-width: 26em) { foo { … } }  
  
bar { … }  
@media (min-width: 32em) { bar { … } }

Viele Breakpoints können sich ungünstig zum Testen erweisen, die QA wird sie hassen. Vielleicht sollte man da Kompromisse eingehen und sich auf wenige beschränken; in dem Beispiel statt 26em den schon vorhanden Breakpoint 24em wiederverwenden und entsprechend 30em satt 32em:

html { … }  
@media (min-width: 24em) { html { … } }  
@media (min-width: 30em) { html { … } }  
  
foo { … }  
@media (min-width: 24em) { foo { … } }  
  
bar { … }  
@media (min-width: 30em) { bar { … } }

Wären dass bei deiner Zählweise nun 4 Breakpoints oder 2?

Insbesondere bei Verwendung eines CSS-Präprozessors wird man das so im CSS zu stehen haben und nicht als

html { … }  
foo { … }  
bar { … }  
  
@media (min-width: 24em)  
{  
  html { … }  
  foo { … }  
}  
  
@media (min-width: 30em)  
{  
  html { … }  
  bar { … }  
}

weil der Sass-Quelltext so aussieht:

html  
{  
  …  
  @media (min-width: 24em) { … }  
  @media (min-width: 30em) { … }  
}  
  
foo  
{  
  …  
  @media (min-width: 24em) { … }  
}  
  
bar  
{  
  …  
  @media (min-width: 30em) { … }  
}

Qapla'

PS: Der Syntax-Highlighter des Forums ist kaputt.