Mein erstes Grid-Layout

CSS Grid gilt nicht umsonst als kompliziert. Das liegt nicht an einer schwer verständlichen Syntax, sondern daran, dass das Grid-Modul sehr umfangreich ist.

Wie bei anderen CSS-Techniken ist es für die ersten Schritte allerdings nicht nötig, alles zu wissen, was mit CSS Grid möglich ist. Das Meistern der Technik kommt dann mit der Übung.

In diesem Blogbeitrag möchte ich Dich bei Deinen ersten Versuchen mit CSS Grid begleiten. Weiterlesen →

Selfhtml und browser-statistik.de

Die Einführung der DSGVO am 25.05.2018 ist für viele Anlass, ihre eigenen Webseiten zu überprüfen, wie sie Daten verarbeiten und weitergeben. Selfhtml hatte, um eine direkt einsehbare Besucherstatistik anbieten zu können, einen „Zählpixel“ eingebaut. Dies war eine 1x1px große transparente Grafik. Jeder Seitenaufruf bei uns sendete auch einen Request an browser-statistik.de, die diese Grafik auf ihren Servern hosteten. Diese Requests wurden dann anonymisiert und für Statistiken über Zugriffszahlen und verwendete Browser ausgewertet. Da nach der DSGVO auch IP-Adressen bereits Daten darstellen, deren Datenschutz wir sicherstellen müssen, haben wir diesen Zählpixel zum 13.05.2018 entfernt.

Trotzdem lohnt ein Rückblick auf die erhobenen Statistiken:
Weiterlesen →

Layoutvorlagen im neuen Design

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 →

Seite 2 von 3712345...