Warum meine Website hässlich ist: weil ich sie gemacht habe

 (goodinternetmagazine.com)
22 Punkte von GN⁺ 2025-05-30 | 3 Kommentare | Auf WhatsApp teilen
  • Jemand hätte meine Website cooler machen können, aber dann wäre sie nicht meine gewesen
  • Der Charakter einer Website entsteht aus dem Geschmack, den Obsessionen und der direkten Handschrift der Person, die sie gemacht hat
  • Im Streben nach Einfachheit und Vertrautheit wurden CSS und JS minimiert, und mit direkten CSS-Transformationsregeln wurden Chaos, Wiederholung und eine Atmosphäre wie in einer Buchhandlung erzeugt
  • Die Seite ist so entworfen, dass sie auf Nutzerinteraktionen nur mit CSS reagiert; ihre Merkmale sind eine ungekünstelte Textur und unerwartete Veränderungen
  • Die Website verändert sich fortlaufend, wächst und wandelt sich mit ihrer Besitzerin oder ihrem Besitzer, sodass jedes eigene „Hässliche“ lebendig wird

Die Website, die ich gemacht habe, und was ihre Hässlichkeit bedeutet

  • Wenn meine Mutter ein tolles Bild an den Kühlschrank hätte hängen wollen, hätte sie vermutlich ein Werk berühmter Künstler wie Vermeer, Lichtenstein oder Wyeth reproduziert und aufgehängt
  • Aber sie wollte keine solche Kunst, sondern eine Zeichnung von mir
  • Ein Designer mit Stil hätte meine Seite vielleicht schick machen können, aber dann wäre sie nicht mehr meine gewesen
  • Manche Leute bauen zum Brotbacken erst Weizen an, gewinnen Salz und züchten Hefe, ich nicht
  • Mein unausgereifter Geschmack gibt sich damit zufrieden, massenhaft Breadsticks von Olive Garden zu essen
  • Solche Vorlieben entstehen aus dem Besitzgefühl des Einzelnen
  • Aus ihren jeweils eigenen Gründen gestalten Menschen ihren ganz eigenen Raum im Internet

Die Vielfalt persönlicher Websites

  • All diese Handlungen entspringen einer inneren Motivation und dem Wunsch: „Niemand außer mir kann das tun“
  • Ich habe zwar nicht den Antrieb, Brot, Server oder Chips zu bauen, aber dieser Drang äußert sich bei mir in Humor, Systemen, Software und Struktur
  • Wenn das Gefühl zu stark wird, bricht es in Form von Fiktion, HTML/CSS, schäbigen Robotern oder traurigen Liedern hervor
  • Deshalb ist meine Website meine

Das Zusammenleben von Einfachheit und Eigenheit

  • Früher wollte ich nur Einfachheit und Vertrautheit
    • Rauschen entfernen
    • Kontraste betonen
    • Menütiefe reduzieren
    • langweiliges HTML
    • CSS minimieren
    • JS vermeiden usw.
  • 2023 sah meine Website so aus (siehe Bild im Original)

Design im Chaos und die Geschichte mit CSS

  • Irgendwann begannen die Probleme, als ich beschloss, mehr horizontale Breite zu nutzen
  • Der ursprüngliche Plan war simpel: flex-wrap auf ul anwenden
  • Doch weil sich dadurch auch der Text umbrach, wurden die einzelnen Links schlechter voneinander abgegrenzt
  • Manche lasen es als inline, andere nahmen es eher als inline-block wahr
  • Ich versuchte auch, mehr Leerraum zu schaffen, jedem Link einen Rahmen zu geben oder Punkte zwischen die Links zu setzen, aber nichts davon gefiel mir

  • Also entschied ich mich dafür, den Links Variationen zu geben

  • Das Chaos auf der Startseite entsteht tatsächlich aus ein paar einfachen Regeln

    li:nth-child(4n + 0) { transform: rotate(1deg); }  
