Webseitendesign (Making Of) von tom--schilling.de

Gedanken zum Design einer Webseite

Lesbarkeit

Für das Lesen von Text ist ein moderner, breiter Bildschirm denkbar ungeeignet.

Bücher haben sich über Jahrhunderte zum optimal lesbaren Format entwickelt: höher als breit und wenn sie Text in lateinischen Lettern enthalten, mit höchstens 80 Zeichen in einer Zeile. Wenn sie besonders eindringlich wirken wollen (zum Beispiel Gedichtbände), auch nur mit 30 Zeichen pro Zeile.
Natürlich gibt es einen technologischen Grund dafür, daß die Bindung an der langen Seite ist: Weil man einen Bogen mit ähnlichen Dimensionen für Höhe und Breite einfach falten und mit Fäden heften kann, schon hat man ein Buch. Für ein Buch mit Heftung an der kurzen Seite bräuchte man sehr schmale Bögen, die einfach unhandlicher sind.
Man hätte aber ohne weiteres Bücher auch so bauen können, das die Heftung oben liegt und der Text entlang der langen Seite läuft und man nach oben umblättert. Ich hatte mal ein solches Buch: "Kompendium für Alphabeten" von Karl Gerstner. Allgemein durchgesetzt hat sich dieses Buchformat nicht.

Bei Zeitschriften, die ebenfalls eine lange Tradition haben, geht der Trend hin zu immer schmaleren Spalten. 3 Spalten a 40 Zeilen sind auf einer A4-Seite gut lesbar. Ein Grund für schmale Spalten ist, daß das Auge nach Zeilenende die Zeile schnell wieder zurückverfolgen muß, um die richtige nächste Zeile zu finden. Bei überlangen Zeilen tut es sich schwer mit dem Verfolgen der Linie und das Gehirn hat auch die Information nicht mehr, wie die letzte Zeile begann. Man verrutscht dann häufiger in der Zeile und bemerkt den Fehler erst, nachdem man ein Stück der falschen Zeile gelesen hat. Lesen macht so weniger Spaß.

Computerbildschirme sind nun ungünstigerweise sehr breit und wenig hoch. Man kann den Font so groß machen, daß 80 Zeichen in eine Zeile passen, die über den gesamten Bildschirm geht. Dann passen aber nur wenige Zeilen auf den Bildschirm und es geht das Gefühl verloren, wo man sich im Text befindet. Meist wird man sich also entscheiden, den Font kleiner zu machen und hat bei 80 Zeichen pro Zeile rechts und links ungenutzte Ränder.
Die meisten Webseiten nutzen den Raum rechts und links für Werbung, was ich meinen Lesern nicht zumuten will. Ich habe mir meine Webseite noch nie auf einem überbreiten Bildschirm angesehen. Möglicherweise könnte ich den überschüssigen Platz rechts einfach zur Anzeige weiterer Fotos nutzen. Ich denke darüber nach.

Webseiten-Übersicht

Um schnell zu erkennen, welche Themen angeboten werden und um in den Inhalten stöbern können, bietet sich ein permanent sichtbares Inhaltsverzeichnis an. Aus dem oben Gesagten ergibt sich, daß man es im ungenutzten Bereich rechts oder links des Haupttextes platziert. Weil unser Schriftsystem uns trainiert hat, nach wichtigen Inhalten links oben zu suchen, ist die optimale Position links.

Ich möchte keine Zeit mit Hoch- und Runterscrollen der Seite verschwenden (wie es z.B. bei Wikipedia notwendig ist), sondern das Menü immer im Sichtfeld haben, auch wenn ich im Haupttext ganz unten bin.
Es gibt den Einwand, daß ein permanent sichtbares Menü vom Lesen des Textes ablenkt. Dem begegne ich dadurch, daß das Inhaltsverzeichnis sich im Design völlig vom Design des Lesebereiches unterscheidet, so daß es nicht als Teil des Lesebereiches wahrgenommen wird.

Bei komplexen Seiten würde es den Menübereich überfrachten, wenn man das Inhaltsverzeichnis jederzeit komplett darstellen würde. Deshalb soll sich das Menü an das gewählte Thema anpassen, also Sprünge zu Seiten mit ähnlichen Themen, Vorgänger, und Nachfolger ermöglichen und falls man sich verirrt hat, immer einen Weg zum Einstieg zeigen.

Auf kleinen Hochformat-Bildschirmen wie Smartphones ist das Ausblenden des Menüs wichtig, um Lese-Platz zu schaffen. Es ist sicher eine Frage der individuellen Sehstärke, wann der Platz zum entspannten Lesen zu klein wird und das Menü verschwinden sollte. Ich habe es aktuell so eingestellt, daß es bei einer Breite des Browserfensters von weniger als 60 mal der Breite des Buchstabens m (in der vom Nutzer eingestellten Zeichensatzgröße) nach oben ausweicht.

Die Zeichensatzgröße der Webseite basiert auf den Vorgaben, die der Nutzer für den Browser gemacht hat. Weil speziell die Reiseberichte sehr bildlastig sind, erlaube ich mir, die Textgröße eine Nummer größer zu wählen, als sie in der Grundeinstellung des Browsers hinterlegt ist. Das ergibt ein angenehmeres Text- zu Bild-Verhältnis und ich muß nicht so viel schreiben. :-)

Wenn der Bildschirm vertikal zu klein wird, soll das Menü mit dem Hauptinhalt mitscrollen, bis der untere Rand des Menüs sichtbar ist und nicht weiter. Es besteht dann immer noch eine gute Chance, daß der nächste Inhalt mit einem Klick auswählbar ist. Ist das Seitenmenü bei normaler Fenstergröße nicht komplett sichtbar, sollte es umstrukturiert werden.

