Überschriften besonders formatieren?

[MarkoH]

Ich lese immer wieder, wie wichtig es ist, eine gute Überschriftenhierarchie zu haben. Betrifft das nur die Hinterlegung im Quelltext als h1-h5 oder auch die Optik der Überschriften? Also sollen die einzelnen Überschriften durch Unterstreichung, andere Farben und so weiter gegeneinander abgegrenzt werden? Also h1 immer blau, h2 immer hellblau ... Oder ist das vergebliche Mühe und es kommt nur auf den Quelltext an. Bisher sind beispielsweise h2 oder h3 nur durch einen kleinen Unterschied in der Schriftgröße (2 Pixel) voneinander unterscheidbar. Sollten da immer 4 Pixel Unterschied sein, um auch optisch eine deutliche Unterscheidung zu haben?

[Arnd]

Beispiel: H1=32px,H2=24px,H3=18px,H4=16px ... auf dem Desktop.
Also die Überschriften deutlich größer als der Fließtext und die H4 nur etwas größer als der normale Text. Mobil die Überschriften deutlich kleiner wählen, sonst gibt es unschöne Umbrüche und/oder die Überschriften nehmen zu viel Platz weg.
Mobil: H1=24px,H2=20px,H3=16px,H4=14px

[nerd]

Nimm doch bootstrap oder ein anderes Framework, da sind die fonts, Abstände, Farben usw. Schon auf Lesbarkeit, Desktop und mobile optimiert.

Klar, das komplette css kann man auch selbst schreiben, nur wirds dann scheisse im Vergleich zu einem.system was schon über 10 Jahre entwickelt und auf allen möglichen Geräten getestet und verbessert wurde.

[Mµ]

Damit lädt man doch unwahrscheinlich viel Ballast mit, gar jedes Mal von einem fremden Server?

[joergowitsch]

Damit lädt man doch unwahrscheinlich viel Ballast mit, gar jedes Mal von einem fremden Server?

Zum Beispiel bei Bootstrap würde ich das CSS mit einem Minifier minimieren und auf den eigenen Server laden und von dort einbinden. Wenn das jedesmal von einem fremden Servern geladen wird, verschlechtert sich tatsächlich die Performance.

[grandmasterabc]

Also sollen die einzelnen Überschriften durch Unterstreichung, andere Farben und so weiter gegeneinander abgegrenzt werden?

Hallo zusammen!
Also Überschriften würde ich nicht direkt unterstreichen. Das sieht dann wie ein Link aus. Die User versuchen zu klicken und die Usability sinkt. Wenn es unbedignt sein muss, dann einen Zwischenraum unter der Überschrift lassen und da eine Linie ziehen. Also das ganze als CSS-Border mit ausreichend padding nach unten gestalten.
h2{
border-bottom:1px solid black;
padding-bottom:5px;
}

[nerd]

Damit lädt man doch unwahrscheinlich viel Ballast mit, gar jedes Mal von einem fremden Server?

Es gab auf der bootstrp Seite einen Konfigurator, wo man eben gezielt Komponenten auswählen kann die man braucht, womit der Footprint kleiner wird. Die files laed man dann eben bei sich hoch.
Bei korrekter Anwendung ist die Lösung trotzdem besser als custom css. In der Enterprise Anwendung auf Arbeit ist die CSS bei 12000 Zeilen oder so die keiner mehr versteht, und es gibt vie.js, bootstrap und alten jQueryUI Code auf der Seite der nur langsam weggeräumt wird.

[staticweb]

Die Tags sollten stimmen und die Überschriften müssen sich vom restlichen Text abheben. Da brauchst du kein extra Bootstrap CSS. Ändere einfach die Formatierung am vorhandenen CSS.

[arnego2]

Ich lese immer wieder, wie wichtig es ist, eine gute Überschriftenhierarchie zu haben.

Wie glaubwürdig ist denn die Autorenschaft bei den Gelesenen?
Die meisten SEO wiederholen, was sie gelesen haben, ohne sich darum zu scheren, was richtig ist und was nicht.