responsive design, font-size, zoom

[michaah]

In aller Kürze:

Welchen Grundgedanken oder besser welche logischen Abhängigkeiten muss ich berücksichtigen damit Schriften nicht den eigentlich gedachten Rahmen und dann das Design sprengen wenn der User die Seite zoomt.

Ausführlicher:

Gestern beim Testen mit nicht so ganz verschiedenen Browsern (chromium und Vivaldi, selbe rendering engine) bin ich fast ausgeflippt, weil ich zunächst gar nicht verstanden habe was passiert. Insbesondere waren Schriften um Größenordungen unterschiedlich, was dann zu overflow oder Zeilenumbrüchen oder gedehneten umgebenden boxen führte wo dies nicht gewünscht war. Ein (scheinbar) stimmiges Design sah im anderen Browser zerrissen aus.

Ich habe das erst erkannt als ich meine voreingestellte Zoomstufe (in Vivaldi 160%! Ich finde nahezu alle Webseiten augenarzt-, nicht patientenfreundlich, um mich hier mal bildlich auszudrücken. Nein ich sehe nicht sonderlich schlecht) auf "0" zurückgenommen hatte.

Mal von der Tatsache abgesehen, dass auch die beiden verwandten Browser selbst bei neutraler Grundeinstellung Schriften unterschiedlich groß rendern (auch wenn dann der Unterschied nicht so gravierend ausfällt, geschätzt beträgt der Unterschied ca. 10-20%) fand ich die erschreckenste Feststellung, dass von mir besuchte Webseites sowohl in Neutralstellung als auch mit der von mir bevorzugten Zoomeinstellung inkl. erhöhtem Faktor in der Schriftauswahl ihr Grunddesign nicht zerrissen UND die Schriften sich meist nur mäßig vergrößern. In meiner eigenen Website (nein, die will ich hier jetzt nicht zeigen, auch weil es mir erstmal um das Verstehen des Grundgedankens der sinnvollen Definition von Schriftgrößen geht) führt zoomen jedoch sehr schnell zum Zerlegen des Designs.

Ganz verschwommen argwöhne ich dass der Kern des Problem irgendwo dort liegt, worauf sich eine bestimmte Größenangabe bezieht: % von was? em bezogen auf was? Natürlich verwende ich weder px noch pt.

Zurück zur Grundfrage: Welches Grundprinzip veranschaulicht augenfällig die Abhängigkeit von Schrift und übergeordnetem, sie maßgeblich beeinflussendem Element.

Weiter verkompliziert wird das für mich dadurch, dass mir nicht klar ist wann (Text-) Inhalt über eine Box hinausfließt, oder umgebrochen wird oder die Box dehnt. Ist dies ohne weitere Angaben für alle Boxen gleich?

Irgendwie ist das gerade wie: Gehen sie zurück auf Los.

[Felix Riesterer]

Liebe(r) michaah,

Deine beiden Browser verwenden wohl im default-Stylesheet verschiedene Größenangaben für die Schrift. Wie ändert sich das Zoomverhalten, wenn Du auf Deiner Seite folgende Regel hinzu fügst?

body { font-size: 14px; }

Liebe Grüße

Felix Riesterer

[michaah]

Ich werde die Antwort später nachreichen, bin eben mit anderem beschäftigt, aber kurz als Hinweis: Mein Problem ist nicht, schon gar nicht primär der relativ geringe Unterschied in den beiden erwähnten Browsern. Mein Problem ist, dass das Zoomen sich so zerstörerisch auswirkt.

Vielleicht ist deine Frage jedoch schon Teil der Antwort. Ich habe body {font-size: 1em} was ich dann auch mal auf 1.3em - 1.7em geändert habe. Ist hier das Grundproblem am werken. Ich war überrascht überhaupt eine px Angabe in deinem Beispiel zu lesen.

Bis später

[Gunnar Bittersmann]

@@michaah

Ich war überrascht überhaupt eine px Angabe in deinem Beispiel zu lesen.

Ich auch. Was ist das, px?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

PS: Hab’s gefunden. 1px sind ungefähr 1.0583q.

[michaah]

So, jetzt habe ich das mal gemacht.

Bislang hatte ich dort eine zentrale Schriftgrößenvorgabe:

body {font-size: 1em}

Mit der habe ich dann ein bisschen herumgespielt: 1.3em-1.7em .

Diese Vorgabe habe ich zur Beantwortung deiner Frage nun geändert auf:

