Test zur Wochenmitte: Webseiten-Vorlage

[meltemi]

Hallo,

meine neue Webseiten-Vorlage (kostenlos) wendet sich an Menschen, die eine Website erstellen, aber nicht abhängig von Fremdanbietern (CMS, Baukastensysteme) werden wollen. Nutzerseitig sind HTML- und CSS-Grundkenntnisse hilfreich, aber keine Bedingung.

Meine Fragen:

a) Sind die im Download-Archiv enthaltenen Musterseiten auch für Menschen geeignet, die (nur) Grundkenntnisse haben? Ein lokaler Webserver ist erforderlich, weil PHP-Seiten erstellt werden.

b) Ist die Dokumentation auf der Website (Anleitungen, Tipps und Hinweise) für Nutzer sinnvoll gegliedert, verständlich und ausreichend?

Ich bedanke mich vorab bei allen, die sich für Test, Meinung und Kritik Zeit nehmen.

[Rolf B]

Hallo meltemi,

ohne hinter die Kulissen geguckt zu haben - ein Skiplink zum Inhalt ist Unsinn, wenn die Navigation im DOM hinter dem Inhalt folgt. Da wäre ein Skiplink zur Navigation sinnvoller.

Für den Rest hab ich grad keine Zeit.

Rolf

[meltemi]

Hallo Rolf,

danke.

Ich freue mich über jedes Byte, das ich einsparen kann, denn ich liebe leichte und schnelle Seiten.

Mit der Änderung warte ich aber noch. Vielleicht schreiben andere auch noch was.

[Matthias Scharwies]

Servus!

Hallo,

meine neue Webseiten-Vorlage (kostenlos) wendet sich an Menschen, die eine Website erstellen, aber nicht abhängig von Fremdanbietern (CMS, Baukastensysteme) werden wollen. Nutzerseitig sind HTML- und CSS-Grundkenntnisse hilfreich, aber keine Bedingung.

Wow, das ist ja schon ein Kompendium.

Meine Fragen:

a) Sind die im Download-Archiv enthaltenen Musterseiten auch für Menschen geeignet, die (nur) Grundkenntnisse haben? Ein lokaler Webserver ist erforderlich, weil PHP-Seiten erstellt werden.

Da geht imho die Schere auf:

• Wer mit php und htaccess hantieren will oder muss, hat mehr als nur Grundkenntnisse. Wer php kann, installiert innerhalb von 8 Minuten Wordpress und kämpft sich dann durch die Templates.
• Wer keine oder nur wenig Grundkenntnise hat, dem sind die Beschreibungen, wie z. B. hier (Hierarchische Nummerierung ab 2. Listenebene) viel zu ausführlich und zu technisch.^[1]

b) Ist die Dokumentation auf der Website (Anleitungen, Tipps und Hinweise) für Nutzer sinnvoll gegliedert, verständlich und ausreichend?

Ich würde es mehr als ausreichend, eher erschöpfend nennen. Das Durcharbeiten dauert doch bestimmt …

Interessierte Laien suchen doch etwas ready-to-use, die Verwendung von diversen Klassen würde ich weiter reduzieren.

HTML und CSS

@Rolf B hatte schon die Skiplinks angesprochen.

Mir fiel noch auf:

<li tabindex="0" class="keine-anzeige">
  <a href="#" class="kein-href" title="zur 2. Menü-Ebene: Texte erstellen">Texte erstellen: alle Infos</a>
  <ul>
    <li><a tabindex="0" href="./textstrukturierung.php" title="zur Seite Textstrukturierung">Textstrukturierung</a></li>

Ich stoße mich auch ein bisschen an den divs mit den Spalten:

Gleich im ersten Beispiel sieht man, dass sich Worttrennung und Spaltenlayout nicht vertragen.

Ich wollte daraufhin die Schriftgröße verändern und stieß auf body {font-size:18px;} Dort und in den media queries würde ich relative Maße (em) verwenden.

Auf der Seite Merkmale würde ich die Merkmals-Liste als olund nicht als Tabelle notieren.

BTW: Gelb (oder andersfarbig) markieren kannst du mit dem mark-Element.