li:nth-child(4n + 1) { transform: rotate(-0.6deg); }  
li:nth-child(4n + 2) { transform: rotate(0.5deg); }  
li:nth-child(4n + 3) { transform: rotate(-0.75deg); }  
li:nth-child(6n + 0) { font-family: Times; }  
li:nth-child(6n + 1) { font-family: Helvetica; }  
li:nth-child(6n + 2) { font-family: Georgia; }  
li:nth-child(6n + 3) { font-family: Times; }  
li:nth-child(6n + 4) { font-family: Arial; }  
li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }

  • Ursprünglich nutzte ich für mehr Variation teilerfremde ganze Zahlen (coprime integer), doch mir gefiel schließlich gerade die subtile Wiederholung des Musters

  • Ich liebe Minimalismus, aber ich mag kein kaltes Gefühl
  • Um etwas Warmes wie in einem „Antiquariat“ auszudrücken, fügte ich einige CSS-Überraschungselemente hinzu 
    li:nth-child(5n + 2) { font-weight: 100; }  
li:nth-child(7n + 2) { letter-spacing: -1px; }  
li:nth-child(41n + 31) { transform: rotate(181deg); }
  • Das Web ist immer noch ein interaktives Medium, also wollte ich, dass es auch ohne JS auf Cursorbewegungen reagiert
  • Mit dem folgenden CSS erzeuge ich das Gefühl, „Gras zu berühren“ 
    li:nth-child(2n + 0):hover { transform: rotate(-2deg); }  
li:nth-child(2n + 1):hover { transform: rotate(2deg); }
  • So entsteht eine Echtzeitreaktion auf Cursorbewegungen
  • Und weil ich das Scrollgefühl betonen wollte, ohne Scrolljacking zu verwenden, ließ ich die Seite mit einem texturierten Hintergrund wie Papier wirken
  • Mit css-doodle wird die Textur zusammengesetzt 
    svg {  
viewBox: .5 .5 10 10;  
fill: #000;  
circle*1000 {  
  cx, cy: @r(10), @r(10);  
  r: @r(.005, .01);  
  }  
}
  • Im Light Mode wirkt es wie Staub auf Papier, im Dark Mode wie Sterne am Nachthimmel
  • 2024 hat sich meine Website so verändert (siehe Bild im Original)

Ich verändere mich, die Website auch

  • Schon bald wird meine Website wieder völlig anders aussehen
  • Denn ich bin die Eigentümerin bzw. der Eigentümer meiner Website, und auch ich selbst verändere mich ständig
  • Auch du wirst dich verändern
  • Deine Leidenschaft und deine Werte werden sich in etwas anderes ausbreiten
  • Auch wenn es hässlich wirkt, wird dein eigenes Werk weiterleben und sich bewegen

Autor Taylor Troesh ist der Bürgermeister von taylor.town, Autor von scrapscript und jemand, der Gefallen an schäbigen Dingen findet

Verwandte Beiträge

3 Kommentare

 
secret3056 2025-05-30

Ich habe es mir angesehen, und es ist wirklich ziemlich schwer zu durchschauen...

https://taylor.town/
 
tsboard 2025-05-30

Ich kann dem Inhalt sehr gut nachempfinden. Auch ich bemühe mich, mein mangelhaftes Gespür für Design zu kaschieren, indem ich Frameworks nutze, die Designer mit viel Sorgfalt erstellt haben, und trotzdem mache ich auf meine beharrliche Art bis heute weiter.
Jedes Mal denke ich über ein besseres Design nach, verbessere hier und da etwas und habe Freude daran, es zu bauen und zu betreiben.
Dank dieser Aktivitäten hänge ich noch mehr daran und habe, glaube ich, auch mehr Spaß daran. Haha
 