body {font-size: 14px}

Was zu leicht unterschiedlichen Ergebnissen in Chromium und Vivaldi führt, chromium ist da 15-20% größer.

Ändere ich den Wert auf 16px/18px/20px sind sie mit dem Auge in ihrer Größe kaum noch unterscheidbar.

Soweit das eine Rolle spielt:

Die mit der grid-Technik umgebaute Website möchte stelle ich zunächst in eine Desktop-Variante her, die ich dann mit media-queries in zwei stufun für Tabletts und smartfons anpassen möchte. Das Schönste, die hoffentlich für mich zu meisternde Anpassung für IE 10/11 (ist in CH noch ratsam) hebe ich mir bis zu Schluss auf. War das Aufschieben nennt liegt auch nicht falsch.

Somit möchte ich erreichen, dass die Seite bis zu ersten breakpoint mit einen passablen Design daherkommt ...

Danke soweit.

[Rolf B]

Hallo michaah,

stelle ich zunächst eine Desktop-Variante her

Stop. Mobile First heißt die Devise. Damit hast Du auf jeden Fall eine Version, die auf allen Geräten darstellbar ist.

Rolf

[michaah]

Jain.

Ne mobile Version habe ich schon seit langem. Das ist letztlich ja nur ein Schlauch ;-) . Im Grunde bin ich dabei die Elemente die ich längst habe mit grid so anzuordnen und umzugestalten, dass es mir für den Desktop gefällt.

Was mir am meisten im Magen liegt ist eben derzeit, dass ich den Grundgedanken der Abhängigkeiten der Schriftgrößen nicht im Detail durchblicke.

Und dann den Anpassungscode für den IE zu finden, zu verstehen und hinzubekommen.

Diese Ergebnis dann für Smartfones in Schlauchform zu gießen erscheint mir mit dem was ich über grid bislang gelesen habe demgegenüber als überschaubares Problem.

[Matthias Scharwies]

Servus!

Ne mobile Version habe ich schon seit langem. Das ist letztlich ja nur ein Schlauch ;-) .

Eben; völlig richtig so!

Im Grunde bin ich dabei die Elemente die ich längst habe mit grid so anzuordnen und umzugestalten, dass es mir für den Desktop gefällt.

Was mir am meisten im Magen liegt ist eben derzeit, dass ich den Grundgedanken der Abhängigkeiten der Schriftgrößen nicht im Detail durchblicke.

Da gibt es keine Regel! Jeder Browser macht das anders; viele Nutzer stellen sich andere Größen ein!

• HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

Verzichte auf alle Pixelangaben! Verzichte auf alle Breitenangaben!

Wenn Dir dein "Schlauch" zu breit wird, ordnest du mit media queries 2 oder 3 Elemente nebeneinander. Teste, ob es in anderen Browsern auch gut aussieht - sonst pass es an!

Und dann den Anpassungscode für den IE zu finden, zu verstehen und hinzubekommen.

Gib denen doch den "Schlauch" → Inhalte sind sichtbar!

Diese Ergebnis dann für Smartfones in Schlauchform zu gießen erscheint mir mit dem was ich über grid bislang gelesen habe demgegenüber als überschaubares Problem.

Das brauchst du nicht mahr, weil der "Schlauch" ja anfangs schon da war!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@michaah

führt zoomen jedoch sehr schnell zum Zerlegen des Designs.

Das sollte bei responsivem Design nicht passieren. Beim Zoomen auf 200% sollte das Layout so aussehen wie bei halb so breitem Viewport (nur eben vergrößert).

worauf sich eine bestimmte Größenangabe bezieht: % von was?

Das hängt von der Eigenschaft ab und ist in der jeweiligen Beschreibung nachzulesen.

em bezogen auf was?

Auf die Schriftgröße des jeweiligen Elternelements. rem bezieht sich auf die Schriftgröße des Wurzelelements (html).

Weiter verkompliziert wird das für mich dadurch, dass mir nicht klar ist wann (Text-) Inhalt über eine Box hinausfließt

Wenn keine Umbruchstellen (Leerzeichen, soft hyphens, …) vorhanden sind oder wenn der Umbruch verhindert wurde.

Irgendwie ist das gerade wie: Gehen sie zurück auf Los.

Gibt’s das denn? AFAIR geht’s zurück nur bis in die Badstraße. Auf Los geht’s vorwärts, plus 4000 ¤.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!