Stylingfehler und Geräteauflösungen

springers54 commented 7 years ago

setzt #10 fort, hier war noch offen, dass sich im Moment die H3 und H2 Überschriften so gut wie nicht mehr unterscheiden

springers54 commented 7 years ago

Kannst du nach den Größen H2 und H3 bitte nochmal schauen?

joergsteinhauer commented 7 years ago

H2 und H3 unterscheiden sich fast gar nicht mehr, warum ist das so? Früher war mal die H2 1,75 em und die H3 1,5 em. Das ist mit deinen Änderungen jetzt nicht mehr so, so dass die H3 jetzt 1,625 em hat und sich optisch kaum noch von einer H2 unterscheidet.

Es gibt wohl einen Unterschied zwischen H2 und H3 - nämlich 1.75em und 1.625em. Ich sehe da kein Problem. Wenns doch gewünscht ist, die Größenunterschiede deutlicher zu machen, muss ich noch komplett neu ran. Das würde aber bedeuten, das die H1/H2/H3 größer werden, weil wir bei 1em anfangen (für H6) und sich jeder H-Titel entsprechend vergrößern muss. Zudem gibt es für jeden H-Titel zwei größen - mobil (kleiner) und desktop (größer), zB.:

H4: mobil - 1.25em /// desktop - 1.375em
H2: mobil - 1.625em /// desktop - 1.75em

springers54 commented 7 years ago

Ich habe eben mal auf der Testseite mit den Überschriften probiert und ich denke, es würde ausreichen, wenn wir die H3 von 1.625em auf 1.6em bringen. Dann sieht man optisch mehr Unterschied und wir fassen nicht alles an. Das würde ich ungern tun, auch nicht die H1-H3 größer machen.

So würde es auf der Testseite mit der Änderung aussehen:

joergsteinhauer commented 7 years ago

Das wird so nicht ganz gehen - ich habe schon anfangs kurz erklärt, wie das mit den EM-Stufen funktioniert: die Abstufung geht in 0.125 Schritten. Dies sorgt dafür, dass beim rendering keine halbe Pixeln erzeugt werden UND vor allem, dass man im Falle einer unterschiedlichen Verschachtelung immer auf einen gemeinsamen Nenner rauskommt.... schwerz zu erklären, aber ich versichere dir, dass das so seine Richtigkeit hat. Ich empfehle auf keinen Fall von diesen 0.125 Schritten abzuweichen.

springers54 commented 7 years ago

Welche andere Alternative gibt es, die möglichst einfach ist und wenig Änderungen nach sich zieht?

joergsteinhauer commented 7 years ago

es gibt hier keine andere Alternative, nur die:

Fließtext = 1em H6 = mobil: 1em/fett, desktop: 1.125em/fett H5 = mobil: 1.125em/fett, desktop: 1.25em/fett H4 = mobil: 1.25em/fett, desktop: 1.375em/fett H3 = mobil: 1.375em, desktop: 1.5em H2 = mobil: 1.5em, desktop: 1.625em H1 = mobil: 1.625em, desktop: 1.75em

Hier sidn die Schritte eben 0.125em. Wenn es zu wenig Unterschied ist, müsste man 0.25em machen:

Fließtext = 1em H6 = mobil: 1em/fett, desktop: 1.125em/fett H5 = mobil: 1.25em/fett, desktop: 1.375em/fett H4 = mobil: 1.5em/fett, desktop: 1.625em/fett H3 = mobil: 1.75em, desktop: 1.875em H2 = mobil: 2em, desktop: 2.125em H1 = mobil: 2.25em, desktop: 2.375em

springers54 commented 7 years ago

So richtig verstehe ich es immer noch nicht. An der Testseite mit Überschriften habe ich unsere aktuellen Überschriften auf Desktop verglichen

