Interne Anleitung · v1.6.1

Bricks-Umsetzung der RT-Website.

Diese Seite ist eine Arbeitsanleitung für die spätere Umsetzung in Bricks. Sie gehört nicht in die öffentliche Navigation und bleibt auf der Live-Website auf noindex.

B

Grundprinzip

Die Vorlage als System bauen, nicht Seite für Seite nachzeichnen.

Wiederkehrende Werte und Muster gehören in Bricks in Theme Styles, Global Variables, Global Classes und Templates. Individuelle Seitengestaltung entsteht danach durch Komposition, Inhalt und gezielte Varianten.

01

Theme Styles

Grundtypografie, Links, Formelemente und Fokuszustände global definieren. Sora für Überschriften und Mulish für Lesetext lokal in WordPress hosten.

02

Global Variables

Farben, Inhaltsbreite, Abstände, Radien und fluid skalierende Typografie zentral pflegen. Keine wiederholten Einzelwerte pro Seite.

03

Global Classes

Nur echte wiederkehrende Muster als globale Klassen anlegen: Container, Section, Eyebrow, Buttons, Editorial Row, Dark Section, FAQ, CTA und interne Implementierungsbereiche.

04

Templates

Header, Footer und 404 als Bricks Templates mit passenden Bedingungen umsetzen. Header sticky, aber ruhig und ohne unnötige Animation.

Gestaltungsrichtung

Weniger Boxen, mehr Rhythmus und Weißraum.

v1.4.0 führt die visuelle Richtung aus v1.3.0 fort und setzt bewusst stärker auf offene Inhaltszeilen, große Typografie, klare Flächenwechsel und einzelne visuelle Motive. Karten nur dort einsetzen, wo ein Inhalt tatsächlich als abgegrenzte Einheit verstanden werden soll.

Farben

  • rt-blue: #006AB5
  • rt-blue-deep: #00538F
  • rt-green: #009416
  • rt-yellow: #EDA509
  • rt-red: #C22515
  • ink: #111214
  • soft: #F4F6F8

Layout

  • content-max: etwa 1280px
  • großzügige, fluid skalierende Section-Abstände
  • Hero-H1 bewusst kompakter als in v1.2.0; dominant, aber nicht flächenfüllend
  • Lesetext ca. 17–18px Basis
  • große freie Flächen als Teil der Gestaltung
  • Boxen nur für echte Gruppen, Formulare oder interne Hinweise

Nutzerführung

Jede Seite soll schnell erfassbar sein.

Besucher sollen früh erkennen, ob sie richtig sind, was angeboten wird und wie der nächste sinnvolle Schritt aussieht. Auf Leistungsseiten deshalb direkt nach dem Hero die kurze Leistungsnavigation beibehalten.

01

Suchintention beantworten

H1 und Einstieg nennen die Leistung in natürlicher Sprache und erklären unmittelbar den Nutzen.

02

Orientierung anbieten

Verwandte Leistungen direkt erreichbar machen, ohne den Inhalt mit Navigationselementen zu überladen.

03

Vertrauen aufbauen

Arbeitsweise, Grenzen, Betreuung und später echte Referenzen sichtbar machen statt Marketingbehauptungen zu stapeln.

04

Nächsten Schritt zeigen

Pro Abschnitt höchstens einen dominanten CTA. Abschluss-CTA und Kontaktweg bleiben eindeutig.

Bewegung & Grafik

Sanft beleben, nicht beschäftigen.

Parallax und Reveal-Effekte nur als leise Unterstützung einsetzen. Inhalte müssen ohne Animation vollständig verständlich und sichtbar bleiben.

  • Parallax nur an dekorativen Motiven, nicht an wichtigem Text
  • kleine Scrollwege und geringe Bewegung
  • keine scrollgekoppelten Effekte auf kleinen Smartphones, wenn sie Unruhe erzeugen
  • prefers-reduced-motion vollständig respektieren
  • SVG- oder WebP-Grafiken schlank halten und ohne Layout Shift laden
  • keine Animation darf Navigation oder CTA verzögern
  • Jede öffentliche Seite erhält ein eigenes thematisches Hero-Motiv; Bricks bleibt in den öffentlichen Texten unerwähnt.

Responsive

Auf Mobil neu komponieren, nicht nur verkleinern.

Die großen Desktop-Kompositionen dürfen mobil vereinfacht werden. Dekorative Hero-Mockups und Motive können auf kleinen Displays entfallen, wenn dadurch H1, Lead und CTA schneller erfassbar werden.

01

Desktop

Große Typografie, asymmetrische Aufteilungen und viel Weißraum.

