marcello: Dynamische Breitenangaben ohne Breakpoints (fließend/stetig)

Hallo,

ich würde gerne mal über ein Problem beim Responsive Webdesign diskutieren (oder vielleicht auch eher philosophieren). Zumindest in meinen Augen ist es ein Problem. Aber da ich wirklich noch ganz grün auf dem Gebiet bin, vielleicht gibt es eine einfache Lösung, die ich übersehen habe. Folgende Ausgangsituation:

Ich habe eine Website mit einspaltigem Layout. Keine Sidebar, keine Banner an der Seite und es ist auch nichts dergleichen vorgesehen. Der Bildschirminhalt muss also irgendwie mit Text (und Rand) gefüllt werden. Damit die Zeilen nicht zu sehr in die Breite gehen, definiere für kleine Bildschirme gar keinen Rand, für größere etwas Rand und für sehr große entsprechend viel Rand. Außerdem kann ich noch, die Schriftgröße für große Bildschirmbreiten etwas anheben.

Das Problem (zumindest für mich):
Das geht alles nicht dynamisch. Wenn ich z. B. bei 600 Pixeln Breite einen Breakpoint habe

@media (min-device-width: 600px) {  
main { width: 85%; }  
}

Dann bekommt ein Device mit einer Breite von 599 Pixeln einen größeren Inhaltscontainer angezeigt als ein Device mit 600px. Der User merkt es natürlich nicht. Aber unter der Prämisse, dass ich für jede Bildschirmgröße die optimale Darstellung (dynamisch) definieren will, sind Breakpoints doch per se ineffizient. Legt Responsive Design nicht immer so viel Wert auf ein dynamisches Layout?

Mir fallen leider nur 2 unbefriedigende Möglichkeiten ein, das Problem zu umgehen:

1. Sehr viele Breakpoints festlegen um, wenn man so will etwas mehr Stetigkeit in die Funktion "device-width <-> Containerbreite" zu bringen. Wenn ich mich nicht irre, wird aber immer empfohlen, mit so wenig wie möglich Breakpoints zu arbeiten. Schätze mal um das CSS nicht zu sehr aufzublähen.

2. Per Javascript die Bildschirmbreite ermitteln und dann die Containerbreite (oder analog den Rand) als Funktion der Bildschirmbreite berechnen. Z.B.

Rand (in px) = (bildschirmbreite ^2) / 10000

Dann den Rand nachträglich im CSS einfügen. Diese Möglichkeit würde ich evtl sogar umsetzen, auch wenn ich den Einsatz von Javascript normalerweise immer eher als Notlösung sehe.

Ich befürchte, die einzige befriedigende Lösung für mein Problem wäre, wenn man in Style-Angaben mathematische Funktionen (wie unter 2.) benutzen könnte. Warum eigentlich nicht? Browser können doch rechnen und die Bilschirmgröße kennen sie auch...

Gibt es vielleicht noch einen anderen Weg, die Breakpoints zu umgehen?

