netzrose-theme

Dieses Theme ist eines, dem man erst auf den zweiten Blick oder noch später etwas abgewinnen kann. Je länger ich damit arbeite, desto angenehmer empfinde ich es inzwischen selbst.

Browser Tests

Vorab wird sicher interessieren, wie sich das netzrose-theme für Jaap G Karssenbergs ZIM mit Browsern verträgt. Dazu habe ich Diverse getestet. Die Liste ist nicht vollständig.

Browser, die das Design korrekt darstellen, sind: Firefox, Nightly, Brave, Waterfox, GNU IceCat, Tor, sowie Chromium, Opera, Epiphany und Vivaldi.

Browser, bei denen die Navigationsleiste nicht korrekt seitlich angezeigt wird: QupZilla und Midori. Arora und Dillo, sowie Pale Moon.

Erklärung: Von Browsern wird erwartet, dass sie mit Grid (eine CSS Layout Spezifikation) umgehen können. Das ist notwendig, weil man anders kaum eine Webseite anfertigen kann, die vom kleinsten bis zum größten Bildschirm ordentlich angezeigt wird. Grid ist wirklich nichts Neues, wie man an den Kommentaren bei den Kulturbanausen (2013) sehen kann.

Tipp für Anpassungen: Wer den Firefox verwendet und das Add-on Web Developer als Zusatzleiste installiert hat, kann nebenher beim Anpassen bequem die Darstellung auf kleineren Bildschirmen immer mal wieder kontrollieren: Leiste -> Größe ändern -> Angepasste Layouts anzeigen.

Proxy-Test

Nicht nur der Browser ist für die korrekte Darstellung entscheidend, sondern auch ein eventuell vorgeschalteter Proxy.
So gibt es "Suchmaschinen", die mit mehr Datenschutz dienen möchten und "anonymes Öffnen" der gelisteten Suchergebnisse anbieten, unabhängig davon, ob dies nötig ist oder nicht(!).

  • proxy.suma-ev.de für MetaGer hat keine Probleme, das netzrose-theme korrekt darzustellen.
  • ixquick-proxy.com für Startpage zerschießt das Layout.


NU Html Checker


Der NU HTML-Cecker bei w3.org meckert nicht, solange ich - wie beispielsweise hier auf dieser Seite - bestimmte Formatierungen in ZIM weg lasse. Siehe Wünsche.

W3C CSS Validierungsdienst


W3C CSS Level3 valide

Das CSS auf Level 3 passt laut W3C CSS Validation Service.
So nett beglückwünscht, könnte ich nun den Button einbauen.
Aber:

Datenschutz

Beim Vorschlag des W3C, wie man ihren Button einbaut, würde ein Link mit referer gesetzt.
Bequem für User, sich selbst von der Validität zu überzeugen. Gleichzeitig verraten User, woher sie kommen. Genau das habe ich per Header in der .htaccess extra ausgeschlossen.

Wenn man dann diesen Validator, der mit Unterstützung der Mozilla Foundation entwickelt wurde, über Mozillas Observatory testet,
bekommt der Validator ein C,
während netzrose.de ein A+ hat.

Natürlich ließe sich der W3C-Link anpassen. Aber möchte man User guten Gewissens dort hin schicken?
Dort hin, wo der Kopierschutz EME (Encrypted Media Extensions) im Browser zum Standard erklärt wurde und sich deshalb die Electronic Frontier Foundation verabschiedet hat?

Mehr zum Thema Überprüfungen -> weiterlesen ...

16:9 freundlich

Bei den meisten Webseiten hat man das Gefühl, eigentlich den Monitor hochkant drehen zu müssen.

Anforderung: Platz auf dem Desktop-Monitor voll ausnutzen. Trotzdem muss man den Inhalt auch auf kleineren Displays ansehen können.

Begründung: Platzverschwendung zwingt zu unnötigem Scrollen. Man kann den Informationsgehalt schlechter auf einen Blick einschätzen.

Lösung: 4spaltiges Layout plus seitlicher Navigation.
Schmalere Bildschirme bekommen weniger Spalten. Aber die Navigation bleibt seitlich.
Nur der schmalste Bildschirm hat das Menü oben und keine Netzrose darüber.

Zunächst hatte ich den Fließtext in Blockabsätze formatiert. Das sah mir dann aber zu streng aus.

CSS Einbinden

