17/05/2026
Hab jetzt auch meine zentrale Homepage neu gemacht. Die alte war als WASM (Web-Assembly) kompiliert. Die neue ist sozusagen eine „normale“ Website im Responsive Design:
https://www.andy-geiss.de
Bei der zentralen Homepage handelt es sich sozusagen um Info-Material mit Reichweite. Dafür ist WASM nur bedingt geeignet. Bezüglich SEO packt man da alles in die Meta-Tags, denn die Suchmaschinen durchsuchen vermutlich nicht den Inhalt der WASM-Datei.
Bei einer normalen Website dagegen wird neben den Meta-Tags auch der Inhalt inkl. HTML-Layout-Struktur untersucht. Zwischen dem Header und dem Footer befindet sich der Main-Bereich. Darin enthalten sind Article-Container, die wiederum aus mehreren Sections bestehen können. Auch die Überschriften von h1 bis h5 sind von Bedeutung. Im Header-Bereich gibt es normalerweise einen Nav-Container (Navigation) als Menü.
Doch da gibt es auch ohne WASM einiges zu beachten, sofern es sich nicht um rein statisches HTML handelt. In Typescript/NodeJS/Angular erstellte Websites werden zwar in HTML dargestellt, standardmäßig aber ist im Seitenquelltext nur ein leerer Container (Selector) zu sehen, in dem der Inhalt während der Laufzeit dynamisch generiert wird. Da ist es fraglich, ob und inwieweit die Suchmaschinen den dynamisch generierten Inhalt untersuchen.
Daher ist es sinnvoll, das Angular-Projekt von vornherein mit SSR (Server Side Rendering) und Prerendered Routes zu erstellen, sofern es sich nicht um eine Webanwendung mit Funktionsumfang, sondern um eine Website handelt, die Reichweite erzielen soll. Damit enthält der Seitenquelltext nicht mehr nur den leeren Selector-Container, sondern statisch die besagte HTML-Layout-Struktur als Futter für die Suchmaschinen.
Bei meiner Girgl-Website war das Ziel eine allgemeingültige Vorgehensweise für Text und Bilder. Bei meiner zentralen Homepage aber fiel mir auf, dass der Feinschliff dann doch immer wieder mit zusätzlichem Aufwand verbunden ist, insbesondere für alle Konstellationen des Responsive Designs.
Das Papyrus hab ich mir im Schreibwarenhandel geholt und abfotografiert. Allerdings will ich nicht nur die Textur, sondern auch historisch versiffte Ränder mit Unebenheiten und Rissen. Obendrein soll sich das vertikal oder horizontal nahtlos mit Repeat – als angrenzende Kacheln – nutzen lassen.
Zunächst erstelle ich die Risse genauso glatt wie die Ränder als spitze Dreiecke in Schwarz. Daraufhin geht es darum, für Unebenheiten zu sorgen, sowohl für die Ränder als auch für die spitzen Risse. Im Vorfeld erstelle ich dafür im Photoshop eine sogenannte Verschiebungsdatei, die ich für den Hauptschritt benötige. Dafür eignet sich der Renderfilter „Differenz-Wolken“ als eigene PSD-Datei gespeichert. Nun öffne ich das Papyrus-Bild mit den Rissen und wende darauf den Verzerrungsfilter „Versetzen“ an. Hier verlangt Photoshop die Verschiebungsdatei. Die Ränder und Risse erhalten dadurch die Unebenheiten der Differenz-Wolken.
Wie aber macht man diese nahtlos angrenzenden Repeat-Ränder?
Dafür gibt es den „Sonstigen Filter“ namens „Verschiebungseffekt“. Klingt ja schon wieder nach Verschiebungsdatei, ist aber was anderes als das „Versetzen“ für die Unebenheiten. Hier verschiebt man die Ränder horizontal oder vertikal ins Zentrum, wodurch die (neuen) Ränder exakt angrenzen. Die sichtbare Naht befindet sich dadurch im Zentrum, wo sie sich mit Content-Aware-Funktionen in eine unsichtbare umgestalten lässt. So bekommt man eine endlos nutzbare Wiederholungsmöglichkeit ohne sichtbare Nähte.
