Vom Briefing zur Sitemap

Worum es geht

Montagmorgen bei der Agentur Kantig GmbH in Schaffhausen. Die Inhaberin von Flora Rheinfall, einem Blumengeschäft in Neuhausen, sitzt mit Zoe im Sitzungszimmer. Ihre alte Website ist zehn Jahre alt, auf dem Handy muss man zoomen, und neue Kundschaft findet sie über Google kaum. «Ich hätte gern alles drauf», sagt sie. «Hochzeiten, Trauerfloristik, die Firmenabos, unser Team, die Öffnungszeiten, ein paar Fotos und am liebsten auch noch die Geschichte vom Laden.»

Die Versuchung ist gross, jetzt sofort den Editor zu öffnen und loszuschreiben. Genau das ist der häufigste Anfängerfehler. Eine Website ist wie ein Haus: Wer ohne Plan Mauern hochzieht, reisst sie später wieder ein. In dieser Lektion lernst du, wie du aus einem Kundengespräch eine Sitemap, eine Navigation und Wireframes ableitest, bevor du eine einzige Zeile HTML schreibst. Am Ende weisst du auch, wie du Ordner und Dateinamen so anlegst, dass dir der Webserver später keinen Streich spielt.

Das klingt nach Papierkram. In Wirklichkeit ist es der Teil, der dir am meisten Zeit spart. Eine halbe Stunde Planung erspart dir oft einen ganzen Tag Umbauen.

Zuerst die Menschen: Zielgruppe und Aufgaben

Bevor du über Seiten nachdenkst, beantwortest du zwei Fragen:

1. Wer besucht die Website?
2. Was wollen diese Leute dort erledigen?

Für Flora Rheinfall sieht das etwa so aus:

Diese Tabelle ist mehr wert als jede Wunschliste. Sie zeigt dir: Öffnungszeiten und Telefonnummer müssen sofort sichtbar sein, die Geschichte des Ladens ist schön, aber für keine Zielgruppe der Hauptgrund für einen Besuch.

Als Nächstes erstellst du ein Content-Inventar: eine einfache Liste aller Inhalte, die es schon gibt oder die noch geliefert werden müssen (Texte, Fotos, Logo, Preise, Öffnungszeiten, Adresse). Zu jedem Inhalt notierst du, wer ihn liefert und bis wann. So merkst du früh, wenn zum Beispiel die Preise der Firmenabos noch gar nicht feststehen.

Die Sitemap: Welche Seiten gibt es?

Eine Sitemap zeigt alle Seiten einer Website und wie sie zusammenhängen. Du kannst sie dir wie das Inhaltsverzeichnis eines Buchs vorstellen: oben die Startseite, darunter die Hauptseiten, darunter allenfalls Unterseiten.

Für Flora Rheinfall hat Zoe diese Sitemap gezeichnet:

Fünf Hauptseiten, keine Unterseiten. Für einen kleinen Betrieb ist das genau richtig. Ein paar Faustregeln helfen dir beim Entscheiden:

• Fünf bis sieben Hauptpunkte in der Navigation reichen für kleine Auftritte. Mehr überfordert, vor allem auf dem Handy.
• Jeder Punkt beantwortet eine Frage der Zielgruppe. «Hochzeit» beantwortet «Macht ihr Brautsträusse?». Ein Punkt «Allgemeines» beantwortet gar nichts.
• Klare, kurze Namen aus Sicht der Kundschaft. Lieber «Firmenabos» als «Corporate Floristry Solutions».
• Jeder Inhalt ist in höchstens drei Klicks erreichbar. Bei kleinen Websites meist in einem.
• Rechtliches wie Impressum und Datenschutzerklärung gehört nicht in die Hauptnavigation, sondern in den Footer. In der Sitemap zeichnest du es trotzdem ein, denn es ist eine echte Seite.

Die Navigation ist dann einfach die Sitemap in Menüform. Auf dem Desktop steht sie als Zeile oben, auf dem Handy meist als Liste unter einem Menü-Button. Das Logo verlinkt zurück zur Startseite.

