In eigener Sache: Seiten-Layout aktualisiert
*Seufz*
Ich habe die HTML-Darstellung des Blogs aktualisiert.
[Update und Hinweis]
Nachdem ich in der Anfangszeit des Blogs (vor 10 Jahren) kein passendes Theme gefunden habe, das mir gefällt und das das so macht, wie ich es wollte, habe ich mir 2009 ein eigenes Theme geschrieben, und seither praktisch nicht mehr verändert. Deshalb gab es dann auch keine Updates von Leuten, die Themes hübsch pflegen und aktualisieren.
Man kann ein Layout aber auch nicht ewig stehen lassen, weil sich die Browser, die HTML- und CSS-Standards und die Semantik ändern.
Das bisherige Layout beruhte auf einer Seiteneinteilung mit lauter pseudo-semantischen und verschachtelten div-Abschnitten, die per display: float links und rechts hingeklebt wurden.
War damals eben Stand der Technik.
Hat ja auch lange Jahre so funktioniert wie gewollt. Gilt heute aber als nicht mehr akzeptabel, denn
- Heute gibt es HTML5 und CSS3. Und nicht nur das: Es wird inzwischen sogar von vielen Browsern untertützt. Mehr oder weniger.
- Heute hat man andere Anforderungen an die Barrierefreiheit, dafür aber auch neue semantische Seitenelemente, die die Seitenstruktur besser darstellen, wie main, article, nav, usw. Neulich hat sich auch einer gemeldet, der Sehprobleme hat und sich die Seite von Software vorlesen lässt, und der auch von Problemen berichtet hatte, und das will ich natürlich verbessern.
- Inzwischen gibt es sehr viele Smartphones mit anderen Anforderungen als normale Bildschirme. Und man sollte sich bemühen, das durch moderne Layouts zu unterstützen, denn macht man es nicht, wird man von Google in den Suchergebnissen deutlich abgewertet.
- Leser haben mir berichtet, dass meine Seiten ganz gruselig dargestellt werden, wenn man sie in Facebook verlinkt. Facebook versucht ein preview-Bild zu erstellen und scheitert daran ganz entsetzlich. Keine Ahnung, wie sie das machen, aber ich hoffe, dass es mit neuer Seitenstruktur und strukturierten Elementen besser wird.
- Spätestens mit CSS3 sollte man sich eines sauberen Stils befleißigen, der im HTML nicht mehr das Design widerspiegelt, sondern nur noch die logische Struktur, und das Design allein dem CSS überlässt. Habe ich gemacht und alles aus dem HTML-Text rausgeworfen, was mit Seitendesign und Layout zu tun hat, und mich darauf beschränkt, die Inhalte logisch darzustellen. Und den ganzen Rest im Style Sheet zu beschreiben.
- 2009 habe ich mir die Style Sheets mit einem extra dafür selbstgeschriebenen Macroprozessor erzeugt. Inzwischen gibt’s da was standardisiertes (sass und scss), und ich habe eigentlich alles komplett neu geschrieben.
- Bisher bestanden die Seitenmenü-Boxen aus Hintergrund-Grafiken. Nun sind sie in CSS3 erzeugt.
- Bisher hatte ich zwei Style-Sheets für Bildschirm und Druck. Die sind jetzt in einem zusammengefasst (über @media)
- Ich habe mir alle Maße in Pixeln (px) verkniffen, um von Bildschirmauflösungen unabhängig zu sein, sondern alles auf die Schriftgröße (em) oder initiale Schriftgröße (rem) bezogen, damit man das im Browser an seine bevorzugte Schriftgröße anpassen kann. Mit der Schriftgröße sollte proportional alles – Boxen, Rahmen, Schatten, Abstände – wachsen oder schrumpfen, das Layout also (theoretisch) von der Auflösung unabhängig sein.
- Nachdem sich viele darin einig sind (und Recht haben), dass Arial eine misslungene Schriftart und zusammengepfuscht ist, auch wenn sie weit verbreitet ist, habe ich andere Prioritäten gesetzt.
Deshalb machen ich das Layout jetzt mit flex.
Eigentlich habe ich versucht, die Seite wenigstens halbwegs so wie vorher aussehen zu lassen. Hat mich jetzt 3 Wochenenden gekostet, war nämlich eine ziemliche Detailarbeit. Dachte schon, das wär’s und hatte einige Elemente viel schöner, als sie jetzt sind, dann aber gerade noch gemerkt, dass das nur wenige Browser so unterstützen und darstellen, wie ich mir das entwickelt hatte. Dafür habe ich gemerkt, dass das auf manchen Handys alles ganz anders aussieht und ich da noch einige veraltete proprietäre CSS-Attribute mit dazupacken muss. Und diverse Sachen gehen einfach nicht in allen Browsern. So’n Mist. Ich hatte eigentlich gehofft, dass sie sich mit HTML5 und CSS3 mal etwas stärker vereinheitlich haben. Haben sie auch so ein bisschen, aber halt nicht wirklich in der Tiefe.
Ist sicherlich noch voller kleiner Fehler und Macken, aber nachdem ich das nun schon über ein Jahr vor mir herschiebe (und jedesmals wichtigeres zu bloggen hatte), musste das jetzt eben mal endlich sein.
Ist mir jetzt klar, dass manches noch nicht so gelungen aussieht, aber ich muss jetzt erst mal auf diversen Geräten testen und dann stückchenweise verbessern. Geht jetzt aber auch, denn am alten Design war nichts mehr zu machen. Außerdem geht mir wordpress dabei ziemlich auf den Wecker.
Und nein, so richtig gefällt mir das noch nicht, aber ich kämpfe bei Design-Fragen eben auch damit, da nicht sonderlich talentiert zu sein. Aber zumindest habe ich mich jetzt mal vertieft mit neuen HTML-Elementen und neuen CSS-Methoden befasst.
Ich habe auch noch ein paar optische Verbesserungen vor, aber das dauert noch etwas.
Ich bitte deshalb um Hinweis, falls irgendwas irgendwo gar nicht funktioniert oder zu kaputt aussieht.
Update: Ich hatte die viewport-Einstellungen im Header noch vergessen.
Update und Hinweis: Viele Leute schreiben mir gerade und schicken mir Screenshots, dass die Menüs oberhalb und nicht neben dem Text erscheinen.
Äh, that’s not a bug, that’s a feature. Das ist ja gerade der Witz an der flex-Darstellung in HTML5, dass sie Elemente übereinander anordnet, wenn sie nicht nebeneinander passsen, weil der Bildschirm nicht breit genug ist.
Ich kann mir allerdings noch überlegen, inwieweit ich ein schrumpfen der beiden Spalten (Haupttext und Seitenmenü) zulasse.
Bitte, die, bei denen es übereinander statt nebeneinander steht, mal probieren, die Standard-Schriftgröße zu verringern (Alt-Minus oder sowas).