02

Tablet

Komplexe Grids vereinfachen und visuelle Motive unter oder neben den Inhalt verschieben.

03

Mobile

Einspaltig, kurze Wege, klare CTA-Reihenfolge. Dekoration nur behalten, wenn sie einen echten Mehrwert liefert.

04

200 % Zoom

Keine festen Inhalts-Höhen, kein abgeschnittener Text, sichtbarer Fokus und logischer Reflow.

SEO & SEOPress

SEO bleibt Inhalt und Struktur – nicht Dekoration.

Die sichtbare Seitenstruktur wird in Bricks semantisch nachgebaut. Metadaten, Canonicals, Robots, Social-Daten und gegebenenfalls Schema werden ausschließlich über SEOPress gepflegt.

01

Überschriften

Genau eine H1 pro Seite. H2/H3 logisch nach Inhalt einsetzen; keine Überschrift nur wegen ihrer Schriftgröße wählen.

02

Interne Verlinkung

Leistungsnavigation, Kontextlinks und CTA-Verweise erhalten. Ankertexte natürlich formulieren und nicht künstlich mit Keywords überladen.

03

SEOPress

Die grünen Arbeitsbereiche der Vorlage nicht öffentlich nachbauen. Ihre Werte in SEOPress übernehmen. Falls Bricks eigene parallele SEO/Open-Graph-Ausgaben aktiviert sind, Doppelungen vermeiden.

04

FAQ

FAQs als echte Besucherhilfe beibehalten. FAQ-Schema nur einsetzen, wenn Inhalt und aktuelle Suchmaschinenrichtlinien dies sinnvoll machen; nicht automatisch allein wegen vorhandener Fragen.

Kontaktformular

Auf der Live-Website das Bricks Form Element verwenden.

Die mailto-Funktion der statischen Vorlage dient nur der Vorschau. In WordPress das Bricks Form Element mit serverseitiger Verarbeitung einsetzen, SMTP sauber konfigurieren und datensparsamen Spam-Schutz verwenden.

  • serverseitige Formverarbeitung statt mailto
  • E-Mail-Aktion sauber konfigurieren
  • Turnstile oder Honeypot als Spam-Schutz prüfen
  • nur notwendige Felder abfragen
  • verständliche Fehler- und Erfolgsmeldungen
  • Datenschutztext und Einwilligung nur dort, wo tatsächlich erforderlich

Barrierefreiheit

Semantik nicht dem Design opfern.

Landmarks, Überschriftenstruktur, Tastaturbedienung, Fokusdarstellung, ausreichende Kontraste, sinnvolle Alternativtexte und Reduced Motion bei der Übertragung nach Bricks vollständig erhalten.

Seitenbezogene Umsetzung

Diese Hinweise entsprechen dem Stand v1.4.0 und sind die Zielstruktur für Bricks.

Startseite

Hero mit klarer H1, kurzer Nutzenzeile und abstrakter Systemgrafik. Direkt danach vier kompakte Einstiege nach Besucherabsicht. Leistungen als offene redaktionelle Zeilen statt Kartenraster. Danach dunkler Schwerpunkt „Betreut statt abgegeben“, offener Prozess, persönlicher Abschnitt, FAQ und Abschluss-CTA.

Leistungen

Hero mit „Dein Ziel“ als Zentrum und verbundenen Leistungsbereichen. Danach offene Leistungszeilen statt dichtem Kartenraster.

Websites

Hero mit kompakter H1 „WordPress-Websites für kleine Unternehmen“, direkter Nutzenkommunikation und abstraktem Website-Motiv (Struktur/Inhalt/Mobil). Danach Leistungsnavigation plus Trust-Strip, offene Inhaltsbereiche, dunkle Checklisten-Section, Rechtstext-Abgrenzung, FAQ und CTA.

Onlineshops

Hero mit WooCommerce-Suchintention und kreisförmigem Shop-Motiv (Produkt/Warenkorb/Zahlung/Versand). Der Text erklärt zuerst reale Shop-Prozesse statt Technik. Danach Trust-Strip, Shoplogik, schlanke technische Basis, Rechtstext-Hinweis, Ablauf, FAQ und CTA.

Betreuung

Hero mit WordPress-Betreuung und Orbit-Motiv rund um Updates, Backups, Monitoring und Änderungen. Betreuung als dauerhafte Zuständigkeit erklären. Danach Aufgaben, Nutzen und die drei Preispakete START (59 €/Monat), BUSINESS (89 €/Monat) und BUSINESS PLUS (149 €/Monat) als responsive 3-Spalten-Komponente umsetzen; auf Tablet/Mobil untereinander. Paketüberschriften, Preise, Leistungslisten und Hinweise als echten HTML-Text ausgeben. Danach Grenzen, FAQ und CTA.