Wireframes: Was steht wo?

Ein Wireframe ist eine einfache Skizze einer Seite, ohne Farben, ohne echte Bilder, oft nur mit grauen Kästen und Platzhaltertext. Es beantwortet eine einzige Frage: Was steht wo, und in welcher Reihenfolge?

Warum keine Farben? Weil sonst alle über das Grün diskutieren statt über den Inhalt. Im Wireframe geht es um Prioritäten. Du kannst ihn auf Papier zeichnen oder in Figma mit Rechtecken bauen.

Wichtig: Zeichne zuerst das Handy-Wireframe. Auf 360 Pixel Breite hat alles nur untereinander Platz. Du musst dich entscheiden, was zuoberst steht. Das zwingt zu klaren Prioritäten, und die Desktop-Version ergibt sich danach fast von selbst.

Zoes Handy-Wireframe der Startseite von oben nach unten:

+----------------------------+
| Logo              [Menü]   |
+----------------------------+
| Bild: Blumenstrauss        |
| Frische Blumen aus         |
| Neuhausen am Rheinfall     |
| [ Anrufen ]  [ Route ]     |
+----------------------------+
| Heute offen: 8.00 bis 18.30|
+----------------------------+
| Teaser Hochzeit      [>]   |
| Teaser Trauer        [>]   |
| Teaser Firmenabos    [>]   |
+----------------------------+
| Adresse, Karte, Kontakt    |
+----------------------------+
| Footer: Impressum,         |
| Datenschutz, Instagram     |
+----------------------------+

Als die Inhaberin «alles auf die Startseite» wollte, zeigte Zoe ihr am Handy-Wireframe, dass man dafür sechsmal scrollen müsste. Die beiden einigten sich auf drei Teaser, die zu den Unterseiten führen. Das ist Begründen mit dem Kunden statt gegen den Kunden: Du zeigst die Folgen, statt einfach Nein zu sagen.

Änderungswünsche abschätzen

Nach der Präsentation kommen fast immer Wünsche. Für deine Planung hilft eine einfache Einteilung:

Eine neue Seite wirkt klein, betrifft aber jede bestehende Seite, weil die Navigation überall angepasst werden muss. Genau deshalb klärst du die Sitemap vor der Umsetzung.

Ordnerstruktur und Dateinamen

Jetzt wird es technisch. Die Sitemap übersetzt du in eine Ordnerstruktur. Die Startseite heisst immer index.html, denn diese Datei liefert der Webserver aus, wenn jemand nur die Domain aufruft.

flora-rheinfall/
├── index.html
├── hochzeit.html
├── trauer.html
├── firmenabos.html
├── kontakt.html
├── impressum.html
├── css/
│   └── style.css
├── fonts/
└── img/
    ├── logo.svg
    └── brautstrauss-pfingstrosen-800.webp

Für Dateinamen gelten strenge Regeln, weil Webserver meist unter Linux laufen:

• Nur Kleinbuchstaben, Ziffern und Bindestriche: trauer-kranz.webp
• Keine Leerzeichen: Aus Trauer Kranz.jpg wird in der Adresse Trauer%20Kranz.jpg
• Keine Umlaute und Sonderzeichen: ä wird zu ae, ü zu ue, ö zu oe
• Sprechende Namen: brautstrauss-pfingstrosen.webp statt IMG_4711.jpg. Das hilft dir beim Wiederfinden und Suchmaschinen beim Verstehen.

Ein Name in dieser Form heisst Slug (auch «kebab-case»). Er taugt für Dateinamen und für Adressen wie flora-rheinfall.ch/firmenabos.html.

Schritt für Schritt: Slugs automatisch erzeugen

Zoe hat aus der Fotoauswahl 22 Bildtitel wie «Brautstrauss mit Pfingstrosen» bekommen. Statt alles von Hand umzubenennen, schreibt sie eine kleine JavaScript-Funktion, die aus einem Titel einen sauberen Slug macht. Das Vorgehen:

