Wie diese Website entstanden ist – ein Blick hinter die Kulissen
Das Ziel
Als ich mit der Planung für WebInklusiv begann, hatte ich ein klares Bild vor Augen: Die Seite soll das zeigen, wofür ich mich einsetze. Sie muss barrierefrei, blitzschnell, klimafreundlich und frei von unnötigem Ballast sein - und schön natürlich. In diesem Beitrag nehme ich dich mit hinter die Kulissen und zeige dir Schritt für Schritt, wie das Projekt entstanden ist und welche Werkzeuge ich dafür gewählt habe.
1. Die technische Basis – Eleventy (11ty)
Ich habe bewusst auf ein schweres CMS oder ein riesiges JavaScript‑Framework verzichtet und mich für Eleventy (auch 11ty genannt) entschieden. Eleventy ist ein Static Site Generator – das bedeutet, dass alle Seiten bereits beim Build zu fertigen HTML‑Dateien werden.
Warum das für mich funktioniert hat:
- Performance: Der Server liefert nur fertiges HTML, CSS und ein Minimum an JavaScript. Keine Datenbank‑Abfragen beim Aufruf.
- Sicherheit: Ohne klassische Datenbank oder Backend gibt es kaum Angriffsfläche.
- Einfachheit: Inhalte liegen in einfachen Textdateien (Markdown oder Nunjucks‑Templates).
- Wartung: es gibt keine CMS-Updates, welche zukünftig anfallen. Somit ist die Wartung der Seite sehr ressourcenschonend.
- Styling: Sass und Vanilla CSS – kein Overhead durch große Frameworks.
2. Styling – Sass + Vanilla CSS
Ich habe mich gegen große CSS‑Frameworks wie Bootstrap oder Tailwind entschieden. Solche Frameworks bringen oft viel Code mit, den ich gar nicht brauche – das kostet Ladezeit und Energie. Außerdem ist meine Website in Wirklichkeit sehr klein (wenige Seiten, wenig Inhalt), jeglicher Einsatz von externen Bibliotheken wäre ein Overload.
Stattdessen schreibe ich das Stylesheet in Sass (SCSS). Das erlaubt mir, Variablen für Farben und Schriften zu definieren und die CSS‑Dateien logisch zu strukturieren. Beim Build‑Prozess wird alles zu einer einzigen, komprimierten CSS‑Datei zusammengefasst. Mit PostCSS (Autoprefixer) stelle ich sicher, dass die Styles auch in älteren Browsern funktionieren.
3. Interaktion – Vanilla JavaScript
Auf der ganzen Seite gibt es kein React, Vue oder Angular. Die wenigen interaktiven Elemente laufen mit reinem JavaScript. Das hält das Page‑Weight klein und schont die Batterien von mobilen Geräten.
4. Hosting & Deployment – Netlify
Die Seite wird auf Netlify gehostet. Dort gibt es nicht nur das Hosting, sondern auch die komplette Build‑Pipeline. Sobald ich Code‑Änderungen (z. B. ein neuer Blog‑Beitrag) pushen, übernimmt Netlify:
- Eleventy erzeugt das HTML.
- Sass kompiliert das CSS.
- Das Ergebnis wird in Sekunden auf einem globalen CDN ausgeliefert.
Leider ist kein Green Web Hosting garantiert - je nach CDN von wo die Website ausgeliefert wird, ist es entweder ein grüner Server oder nicht. Es gibt seit Jahren laufend Aufrufe mehrerer Website-Besitzer:innen, dass dadurch kein Zertifikat von der Green Web Foundation möglich ist. Auch ich habe vor, mich zu diesem Thema an Netlify zu wenden.
4. Fokus auf Barrierefreiheit (Accessibility)
Werkzeuge sind nur ein Teil – die Umsetzung zählt. Von Tag 1 an habe ich Barrierefreiheit in den Mittelpunkt gestellt:
- Semantisches HTML – Tags wie
<nav>,<main>und<article>geben Screen‑Readern klare Strukturen. - Tastatur‑Zugänglichkeit – Alle interaktiven Elemente sind ohne Maus bedienbar und besitzen einen gut sichtbaren Fokus‑Rahmen.
- Kontraste & Lesbarkeit – Das Farbschema wurde auf hohen Kontrast geprüft, damit Texte für alle leicht lesbar sind. Ich habe dazu den Generator für barrierefreie Farbpaletten von Venngage (Englisch) zu Hilfe genommen.
Fazit
Eine moderne, zugängliche und performante Website muss nicht aus einem Dschungel komplexer Systeme bestehen. Oft reicht eine solide Basis aus HTML, CSS und JavaScript, ein praktischer Generator wie Eleventy und ein intelligentes Hosting‑Angebot wie Netlify. Das Ergebnis ist ein inklusives, schnelles und nachhaltiges Web‑Erlebnis.