Für noch entspannteres Lesen kann man die langen Reiseberichte auch ausdrucken. Dann dürfen natürlich alle Elemente, die Online der Navigation dienen, wie Menü, Links zur nächsten Seite oder auch interaktive Elemente wie schwenkbare Panoramen nicht mit aufs Papier. Für die interaktiven 360° Panoramen habe ich mich entschieden, das komplette Panorama auf die Seitenbreite herunterskaliert zu drucken. Der Haupttext wird auf die volle Papierbreite umformatiert, um nicht zu viel Papier zu verschwenden. Mehr dazu im Abschnitt Ausdrucken.

Schreibstil

Bei den ersten Reiseberichten fällt auf, daß sie sehr kurz gefaßt sind und alles Überflüssige weggelassen wurde: "Schlafe schlecht.", "Bullenhitze im Zelt.", "7:30 aufstehen." Das liegt daran, daß der noch freie Platz am Rand des Reiseführers beschränkt war und ich meinen Text dorthin schreiben wollte, wo ich auch in der Tour gerade war. Ich hab das bei diesen Texten später so gelassen, um die Authentizität nicht zu zerstören.

Wenn einem nichts mehr einfiel, hat man nichts mehr aufgeschrieben. Ganz anders später bei der Dokumentation mittels Audio. Da lief die Aufnahme und in den unvermeidlichen Denkpausen habe ich einfach weitergelabert. Das wollt ihr nicht hören! Diese Texte sind generell zu lang und ich habe sie häufig radikal gekürzt. Noch schlimmer wird es bestimmt, wenn ich es mal schaffe, einen Audio zu Text Konverter Dienst zu verwenden. Jede längere Pause stoppt die Aufnahme und man ist gezwungen zu reden, auf Teufel komm raus!

Bei mir gilt die Deutsche Rechtschreibung. Also nicht die Neue Deutsche Rechtschreibung, sondern die davor. Ich war 1996 entsetzt über die vielen unsensiblen Eingriffe der Duden-Leute. Durch die rigorose Getrenntschreibung von Verben und Adverbien sind meines Erachtens viele Feinheiten der Sprache verlorengegangen. So war bisher "einen Text zusammen schreiben" was anderes als "einen Text zusammenschreiben". Klar hatte auch die alte Rechtschreibung ihre Probleme. So war nie klar, was der Fahrlehrer wollte, wenn er sagte: "Den Fußgänger bitte umfahren!". :-)

Leider kann man die alte Rechtschreibung in Textverarbeitungen nicht mehr überprüfen lassen und das ständige Bombardement mit den verschiedenen Versionen "neuer" Rechtschreibungen haben dafür gesorgt, daß meine Rechtschreibkenntnisse zunehmend verwässert wurden. Den Duden Korrektor kann man zwar auf "konservativ" einstellen, er meckert dann trotzdem über "daß" und erzeugt so massenweise Fehlalarme. Außerdem will ich dem Duden nicht noch Geld für ihren Mist hinterherwerfen. MS Word akzeptiert "daß" in der alten Rechtschreibung, macht aber auch viele Fehler. Und Hunspell kann keine Grammatik.

Ich habe übrigens in der Schule gelernt, daß der Hering als Zeltpflock mit "ä" geschrieben wird. Das war mir immer komisch vorgekommen und auch im Duden von 1985 ist davon nicht mehr die Rede, aber ich bleibe dabei.

Seitengröße

Ich habe lange überlegt, wie ich meine Reiseberichte aufteilen sollte. Eigentlich widerstrebt es mir, die Reise in kleine Portionen zu untergliedern, die jedesmal durch einen Link verbunden werden müssen. À la "Willst Du wirklich weiterlesen? Dann klicke hier!". Das macht man doch eigentlich nur, um den Leser mit mehr Werbung zu piesacken.

Andererseits sind die Reiseberichte sehr lang. Aktuell scheint es keine Probleme auf irgendeinem Anzeigegerät zu geben, wenn ich den Stoff von einer Woche auf eine Seite packe. Selbst ein Samsung Galaxy S4Mini, wie ich es auf meinen Reisen mitnehme, kommt damit zurecht. Natürlich ist beim ersten Aufrufen der Seite gleich mal 50 MB Datenvolumen weg, aber das ist es doch wert, oder?

Die Alpenüberquerung habe ich vorsichtshalber mal auf drei Seiten aufgeteilt. Da kommen dann 122MB an Daten insgesamt zusammen.
Update Oktober 2023: Aus den mehrteiligen Reiseberichten habe ich doch wieder einteilige gemacht, damit ich sie besser ausdrucken kann.

Scripte

Eigentlich ist Java Script eine feine Sache. Man kann damit eine Webseite ordentlich aufmotzen und einem Programmierer sollte eine zusätzliche Gestaltungsmöglichkeit willkommen sein.

Der Grund, warum ich trotzdem ohne Scripte auf meiner Webseite auskommen will, liegt am hohen Mißbrauchspotential von Scripten. Sei es nun, weil ich nicht ausspioniert werden möchte, oder weil ich unverlangte Werbung nicht mag, ich gehe ins Internet grundsätzlich mit durch NoScript ausgeschalteten Scripten. Natürlich nervt es, bei jeder Seite, die ich mir wirklich ansehen möchte, einzelne Scripte individuell wieder einschalten zu müssen. Diesen Streß möchte ich meinen Lesern nicht zumuten. Diejenigen, die wie ich Scripte abgeschaltet haben, müssen nichts nachträglich einschalten und auch keine Cookies absegnen und alle anderen verpassen auch nichts.