Apropos Klassen:

Dein Code:

<div class="bquer600">
  <img src="./bilder/103-rhodos-akropolis-q-g.jpg" alt="...">
</div>
<div class="bqtxt600">
  Text zur Bildbeschreibung: ... (Bild: Gösta Thomas)
</div>

Mein Code:

<figure class="landscape">
  <img src="./bilder/103-rhodos-akropolis-q-g.jpg" alt="...">
  <figcation>
    Text zur Bildbeschreibung: ... (Bild: G...)
  </figcaption>
</figure>

Herzliche Grüße

Matthias Scharwies

---

1. → Das ist auch unser Problem bei SELFHTML, dass es für HTML eben „keinen Markt“ mehr gibt. ↩︎

[meltemi]

Hallo Matthias Scharwies,

danke für die ausführliche Antwort.

Wer mit php und htaccess hantieren will oder muss, hat mehr als nur Grundkenntnisse. Wer php kann, installiert innerhalb von 8 Minuten Wordpress

Es gibt Leute, die kein CMS verwenden wollen (zB, um nicht abhängig zu sein). Das ist meine Zielgruppe.

Wer keine oder nur wenig Grundkenntnisse hat, dem sind die Beschreibungen, wie z. B. hier (Hierarchische Nummerierung ab 2. Listenebene) viel zu ausführlich und zu technisch.

Muß ja niemand die Dokumentation lesen. Reicht aus, nur die Beispiele auf den Musterseiten zu verwenden (die sind ready-to-use). Im konkreten Fall steht ausdrücklich dabei: „Für Sie als Nutzer reicht es aus, den Listen ol die Klasse zaehler zuzuweisen.“

Wer sich aber die Zeit nimmt, die Dokumentation (bis hin zu FAQ) vollständig zu lesen, hat schon einen halben Kurs Webseiten-Entwicklung absolviert. Auch nicht verkehrt.

Mir fiel noch auf:

<li tabindex="0" class="keine-anzeige">
  <a href="#" class="kein-href" title="zur 2. Menü-Ebene: Texte erstellen">Texte erstellen: alle Infos</a>
  <ul>
    <li><a tabindex="0" href="./textstrukturierung.php" title="zur Seite Textstrukturierung">Textstrukturierung</a></li>

Mit der 2. Menü-Ebene hatte ich Probleme, erschwert durch unnötige Lighthouse-Meckerei mit 8 Punkten Abzug. Ist auf der Tipps-Seite doch ausführlich beschrieben.

Gleich im ersten Beispiel sieht man, dass sich Worttrennung und Spaltenlayout nicht vertragen.

Da bin ich anderer Meinung (bei mir im Browser sieht's übrigens genauso aus wie auf dem Bild). Aber Vorlagen-Nutzer können ja selber entscheiden, ob Spaltendarstellung oder nicht.

Auf der Seite Merkmale würde ich die Merkmals-Liste als ol und nicht als Tabelle notieren.

Mit ol wüßte ich nicht, die Kategorie-Überschriften sticky zu machen.

Zu den vorgeschlagenen mark- und figure-Elementen: Mehrere Wege führen nach Rom, und span und div sind immer noch gültige HTML-Elemente.

Durch die getätigten Suchvorgänge ist mir noch ein Darstellungsfehler in der Suchmaschine aufgefallen ;-)

Vielen Dank für Deine Zeit.

[Der Martin]

Hallo,

Gleich im ersten Beispiel sieht man, dass sich Worttrennung und Spaltenlayout nicht vertragen.