Ressourcenschonend und datenschutzfreundlich wird eine externe stylesheet.css in die netzrose-theme.html eingebunden, damit ihr Inhalt nicht bei jeder Notizbuchseite erneut geladen werden muss.

Schlechte Satz Kontrolle

optisch mangelhaft: Leider kann man Schusterjungen (orphan) und Hurenkindern (windows) nicht am Bildschirm vorbeugen, sondern nur beim Ausdruck.

Dass eine Überschrift nicht unglücklich unten sitzt, wäre natürlich auch sinnvoll, aber die Anweisung
break-after: avoid;
wird leider auch nicht unterstützt.

Anfangs hatten "Webmaster" sich beholfen mit Tabellen.
Tabellen sind aber dafür nicht da.
Text in Tabellen ist eine unnötige Barriere für Blinde und Sehbehinderte.
Heute kann man tabellenähnliche Darstellung per CSS nachbilden, damit wäre das Problem ja gelöst.

Aber damals gab es etwa drei Browser und ein Seitenverhältnis für den Monitor.
Heute gibt es unendlich viele verschiedene Geräte, sodass es extrem aufwändig wäre, manuell jeden Text gleichmäßig in unterschiedlich viele Spalten aufzuteilen.

Wir sind für einen sauberen Satz des Inhalts darauf angewiesen, dass Anweisungen nicht nur beim Ausdruck, sondern auch für die Darstellung am Screen funktionieren.

Um zum Nachdenken anzuregen, ist das netzrose-theme trotz dieser Mängel mehrspaltig angelegt, plus seitlichem Menü.

Icons

Da heutzutage sowieso im Head als Zeichenkodierung UTF-8 genutzt wird, bietet sich an, einfach UTF-8 Sonderzeichen per c&p zu nutzen.

Farbkonzept

Das Farbkonzept orientiert sich, wer hätte das gedacht - an der Netzrose.
Das Schwarz der Navigation korrespondiert mit der Hardware des breiten Monitors. Navigation ist kein Inhalt, sondern dessen Steuerung. Ähnlich einem Cover darf sie optisch "was her machen".

Der Hintergrund für den Inhalt beginnt links oben mit einer ruhigen Farbe, die etwa ab der Mitte ins noch besser lesbare Weiß übergeht, um Ermüdung vorzubeugen.

Von knallroten Links, bin ich kein Freund. Links sind Querverweise zur Vertiefung. Ich meine, sie sollen den Leser aber nicht drängen, ihnen zu folgen. Daher verwende ich nur dezent andere Farben, als für den Fließtext. Das ist leider nicht sonderlich barrierearm.
Um Links als solche kenntlich zu machen, bekamen sie eine unterstreichende Linie, allerdings in schwarz. Mehr dazu siehe SelfHtml.

Überschriften

Für die 1. Überschrift konnte ich mir Schatten gut vorstellen. Gesehen bei Stefan Münz
Habe die Schrift aber insgesamt leichter gemacht, damit die Icons (Sonderzeichen) zu erkennen sind, wenn man welche dort einfügen möchte.

H2 bekam eine gestrichelte Linie oben drüber. Damit lässt sich der Fließtext optisch sinnvoll unterbrechen. Hilfreich ist das beispielsweise auch, um unten die Backlinks vom eigentlichen Artikel abzugrenzen, ebenso ein möglicher Anhang wie z.B. hier.

Die Überschriften h3 bis h6 sind durch font-size: medium; auf eine einheitliche Größe geschrumpft. Die Hierarchie in Größe und Abstand ab h3 ist sonst sowieso mit dem Auge kaum zu unterscheiden. Man macht(e) das vielleicht eher für die Technik (Suchmaschinen)?
Wer eine saubere Gliederung möchte, kann ja entsprechend durchnummerieren.

Wichtig

Bei den Seitennamen/Überschriften darauf achten, dass sie möglichst kurz sind, sonst geht das seitliche Menü sehr in die Breite und ist auf kleineren Bildschirmen schlechter darstellbar.
Sind Begriffe in Zwischenüberschriften zu lang, schlüpfen die Zeilenenden der Textspalte unter die Navigation.

Bilder und Videos

Bitteschön: goldgelber Rosinenkuchen nebst einer Tasse schaumbedeckten Kaffees auf einem quadratischen Tablett-Teller.

Kaffee und Rosinenkuchen

Wer das Bild nicht sehen kann (z.B. im Newsreader), weiß, was zu sehen wäre.