Fließtext = 1em H6 = mobil: 1em/fett, desktop: 1.125em/fett real 1 em fett H5 = mobil: 1.125em/fett, desktop: 1.25em/fett real 1,25 em H4 = mobil: 1.25em/fett, desktop: 1.375em/fett real 1,375 em H3 = mobil: 1.375em, desktop: 1.5em real 1,625 em H2 = mobil: 1.5em, desktop: 1.625em real 1,75 em H1 = mobil: 1.625em, desktop: 1.75em real 2 em

Das ermittele ich, wenn ich mit Element untersuchen auf die Seite gehe. Nach deinen Vorgaben stimmen dann die H6, H3, H2 und H1 nicht. Ich will jetzt auch nichts durcheinander bringen, wie gesagt, mir war der Unterschied zwischen H2 und H3 zu klein.

Weiterhin ist mir aufgefallen, dass unser normaler Fließtext nicht 1em ist, sondern 1rem. Was das heißt, weiß ich nicht, aber wenn man das r wegnimmt, dann wird der Text kleiner

So sieht der Text aus, wenn man nichts verändert.

Interessanterweise ist 1rem 16px und 1em 14px

Ich habe jetzt nur die Desktop-Version betrachtet, nicht die mobilen Dinge.

joergsteinhauer commented 7 years ago

Ich muss mich berichtigen, wir haben nicht 2 unterschiedliche Größen, sondern 3. Ich würde die nennen: mobil tablet desktop

Je nach Bildschirmgröße gibt es eben 3 Abstufungen, das macht so Sinn, sonst ist der Sprung von "ganz klein" zu "ganz groß" zu gewaltig. Mit 3 Abstufungen schafft man eine angenehme Schriftgröße bei jeder möglichen Bildschirmgröße. Zumindest gilt es für H1-H3.

Und nun nochmal zum IST-Zustand:

Fließtext = 1rem H6 = mobil/tablet/desktop: 1em fett H5 = mobil: 1.125em, tablet/desktop: 1.25em H4 = mobil: 1.25em, tablet/desktop: 1.375em H3 = mobil: 1.375em, tablet: 1.5em, desktop: 1.625em H2 = mobil: 1.5em, tablet: 1.625em, desktop: 1.75em H1 = mobil: 1.75em, tablet: 1.875em, desktop: 2em

Wie du siehst, ist es alles nicht konsistent, mal ist die Abstufung da, mal nicht (vor allem H6-H4). Das kam daher, dass ich für die kleineren H's keinen Unterschied mehr machen konnte im Vergleich zum Fließtext. Das finde ich nicht optimal, würde ich anpassen. Da gibts nur eine Lösung: ausgehen vom Fließtext vergrößern sich jede der H's dann entsprechend nach "oben". Und zwar für jede der 3 Abstufungen.

Das würde bedeuten (SOLL-Zustand 1):

Fließtext = 1rem H6 = mobil: 1em fett, tablet: 1.125em fett, desktop: 1.25em fett H5 = mobil: 1.125em fett, tablet: 1.25em fett, desktop: 1.375em fett H4 = mobil: 1.25em, tablet: 1.375em, desktop: 1.5em H3 = mobil: 1.375em, tablet: 1.5em, desktop: 1.625em H2 = mobil: 1.5em, tablet: 1.625em, desktop: 1.75em H1 = mobil: 1.75em, tablet: 1.875em, desktop: 2em

Hier bleiben aber die Stufen bei 0.125em und das gefällt dir ja noch nicht. Also müsste man die Stufen auf 0.25em erhöhen, zumindest für die H1-H3, das könnte dann so aussehen:

Das würde bedeuten (SOLL-Zustand 2):

Fließtext = 1rem H6 = mobil: 1em fett, tablet: 1.125em fett, desktop: 1.25em fett H5 = mobil: 1.125em fett, tablet: 1.25em fett, desktop: 1.375em fett H4 = mobil: 1.25em, tablet: 1.375em, desktop: 1.5em H3 = mobil: 1.375em, tablet: 1.5em, desktop: 1.625em H2 = mobil: 1.625em, tablet: 1.75em, desktop: 1.875em H1 = mobil: 1.875em, tablet: 2em, desktop: 2.125em

Sag mir also bitte, welche Soll Version du haben willst - 1 oder 2?

