Für eine einfache Webseite habe ich mir verschiedene Frameworks angesehen, die bei der Erstellung von eben einer solchen Seite das Leben „einfach“ machen sollen. Dabei bin ich über einige Fragen gestolpert, die mich zur Lösung geführt haben: Es geht prima ohne.
Aktuelle Webseiten sind meist „Einseiter“, die zwar ein Menü haben, aber das rollt dann einfach die Seite herunter an eine bestimmte Stelle oder man rollt einfach von oben nach unten durch. Dafür buhlen diverse Frameworks um Interessenten. Alle mit dem Anspruch, dass es damit schnell und einfach ginge.
Allerdings ist das eher nicht der Fall. Das geht schon damit los, dass für das Erzeugen einer schlichten Webseite mit ein bisschen Schischi ein mehr oder minder monströser Installationsmarathon absolviert werden muss.Die einfacheren Installationen werden dann von mehr oder minder umfangreichen, aber in der Konsequenz doch nicht erschöpfenden Anleitungen flankiert.
Irgendwann war ich dann auf dem Punkt, dass ich mich gefragt habe, ob es wirklich 5-25 MB(!) Framework auf dem Server braucht, damit ich eine (!) Webseite erzeugt bekomme.
Ich habe mir dann ein bisschen CSS und ein bisschen HTML geschrieben und - tada! - schon war die Seite fertig, die bis auf ein paar Animationen, die nur mit „dicker“ JavaScript-Bibliothek realisierbar wären, mehr oder minder genauso aussieht, wie das aus dem Framework. Nur ist das Ergebnis mit weniger als 200k (inkl. aller Bilder) ein absolutes Leichtgewicht.
Es muss nichts gecached oder geparst werden. Stumpfes HTML und etwas intelligenteres CSS. Dabei kommt hemmungslos text=text zum Einsatz, das wird von allen aktuellen Browsern verstanden. Wer ältere verwendet, wird die Seite grundsätzlich sehen können, womöglich nicht ganz so schick. Aber dafür habe ich kein Verständnis, denn aktuelle Browser gibt es von allen Anbietern kostenlos.
Die Seite ist „responsive“, d.h. egal auf welchem Gerät, egal mit welchem Browser, egal wie groß das Fenster ist: Es wird immer „irgendwie schön“ angezeigt. Kein Javascript, PHP, oder sonstiges, ausschließlich HTML und CSS(3)
Das Ergebnis habe ich hier als Muster zum Anschauen abgelegt1.
Die „Hintergrundbilder“ sind ein wenig lieblos, es ging mir darum, dass sichtbar wird, dass es welche gibt.
Der „Kick“ der Seite wird sichtbar, wenn kräftig an der Fenstergröße herumgespielt wird, was unterschiedliche Bildschirmgrößen simuliert:
Die wesentlichen „Kicks“
- Die Fontgrößen werden mit „vmin“ eingestellt, die Größe ist damit abhängig von der verfügbaren Größe des Fensters
- Die Schrift-Größe wird zusätzlich abhängig von der Auflösung und der Fenstergröße über „@media“-Befehle angepasst, d.h. bei hoher Auflösung des Geräts (z.B. Mobiltelefone) oder kleinem Fenster, wird die Schrift größer gewählt, damit sie lesbar bleibt
- Es gibt ein paar einfache „Fallbacks“, die sind aber nicht getestet, so alte Browser habe ich nicht mehr
- Es kann „hingerollt“ oder „hingesprungen“ werden, die „Seiten“ sind Abschnitte (DIV) die mit einem Bild versehen werden können (bei dreien der Fall).
- Die Seite mit dem Inhalt ist handgeschmiedet mit SynWrite
1Anmerkung: Das wurde ein paar Jahre Später weiter getrieben und hatte OffSiteEdit als Ergebnis.