tag:forum.selfhtml.org,2005:/self Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) – SELFHTML-Forum 2015-02-20T10:32:03Z https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632586#m1632586 marcello 2015-02-19T13:45:54Z 2015-02-19T13:45:54Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>Hallo,</p> <p>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:</p> <p>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.</p> <p>Das Problem (zumindest für mich):<br> Das geht alles nicht dynamisch. Wenn ich z. B. bei 600 Pixeln Breite einen Breakpoint habe</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 85%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>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?</p> <p>Mir fallen leider nur 2 unbefriedigende Möglichkeiten ein, das Problem zu umgehen:</p> <p>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.</p> <p>2. Per Javascript die Bildschirmbreite ermitteln und dann die Containerbreite (oder analog den Rand) als Funktion der Bildschirmbreite berechnen. Z.B.</p> <p>Rand (in px) = (bildschirmbreite ^2) / 10000</p> <p>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.</p> <p>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...</p> <p>Gibt es vielleicht noch einen anderen Weg, die Breakpoints zu umgehen?</p> <div class="signature">-- <br> 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) </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632593#m1632593 ChrisB 2015-02-19T14:09:14Z 2015-02-19T14:09:14Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>Hi,</p> <blockquote> <p>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.</p> </blockquote> <p>Vor allem solltest du die Spaltenbreite derart anpassen, dass eine bestimmte Anzahl an Zeichen pro Zeile nicht überschritten wird.</p> <blockquote> <ol start="2"> <li>Per Javascript die Bildschirmbreite ermitteln und dann die Containerbreite (oder analog den Rand) als Funktion der Bildschirmbreite berechnen. Z.B.</li> </ol> <p>Rand (in px) = (bildschirmbreite ^2) / 10000</p> <p>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.</p> </blockquote> <p>Damit würdest du mittels Script das nachbauen, was du mit einer Breitenangabe in Prozent gleich per CSS haben könntest.</p> <blockquote> <p>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?</p> </blockquote> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" rel="nofollow noopener noreferrer">calc()</a> existiert.</p> <p>MfG ChrisB</p> <div class="signature">-- <br> 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 :/ </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632587#m1632587 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2015-02-19T16:11:12Z 2015-02-19T16:11:12Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>@@marcello:</p> <p>nuqneH</p> <blockquote> <p>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.</p> </blockquote> <p>Denkfehler. Du legst für den Inhalt eine Maximalbreite fest – fertig.</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1em<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 42em <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Außerdem kann ich noch, die Schriftgröße für große Bildschirmbreiten etwas anheben.</p> </blockquote> <p><a href="http://forum.de.selfhtml.org/archiv/2013/8/t214724/#m1469688" rel="nofollow noopener noreferrer">Tu das.</a></p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632588#m1632588 marcello 2015-02-19T21:44:45Z 2015-02-19T21:44:45Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <blockquote> <blockquote> <p>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.</p> </blockquote> <p>Denkfehler. Du legst für den Inhalt eine Maximalbreite fest – fertig.</p> <pre><code class="block language-css"></code></pre> </blockquote> <p>body { padding: 0 1em; max-width: 42em }</p> <blockquote></blockquote> <pre><code class="block"> 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; </code></pre> <div class="signature">-- <br> 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) </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632589#m1632589 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2015-02-19T22:14:12Z 2015-02-19T22:14:12Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>Om nah hoo pez nyeetz, marcello!</p> <blockquote> <p>Danke für den Lesestoff! Und hier noch mein Ergebnis (für alle, denen Gunnars Hinweise zu puristisch sind):</p> <pre><code class="block language-css"></code></pre> </blockquote> <p>font-size: calc(0.75em + 0.4vw); padding: 0 1em; max-width: 42em; font-family: arial; margin: 0 auto;</p> <blockquote></blockquote> <pre><code class="block"> 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) </code></pre> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632590#m1632590 marcello 2015-02-20T08:07:41Z 2015-02-20T08:07:41Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>Hallo Matthias!</p> <blockquote> <p>Arial ist keine Familie. <a href="http://community.de.selfhtml.org/zitatesammlung/zitat2206" rel="nofollow noopener noreferrer">Zitat</a> ;-)</p> </blockquote> <p>Willst du damit sagen, dass man font-family nur benutzen soll, wenn man mehr als eine Schriftart angibt? Dann müsste man Thema evtl <a href="http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=hier" rel="nofollow noopener noreferrer">http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=hier</a> mal ergänzen. Zitat: "Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen."</p> <p>@@Gunnar:</p> <p>Warum Alternativen für Arial davor(!) angeben (siehe <a href="http://community.de.selfhtml.org/zitatesammlung/zitat2206" rel="nofollow noopener noreferrer">hier</a>)? Dann ist Arial doch nur noch eine Alternative, oder? Geschmacksache? Typografische Konvention? Oder hat das was mit der Verfügbarkeit von Arial zu tun?</p> <div class="signature">-- <br> 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) </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632591#m1632591 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2015-02-20T09:32:44Z 2015-02-20T09:32:44Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>@@marcello:</p> <p>nuqneH</p> <blockquote> <p>Willst du damit sagen, dass man font-family nur benutzen soll, wenn man mehr als eine Schriftart angibt?</p> </blockquote> <p>Nein. Allerdings sollte man bei font-family als letztes eine <a href="http://dev.w3.org/csswg/css-fonts/#generic-family-value" rel="nofollow noopener noreferrer">generische Schriftfamilie</a> angeben.</p> <blockquote> <p>Warum Alternativen für Arial davor(!) angeben (siehe <a href="http://community.de.selfhtml.org/zitatesammlung/zitat2206" rel="nofollow noopener noreferrer">hier</a>)?</p> </blockquote> <p>Weil Arial ein <a href="http://www.webdesignerdepot.com/2013/03/arial-vs-helvetica-can-you-spot-the-difference/" rel="nofollow noopener noreferrer">hässlicher</a> <a href="http://www.ironicsans.com/helvarialquiz/" rel="nofollow noopener noreferrer">Abkömmling</a> von Helvetica ist.</p> <p>Ich würde Helvitica vorziehen (wenn überhaupt; „Helvetica was designed to have no specific character“ (<a href="http://www.adobepress.com/articles/article.asp?p=2172663" rel="nofollow noopener noreferrer">Erik Spiekermann</a>)). Außer vielleicht bei kleinen Schriftgrößen auf Systemen, wo Arial besser gehintet sein mag.</p> <p>Aber Vorsicht! IE verwenden Helvetica als Synonym zu Arial; bei <code>font-family: Helvetica, Cambria, Arial, sans-serif</code> wird Arial verwendet, weil Helvetica vor Cambria in der Liste steht. WTF?</p> <p>Qapla'</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632592#m1632592 marcello 2015-02-20T10:32:03Z 2015-02-20T10:32:03Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>@@gunnar:</p> <blockquote> <p>Allerdings sollte man bei font-family als letztes eine <a href="http://dev.w3.org/csswg/css-fonts/#generic-family-value" rel="nofollow noopener noreferrer">generische Schriftfamilie</a> angeben.</p> </blockquote> <p>Danke!</p> <blockquote> <p>Weil Arial ein <a href="http://www.webdesignerdepot.com/2013/03/arial-vs-helvetica-can-you-spot-the-difference/" rel="nofollow noopener noreferrer">hässlicher</a> <a href="http://www.ironicsans.com/helvarialquiz/" rel="nofollow noopener noreferrer">Abkömmling</a> von Helvetica ist.</p> </blockquote> <p>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...</p> <blockquote> <p>Aber Vorsicht! IE verwenden Helvetica als Synonym zu Arial; bei <code>font-family: Helvetica, Cambria, Arial, sans-serif</code> wird Arial verwendet, weil Helvetica vor Cambria in der Liste steht. WTF?</p> </blockquote> <p>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.</p> <p>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).</p> <p>marcello</p> <div class="signature">-- <br> 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) </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632594#m1632594 marcello 2015-02-19T15:14:40Z 2015-02-19T15:14:40Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <blockquote> <p>Vor allem solltest du die Spaltenbreite derart anpassen, dass eine bestimmte Anzahl an Zeichen pro Zeile nicht überschritten wird.</p> </blockquote> <p>Genau das ist mein Ziel.</p> <blockquote> <p>Damit würdest du mittels Script das nachbauen, was du mit einer Breitenangabe in Prozent gleich per CSS haben könntest.</p> </blockquote> <p>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.</p> <blockquote> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" rel="nofollow noopener noreferrer">calc()</a> existiert.</p> </blockquote> <p>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).</p> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632595#m1632595 ChrisB 2015-02-19T15:23:48Z 2015-02-19T15:23:48Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <p>Hi,</p> <blockquote> <p>Mir geht es ja gerade darum, einen nicht-linearen Zusammenhang zwischen Bildschirmbreite und Containerbreite zu erwirken (Potenzfunktion).</p> </blockquote> <p>Na dann mach das mit JavaScript, und implementiere einen sinnvollen Fallback via CSS, falls JS nicht verfügbar ist.</p> <p>(Ob dieser „nicht-lineare Zusammenhang“ überhaupt sinnvoll ist, lass ich hier mal dahingestellt.)</p> <p>MfG ChrisB</p> <div class="signature">-- <br> 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 :/ </div> https://forum.selfhtml.org/self/2015/feb/19/dynamische-breitenangaben-ohne-breakpoints-fliessend-stetig/1632596#m1632596 marcello 2015-02-19T15:48:23Z 2015-02-19T15:48:23Z Dynamische Breitenangaben ohne Breakpoints (fließend/stetig) <blockquote> <p>(Ob dieser „nicht-lineare Zusammenhang“ überhaupt sinnvoll ist, lass ich hier mal dahingestellt.)</p> </blockquote> <p>Ok, schätze ich steh alleine da mit meinem Wunsch nach diesem kleinen aber wirkungsvollen Feature ;)</p> <p>Dann halt per Javascript. Danke für deine Einschätzung!</p> <div class="signature">-- <br> 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) </div>