SEO

Hero mit „SEO für kleine Unternehmen“ und Such-/Sichtbarkeitsmotiv. Inhalte über Technik, Struktur, Suchintention, Inhalte und Auswertung erklären; keine Rankingversprechen.

Digitale Lösungen

Hero mit Prozessgrafik Eingabe → Prüfen → Aktion → Ergebnis. Nutzen vor Technik, Automatisierung nur bei klarer Vereinfachung.

Seitenbezogene Umsetzung

IT-Dienstleistungen für KMU

  • Bestehendes Seitendesign unverändert wiederverwenden; keine neue visuelle Sonderwelt für IT.
  • Die Abgrenzung „ausschließlich für Selbstständige und KMU, kein privater Endkundensupport“ im sichtbaren Inhalt klar belassen.
  • Leistungsbereiche semantisch als einzelne Inhaltsblöcke aufbauen und nicht nur als dekorative Icons darstellen.
  • CTA auf die normale Kontaktseite führen; dort „IT-Dienstleistungen für KMU“ als auswählbares Thema vorsehen.
  • SEOPress-Titel, Meta-Beschreibung, Canonical, Service-Schema und interne Verlinkung entsprechend der Seite pflegen.

Betreute Website

Hero mit Kreislaufmotiv Planen/Starten/Pflegen/Weiterentwickeln. Produkt als dauerhafte Zusammenarbeit erklären, nicht als bloßes Wartungspaket. Nach dem Vergleich Einzelprojekt vs. laufend betreut die drei Pakete START (1.490 € + 59 €/Monat), BUSINESS (2.490 € + 89 €/Monat) und BUSINESS PLUS (ab 3.990 € + 149 €/Monat) als responsive 3-Spalten-Komponente aufbauen. Preise und Leistungslisten als echten HTML-Text ausgeben, nicht als Bild oder SVG.

Über mich

Hero mit RT-Kern und den Begriffen direkt/verständlich/verantwortlich. Solo-Selbstständigkeit als kurzen Kommunikationsweg erklären; kein Agentur-Bashing.

Kontakt

Hero als reduzierte Dialoggrafik. Besucher brauchen noch kein fertiges Konzept; kurze Anfrage, direkter Rückweg und klares Formular.

404

Reduzierte Fehlerseite mit unterbrochenem Pfad als Motiv und eindeutigen Links zurück zur Website.

KI-Suche

Bricks so umsetzen, dass Suchmaschinen und KI-Systeme den Inhalt zuverlässig verstehen.

Google verlangt für AI Overviews und AI Mode keine Sondertechnik; die normale SEO-Basis bleibt entscheidend. OpenAI benötigt für ChatGPT Search insbesondere Zugriff durch OAI-SearchBot.

Wichtige Aussagen müssen als sichtbarer HTML-Text im DOM stehen. Grafiken ergänzen den Inhalt, ersetzen ihn aber nicht.

  • Semantische Überschriftenhierarchie beibehalten: genau eine H1, danach logisch H2/H3.
  • Antwortblöcke als echte Sections mit sichtbarem Text umsetzen; nicht nur in Accordion/Slider verstecken.
  • Interne Links mit beschreibenden Linktexten setzen.
  • Keine clientseitig nachgeladenen Kerninhalte, wenn statischer HTML-Output möglich ist.
  • OAI-SearchBot zulassen; Bot-Schutz/CDN nach Livegang mit echten Requests prüfen.
  • Keine künstlichen KI-Landingpages, kein Keyword-Chunking und kein llms.txt als Rankingmaßnahme.
  • Referenzen, Fallstudien und eigene fachliche Entscheidungen später als wichtigste nicht-austauschbare Inhalte ausbauen.

Website-Check

Die Seite website-check.html nativ in Bricks nachbauen. Prüfbereiche als wiederverwendbare Karten umsetzen; keine automatischen Prüfergebnisse oder Konformitätsversprechen simulieren.

Barrierefreiheit

Zielstandard: WCAG 2.2 AA als technische und redaktionelle Qualitätsvorgabe.

