Zur Navigation

Responsive Webseiten-Vorlage mit Download (Projekt-Vorstellung)

1 Käptn Blaubär

Hallo,

ich möchte hier mein neues Projekt vorstellen:
https://webseiten-vorlage.seopunkt.de/

Die responsive Webseiten-Vorlage wird auf der Website mit ausführlichen Anleitungen beschrieben. Viele technische Hinweise und SEO-Tipps sind enthalten.

Die Download-Archive (wahlweise als zip-Archiv oder als 7zip-Archiv runterzuladen) enthalten alle Musterseiten mit Beispielcodes wie zB Text-Absätze, Textumfluß neben Bild, Zitatblock, Spaltensatz, Tabellen, Listen, Akkordeon und Seiten für Bilder(galerien). Der Nutzer kann zwischen vier Farbschemata (Designs) wählen oder ein eigenes Design erstellen. Die Vorlage kann vielfältig individualisiert werden. Die Inhalte werden je Seite in PHP-Dateien gespeichert (keine Datenbank nötig).

Zielgruppe sind Menschen, die mit ihrer Website unabhängig von fremden Anbietern sein wollen, und für die deshalb kein CMS und kein Baukasten in Frage kommt. Grundkenntnisse in HTML und CSS sollten nutzerseitig vorhanden sein, PHP-Kenntnisse sind nicht erforderlich. Ein gewisser Zeitbedarf sollte eingeplant werden (nichts für Ungeduldige).

Auch für diese Website habe ich die eigene Webseiten-Vorlage verwendet. So könnt Ihr sehen, was mit der Vorlage möglich ist. Das Suchmaschinen-Script ist in den Download-Archiven enthalten.

Ich freue mich auf Meinungen und werde Fragen gerne beantworten.

17.10.2022 21:24

1 Forenmitglied fand diesen Beitrag gut

2 Lena567

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

31.10.2022 15:13

1 Forenmitglied fand diesen Beitrag gut

3 Käptn Blaubär

Hallo Lena,

vielen Dank für Deine Zeit.

toll, dass du so etwas kostenlos zur Verfügung

Vor 20 Jahren hätte man damit vielleicht Geld verdienen können. Heute dürfte die Zielgruppe für eine solche Vorlage verschwindend klein sein. Viele Webhoster bieten Wordpress auf Knopfdruck an ...

Zu Deinen Vorschlägen: Die Vorlage kann von Menschen mit entsprechenden Kenntnissen an ihre Wünsche angepaßt und weitgehend individualisiert werden.

Im Einzelnen:

bei Seiten ohne Scrollbalken springt das Layout

Und woher weiß ich, daß bei irgendeinem Besucher kein Scrollbalken angezeigt wird?

Wenn ich für alle möglichen vorkommenden Fälle Regeln erstellen würde, wäre die CSS-Datei doppelt so groß. Und genau das will ich vermeiden. Mir sind sauschnelle Seiten wichtiger als perfekte Lösungen für alle Eventualitäten.

außerdem würde ich die Zeilenhöhe der Texte erhöhen. body { line-height: 1.75; ...

Bei Absätzen wäre die Erhöhung minimal. Aber vieles andere paßt dann nicht mehr, beim Logo angefangen.

Als Font Stack würde ich folgendes verwenden: font-family: "Segoe UI", ...

Keinesfalls. Deren Schriftbild ist viel zu eng. Die anderen habe ich nicht. Ich bleibe bei meinen bewährten Schriften. Die Verdana-Macke (nur Schriftgelehrte werden sich dran stören) nehme ich in Kauf.

Blocksatz würde ich bei Smartphones nicht verwenden

Das wäre eine Überlegung wert.

Hast Du vielleicht auch Hinweise zur Didaktik der Dokumentation?

31.10.2022 21:43

4 Lena567

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

01.11.2022 14:03

5 Käptn Blaubär

Hallo Lena,

... springt das Layout, was ganz einfach durch die kleine Ergänzung html {overflow-y: scroll;} verhindert werden kann.

Deine Hartnäckigkeit hat sich gelohnt ;-) Ich hab's auf der Website ergänzt (jedoch beim body, den gab's schon als Selektor). Ergänzung im Download folgt: da warte ich, bis mindestens fünf Änderungen zusammengekommen sind.