Eine Sache, die mir bei NoScript nicht gefällt ist, daß NoScript auch von der eigenen Webseite geladene Zeichensätze blockiert und für gefährlich hält. Von fremden Servern nachgeladene Fonts ermöglichen das Verfolgen des Nutzers und das Erstellen von Nutzerprofilen, bei selbst gehosteten Fonts ist das nicht der Fall. Ich nutze einen selbst erstellten Font zur Anzeige von kleinen Bildchen im Text, z.B. für Höhenprofile. Wenn der Font nicht geladen wird, erscheint dann ein großes H anstelle des Bildchens mit einem Pfeil nach oben, was für "Hoch" steht. Aktuell habe ich keine andere Lösung, außer den Leser zu bitten, Scripte von meiner Webseite in NoScript zu erlauben, selbst wenn ich gar keine Scripte verwende.

Fotos

Wie groß macht man die Fotos? Die Originalbilder werden immer größer, die Bildschirme auch, da will man möglichst viel Bild sehen. Andererseits gibt es immer noch Prepaid-Handy-Verträge mit 1GB Datenvolumen per 28 Tage. Und gerade meine Outdoor-Berichte werden möglicherweise auch draußen angesehen.

2009 hatte ich für den Bericht meiner Norwegen-Tour noch 440 Pixel breite Bilder als normal empfunden. Die Dateien waren 30-60 kByte groß. Angesehen wurden die damals auf einem 1024 Pixel breiten Bildschirm, einem Sharp Zaurus mit 240 x 320 Pixeln oder einem HTC Hermes mit der gleichen Displaygröße. Das waren zumindest die Geräte, die ich damals hatte.

Heute haben viele schon 4K-Monitore. Bilder in Originalgröße, wie sie von der Kamera kommen oder auch Panoramen würden den locker füllen. Die Dateigröße wäre 100 Mal so groß wie 2009.

Ich habe mich als Kompromiß des Jahres 2021 dafür entschieden, die Fotos in einer maximalen Auflösung bis 1300 Pixel breit anzubieten. Auf einem 4K-Display werden sie also nicht größer. Auf schmaleren Displays skalieren sie bis zu Mini-Bildchen, ohne daß sie weniger Datenvolumen im Download brauchen.

360°-Panoramen sind maximal 3000 Pixel breit. Ich finde es zwar witzig, aber auch unnatürlich, ein Rundum-Panorama auf einen Blick betrachten zu können. Deswegen beschränke ich den Sichtwinkel auf der Webseite und lasse den Benutzer nur einen Ausschnitt erforschen, den er nach Gutdünken hin- und herschieben kann.

Ältere Panoramen, oder welche, die keine 360°-Ansicht bieten, zeige ich komplett.

Im Moment ist die Webtechnologie noch nicht so weit, um ein Virtual Reality-Erlebnis (also Rundumsicht auch nach oben und unten) direkt im Browser zu ermöglichen. Testweise habe ich mal ein Kugelpanorama zum Herunterladen angeboten, aber wer nutzt das wirklich in einem externen Viewer? Und der Spaß hält sich durch das umständliche Procedere des Herunterladens sicher auch in Grenzen.

Vielleicht ist dem einen oder anderen aufgefallen, daß ich bei meinen Fotos nirgends Copyright-Angaben stehen habe. Generell habe ich nichts gegen das Weiterverwenden meiner Fotos, muß aber im Einzelfall prüfen, wer da abgebildet ist. Ich möchte nicht, daß sich meine Freunde auf Reklame wiederfinden. Es gilt also das deutsche Urheberrecht und wer ein Bild von mir nachnutzen möchte, braucht meine Einwilligung.

Bildunterschriften bieten eine zusätzliche Erzählebene. Man sollte nicht leichtfertig darauf verzichten. Lediglich wenn das Bild auch ohne jeden Kommentar für sich steht oder selber Text enthält, lasse ich sie weg (oder wenn mir nichts dazu einfällt).

Ausdrucken

Ja, ich gestehe, ich bin ein Internetausdrucker. Nicht auf Papier, aber auf PDF. Die Ergebnisse von Suchmaschinen sind zu unberechenbar, als das man davon ausgehen könnte, einmal Gefundenes später wiederzufinden.

Leider sind die Ausdrucke von Webseiten häufig sehr wenig zufriedenstellend. Von komplett weißen Blättern bis zu unleserlich zerhacktem Layout ist alles dabei. Von WYSIWYG (What you see ist what you get - Du bekommst, was Du siehst) hat man sich zum Gegenteil entwickelt. Man bekommt irgendwas, auf keinen Fall das, was der Browser anzeigt.

Einer der wenigen Gründe, warum ich ab und zu noch Firefox verwende, ist, daß er eine Druckseiten-Vereinfachung vornehmen kann. Die versucht, den Haupttext zu erkennen und Menüs und externe Werbung auszublenden. Aktuell findet man die im Druck-Menü unter "Mehr Einstellungen" → "Format" → "Vereinfacht". Diese Funktion scheint niemandem besonders wichtig zu sein, denn nach größeren Updates fehlt sie häufig.

Dabei ist es sehr einfach, eine ansprechende Druckausgabe hinzubekommen. HTML unterstützt unterschiedliche Ausgaben zu verschiedenen Medien. Mit "@media print" kann man gezielt Dinge abschalten, die in der Druckausgabe nicht zu sehen sein sollen, wie interaktive Elemente, Schaltknöpfe, Menüs, etc.. Andererseits kann man auch spezifische Dinge für die die Druckausgabe hinzufügen, wie ein Titelbild und Regeln für den Zeilenumbruch zur Vermeidung von Umbrüchen nach Kapitelüberschriften oder innerhalb von Bildern und von Schusterjungen und Hurenkindern. Die englischen Bezeichnungen dafür, "orphans" und "widows", also Waisen und Witwen sind übrigens auch sehr traurig.