Bricks liefert semantische Elemente und benutzerdefinierte Attribute; diese Möglichkeiten aktiv nutzen, statt neutrale Div-Strukturen zu stapeln.

  • Header, Nav, Main, Section/Article und Footer semantisch auszeichnen.
  • Skip-Link als erstes fokussierbares Element vorsehen.
  • Alle Funktionen per Tastatur bedienen; sichtbarer :focus-visible-Zustand mit ausreichendem Kontrast.
  • Interaktive Ziele mindestens 24×24 CSS-Pixel; primäre Buttons/Navigation besser etwa 44×44 oder größer.
  • Mobile Navigation als zugängliches Offcanvas: aria-expanded, Fokusführung, Escape zum Schließen, kein Fokus hinter geschlossenem Drawer.
  • Bilder: inhaltliche Bilder mit passendem Alt-Text; dekorative Grafiken mit leerem alt bzw. als CSS-Hintergrund.
  • Formularfelder mit sichtbaren Labels, passenden autocomplete-Werten und klaren feldbezogenen Fehlern.
  • Information nie ausschließlich über Farbe, Position oder Bewegung vermitteln.
  • 200 % Zoom und Reflow ohne horizontalen Inhaltsverlust prüfen.
  • prefers-reduced-motion respektieren; Parallax/Reveal vollständig deaktivierbar.
  • Barrierefreiheitsseite im Footer verlinken und nach realer Prüfung aktualisieren.

DSGVO & TDDDG

Datenschutz durch Technikgestaltung und Datenminimierung sind verbindliche Umsetzungsprinzipien.

Die Vorlage lädt ausschließlich lokale Assets. Dieses Prinzip soll im Live-System beibehalten werden, soweit es fachlich möglich ist.

  • Schriften lokal hosten; keine externen Google-Fonts oder unnötigen CDN-Abhängigkeiten.
  • Keine optionalen Analyse-, Marketing-, Video-, Karten- oder Drittanbieter-Skripte vor wirksamer Einwilligung laden.
  • Consent-Steuerung zentral über das vorgesehene Consent-/Tracking-Konzept (Legal Cockpit + RT Tracking Bridge) umsetzen; Entscheidung jederzeit widerrufbar machen.
  • Wenn keine einwilligungsbedürftigen Technologien eingesetzt werden, keinen Schein-Cookiebanner anzeigen.
  • Kontaktformular serverseitig verarbeiten; nur Name, E-Mail, optionale Website, Thema und Nachricht abfragen. Keine unnötige Telefonnummer als Pflichtfeld.
  • Kein zusätzliches Pflicht-Häkchen „Datenschutz akzeptieren“ für eine reine Kontaktanfrage erzwingen; stattdessen transparent auf die Datenschutzerklärung verlinken. Rechtsgrundlage und Speicherfristen müssen in den Rechtstexten zum tatsächlichen Prozess passen.
  • Spam-Schutz zuerst datensparsam (Honeypot, serverseitiges Rate-Limit). Externe CAPTCHA-Dienste nur nach Datenschutzprüfung und passender Consent-Konfiguration.
  • Keine Formulardaten in URL, Analytics, Browser-Storage oder unnötigen Logs spiegeln.
  • Drittanbieter-Embeds erst nach Freigabe laden oder datenschutzfreundliche Zwei-Klick-Lösung verwenden.
  • Serverseitige Sicherheitsheader, TLS, Updates, Zugriffsschutz und Log-Aufbewahrung im Hosting-Konzept dokumentieren.

SEOPress

SEOPress bleibt die einzige SEO-Metadaten- und Schema-Schicht.

Doppelte Meta- oder Schema-Ausgaben durch Theme, Bricks-Erweiterungen oder andere Plugins vermeiden.

  • Knowledge Graph: Person „Roland Thunig“ mit echten Kontaktdaten, Logo/Portrait und nur tatsächlich vorhandenen Social-Profilen.
  • XML-Sitemap aktivieren; produktive Sitemap unter /sitemaps.xml/ und in robots.txt referenzieren.
  • Open Graph und X Cards aktivieren; pro Kernseite ein eigenes 1200×630-Socialbild vorsehen.
  • Canonical und Robots pro Seite gemäß Vorlage pflegen.
  • Breadcrumbs sichtbar in Bricks; BreadcrumbList JSON-LD über SEOPress PRO, falls PRO eingesetzt wird.
  • Local Business/ProfessionalService nur bei konsistenten öffentlichen Standortdaten und passendem Google Business Profile aktivieren.
  • Optionale Service-Schemas nur dort nutzen, wo sichtbarer Inhalt und Schema exakt übereinstimmen.
  • FAQ-Inhalte behalten, aber FAQ-Schema nicht als Rich-Result-Hebel einplanen.
  • Nach Livegang Google Search Console, Bing Webmaster Tools und ChatGPT-Referral-Traffic prüfen.
Vorlagenmodus · Text anklicken = kopieren