Responsive Webseiten-Vorlage mit Download (Projekt-Vorstellung)

Hallo Kaptn Blaubär,

habe mir dein Projekt angesehen.

Erst mal finde ich toll, dass du so etwas kostenlos zur Verfügung;
für Anfänger ist das sicherlich hilfreich und nützlich.

Ein paar Anregungen hätte ich.
Diese sind:
bei Seiten ohne Scrollbalken springt das Layout (beispielsweise wenn man auf die Seite Showcase: Nutzer-Seiten wechselt).
Daher würde ich in der CSS folgendes ergänzen:

html {
	overflow-y: scroll;
}

oder auch so:

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	overflow-y: scroll;
}

außerdem würde ich die Zeilenhöhe der Texte erhöhen.

body {
	line-height: 1.75;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Als Font Stack würde ich folgendes verwenden:

	font-family: "Segoe UI", "SF Pro Text", -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, Ubuntu, Helvetica, sans-serif;

Blocksatz würde ich bei Smartphones nicht verwenden, da hier immer wieder größere Lücken zwischen den einzelnen Wörtern auftreten.

@media screen and (max-width: 640px) {
p {
	text-align: left; 
}
}

Beste Grüße, Lena

Hallo Käptn Blaubär,

Auch wenn die Zielgruppe für dein Projekt in der heutigen Zeit wohl relativ klein ist, so wird es trotzdem Leute geben, die dein Angebot zu schätzen wissen.
Fehler in der Didaktik sind mir nicht aufgefallen, habe aber auch nicht danach gesucht.

Du hast nach Meinungen gefragt und ich habe dir meine Meinung inklusive Verbesserungsvorschlägen geschrieben.

Schaut man sich die Seite Showcase: Nutzer-Seiten auf einem großen Display an, so ist kein Scrollbalken vorhanden und beim Wechsel zu einer Seite mit mehr Inhalt und daher mit Scrollbalken springt das Layout, was ganz einfach durch die kleine Ergänzung
html {overflow-y: scroll;}
verhindert werden kann. Also ich finde das sinnvoll.

Darüber hinaus finde ich, dass die Schriftgröße deutlich größer sein sollte.
Das predigt beispielsweise Oliver von https://pimpmytype.com/, aber auch andere.
https://kulturbanause.de/links-quellen/warum-die-body-schrift-groesser-sein-sollte/
https://designshack.net/articles/graphics/4-reasons-why-your-body-text-should-be-bigger/
https://kulturbanause.de/links-quellen/wie-die-leserlichkeit-von-texten-auf-websites-verbessert-werden-kann/
https://medium.com/@xtianmiller/your-body-text-is-too-small-5e02d36dc902
im allgemeinen ist es für die Menschen angenehmer, wenn Textgröße etwas größer ist. Lässt sich leichter lesen.
Oliver empfiehlt auf Smartphones eine Schriftgröße von 16 oder 17 Pixel. Und auf größeren Displays mindestens 17 Pixel.

Vor einiger Zeit bin ich auch den folgenden Artikel gestoßen:
https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/

viele Grüße, Lena

Hallo Käptn Blaubär,

ja, die Anzahl der Zeichen pro Spalte bewegen sich im zwei Spalten-Layout in der empfohlenen Bandbreite, aber ist das Layout einspaltig, dann schaut es ganz anders aus.
Ich hatte das ganze zuerst auch nicht so streng gesehen, aber als ich dann mal zwei Beispiel-Webseiten erstellt hatte, bei der die eine Seite eine etwas größere Schriftgröße hatte, und ich dann Freunde und Bekannte gefragt hatte, was sie besser finden, so bekam ich von fast allen die Antwort, dass die größere Schrift besser ist. Nur ein paar wenige haben gemeint, dass das egal ist. Niemand bevorzugte die kleinere Schriftgröße.

Die Zeilenhöhe von beispielsweise 1,75 kann man ja auch nur auf die Texte anwenden.
Bei einer früheren Version von Google PageSpeed Insights (oder war es der Vorgänger von Google PageSpeed Insights?) Wurden auch noch andere Tests durchgeführt als aktuell und wenn in der Navigation oder im Text Links nicht genügend vertikalen Abstand zueinander hatten, dann wurde das bemängelt.
Vor allem bei Smartphones ist ein ausreichender Abstand wichtig, denn schließlich oder Smartphone mit den Fingern bedienen und nicht alle Menschen haben zierliche Finger.
Hierfür ist eine etwas größere Zeilenhöhe und auch Schriftgröße sinnvoll.

Ich habe das bezüglich dem springenden Layout noch einmal angesprochen, weil ich dieses Problem bei meiner ersten Webseite auch hatte und bei dieser Beispiel Seite gab es mehrere Seiten mit wenig Inhalt und bei diesen war kein Scrollbalken vorhanden und die Leute, denen ich meinen Entwurf gezeigt hatte, die hatten es bemängelt, dass das Layout immer wieder hin und her springt.
Zuerst hatte ich mir gedacht, dass das halt so ist, aber irgendwann begann ich zu recherchieren und stieß auf die Lösung mit overflow-y: scroll, dass dadurch automatisch auf jeder Seite ein Scrollbalken vorhanden ist, wenn auch nicht aktiv. Und das war eine deutliche Verbesserung der Website.

Bis vor etwas über einem Jahr war Verdana meine Lieblingsschrift, aber seitdem ich mich mehr Mitschriften befasst habe, verwende ich Verdana nicht mehr für Webseiten.
Ein Text in Verdana ist deutlich länger als ein Text in Arial oder einer anderen Serifenlosen System-Schrift und wenn Verdana auf einem System nicht vorhanden ist, dann wird die System-Schrift verwendet, die kleiner ist als Verdana.
Auch Smartphones mit einem Android-Betriebssystem gibt es kein Verdana und hier wird dann stattdessen Roboto verwendet. Siehe hier: http://fontfamily.io/Verdana

Hallo Käptn Blaubär,

Ich habe dir einfach geschrieben, was ich ändern würde und dies habe ich dann meist auch begründet.
Ob du davon etwas übernimmst oder nicht, das bleibt dir überlassen.

Ich denke, dass die meisten sagen würden, dass deine gewählte Schriftgröße in Ordnung ist.
Und die Leute, die deine Vorlage verwenden, auch die werden wohl die Schriftgröße so lassen, wie du sie gewählt hast und wenn jemand meint, dass das nicht passt, dann kann er sie ganz leicht an seine Bedürfnisse abändern.

Deine Vorlage finde ich prima und ich bin überzeugt davon, dass im Laufe der Zeit viele davon profitieren werden.

Beste Grüße, Lena