Ich habe damit begonnen, die Berichte von Wanderungen so zu optimieren, daß sie in der Druckausgabe gut aussehen. Dafür muß ich nur ein Foto im Hochformat als Titelbild heraussuchen, das ich im Text bisher nicht verwendet habe, und das auf die erste Seite stellen. Bücher ohne Cover sehen in den Galerien von Ebook-Readern deplatziert aus. Den "figure" - Umschließungen von Bild und Bildunterschrift gebe ich mit, daß sie nicht durch einen Seitenumbruch auseinandergerissen werden sollen. Dann kann ich die Druckausgabe des Browsers verwenden, um z.B. ein auf Book-Readern gut lesbares PDF zu erzeugen. Eine Weile war Firefox mein Favorit zum Ausdrucken, weil er die von mir festgelegten Blöcke aus Bild und Bildunterschrift nicht auseinanderreißt. Edge beachtet diese Vorgaben manchmal nicht und erzeugt mittendrin Seitenumbrüche, ohne daß ich weiß warum. Dafür beachtet Firefox meine Schusterjungen- und Hurenkind-Regeln nicht. Perfekt ist das Layout also noch nirgends.

Seit ich begonnen habe, den Ausdrucken ein Inhaltsverzeichnis hinzuzufügen, kann ich für Ausdrucke in PDFs nur noch Chromium-basierte Browser (wie Edge oder Vivaldi) mit dem Drucker "Als PDF speichern" nutzen. Nur in dieser Kombination wird die interne Verlinkung zu den Kapiteln aus dem HTML ins PDF übertragen. Firefox (117.0.1) ersetzt die internen Links durch externe, die das Kapitel im Webbrowser online öffnen.

Bei Büchern wird ein Inhaltsverzeichnis am Anfang und weitere mehr oder weniger sinnfreie oder gar leere Seiten zu Beginn klaglos akzeptiert. Auf Webseiten ist es dagegen Konsens, daß sofort der wichtige Content erscheinen muß, und ein Inhaltsverzeichnis am Anfang möglicherweise Leser abschrecken würde. Deshalb erscheint es in der Web-Darstellung zugeklappt.

Die Druckfunktionen der Browser belassen leider die Bildgrößen auch im A5-PDF so, wie sie für den Browser optimal sind und können auch nicht die Metadaten von der Webseite in das PDF übernehmen. Ich komprimiere die PDFs also erst mit dem für privaten Gebrauch kostenlosen PDF-Compressor und füge dann die Metadaten mit der letzten freien Version von PDF-XChange-Viewer hinzu. (Andersrum geht nicht, weil der Compressor die Metadaten wieder entfernt.) Die riesigen Dateien des Firefox werden dadurch um den Faktor 100 kleiner, ohne daß man das auf einem A5-Reader bemerken würde.

Für alle Reiseberichte biete ich oben auf der Seite das so erstellte PDF zum Download an. Es ist für kleine Reader gedacht. Wenn man etwas anderes braucht, kann man die Webseite einfach nach PDF in der gewünschten Seitengröße mit eigenen Vorgaben für den Seitenrand drucken.

Einen vergleichbaren HTML zu epub Konverter, der das Layout erhält, gibt es leider nicht. Alles was ich getestet habe, funktioniert nicht über die Druckausgabe, so daß druckspezifisches HTML keine Anwendung findet. Mein Minimal-Kriterium wäre, daß zwei Bilder, die ich auf der Webseite nebeneinander gestellt habe, auch im Epub nebeneinander erscheinen. Das erfüllt bislang keiner.

Fremdsprachen

Ich verstehe zwar halbwegs Englisch, möchte mich aber nicht zum Gespött der Leute machen, indem ich eine englischsprachige Version der Webseite selber erzeuge. Das überlasse ich lieber Google.

Im Februar 2023 habe ich damit begonnen, alle Seiten oben mit einem grünen Knopf zu versehen, der die Seite im Google Übersetzer öffnet. Ich habe im Link Englisch als Zielsprache voreingestellt, aber jeder kann in der Titelzeile der nach dem Klick auf den Knopf erscheinenden Seite auch selber aus etwa 150 Sprachen wählen. Das ist schon cool, wenn der eigene Text in einer völlig fremden Sprache erscheint!

Englisch funktioniert ziemlich gut, bis auf kurze Sätze oder Überschriften. Google scheint den einmal erkannten Kontext nicht von einem Satz in den nächsten zu übernehmen. Zum Beispiel wird die Insel Faial in der Überschrift mit "Fehler" (engl. Fail) übersetzt, im längeren Satz darunter aber korrekt.

In Firefox verschwindet in allen anderen getesteten Sprachen außer dem voreingestellten Englisch beim herunterscrollen die Menüleiste an der linken Seite und der Browser verwendet plötzlich meine Styles-Datei nicht mehr. Das Ergebnis sieht grauenhaft aus. In Vivaldi funktioniert es in allen Sprachen. Ich muß das erst mal auf mehr Geräten und Browsern ausprobieren.

Mir ist natürlich klar, daß ich mich ein wenig in Abhängigkeit von Google begebe. Wenn der Dienst eingestellt wird oder Gebühren dafür fällig werden, ist der Spaß schnell wieder vorbei. Aber für den Moment ist es sehr hübsch.

Sicherheit

Die Sicherheitsanforderungen für eine Homepage wie diese sind relativ gering. Ich verkaufe nichts. Daher sollte jedem klar sein, daß er auf meinen Seiten keine Bankverbindungen oder Paßwörter eingeben muß. Wenn auf meiner Webseite dennoch danach gefragt wird, ist entweder die Webseite oder die Verbindung gehackt.

Mein Webserver liefert Webseiten über eine verschüsselte Verbindung aus, wenn man sie über https: anfordert. Moderne Browser testen von sich aus zuerst die verschlüsselte Verbindung, ehe sie sich mit der unverschlüsselten abgeben. Dort kann man sich das "https:" auch sparen. Den Zustand der Verbindung erkennt man meist an einem Schloß-Symbol in der URL-Zeile.