Da bin ich anderer Meinung (bei mir im Browser sieht's übrigens genauso aus wie auf dem Bild). Aber Vorlagen-Nutzer können ja selber entscheiden, ob Spaltendarstellung oder nicht.

das Problem ist nicht Spaltenlayout, sondern Silbentrennung. Silbentrennung ist ein Mittel, das man aus ästhetisch-typographischen Aspekten nur im Ausnahmefall anwenden sollte, also bei sehr langen mehrsilbigen oder zusammengesetzten Wörtern. Auf keinen Fall sollte man die Silbentrennung automatisiert dem Browser oder sonst einer Software überlassen. Ich plädiere daher dafür, die automatische Silbentrennung durch den Browser abzuschalten, und stattdessen gezielt in den Fugen langer Wörter ein ­ einzusetzen.

Das gilt übrigens auch in Textverarbeitungen. Als ich den ersten Entwurf für meinen Roman auf der Basis eines Word-Dokuments zur Ansicht bekam, war ich schockiert: Massenhaft abgetrennte Silben mit nur zwei Buchstaben. Völlig inakzeptabel. Auch da habe ich mich dann mit dem Verlag geeinigt, dass ich die komplette Aufbereitung zum PDF-Format selber mache - einschließlich einer sehr sparsam eingesetzten Silbentrennung.

Einen schönen Tag noch
 Martin

[meltemi]

Hallo Martin,

Ich plädiere daher dafür, die automatische Silbentrennung durch den Browser abzuschalten, und stattdessen gezielt in den Fugen langer Wörter ein ­ einzusetzen.

Diesem Plädoyer werde ich bestimmt nicht folgen. Vor ein paar Jahren habe ich die bedingte Silbentrennung bei Google getestet mit dem Ergebnis, daß Wörter, die durch ­ getrennt werden, nicht als Begriff erkannt werden.

Funktionalität schlägt Ästhetik! Und Webseiten (jedenfalls meine) sind keine Romane.

Wenn Du einen aktuellen Test kennst oder selbst einen aktuellen Test durchgeführt hast, der beweist, daß Google durch ­ getrennte Wortteile als einen Begriff wahrnimmt, bitte ich um Mitteilung. Dann werde ich diese Testergebnisse prüfen und ggf. meine Meinung ändern.

Hast Du vielleicht auch Antworten auf meine Eingangsfragen?

P.S. Du hast einen Roman geschrieben? Wahnsinn. Ist es ein Liebesroman oder eine Piratengeschichte? Gibt es irgendwo eine Leseprobe?

[Der Martin]

Moin,

Ich plädiere daher dafür, die automatische Silbentrennung durch den Browser abzuschalten, und stattdessen gezielt in den Fugen langer Wörter ein ­ einzusetzen.

Diesem Plädoyer werde ich bestimmt nicht folgen.

das sei dir freigestellt. Unabhängig davon habe ich in meinem Browser-Stylesheet hyphens: none !important; für alle Seiten eingestellt.

Vor ein paar Jahren habe ich die bedingte Silbentrennung bei Google getestet mit dem Ergebnis, daß Wörter, die durch ­ getrennt werden, nicht als Begriff erkannt werden.

Kann ich weder bestätigen noch abstreiten, aber es würde mich doch sehr wundern.

Du hast einen Roman geschrieben? Wahnsinn. Ist es ein Liebesroman oder eine Piratengeschichte?

Von allem ein bisschen. 😉

Gibt es irgendwo eine Leseprobe?

Holländisches Roulette

Einen schönen Tag noch
 Martin

[meltemi]

Hallo,

Du hast einen Roman geschrieben? Wahnsinn. Ist es ein Liebesroman oder eine Piratengeschichte?

Von allem ein bisschen. 😉

Gibt es irgendwo eine Leseprobe?

Holländisches Roulette

Einen schönen Tag noch
 Martin

Klingt interessant. Mal sehen, ob auch der Buchdienst meines Vertrauens das Buch liefert. Bei Amazon bestelle ich nix.

[Der Martin]

Hi,

Holländisches Roulette

Klingt interessant.

danke sehr. 😀

Mal sehen, ob auch der Buchdienst meines Vertrauens das Buch liefert.

Theoretisch müsste das auch jede Buchhandlung über die ISBN bestellen können. Kann nur sein, dass das ein paar Tage dauert, denn der Verlag lässt immer nur eine sehr kleine Auflage (<20 Stück) im Digitaldruck-Verfahren produzieren.

Bei Amazon bestelle ich nix.

Ich schon. Kann ich aber bis zu einem gewissen Grad nachvollziehen.

Einen schönen Tag noch
 Martin

[Matthias Scharwies]

Guten Morgen!

Auf der Seite Merkmale würde ich die Merkmals-Liste als ol und nicht als Tabelle notieren.

Mit ol wüßte ich nicht, die Kategorie-Überschriften sticky zu machen.

im SELF-Wiki:

• position:_sticky
  • Beispiel:CSS-sticky-h2.html

Herzliche Grüße

Matthias Scharwies

[meltemi]

Hallo

Auf der Seite Merkmale würde ich die Merkmals-Liste als ol und nicht als Tabelle notieren.

Mit ol wüßte ich nicht, die Kategorie-Überschriften sticky zu machen.

im SELF-Wiki:

• position:_sticky
  • Beispiel:CSS-sticky-h2.html

Das Beispiel scheint neu zu sein. Ich bilde mir ein, daß es vor einem halben Jahr noch nicht da war.

Wie auch immer. Jetzt laß ich's so, wie es ist, also mit Tabelle.

[Matthias Scharwies]

Servus!

im SELF-Wiki:

• position:_sticky
  • Beispiel:CSS-sticky-h2.html

Das Beispiel scheint neu zu sein. Ich bilde mir ein, daß es vor einem halben Jahr noch nicht da war.

Ja. Wir haben leider (zu) wenig Aktive.

Ich hab die beiden Beispiele heut' morgen erstellt. Es gibt aber noch andere Quellen außer SELFHTML.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Wer mit php und htaccess hantieren will oder muss, hat mehr als nur Grundkenntnisse. Wer php kann, installiert innerhalb von 8 Minuten Wordpress

Es gibt Leute, die kein CMS verwenden wollen (zB, um nicht abhängig zu sein). Das ist meine Zielgruppe.

Wer keine oder nur wenig Grundkenntnisse hat, dem sind die Beschreibungen, wie z. B. hier […] viel zu ausführlich und zu technisch.

Muß ja niemand die Dokumentation lesen. Reicht aus, nur die Beispiele auf den Musterseiten zu verwenden (die sind ready-to-use).

Ich habe bei dem ganzen Projekt so meine Zweifel. Ich habe in den letzten 15 Jahren so manches Web-Projekt betreut. Selbst in vielen CMS gibt es noch genügend HTML und grundlegenden Kram, der Anfänger verzweifeln lässt.

Ich finde dein Projekt charmant, würde aber den im SELFWiki vorhandenen Ansatz empfehlen:

• PHP/Tutorials/Templates

Im 3. Kapitel wird erklärt, wie HTML-Seiten ohne jegliches PHP den Seitentitel und den Inhalt des main-Elements umfassen. Solche HTML-Dokumente könnten auch lokal ohne lokalen Server im Browser getestet werden.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Wer wir sind</title>
  </head>
  <body>
  <!--- Inhalt hier --->
  </body>
</html>

Dort würde ich mich auf

• h1, h2, h3
• p
• ul, ol, li
• img (mit den Klassen links, rechts, landscape)
  • bzw figure, img + figcaption

beschränken.

Alles andere (auch Top-Link und Hamburger-Link) kommt in header und footer und wird dort mit PHP ermittelt.

Mit PHP baut nun die index.php aus den einzelnen Fragmenten header und footer zusammen. Dabei wird der Titel des aufgerufenen HTML-Dokuments als Seitentitel eingefügt. Der Inhalt des body komm nun ins main-Element.

Was (noch) nicht im Tutorial erklärt wird:

• aus allen HTML-Dokumenten wird nun eine Liste von URLs und Seitentiteln erstellt, aus der dann die Navigation erzeugt wird. Wie das funktioniert, wird im 2. Kapitel beschrieben: Auslagern_der_Navigation
• eine Suche in allen Seiten des Webauftritts
• eine Bildergalerie, die alle Bilder eines Ordner als thumbnail darstellt, miteinander verlinkt und dann auf Benutzerwunsch die Großansicht zeigt.

Und trotzdem muss ein Newbie dann erst mal an den header und den footer ran, um ihn feinzutunen.

Herzliche Grüße

Matthias Scharwies