Wer diese Webseite auf kleinem Bildschirm mit geringer Leitungskapazität aufruft, wird nicht böse, da nicht nur die Darstellung, sondern auch die Datei wirklich klein ist.

Das Bild bräuchte nicht mal monochrom sein. So habe ich unter Hardware und bei den Hörspielen beispielsweise farbige Illustrationen eingebunden. Da man auf ihnen alles gut sieht, wird dort keine Vergrößerung angeboten.
Die Farbnennung hier (goldgelb) könnte natürlich gezielt einen Klickreflex begünstigen.

Von Klein zu Groß

Das Prinzip gilt sowohl für Bilder, wie auch für Videos.
Es wird zunächst im Inhalt prinzipiell nur ein Thumbnail eingebunden.
Bilder (Thumbnail) binde ich in einer Breite von 350 px ein, damit sie gut in die Spalten passen.

Extradatei Großansicht

Das Thumbnail ruft eine Großansicht für Bilder und Videos auf.
D.h. es wird nicht einfach auf die Bilddatei direkt verlinkt, sondern auf eine HTML-Datei, in die das Bild oder das Video eingebunden sind.
Unter der Darstellung wird ein Button angeboten.
Wenn User in eine Seite vertieft sind und plötzlich auf einem Bild landen, kann sonst passieren, dass sie plötzlich nicht mehr weiter wissen. Ihnen kann entfallen sein, dass ihr Browser ihnen solch eine Taste anbietet. Wendet man sich dem Browser zu, wendet man sich vom Inhalt ab. Ob man wieder einsteigen wird, ist nicht gesichert.
Für die HTML-Dateien liegen im Download bereits Musterdateien bei, so dass man sie schnell umbenennen kann und nur die Video- oder Bilderdatei eintragen muss.

Bilder

Bis hier hin ist dafür gesorgt, dass geringere Übertragungsraten nicht unnötiger Last ausgesetzt sind.

Die größere Anzeige hat eine Größenbegrenzung. Ich bevorzuge z.B. 800 px Breite.
Denn hier dienen Bilder eher als zusätzliche Illustration und sind nicht das Zentrum, wie z.B. bei Fotografen.
So brauche ich keine allzu großen Bilder auf dem Server speichern.

Videos

Wer mit kleinem Bildschirm und geringer Leistungskapazität unterwegs ist, würde sich bedanken, im Fließtext auch Videos mit laden zu müssen.
Anderen macht es vielleicht nicht ganz so viel aus. Aber im Grunde muss ein solcher Energieaufwand nicht betrieben werden. Nicht jeder möchte ein angebotenes Video auch ansehen, warum es trotzdem laden?
Also wird ein Thumbnail eingebunden. Von wo aus man dann die Größere Ansicht aufruft. Wenn man das Thumbnail anfertigt, setzt man am Besten in die Mitte noch ein passendes Start-Symbol, damit User gleich unterscheiden können, ob eine Bildergroßansicht oder ein Video angeboten werden. Siehe Beispiel "Bild zuschneiden"
Für den Fall, dass das Video länger zu laden hat, bekommt man zuerst noch ein Poster zu sehen.

Anleitung

Hier ist die Anleitung, wie man sich Bilder vorbereitet.

Struktur

Wo Bilder, Videos, und die HTML-Dateien für die Großansicht sein müssen, damit man ZIM möglichst bequem nutzen kann und ZIM die Referenzierung fehlerfrei leistet, dazu gibt es wichtige Informationen unter Verzeichnisse.

Stichwörter

Eine Stichwortliste kann in ZIM ebenfalls sehr einfach realisiert werden, wie ich hier zeige.

Download

netzrose-theme.zip (7,7 KB)
Das netzrose-theme steht unter MIT-Lizenz


Weitere Informationen sind zu finden

zur Theme-HTML
und zum Stylesheet.
Vor einer endgültigen Entscheidung, ob man von einem CMS auf ZIM wechselt, können die Hinweise zum Unterschied nützlich sein.


Interaktion
Kanal für Diskussionen auf Hubzilla.
Oder: Kommentar per Mail senden. -> Datenschutz.

Hier her intern verlinkt von:

| A Home | Stichworte | Hardware:Monitor | Management:Erfolg Geld | Management:Webbrowser | Publizieren:Generator ZIM | Publizieren:Tests | Z Impressum:Datenschutz | Z Impressum:netzrose | Publizieren:Generator ZIM:Unterschied CMS |