Ich erzwinge allerdings von mir aus keine Verschlüsselung. D.h. wenn jemand die Seite unverschlüsselt über http: abrufen möchte (und es schafft dafür seinen Browser auszutricksen), kann er das tun. Meine Gründe für diese Laxheit sind:

Ich habe ein Herz für alte Geräte wie Amigas oder WinCE-Geräte, deren Browser moderne Transportverschlüsselung nicht unterstützen. Es ist lustig zu sehen, wie viel meiner Webseite die schon darstellen können.
Irgendwann wird der Zeitpunkt kommen, an dem ich mich nicht mehr um die jährliche Erneuerung des SSL-Zertifikats kümmern kann. Dann blockiert der Browser die Darstellung einer über https: angeforderten Seite mit einer Fehlermeldung, zeigt aber hoffentlich immer noch die unverschlüsselte an. Siehe auch meine Anmerkungen dazu hier.

Ich selber nutze keine Scripte, könnte mich aber mit Content-Security-Policy (CSP) besser gegen von böswilligen Fremden in die Verbindung eingeschleuste Scripte wehren. Ich habe das ausprobiert und alles funktioniert weiterhin. Nur die Google Translate Funktion (s. letzter Absatz) bekomme ich damit nicht zum Laufen. Auch wenn ich mit
<meta http-equiv="Content-Security-Policy" content="default-src 'self' www.tom--schilling.de www-tom----schilling-de.translate.goog" />
meinen und den Google-Server zu allen Regeln hinzufüge (weil meine originale Seite ja für die übersetzte Seite nicht 'self' ist), erscheint zwar meine Seite, aber nicht die Übersetzungs-Zeile darüber. Solange ich die Übersetzungen anbiete, bleibt CSP also erst mal außen vor.

Umsetzung

Werkzeuge

Ich nutze keinen Webseiten-Baukasten, sondern schreibe das HTML selbst. Dabei unterstützen mich aktuell:

Die Entwicklungsumgebung Webocton von Benedikt Loepp, die bei mir HomeSite abgelöst hat, nachdem das nicht mehr weiterentwickelt wurde und mit HTML5 nicht zurechtkam. Das Programm kann alles, was ich brauche und vieles mehr. Praktisch ist, daß deutsche Umlaute beim Tippen in die HTML-Entsprechung umgewandelt werden (oder auch per Script, wenn man mal Text aus anderen Quellen übernimmt).
Eine Zeichentabelle für alle die Zeichen und Symbole, die Webocton nicht automatisch nach HTML konvertiert, hat Wolfgang Frank erstellt. Für unterwegs habe ich mir meine eigene Tabelle gebastelt: "A mit was drauf".
Die Transkription von Audioaufnahmen habe ich lange Zeit von Hand erledigt. Erst Anfang 2025 habe ich eine Lösung gefunden, meine Audioaufzeichnungen aus den Jahren 2014 bis 2020 automatisch in Text zu konvertieren: das Programm noScribe von Kai Dröge. Eine lokal auf dem PC betriebene KI liefert nach kurzer Berechnung brauchbare Ergebnisse. Wer sich das Resultat selber ansehen will, für den habe ich hier eine Beispiel-Transkription.
TopStyle Pro für das Editieren der Cascaded Style Sheets. Das war damals bei HomeSite mit dabei und kann immer noch die meisten aktuellen CSS-Eigenschaften. Wenn es mal eine nicht kann, ist das auch nicht schlimm, dann schreibe ich die selber hin und die bleibt dann eben rot markiert.
www.xml-sitemaps.com zum Erstellen der Sitemap.
validator.nu zum Finden von HTML-Fehlern, die der Editor nicht anzeigt.
Die Fotobearbeitung DxO PhotoLab hilft beim Herausholen des maximalen Kontrasts aus den Bildern, beim Aufrichten stürzender Häuser, Beschneiden des Bildausschnitts und beim auf finale Größe skalieren.
Ich nutze noch die Version 2.0, denn die aktuelle Version 7.0 hat einerseits nichts dazugelernt, was mir nützt und kann andererseits nicht mehr Bilder ohne EXIF-Daten exportieren. Selbst wenn man beim Export alle Daten abwählt, werden die Bilder mit penetranter Eigenwerbung kontaminiert. Ich habe keine Lust, noch ein weiteres Tool in die Kette aufzunehmen, was die EXIF-Daten wieder entfernt. Pixelgenaues Beschneiden auf z.B. 1300 Pixel Breite geht auch immer noch nicht, bzw. nur über den Export. Abspeichern des Fenster-Layouts funktioniert ebenfalls nicht, stattdessen muß man nach Änderung der Bildschirmauflösung mühsam alles wieder zurechtzuppeln.
Hugin setzt die Panoramen meiner Rundum-Kamera zusammen. Eine Anleitung, wie ich da vorgehe, findet Ihr in der Fotografieren-Sektion.
PanoramaStudio kümmert sich um die restlichen aus der Hüfte geknipsten Panoramen.
Die kleinen Bildchen unter der Tagesüberschrift bei Wanderungen realisiere ich als Font mit dem Programm Birdfont von Johan Mattsson. Fonts sind wesentlich kompakter als einzelne Grafiken und ich muß mir um die Skalierung keine Gedanken machen. Die Symbole nehmen die gleiche Höhe ein, wie die Schrift daneben, auch wenn man im Browser die Schriftgröße ändert. Der fertige Font wird noch mit der Webseite cloudconvert.com in modernere Formate gewandelt.
Tracks erstelle ich vor der Wanderung mit QMapShack. Das Zusammensuchen von Karten, DEM-Höhendateien, Routing-Dateien und das anschließende Einrichten braucht zwar seine Zeit, aber wenn alles fertig ist, kann ich die Gegend einfach durch Wechsel des Tabs in OSM und den Satellitenansichten von Bing und Google erkunden. Hilfreich vor allem, wenn der Weg in OSM fehlt, ich aber trotzdem einen Pfad in den Satellitenbildern erkennen kann. Solange Pfade in der Routing-Datenbank stehen, läßt sich erst eine Route und daraus ein Track erstellen, den ich auch auf "dummen" Geräten anzeigen kann. Für die Abschnitte ohne Routen-Infos erstelle ich den Track manuell und verknüpfe am Schluß alles, eventuell auch mit Tracks aus anderen Quellen. Je mehr fremde Tracks die gleichen Wegabschnitte benutzen, desto sicherer ist, daß da wirklich ein gangbarer Weg ist.
Die Funktion zum Ausdrucken des Tracks auf mehrere Blätter Papier ist eine Qual. Für mich aber notwendig, weil ich meistens nur auf den gedruckten Kartenausschnitt schaue und das Handy in der Tasche lasse.
Die Landkartenbilder für die Webseite erzeuge ich mit www.geoplaner.de von Martin Nathansen, wenn ich mehrere Marker im Bild brauche, zum Beispiel für alle Zeltplätze oder mit GPX Editor, wenn ich den Track ins Bild malen möchte und schnell ein Höhenprofil brauche, ohne den Track erst in die Datenbank von QMapShack einpflegen zu müssen.
Bevor ich GPX-Tracks veröffentliche (und auch bevor ich damit wandere) bereinige ich sie mit einem selbstgeschriebenen Perl-Script von allem Müll und erhöhe die Menschen-Lesbarkeit.
Und natürlich zum Testen Firefox und Edge auf PC und Chrome, Webkit und Safari auf mobilen Geräten.

