Selfhtml wurde in Emails und im Forum immer wieder gefragt, wo man gute Beispielseiten oder Vorlagen (neudeutsch: Templates) finden könne. 1999 bot Selfhtml einige Vorlagen an, die den damaligen Stand der Technik (Tabellenlayout, Hintergrundbilder, etc. ) darstellten.

2013 wurden im Rahmen eines Wettbewerbs von designenlassen.de neue Designs für unsere Nutzer erstellt. Sie wurden von Selfhtml nach Grundsätzen guten Webdesigns bearbeitet und im Wiki veröffentlicht. Besondere Betonung lag auf der Verwendung der damals neuen HTML5-Elemente und einem responsivem Layout.

Die Vorlagen sind weitgehend selbst erklärend, es wird aber auch auf weiterführende Tutorials im Wiki hingewiesen. Damit es nicht nur gute und spektakuläre Landing-Pages gibt, erhielten die Vorlagen auch Beispiele für Inhaltsseiten und ein Impressum.

Allerdings ist seit 2013 schon wieder eine kleine Ewigkeit vergangen. 2013 wurden die einzelnen Elemente mit float positioniert, was einen gelegentlichen Einsatz eines clearfix erforderte. Flexbox hätte zu diesem Zeitpunkt für den IE10 den vendor-prefix -ms- und für IE6-IE9 umfangreiche Fallbacks erfordert. Heute gibt es mit Flexbox und Grid Layout mächtigere Alternativen, die dazu noch einfacher zu handhaben sind. Dies erforderte eine erneute Überarbeitung.

CSS-Garten

Den zehn Layouts aus dem Wettbewerb wurden eine eigene Vorlage vorangestellt. Bei ihr steht zuerst das einfache, valide und übersichtliche HTML5-Markup im Vordergrund, das dann beliebig gestaltet werden kann. Um dies zu demonstrieren, habe ich die Idee des CSS-Gartens übernommen, die zeigt, dass das Design einer Seite nach dem Paradigma der Trennung von Inhalt und Präsentation nichts mit dem Inhalt zu tun hat.

Ein einziges, sorgfältig erstelltes Markup-Template kann eine praktisch unbegrenzte Anzahl von Designanforderungen befriedigen. Erfüllt ein Template die nötigen Vorausetzungen, kann das Design ohne Anpassungen an das Markup beliebig verändert werden, sofern es keine deutlichen Änderungen an der Struktur der Informationen gibt, die im Dokument erhalten sind. David Shea

Less is more! - Weniger ist mehr!

Bei der Überarbeitung sind mir einige Dinge aufgefallen, die ich als "Best-Practice-Tipps weitergeben will:

keine Normalisierungen und feste Größen

Die 2013er Vorlagen hatte viele CSS-Festlegungen, in denen die Schriftgröße und dann konsequenterweise auch die Linienhöhe und die Abstände festgelegt wurden.

Seien Sie flexibel und überlassen Sie dem Nutzer, wie groß er die Schrift eingestellt haben will!

Responsivität

Wenn der Benutzer die Schriftgröße frei wählen kann, sollten auch die einzelnen Seitenelemente auf feste Größen verzichten und sich flexibel an den verfügbaren Platz anpassen. Mit Grid Layout sparen Sie sich viele Festlegungen und oft sind sogar media queries nicht mehr nötig.

Das Template Design06 verwendet z.B. folgenden Regelsatz, mit dem die Webseite je nach Platz mit unterschiedlich vielen, mindestens 20em breiten Elementen gefüllt wird. Bei kleineren Viewports werden diese unter-, bei größeren nebeneinander dargestellt:

main {

  display: grid;

  grid-gap: 

 0rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

Zugänglichkeit

War Responsivität 2013 ein ''nice-to-have'', sind 2018 neben der Zugänglichkeit durch mobile Geräte, die die Zahl der Desktop PCs bereits überholt haben, auch die Tastaturzugänglichkeit für Nutzer von Screenreadern ein ''must-have'', dass mit einigen Handgriffen zu erreichen ist.

a 

 {
  color: #09c;
}

a:hover,
a:focus {
  background: #e6f2f7;
}

Übrigens, Links sollte auch als solche erkennbar sein!

Wenn Sie Links schwarz einfärben und mit text-decoration:none den Unterstrich entfernen, bedeutet dies nur ein Ärgernis für die Benutzer Ihrer Webseite.

→ HTML/Tutorials/Links richtig gestalten

Ausblick

Als wir Ende 2017 die Links auf die mitterweile veralteten Entwürfe entfernten, wurden wir überrascht, dass jeden Tag 2-5 Email-Anfragen nach den Entwürfen kamen. Leider hatte es jetzt über ein halbes Jahr gedauert, bis diese wieder aktuell und vorzeigbar waren.

Es bleibt zu hoffen, dass zu den bestehenden noch weitere Layoutvorlagen hinzukommen und diese in ein paar Jahren wieder angepasst werden.

Siehe auch

• Selfhtml-Wiki: CSS/fertige Layouts
• Neue Layout-Templates für unsere Nutzer (22.02.2013)
• Weihnachtsbrief 2013 (22.12.2013)