GN⁺ 2025-05-30
Hacker-News-Kommentare
  • Haha, stimmt schon. Die meisten Entwicklerfreunde in meinem Umfeld sind schon vor langer Zeit mit fertigen Templates wie Hugo oder Jekyll auf ihre eigenen Seiten umgezogen, aber ich halte meinen Blog stur weiter mit einem System am Leben, bei dem ich sowohl CSS als auch Backend komplett selbst gebaut habe. Für mich liegt die eigentliche Freude nicht darin, „eine Website zu haben“, sondern im „Prozess, eine Website zu bauen“. Ich verstehe nicht, warum ich den unterhaltsamen Teil jemand anderem überlassen sollte. Es ist ein bisschen wie ein Oldtimer, den man selbst instand hält. Man könnte auch einfach ein sauberes, robustes Auto kaufen, aber dann wäre es nicht mehr spannend. Nicht das Ziel ist wichtig, ich bin jemand, der den Spaß sucht. Da ich bei der Arbeit den ganzen Tag Websites baue, bei denen ich Design oder Features nicht frei nach meinem Geschmack festlegen kann, kann ich auf meiner persönlichen Website diese Freiheit vollständiger Kontrolle absolut nicht aufgeben
    • Auch meine Website ist komplett selbst gemacht, und ich habe sie in den letzten 10 Jahren bestimmt fast 10-mal neu gebaut. Es macht einfach Spaß, jedes Jahr irgendetwas umzubauen. Der Matrix-JS-Code auf der Startseite (wenn man auf https://oxal.org klickt, erschrickt man vielleicht), wird mit meinem selbstgebauten Static Site Generator genox gebaut, ich nutze auch mein selbstgemachtes CSS-Theme sakura, und wenn man auf den Blog geht (https://oxal.org/blog/), folgt einem dort ein kleiner Cyborg (das Basisbild wurde mit chatgpt erstellt, die Sprite-Animation habe ich selbst in Piskel gemacht). Deployment erfolgt manuell auf einen VPS (Build mit make), ich betreibe mehrere Shell-Skripte, die Dateien an private Orte hochladen, das Favicon habe ich schon als Student als Pixel-Art gemacht (Link), ich wollte sogar mal meine eigene Schrift bauen und habe dann aufgegeben und stattdessen eine von Naruto inspirierte Schrift verwendet, und wenn man sich den Quelltext über „view-page-source“ ansieht, gibt es noch mehr Spaß zu entdecken. Wenn ich meine Seite ansehe, habe ich das Gefühl, dass in ihr die Spuren meines Wachstums als Software Engineer stecken, deshalb ist mir dieses einfache Werk so wertvoll
    • Meine Homepage (https://pablo.rauzy.name/) habe ich ebenfalls komplett von Grund auf selbst gebaut. Ich nutze nur ein angepasstes Bash-Skript und ein Makefile für den Build, alles ist vollständig statisch. Nicht eine Zeile JS. Während ich CSS erforscht habe, habe ich Responsive Design, Mobile-Menü und Ähnliches ebenfalls selbst umgesetzt. Ich glaube, ich habe mir dabei sogar ein paar eigene Rubriken oder Methoden ausgedacht, und genau dieses Ausprobieren und Scheitern macht wirklich Spaß
    • Ich bin auf derselben Reise. Angefangen habe ich mit Hugo, am Ende habe ich dann meinen eigenen static site generator gebaut: Loulou. Während des ganzen Baus war es einfach nur Spaß, und es selbst zu machen war wirklich eine wertvolle Erfahrung. Meine Seite ist hier
    • Dieser eine Satz — „Die Freude liegt nicht darin, eine Website zu haben, sondern sie zu bauen“ — ist der Kern. Das berührt fast den Glaubenssatz der Radiant-Ritter: „Journey Before Destination“. Das ist eine Geschichte, die sich in vielen Mythen wiederholt. Auch Herakles vollbrachte als Mensch großartige Taten und hörte damit auf, als er ein Gott wurde. Die Botschaft ist, sich die Mühe und das Menschliche nicht nehmen zu lassen. Wenn ihr euch bedrückt fühlt, empfehle ich Vogelklang-Musik unter https://birdymusic.com. Vielleicht die coolste oder die seltsamste Website, die ich heute gesehen habe
    • Wenn das das Ziel ist, dann ist es gut so. Aber manche Websites wollen einfach nur schlicht einen bestimmten Zweck erfüllen und dann fertig sein. Zum Beispiel diese Seite, die einfach nur eine konkrete Aufgabe erledigt
  • Auf dem Bild der hässlichen Website aus dem Originalbeitrag ist zwar alles voller Blogposts, aber die eigentlichen Texte sind auf einer anderen Website veröffentlicht. Wenn es dort keine Marketing-Cookies oder Mitgliedschafts-Pop-ups gäbe, würde ich lieber direkt auf diese hässliche Seite gehen
    • Im Screenshot sieht man die Mailadresse hello@taylor.town. Ich war aus genau demselben Grund neugierig und habe taylor.town besucht (https://taylor.town/). Und nachdem ich diesen Beitrag gepostet hatte, wurde die Seite extrem langsam geladen, also hat wahrscheinlich der Hacker-News-Effekt zugeschlagen, der HN hug of death
    • Ich dachte erst, das sei ein Kritiktext über das übliche „enshittified web“. Ich finde diese Seite zwar schlecht, aber daran ist auch etwas komisch: (1) Es gibt einen Banner zum Verkauf eines gedruckten Buchs (2) Es gibt ein Cookie-Zustimmungs-Pop-up (3) Ein „Good Internet“-Header lugt mitten durch allerlei Symbole schlechter moderner Websites hindurch (4) Die Headline ist wegen des Cookie-Pop-ups schwer zu lesen (5) Wenn man das Cookie-Banner wegklickt, bleiben stattdessen ein dauerhaft sichtbares Cookie-Settings-Icon und ein „+ Become a Member“-Button. Im Vergleich dazu ist taylor.town wirklich gutes Web
    • Vermutlich wurden die Texte auf einer anderen Website veröffentlicht, weil Hintergrund, Schriftwahl oder Farben der hässlichen Seite das Lesen unangenehm machen. Zum Beispiel: taylor.town/wealth-000. Ich habe meine persönliche Website auch selbst gebaut, aber sie ist nicht hässlich. Ich glaube, diese Person hat ihre Seite absichtlich hässlich gemacht, fast ein bisschen selbstgefällig
  • Ich denke, es gibt getrennte Fälle von „hässlich, aber interessant“ und „hässlich und langweilig“. Diese Seite liegt eher in der zweiten Kategorie. Im Grunde scheint es nur ein CMS zu sein, das um einen Markdown-Ordner kreist und die Titel als Links ausspuckt. Es gibt überhaupt keine Informationsarchitektur, keine Kategorien, Icons, Bilder oder Daten, also wird alles mit exakt derselben Gewichtung gezeigt. Es ist nur so angeordnet, dass es „ungewöhnlich“ aussieht. Die meisten Entwicklerblogs bekommen ihren Traffic ohnehin über Suchmaschinen, deshalb ist das Design der Homepage vielleicht nicht so wichtig, aber wenn man wollte, dass Leser aktiv stöbern und die Architektur erkunden, sind Versuch und Ergebnis etwas enttäuschend. Am Ende wirkt es kaum anders als ein Blog mit einem Standard-Ghost-Template
    • Das muss es auch nicht. Wichtig ist, dass das Ergebnis nicht dazu da ist, die Leser zufriedenzustellen, sondern den Autor selbst. Deshalb ist externe Meinung hier nicht der entscheidende Punkt
    • Ich glaube, du verfehlst den Kern der Botschaft des Autors
  • Wenn man Websites mit Frameworks baut, sehen sie am Ende alle gleich aus und fühlen sich auch so an, und das macht überhaupt keinen Spaß. Für geschäftliche Zwecke verstehe ich das, aber wenn man sich selbst oder seine Arbeit zeigen will, halte ich eine eigenwillige Website für viel bedeutungsvoller. Auch wenn es für SEO oder Retention ineffizient ist, finde ich es besser, die eigene Persönlichkeit hineinzulegen. Ich mag diese heutigen Website-Builder nicht, weil sie zu strukturiert und zu uniform geworden sind. Ich vermisse die Zeiten von Geocities und Freewebs wirklich: schwer lesbare Hintergrundbilder, automatisch abspielende Musik, Cursor, die der Maus folgen, rotierende Totenschädel vor Flammen und so etwas
  • Ich mag diese Philosophie sehr, weil sie genau das Gefühl des frühen Internets bewahrt. Damals wurden Flash-Seiten wegen seltsamer Navigation oder anderer Probleme oft kritisiert, aber jenseits solcher Schwächen respektiere ich die Kreativität, mit der Menschen ihre Websites einzigartig gemacht haben. Heute ist das Internet viel zu vereinheitlicht, und durch KI-generierte Inhalte wird es meiner Meinung nach noch schlimmer werden. Es ist schön, solche nicht standardisierten Ecken zu sehen
  • Ich stimme dieser Philosophie vollkommen zu. Meine Website drückt ganz und gar mich als Person aus. Selbst wenn jemand sagt, sie sei hässlich oder viel zu unprofessionell, bin ich mit diesem Stil zufrieden. Ich wünschte, es gäbe im Web und in der Welt mehr von dieser nonkonformen Haltung
  • Ich habe den Text wirklich gern gelesen. Das Gute am „old web“ war, dass es keine klaren Standards gab und die Leute deshalb alle auf ihre eigene Weise experimentiert und etwas gebaut haben. Es war etwas chaotischer, aber dafür gab es diese Euphorie, wenn man zufällig eine wirklich coole, charaktervolle Seite entdeckte. Das heutige Web wirkt zu strukturiert, zu offiziell, und weil fast alles mit denselben Templates und Frameworks gebaut wird, ist es zu einem vorhersehbaren Konsumraum geworden. Der Reiz des Entdeckens ist verschwunden
  • Die Website dieser Person im Jahr 2023 war nicht hässlich, sie wirkte eher minimalistisch. Jetzt ist sie wirklich hässlich geworden. Erst dachte ich, es gehe um die Version von 2023, und habe dem Inhalt zugestimmt, aber als ich die wirklich hässliche Version gesehen habe, entwickelte ich eher eine ablehnende Haltung gegenüber der Botschaft selbst
    • Ich verstehe nicht ganz, was du mit „Jetzt ist sie wirklich hässlich, deshalb wirkt die Botschaft anders“ meinst. Die Gesamtbotschaft dieses Texts ist doch, dass es einen Sinn darin gibt, etwas unabhängig vom Blick anderer so zu bauen, wie man es selbst mag und genießt. Dass viele Leute es hässlich finden, macht die Seite und ihre Botschaft für mich eher noch reizvoller. In dem Moment, in dem man am Äußeren hängenbleibt und es schade findet, verpasst man den eigentlichen Punkt
    • Das frühere Design war sauber, minimalistisch und ... nicht besonders. Jetzt ist es absichtlich chaotisch und unordentlich. Ob hässlich oder nicht, es bleibt stark im Gedächtnis. Es hat auch Nachteile (bestimmte Links später wiederzufinden ist schwierig), aber das ist dieser Person nicht wichtig. Gewollt waren wirklich „Unbequemlichkeit“, „Dissonanz“, „Neugier“ und vor allem „/etwas Eigenes/“
  • Ich habe noch keine persönliche Website. Wenn ich eine mache, will ich es richtig nur mit HTML+CSS+JS oder JQ versuchen. Ich denke über einen Webserver wie Apache oder nginx nach. Hochladen würde ich es wohl auf AWS Free Tier oder Shared Hosting. Wenn ich nur herausfinde, wie man ein div exakt mittig ausrichtet, könnte ich sofort loslegen
    • Ich betreibe meine Seite seit einem Jahr auf AWS Free Tier mit der Kombination S3+cloudfront für 0 Euro. Das ist wahrscheinlich das beste Preis-Leistungs-Verhältnis. Meine Seite ist eine einzelne HTML+CSS-Seite, ChatGPT hat das Template für mich erstellt und ich habe es einfach so benutzt. Ich kann nicht gut genug dafür sorgen, dass es auf Mobile und Desktop gleichermaßen sauber funktioniert, also bin ich damit einfach zufrieden
    • Ich würde empfehlen, ein paar Minuten zu investieren und direkt auf Neocities loszulegen
    • Ich weiß nicht, warum das Zentrieren eines div zu einem Meme geworden ist 
        width: 60%; // Breite nach Wunsch festlegen
  margin: 0 auto;
      Jetzt kannst du deinen Blog starten
    • Ich habe es genauso gemacht: domi.work Ich habe es auch hässlich gemacht :)
    • Bei mir ähnlich, nur mit 11ty obendrauf für den statischen Build und Deployment über netlify pages
  • Sauber gestaltete Seiten mit Templates sehen alle ähnlich aus, aber jede selbstgebaute Seite hat ihre ganz eigene, einzigartige „seltsame Ecke“. Für ein persönliches Projekt würde ich eher „Wabi-Sabi-HTML“ als eine Tailwind-Landingpage wählen