1. Alles klein schreiben: «Brautstrauss mit Pfingstrosen» wird zu «brautstrauss mit pfingstrosen».
2. Umlaute ersetzen: «Grüsse für Lötschental» wird zu «gruesse fuer loetschental».
3. Akzente entfernen: «Café» wird zu «cafe». Dafür zerlegt normalize("NFD") ein «é» in «e» plus Akzentzeichen, und das Akzentzeichen wird gelöscht.
4. Alles, was kein Buchstabe a bis z und keine Ziffer ist, durch Bindestrich ersetzen: Leerzeichen, Kommas, Ausrufezeichen.
5. Mehrere Bindestriche zusammenfassen und am Anfang und Ende entfernen.

function slug(titel) {
  return titel
    .toLowerCase()                          // 1. klein
    .replaceAll("ä", "ae")                  // 2. Umlaute
    .replaceAll("ö", "oe")
    .replaceAll("ü", "ue")
    .normalize("NFD")                       // 3. é wird zu e + Akzent
    .replace(/[̀-ͯ]/g, "")        //    Akzent entfernen
    .replace(/[^a-z0-9]+/g, "-")            // 4. alles andere wird Bindestrich
    .replace(/^-+|-+$/g, "");               // 5. Bindestriche am Rand weg
}

console.log(slug("Brautstrauss mit Pfingstrosen")); // brautstrauss-mit-pfingstrosen
console.log(slug("  Grüsse aus Neuhausen!  "));    // gruesse-aus-neuhausen
console.log(slug("Café-Tischdeko, Herbst 2026"));   // cafe-tischdeko-herbst-2026

Zwischenergebnisse für « Grüsse aus Neuhausen! »:

Beachte die Reihenfolge: Die Umlaute müssen vor normalize ersetzt werden. Sonst zerlegt normalize das «ü» in «u» plus zwei Punkte, und du bekommst «grusse» statt «gruesse».

Jetzt bist du dran: Im Code-Labor baust du diese Funktion selbst.

Typische Fehler

1. Direkt mit HTML und CSS starten. Ohne Sitemap merkst du erst nach Tagen, dass eine Seite fehlt oder zwei Seiten dasselbe sagen. Korrektur: Zielgruppen, Content-Inventar, Sitemap und Wireframe kommen zuerst, auch wenn es nur eine Stunde dauert.

2. Die Navigation aus Sicht des Betriebs benennen. «Dienstleistungen», «Portfolio», «Unternehmen» sagen der Kundschaft wenig. Korrektur: Benenne Punkte nach dem, was Besuchende suchen: «Hochzeit», «Firmenabos», «Kontakt».

3. Nur für Desktop skizzieren. Auf dem Desktop passt fast alles nebeneinander, auf dem Handy nicht. Korrektur: Zeichne das Handy-Wireframe zuerst und entscheide dort die Reihenfolge.

4. Wireframes schon farbig und mit echten Bildern gestalten. Dann diskutiert die Kundin über Farben, bevor die Struktur steht. Korrektur: graue Kästen, Platzhaltertext, Fokus auf Reihenfolge und Inhalte.

5. Dateinamen wie «Team Foto 1.JPG». Leerzeichen, Grossbuchstaben und Umlaute führen online zu kaputten Links. Korrektur: konsequent Slugs in Kleinbuchstaben.

Zusammenfassung

• Plane zuerst die Zielgruppen und ihre Aufgaben. Daraus folgt, was auf die Seite gehört und was zuoberst steht.
• Ein Content-Inventar zeigt dir früh, welche Inhalte noch fehlen und wer sie liefert.
• Die Sitemap legt die Seiten fest, die Navigation zeigt sie auf jeder Seite. Bei kleinen Auftritten reichen 5 bis 7 Punkte, Rechtliches gehört in den Footer.
• Wireframes klären die Reihenfolge der Inhalte, ohne Farben. Beginne mit dem Handy.
• Begründe deine Struktur mit den Zielen der Kundschaft und schätze ab, was Änderungswünsche auslösen.
• Startseite heisst index.html, Dateinamen sind Slugs: klein, ohne Leerzeichen, ohne Umlaute.