Nun zum Unterschied zwischen REM und EM:

im HTML hat man im root (also in der Wurzel, also im body-Tag) imerm eine Größe definiert. Die meisten Browser haben die Grundgröße von 16px. Wenn man also im body-Tag keine Größe definiert, ist die Ausgangsgröße 16px. Wenn man aber nun eine andere Größe definiert, z.B. 20px, dann ist es eben so, z.B. body {font-size:20px}
für responsive Layouts nimmt man aber EM oder REM statt PX, da EM und REM elastische Größenangaben sind
daher ist es korrekt, immer mit EM statt PX Werten zu arbeiten. So definiert man z.b. auch im body die Schriftgröße: body {font-size:1em}, das bedeutet dann auch, dass die Grundgröße 16px ist. Denn 1em besagt hier, dass es eben die 16px als Ausgangsgröße nimmt
Funktionsweise von EM: EM Werte sind vererbbar. Angenommen man definiert body {font-size:1em}, in einem p-Tag dann eine font-size:2em. Der p-Tag hat wiederum einen strong-Tag und dieser hat font-size:0.5em, so ist dann die Schriftgröße im strong-Tag 16px. Die Rechnung wäre: 16 x 2 x 0.5 = 16
Funktionsweise von REM: REM Werte sind zwar genau wie EM elastisch, aber sie sind imemr zum _root_m also dem body-Tag, relativ. Angenommen man definiert body {font-size:1rem}, in einem p-Tag dann eine font-size:2rem. Der p-Tag hat wiederum einen strong-Tag und dieser hat font-size:0.5rem, so ist dann die Schriftgröße im strong-Tag 8px. Die Rechnung wäre: 16 x 0.5 = 8
nun haben wir im Projekt das Problem, dass die Ausgangsgröße in der bootstrap.css mit 14px definiert ist. Das soll auch so bleiben, denn würde ich diesen Wert mit EM überschreiben, würden sich alle viele andere Elemente vergrößern/verkleinern. Und zwar nur die, deren Größenangaben mit EM angegeben sind (dazu zählt nicht nur font-size, sondern auch Breiten Abstände etc.). Also lassen wir diese 14px wie sie sind
damit wir aber bei allen Fließtexten einen elastischen Wert haben, benutze ich REM, weil man hier immer auf den root referenziert, d.h. die evtl. dazwsichen liegenden EM Größen haben keine negative Auswirkung.
bei den H's benutze ich z.Z. noch EM Werte, aber auch hier könnte man auf REM umsteigen

springers54 commented 7 years ago

Man, das ist ja alles mächtig kompliziert.

Also, ich habe über alles nochmal nachgedacht und möchte pragmatisch folgenden Vorschlag machen, auch wenn der nicht wissenschaftlich korrekt ist.

Wir sollten möglichst wenig ändern, weil alles immer neue Probleme nach sich zieht 2, Mir war nur der Unterschied zwischen H2 und H3 zu gering, also quasi die H3 zu groß.
Ich werden maximal 4 Ebenen von Überschriften nutzen, bisher waren es auf meinen Seiten nur 3, ich brauche also keine H5 und H6, mir ist auch wurscht, wie die aussehen, die können sogar vollkommen gleich gestyled sein und in der Größe es Textes in Fettschrift.
H1 und H2 sollen nicht größer werden, ich finde die ohnehin schon extrem groß
Nach Google müssen alle Ebenen von oben nach unten vorhanden sein, ansonsten ist es kein gutes Layout, also kann ich nicht auf eine H2 eine H4 folgen lassen, was stylingmäßig für mich stimmen würde.

Ich könnte auch damit leben, dass du mir, wenn du meine H3 und H4 nicht anpassen willst, eine Pseudoklasse schaffst. Analog zu <p class="title-h3"> eine <h3 class="title-h4"> Mir wäre es aber lieber, wir streichen die H5 und H6 und passen die H4 und H3 harmonisch an.

joergsteinhauer commented 7 years ago