Suchmaschinen

Google hat es auch nach 18 Jahren Existenz der Webseite nicht geschafft, sie in den Index aufzunehmen. Selbst wenn man ab und zu mal Google mit dem site: Attribut nach irgendwas auf der Site suchen läßt, macht es Google nicht neugierig, was es gerade durchsuchen sollte. Google möchte die Seiten gebracht haben und funktioniert eher wie ein Register, in das man Seiten eintragen kann. Ich habe mich Mitte Februar 2022 mal in der Such-Konsole angemeldet und warte noch, daß etwas passiert. Nach 2 Tagen steht da immer noch: "Die Daten werden verarbeitet - bitte versuch es in einem Tag noch einmal", wenn ich die Seite aktualisiere.
Stand Juni 23: Nachdem ich die Webseite komplett auf Googles Bedürfnisse umgebaut habe:
- Frames → iFrames
- Inhaltsbeschreibung http-equiv="DESCRIPTION" content="xxx" → name="description" content="xxx" weil Google anders als Bing das erstere Schlüsselwort nicht kennt
- Einfügen des Canonical - Tags
- Einfügen des Viewport - Tags
- Umbenennen der Seiten auf sprechende Begriffe
- Sitemaps hochladen
hat Google nichts mehr an meinen Seiten auszusetzen. Alle Seiten sind im Index und nur etwa ein bis zwei Mal im Monat verschwindet eine Seite daraus. Nach Neuanmeldung taucht sie wieder auf.

Mehr als 90% meiner Seitentitel werden für die Titel der Suchansicht verwendet und etwa 60% der Beschreibungen für den Text darunter. Die von Google selber generierten Beschreibungen kommen meist von irgendwo aus dem Text und sind immer schlechter als meine. Ich arbeite daran, die Beschreibung zu verbessern und mit data-nosnippet Bereiche zu verbieten, die nicht für die Generierung der Beschreibung geeignet sind.

Als Extras zeigt Google nur das kleine Favicon an (meinen Hut).
Bei Bing funktioniert der Trick mit der site:-Angabe. Ich bin im Index gelistet, ohne mich bei Microsoft anmelden zu müssen. Leider gleich mehrfach. Es gibt Links mit einem Beschreibungstext von einer Version der Seite, wie sie zwischen 2009 und 2021 bestand, und auch Links mit dem aktuellen Text. Auch bei anderen Webseiten fällt auf, daß sie mehrfach im Index stehen. Die müßten mal ihren Index aufräumen!
Stand Juni 2023:
Leider hat Bing bisher nur ein einziges Keyword aus meinen Texten extrahiert: meinen Namen. So kommt es, daß meine Webseite immer mal Leuten angeboten wird, die nach dem Schauspieler suchen. Die Ärmsten sind dann bestimmt ganz verstört, denn der Schauspieler wandert nicht. Zumindest nicht öffentlich.

Für den in der Websuche angezeigten Titel verwendet Bing meinen Vorschlag. Als Beschreibungstext verwendet Bing prinzipiell nicht den Text aus meta name="description" sondern bastelt sich was Eigenes aus dem Inhalt der Webseite. Das kann alles sein, sogar ein Satz von ganz hinten. Ab und zu werden im Anriß Worte wie "dem" und "Webseite" fett hervorgehoben. Einfach so. Vor der Beschreibung steht manchmal ein Datum, was Bing dem Text entnommen hat.
Ich habe keine Ahnung, wie ich so ein Verhalten steuern soll. Als Schuß ins Blaue habe ich mal meinen Namen aus allen Seitentiteln entfernt. Da war ich vielleicht wirklich etwas zu egozentrisch. Und alle Daten habe ich maschinenlesbar gemacht.

Nur etwas mehr als die Hälfte meiner Seiten sind im Index, obwohl ich Bing genauso häufig wie Google mit aktualisierten Indexdateien füttere. Die Klicks aus Bing sind nahe null.

Mehr Schlüsselwörter als meinen Namen kennt Bing nicht. Wenigstens bekomme ich noch die ganzen Legastheniker ab. ;-)