--
Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)
  1. Hi,

    Ich habe eine Website mit einspaltigem Layout. Keine Sidebar, keine Banner an der Seite und es ist auch nichts dergleichen vorgesehen. Der Bildschirminhalt muss also irgendwie mit Text (und Rand) gefüllt werden. Damit die Zeilen nicht zu sehr in die Breite gehen, definiere für kleine Bildschirme gar keinen Rand, für größere etwas Rand und für sehr große entsprechend viel Rand. Außerdem kann ich noch, die Schriftgröße für große Bildschirmbreiten etwas anheben.

    Vor allem solltest du die Spaltenbreite derart anpassen, dass eine bestimmte Anzahl an Zeichen pro Zeile nicht überschritten wird.

    1. Per Javascript die Bildschirmbreite ermitteln und dann die Containerbreite (oder analog den Rand) als Funktion der Bildschirmbreite berechnen. Z.B.

    Rand (in px) = (bildschirmbreite ^2) / 10000

    Dann den Rand nachträglich im CSS einfügen. Diese Möglichkeit würde ich evtl sogar umsetzen, auch wenn ich den Einsatz von Javascript normalerweise immer eher als Notlösung sehe.

    Damit würdest du mittels Script das nachbauen, was du mit einer Breitenangabe in Prozent gleich per CSS haben könntest.

    Ich befürchte, die einzige befriedigende Lösung für mein Problem wäre, wenn man in Style-Angaben mathematische Funktionen (wie unter 2.) benutzen könnte. Warum eigentlich nicht?

    calc() existiert.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Vor allem solltest du die Spaltenbreite derart anpassen, dass eine bestimmte Anzahl an Zeichen pro Zeile nicht überschritten wird.

      Genau das ist mein Ziel.

      Damit würdest du mittels Script das nachbauen, was du mit einer Breitenangabe in Prozent gleich per CSS haben könntest.

      Nicht ganz. Es geht ja darum, bei großen Bilschirmen mehr % der Fläche mit Rand zu füllen, und bei kleinen weniger. Einfach nur width: 90%; reicht mir nicht. Ich möchte für kleine Bildschirme width: 0; und für sehr große width: 50%; ...und das ganze dynamisch für alle erdenklichen Zwischengrößen. Also ohne Breakpoints.

      calc() existiert.

      Danke! Nie davon gehört. Geht aber glaube ich auch nicht, weil beim multiplizieren mind ein Argument eine Zahl sein muss. Rechnungen wie 100% * 100% gehen also nicht. Und ein "hoch" kann man nicht verwenden. Mir geht es ja gerade darum, einen nicht-linearen Zusammenhang zwischen Bildschirmbreite und Containerbreite zu erwirken (Potenzfunktion).

      1. Hi,

        Mir geht es ja gerade darum, einen nicht-linearen Zusammenhang zwischen Bildschirmbreite und Containerbreite zu erwirken (Potenzfunktion).

        Na dann mach das mit JavaScript, und implementiere einen sinnvollen Fallback via CSS, falls JS nicht verfügbar ist.

        (Ob dieser „nicht-lineare Zusammenhang“ überhaupt sinnvoll ist, lass ich hier mal dahingestellt.)

        MfG ChrisB

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
        1. (Ob dieser „nicht-lineare Zusammenhang“ überhaupt sinnvoll ist, lass ich hier mal dahingestellt.)

          Ok, schätze ich steh alleine da mit meinem Wunsch nach diesem kleinen aber wirkungsvollen Feature ;)

          Dann halt per Javascript. Danke für deine Einschätzung!

          --
          Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)
  2. @@marcello:

    nuqneH

    Damit die Zeilen nicht zu sehr in die Breite gehen, definiere für kleine Bildschirme gar keinen Rand, für größere etwas Rand und für sehr große entsprechend viel Rand.

    Denkfehler. Du legst für den Inhalt eine Maximalbreite fest – fertig.

    body { padding: 0 1em; max-width: 42em }  
    
    

    Außerdem kann ich noch, die Schriftgröße für große Bildschirmbreiten etwas anheben.

    Tu das.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Damit die Zeilen nicht zu sehr in die Breite gehen, definiere für kleine Bildschirme gar keinen Rand, für größere etwas Rand und für sehr große entsprechend viel Rand.

      Denkfehler. Du legst für den Inhalt eine Maximalbreite fest – fertig.

      body { padding: 0 1em; max-width: 42em }

        
      Oooh, ja stimmt. Ich hatte das Pferd von hinten aufgezäumt. Der margin ist ja nur notwendiges Übel, wenn man mit der Schriftgröße nicht mehr rausholen kann. Also margin bzw width weglassen, Schriftgröße dynamisch anpassen und max-width in EMs angeben. Genial!  
        
      
      > > Außerdem kann ich noch, die Schriftgröße für große Bildschirmbreiten etwas anheben.  
      >   
      > [Tu das.](http://forum.de.selfhtml.org/archiv/2013/8/t214724/#m1469688)  
        
      Danke für den Lesestoff! Und hier noch mein Ergebnis (für alle, denen Gunnars Hinweise zu puristisch sind):  
        
      ~~~css
      font-size: calc(0.75em + 0.4vw); padding: 0 1em; max-width: 42em; font-family: arial; margin: 0 auto;  
      
      
      --
      Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)
      1. Om nah hoo pez nyeetz, marcello!

        Danke für den Lesestoff! Und hier noch mein Ergebnis (für alle, denen Gunnars Hinweise zu puristisch sind):

        font-size: calc(0.75em + 0.4vw); padding: 0 1em; max-width: 42em; font-family: arial; margin: 0 auto;

          
        Arial ist keine Familie. [Zitat](http://community.de.selfhtml.org/zitatesammlung/zitat2206) ;-)  
          
        Matthias
        
        -- 
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Messer und Messergebnis](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=M#messer).  
        ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
        
        
        1. Hallo Matthias!

          Arial ist keine Familie. Zitat ;-)

          Willst du damit sagen, dass man font-family nur benutzen soll, wenn man mehr als eine Schriftart angibt? Dann müsste man Thema evtl http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=hier mal ergänzen. Zitat: "Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen."

          @@Gunnar:

          Warum Alternativen für Arial davor(!) angeben (siehe hier)? Dann ist Arial doch nur noch eine Alternative, oder? Geschmacksache? Typografische Konvention? Oder hat das was mit der Verfügbarkeit von Arial zu tun?

          --
          Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)
          1. @@marcello:

            nuqneH

            Willst du damit sagen, dass man font-family nur benutzen soll, wenn man mehr als eine Schriftart angibt?

            Nein. Allerdings sollte man bei font-family als letztes eine generische Schriftfamilie angeben.

            Warum Alternativen für Arial davor(!) angeben (siehe hier)?

            Weil Arial ein hässlicher Abkömmling von Helvetica ist.

            Ich würde Helvitica vorziehen (wenn überhaupt; „Helvetica was designed to have no specific character“ (Erik Spiekermann)). Außer vielleicht bei kleinen Schriftgrößen auf Systemen, wo Arial besser gehintet sein mag.

            Aber Vorsicht! IE verwenden Helvetica als Synonym zu Arial; bei font-family: Helvetica, Cambria, Arial, sans-serif wird Arial verwendet, weil Helvetica vor Cambria in der Liste steht. WTF?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. @@gunnar:

              Allerdings sollte man bei font-family als letztes eine generische Schriftfamilie angeben.

              Danke!

              Weil Arial ein hässlicher Abkömmling von Helvetica ist.

              Nettes Quiz! Vor allem, weil man mal gezwungen wird genau hinzusehen. Bleibt offen, ob so ein marginaler Unterschied auch einen Effekt bei Lesern hat, die nicht mit der Nase am Bildschirm kleben. Aber warum falsch machen, wenn's auch richtig geht...

              Aber Vorsicht! IE verwenden Helvetica als Synonym zu Arial; bei font-family: Helvetica, Cambria, Arial, sans-serif wird Arial verwendet, weil Helvetica vor Cambria in der Liste steht. WTF?

              Dann bekommen IE User Helvetica also niemals zu Gesicht? Das soll dann aber nicht mehr mein Problem sein. Im Moment wäre Arial ohnehin meine 2. Wahl.

              Schönen Dank nochmal und @Matthias ebenfalls! Habe viel gelernt und das lästige Breakpoint-Problem scheint gelöst (zumindest für font und Containerbreite).

              marcello

              --
              Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)