Darüber hinaus finde ich, dass die Schriftgröße deutlich größer sein sollte.

Eine der vom Kulturbanausen verlinkten Quellen habe ich mir zu Gemüte geführt:
https://designshack.net/articles/graphics/4-reasons-why-your-body-text-should-be-bigger/

Da steht:
The standard for some time has been that 45 to 60 characters per line in a single column (this does include punctuation and spaces) is the ideal length for most readers. So, you need to think about the size of the most common browsers, the width of the column you are using and start with a size of text that falls into that range.

Und dann habe ich bei mir in ein paar (Zwei-Spalten-Layout-)Zeilen gezählt: In allen geprüften Zeilen waren zwischen 46 und 52 Zeichen. Paßt doch‽

Die anderen verlinkten Artikel werde ich mir durchlesen, wenn ich mehr Zeit habe.

Danke und Gruß

01.11.2022 22:28

1 Forenmitglied fand diesen Beitrag gut

6 Lena567

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


04.11.2022 10:05

1 Forenmitglied fand diesen Beitrag gut

7 Käptn Blaubär

Hallo Lena,

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 kann ja kaum verschiedene Schriftgrößen verwenden, je nachdem, ob ein- oder zweispaltig.

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.

Das ist auch jetzt noch Kriterium, aber bei mir wird nix bemängelt. Außer auf der Seite HTML-Seitenübersicht.

Ein Text in Verdana ist deutlich länger als ein Text in Arial ...

Ja, weil das Schriftbild breiter ist und der Text damit leichter lesbar :-)

Auch Smartphones mit einem Android-Betriebssystem gibt es kein Verdana und hier wird dann stattdessen Roboto verwendet.

Meine Tochter hat ein Android-Smartphone. Über die Schrift hat sie nicht gemeckert. Nur über meine Rechtschreibung, aber das ist ein anderes Thema.

Siehe hier: http://fontfamily.io/Verdana

Danke. Die Website kannte ich noch nicht. Habe ich gleich als Lesezeichen aufgenommen.

Kennst Du Dich mit abweichender Darstellung unter iOS aus? Oder hast Du die Möglichkeit, unter iOS zu testen (Edge und/oder Safari)?

Danke und Gruß

05.11.2022 19:49

1 Forenmitglied fand diesen Beitrag gut

8 Lena567

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

07.11.2022 13:57

... 1 Monat später ...

9 Jan

Hallo Käptn Blaubär,

Zitat von Käptn Blaubär
Vor 20 Jahren hätte man damit vielleicht Geld verdienen können. Heute dürfte die Zielgruppe für eine solche Vorlage verschwindend klein sein. Viele Webhoster bieten Wordpress auf Knopfdruck an ...

Vor 20 Jahren zählte ich auch zu dem von dir auf deiner Seite vermissten privaten Reiseseiten ;-) Die damals sehr umfangreich in Handarbeit erstellt wurden. Ist allerdings, DSGVO, seit 2018 abgeschaltet. Lieber Nr. Sicher ;-)

Ich gehöre damit zu deiner verschwindend kleinen Zielgruppe! Und deshalb ... tolle Seite! Die ich jetzt verschlingen werde!

Zu Wordpress ... habe ich mir natürlich in der Vergangenheit auch immer wieder mal angesehen, aber nie verwendet.

Jetzt wurde eine meiner ehemaligen und gut positionierten Seiten durch Wordpress ersetzt, nicht von mir ;-) Sie war den Kindern des Domaininhabers zu altbacken ;-)

Er, der Domaininhaber, hat es inzwischen bitterlich bereut! Und ich beschäftige mich deswegen nun wieder mit dieser Seite und Wordpress um etwas zu richten was die damalige Umzugs-Agentur (alles natürlich Wordpress-Profis) verhunzt haben. Und Wordpress ist grausam!

Meine damalige statische Webseite hatte knapp 2700 Dateien, die heutige WP-Seite hat bedeutend weniger Inhalt ... aber alleine knapp 19.000 Dateien ... im Plugin-Verzeichnis ;-)

Das nur mal so ... Danke für deine Arbeit an deiner Seite. Ich werde mich da sehr genau umsehen und freue mich jetzt schon darauf!

Mit freundlichen Grüßen

Jan

10.12.2022 09:05

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]