Welche Top-URLs fallen Microsoft beim deutschen Wort "wandern" ein? Zwei deutsche Seiten und ansonsten nur Wörterbücher!

Echt jetzt? Die kriechen durch die Glasfaserleitungen? Dieses Gestammel ist keine Hilfe. Unglaublich, daß diese Firma auch eine Office-Software mit deutscher Rechtschreibkorrektur anbietet! Wie kann man mit lauter Idioten ein Unternehmen zu dieser Größe bringen?
Ecosia, die Europäische Suchmaschinen-"Alternative" von Microsofts Gnaden, zeigt mich etwa an denselben Positionen wie das Original. Sie zeigen eine Zeile mehr Anriß-Text als Bing und alle anderen Bing-Klone. Wenn das auch noch mit besserer Anonymität einhergeht, wäre das eigentlich zu empfehlen, wenn nicht die Bing-Resultate generell so schlecht wären. In den Trefferlisten tauchen endlos die gleichen Treffer immer wieder auf.
Yahoo nutzt ebenfalls den Microsoft Index, also ergibt sich das gleiche Bild. Der Anriß-Text ist manchmal ein anderer, aber auch nicht besser.
Brave kannte mich zuerst nicht. 3 Tage nachdem ich mit site: dort gesucht hatte, war ich im Index und nur mit der aktuellen Version. Sie haben einen anderen Anriß-Text unter dem Link aus dem Seiteninhalt erstellt als Bing. Im Juni 2022 haben sie noch nichts Aktuelleres, anscheinend muß man sie immer mal wieder anstupsen.
Im Juni 2023 liefern sie als Ergebnis meiner site-Suche nur einen aggregierten Link statt einer Liste. Ich kann also nicht mehr einfach herausfinden, wieviel Seiten sie im Index haben. Bei freier Suche ist das Ergebnis genauso schlecht wie Bing.
DuckDuckGo kannte mich im Februar 2022 nicht. Im Juni 2022 hatte DuckDuckGo meine Seiten im Index, ohne daß ich dafür etwas tun mußte. Mit der Suche nach "wandern fan gebirge" bin ich sogar auf der ersten Seite als erster Link, der einem keine Reise oder Ferienhäuser verkaufen möchte. Die Azoren sind dafür nicht vertreten. Das deutet auf Bing als Quelle, denn dort gibt es ebenfalls keine Azoren mit mir.
Wegen datenschutzfreundlicherer Suche ist DuckDuckGo gegenüber Bing nur zu empfehlen. Ich hatte sie bisher privat nicht als meine Standardsuchmaschine eingestellt, weil mir die Karten und zum Beispiel die RottenTomatoes-Bewertungen von Filmen als aggregierte Daten in den Ergebnissen fehlten. Seit sie Apple Maps einbinden und ein kontextbezogenes Extra-Panel zeigen, fehlt eigentlich nichts mehr (außer den Suchergebnissen von Google).
Stand Juni 2023:
Der Anriß-Text ist bis zu 5 Zeilen lang. Selbst wenn sie ihn irgendwo aus dem Text generieren, bekommt man so einen besseren Eindruck vom Schreib-Stil der Seite. Leider landen auch meine für mobile Reader ausgelegten PDFs im Index, mit haarsträubenden Titeln und Beschreibungen. Text-Extraktion aus PDFs scheinen sie nicht zu beherrschen.
Yandex hat etwas von mir im Index, was von vor 2021 stammt (noch die Frame-Version). Der unter dem Link angezeigte Text ist anders als bei allen anderen Suchmaschinen, weshalb ich mal annehme, daß das nicht auf Microsofts Mist gewachsen ist.
Stand Juni 2023:
Sie haben alle Webseiten von mir im Index, aber keine Bilder. Die Titel und Beschreibungen verwenden sie genau so, wie ich sie angegeben habe. Das macht sonst niemand. Dazu zeigen sie das Favicon. Sehr gut! Das zeigt, daß man durchaus eigenständig einen Suchindex aufbauen kann, unabhängig von Google und Bing. Noch dazu ganz ohne Aufwand für mich, denn es gibt keine SEO-Konsole, wo man wie bei Microsoft seine Zeit verschwendet.
Yandex beachtet das noindex-Attribut von Webseiten nicht (<meta name="robots" content="noindex">). Leider landen dadurch alle Navigations-Menüs in den Trefferlisten und zusätzlich noch alle PDFs. Nach 5 Suchen ist das Lösen eines Captchas fällig. Nichts für mich.
Mojeek kennt mich im Juni 2023 immer noch nicht, auch nachdem ich mehrmals mit site: dort gesucht hatte. Hoffentlich verdorrt das junge Pflänzchen nicht, bevor sie mich im Index haben. :-)
Gigablast hat auch nichts von mir. Die wollen für jede Seite im Index einen Vierteldollar haben. Da werde ich arm, bei meinen vielen Seiten. :-)
you.com ist eine der drei neuen Suchmaschinen, die in c't 19/2022 vorgestellt wurden. Sie haben viel von mir, was fast immer aktuell ist. Die Bildersuche liefert ausschließlich die Norwegen-Bilder von Bing, bei denen ich damals explizit die Größe angegeben hatte. Neuere Bilder indexiert Bing nicht, warum auch immer.
Stand Juni 2023: Bei den Bildern hat die Anzahl abgenommen: 3 aus Norwegen, 1 mal Rennsteig und 1 mal Westweg, alles sehr kleine Formate. Die Textsuche liefert die Treffer in der Reihenfolge von Google und auch manchmal mit meiner Beschreibung. Fast alle Seiten sind vorhanden, nur die mit wenig Text fehlen, die mir aber auch nicht wichtig sind. Ein kleines quadratisches Bild hinter dem Treffer lockert die Übersichtsseite auf, dafür fehlt das Favicon.
Die Besonderheit von You.com ist, daß sich nach jeder Abfrage eine Weile Nichts tut, weil zuerst Cloudflare irgendwas checkt und dann eine KI einen Text zum Suchbegriff verfaßt. Für bestimmte Suchen erfährt man trotzdem schnell, was man sucht, bei anderen geht das auch daneben. Zum Beispiel unterschlägt er bei Suche nach "Feiertage Sachsen 2023" mal den Buß- und Bettag und mal den 2. Weihnachtsfeiertag.
Auch neeva wurde dort vorgestellt und hat ebenfalls das, was Bing hat. Wieder mit alten Azoren-Seiten, aber der Anriß zu dieser Seite ist wie man das erwartet. Die Bilder sind ebenfalls von Bing.
Update Mai 2023: neeva hat das Suchmaschinengeschäft schon wieder aufgegeben. Schade!
Die letzte der Suchmaschinen aus der c't ist kagi. Dort muß man sich zuerst ein Konto erstellen und mit eMail verifizieren. Wenn man sich dazu durchringt, kann man das Erscheinungsbild der Suche einstellen. Sie haben einiges von mir, die Darstellung der Ergebnisse ist auch in der Grundeinstellung durchaus ansprechend. Die Westweg-Wanderung hat sogar eine Mini-Karte im Anriß. Die Bildersuche liefert 6 Fotos aus letzter Zeit, die ich aber teilweise schon wieder entfernt hatte. Je eines aus Norwegen 2009, Alpen 2022, La Palma 2019, Azoren 2022 und zwei von Alpen 2021. Wie sie wohl auf diese Auswahl gekommen sind?
Stand Juni 2023: Die Trefferreihenfolge entspricht Google. Leider schneidet kagi die Google-Trefferlisten schon früh ab, so daß von meiner Site-Suche nur die Hälfte der Treffer vorhanden sind und ich bei freier Suche auch häufig nicht vertreten bin. Mehr als 2 Seiten Trefferliste gibt es nicht. Das ist schade für die ganzen kleinen Wander-Blogs, die die ersten Suchplätze ja immer den Platzhirschen Wikipedia, Komoot etc. überlassen müssen. Dafür kann man nach PDF-Dateien suchen und findet meine zum offline Lesen erstellten PDFs! Die Bildersuche ist nach wie vor schwach bestückt.
Startpage habe ich erst im Juli 2023 gefunden. Sie ist nach eigenen Angaben europäisch und erfüllt die DSGVO. Das Anhängen der Suchparameter in der URL funktioniert hier nicht, deshalb öffnet der Link mit einer leeren Suche.
Die Reihenfolge und selbständig umgearbeiteten Titel der Links in der Site-Suche entsprechen denen von Google. Sie verwenden als Anriß meistens meine Beschreibung, ansonsten generieren sie andere aus dem Text als Google. Die meisten meiner Seiten sind im Index. Bilder haben sie eine ganze Menge, auch aktuelle sind schon dabei. Es sind keine Dateien im Index, die ich dort nicht haben will (PDFs und Menüs). Leider fehlt das Favicon, womit ich beim schnellen Überfliegen der Ergebnisse meine Seite immer am schnellsten finde.
Aus der Übersicht läßt sich die Webseite über ein Icon links neben dem Link in einer anonymen Ansicht öffnen, wo die Seite durch einen Proxy geschleust wird.
Qwant habe ich genauso erst im Juli 2023 bemerkt. Sie ist ebenfalls europäischen Ursprungs und startet mit dem Slogan: "The search engine that doesn't know anything about you". Das stimmt leider, denn sie nutzt den Bing-Index.
Die Light-Version, die ich verlinkt habe, kommt ohne Skripte aus und zeigt 2 Zeilen mehr Anrißtext, als die nervigere Vollversion.

