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. Weiterlesen →