Ja, das ist alles nicht einfach ;) Dabei ist es nicht unbedingt das schwierigste im CSS/HTML... aber egal, ich hoffe die ganz komplexen Sachen werden heir nicht aufkreuzen.

Na das ist doch ein Plan. Ich style H6 und H5 gleich (1em und fett).

Für die H4-H1 gilt dann folgendes:

H4 = mobil: 1.125em, tablet: 1.25em, desktop: 1.375em H3 = mobil: 1.25em, tablet: 1.375em, desktop: 1.5em H2 = mobil: 1.5em, tablet: 1.625em, desktop: 1.75em H1 = mobil: 1.75em, tablet: 1.875em, desktop: 2em

Ja, die H's müssen immer korrekt nacheinander folgen, da darf keine H dazwischen fehlen. Das ist SEO.

Pseudoklassen sind hier nicht unbedingt hilfreich, du wirst doch sonst nicht fertig, wenn du die Klassen überall manuell einfügen müsstest.

springers54 commented 7 years ago

Ich weiß nicht, ob du es schon umgesetzt hast, aber wirken tut es noch nicht. http://zen-reiki.de/testseite-mit-ueberschriften-standardtemplate/ :root .title-h3, :root h3 { font-size: 1.625em; } :root .title-h3, :root h3 { font-size: 1.5em;

root-css überschreibt die Einstellung wieder

joergsteinhauer commented 7 years ago

Habe es noch nicht angepasst, mache demnächst

joergsteinhauer commented 7 years ago

erledigt

springers54 commented 7 years ago

ja, das sieht auf der Testseite gut aus. Mobil sollte man vielleicht bei p doch auf em und nicht auf rem gehen bei fontsize und high. Original mit rem

Geändert auf em

joergsteinhauer commented 7 years ago

Nein, mir EM können wir nicht arbeite, es muss bei REM bleiben. Denn sonst würden sich die Schriftgrößen teilweise nicht identisch sein, je nach dem, wie verschachtelt das HTML ist und wie da andere EM-Werte dazwischen funken. Genau dieses Problem hatten wir schon und ich habe es mit REM gelöst.

Was passt noch nicht? Schrift und Zeilenabstand zu groß? Zeilenabstand kann ich etwas verringern, aber bei Schriftgröße wirds nicht gehen. Die nächste Stufe unter 1rem wäre 0.875rem und das ist zu klein, finde ich. M.m.n. ist font-size: 1rem ok, man muss ja die Schrift gut lesen können.

springers54 commented 7 years ago

ok, dann lass es so. Ich habe es mir gerade auf dem Handy angesehen, da wirkt die Schrift auch kleiner als in der Bildschirmsimulation. Und da sollte man sie nicht kleiner machen und die Abstände auch nicht. Ich schaue es mir heute Abend nochmal auf dem Tablett an. Zwar sind bei H3 fast keine Unterschiede mehr zu sehen gegenüber dem Text auf dem Handy, aber ich denke, die Seite funktioniert trotzdem.

springers54 commented 7 years ago

# Geräteauflösung Handy: Displaydiagonale 4,7 Zoll Displayauflösung 1920 x 1080 Pixel

springers54 commented 7 years ago

Hat sich eigentlich an den Überschriften etwas geändert? Ich sehe jetzt bei der H3 auf dem Handy gar keine Unterscheidung mehr zum Text, nur eben ein bisschen Abstand. Kann man da nicht wenigstens den Text etwas fetter machen? grafik

joergsteinhauer commented 7 years ago

Bitte URL angeben und Info zum Gerät inkl. equivalenter Auflösung im Desktop-Browser.

Ich sehe sehr wohl einen Unterschied: https://zen-reiki.de/lehrer/sylvia-springer/ 2017-05-16 14_43_13-zen-reiki-lehrer_ sylvia springer_ leiterin der zen-reki-internetschule

springers54 commented 7 years ago

Geräteauflösung steht in dieser Issue URL: https://zen-reiki.de/internetschule/sylvia-springer-reiki-weg/

springers54 / reiki