Fazit: Am besten gefallen mir derzeit Startpage und you.com, wenn ich meine Surfgewohnheiten nicht Google preisgeben möchte.

Programmierung

Wer nun nach all dem Vorspann geduldig darauf gewartet hat, daß ich ihm Details zur Programmierung meiner Webseite verrate, dem empfehle ich, einfach einen Blick in den Quelltext zu werfen. HTML ist eigentlich ein menschenlesbares Format und moderne Browser unterstützen die Anzeige des Quelltexts. Zum Beispiel durch rechter Mausklick → Seitenquelltext anzeigen (Firefox, Edge) oder rechter Mausklick → Entwicklerwerkzeuge → Quelltext anzeigen (Vivaldi).
Besser noch, meistens haben sie Werkzeuge an Bord, mit denen man am Quelltext einer Webseite herumspielen und sich das Ergebnis in Echtzeit anschauen kann (rechter Mausklick → Untersuchen (Firefox, Edge) oder rechter Mausklick → Entwicklerwerkzeuge → Untersuchen (Vivaldi)).

Der Quelltext von durch Wordpress und Co. generierten Webseiten kann etwas unübersichtlich aussehen, aber handgeschriebener HTML-Code, wie der dieser Webseite, ist durchaus verständlich.

Die ultimative Referenz zu HTML und CSS ist für mich SELFHTML.org. Dort erfährt man in Deutsch alles über den HTML-Standard und bekommt viele interaktive Beispiele geboten.

Noch zu tun

Es gibt noch so viel zu tun:

Mehr Reiseberichte.
Material ist noch genug da, allein über einen Tag zu berichten, Bilder rauszusuchen und zu bearbeiten und alles schick zu machen kostet mich einen Tag realen Lebens. Pi mal Daumen. Eher mehr.
Die Webseite endlich von allen HTML4-Relikten zu befreien.
Bei der Wiederaufnahme der Arbeit 2021 hatte ich alles Neue in HTML5 gemacht, aber einige alte Seiten sind noch HTML4.