Grundgedanke
Das Gehäuse
Anthrazit und Lichtgrau sind die Farben, in denen Zählerschränke tatsächlich lackiert sind. Sie geben der Seite einen ruhigen, technischen Grund, auf dem ein einziger Akzent wirken kann.
www.liebl-elektroanlagen.de
Erst das Aufmaß.
Dann die Leitung.
Vor jeder Installation steht die Bestandsaufnahme: was gebraucht wird, was der Bestand hergibt, wo es hin soll. Bei einer Website ist das nicht anders. Auf dieser Seite steht die vorgeschlagene Richtung für Justins Auftritt – und darunter alles, was ich dafür von euch brauche.
Fragen zum Anfangen vor Livegang Antworten bleiben im Browser
F1 · Entwurf
Eine Richtung, die aus dem Handwerk kommt
Die meisten Elektriker-Websites sehen gleich aus: blauer Verlauf, Blitzsymbol, gestelltes Foto mit Bauhelm. Der Vorschlag holt sich stattdessen alles aus dem, was in Justins Arbeit ohnehin vorkommt.
Akzent
Der Schutzleiter
Grün-Gelb ist keine Modefarbe, sondern eine Norm. Wer schon einmal einen Verteiler offen hatte, erkennt sie sofort. Sie markiert auf der Seite genau eine Sache: den nächsten Schritt.
Haltung
Beschriftet statt behauptet
In einem ordentlichen Verteiler ist jeder Abgang beschriftet. Genauso soll die Seite sein: konkrete Angaben, Messwerte, Zeiten. Keine Formulierung, die jeder Betrieb über sich schreiben könnte.
Farbe
Gehäuse Anthrazit
#21272A · Grund, Kopf, Anfrage
Lichtgrau
#DFE1DA · Flächen, Trennungen
Papier
#F3F4EF · Lesegrund
Schutzleiter Gelb
#F2CB05 · genau ein Ziel pro Ansicht
Schutzleiter Grün
#1C7A46 · geprüft, erledigt
Ader L1 Braun
#8A5232 · Wärme, Sekundäres
Schrift
Zwei Schriften, drei Aufgaben. Beide werden mitgeliefert und vom eigenen Server geladen – Google Fonts direkt einzubinden ist in Deutschland abgemahnt worden.
Zählerschrank erneuert
Stromkreis F3 · Wallbox · 11 kW
Die Anlage wurde nach DIN VDE 0100-600 geprüft. Isolationswiderstand, Schleifenimpedanz und Auslösezeit der Fehlerstromschutzschalter sind im Protokoll dokumentiert, das Sie zusammen mit der Rechnung erhalten.
Aufbau
Links läuft eine Tragschiene mit dem Schutzleiter mit – genau das, was du gerade beim Scrollen siehst. Rechts liegt der Inhalt in einem Raster aus Teilungseinheiten.
┌──────┬──────────────────────────────────────────────────┐
│ ▓▓▓▓ │ LIEBL ELEKTROANLAGEN 0871 · 12 34 56 │
│ ║ F1 ├──────────────────────────────────────────────────┤
│ ║ │ │
│ ║ F2 │ ZÄHLERSCHRANK, ┌──────────────────────┐ │
│ ║ │ WALLBOX, │ │ │
│ ║ F3 │ ALTBAU. │ Foto: fertige │ │
│ ║ │ │ Verteilung │ │
│ ║ F4 │ Lead-Text, zwei Zeilen. │ │ │
│ ║ │ [ Anfrage stellen ] └──────────────────────┘ │
│ ║ F5 │ [ 0871 12 34 56 ] │
│ ║ ├──────────────────────────────────────────────────┤
│ ║ F6 │ F1 · WALLBOX F2 · ZÄHLERSCHRANK │
│ ║ │ ──────────── ─────────────────── │
│ ║ │ Was gemacht wird, was es kostet, wie lange. │
│ ▓▓▓▓ │ │
└──────┴──────────────────────────────────────────────────┘
▲
└─ Schutzleiter: wird beim Scrollen gezogen,
der aktive Abschnitt liegt unter Spannung.
Was ich bewusst weglasse
- Blauer Verlauf und Blitzsymbol Die Standardausstattung jeder zweiten Elektriker-Website. Genau deshalb merkt sich niemand eine davon.
- Gestellte Stockfotos mit Bauhelm Wirken sofort gekauft. Ein einziges echtes Bild von Justins Arbeit ist mehr wert als zehn davon.
- Zahlen-Karussell im Kopfbereich „500+ Projekte, 20 Jahre Erfahrung, 100 % Zufriedenheit“ liest niemand mehr. Konkrete Angaben an der richtigen Stelle wirken besser.
- Bewegung an jeder Ecke Es gibt genau eine durchgehende Bewegungsidee: die Leitung, die mitläuft. Alles andere bleibt ruhig, damit die Seite schnell bleibt.
- Einwilligungsbanner Wenn wir ohne Cookies und ohne eingebettete Fremddienste auskommen, braucht die Seite keins. Das kostet weniger Anfragen.
F2 · Seiten
Sieben Seiten, mehr braucht es nicht
Vorschlag für den Aufbau. Jede Leistungsseite ist eine eigene Adresse – das ist der Grund, warum ihr bei „Wallbox + Ort“ überhaupt gefunden werden könnt.
- / Startseite Wofür Justin steht, die drei wichtigsten Leistungen, ein echtes Projekt, Einsatzgebiet, Anfrage. Auf dem Handy muss die Telefonnummer ohne Scrollen erreichbar sein.
- /leistungen Übersicht aller Gewerke mit ehrlicher Abgrenzung, was ihr nicht macht.
- /wallbox · /photovoltaik · /zaehlerschrank Je eine eigene Seite für die drei Leistungen, die den Umsatz tragen: Ablauf, Voraussetzungen, Förderung, Dauer, Preisrahmen, Anfrage.
- /projekte Drei bis sechs Arbeiten mit Ausgangslage, Lösung und Dauer. Wirkt stärker als jede Selbstbeschreibung.
- /betrieb Justin, Qualifikation, Einzugsgebiet, Ausstattung, offene Stellen.
- /kontakt Telefon, Formular, Zeiten, Anfahrt, Karte. Bei Notdienst hier ganz oben und in der Fußzeile jeder Seite.
- /impressum · /datenschutz Pflicht. Wird vollständig vorbereitet, gehört aber juristisch geprüft.
F3 · Bilder
Platzhalter, bis eigene Bilder da sind
Diese Aufnahmen sind lizenzfrei und dürfen kommerziell verwendet werden. Sie zeigen die Bildsprache: echte Arbeit, echtes Material, keine Symbolbilder. Sagt mir, welche raus sollen.
- Empfehlung Ein halber Tag mit einem Fotografen. Justin bei der Arbeit, das Fahrzeug, ein fertiger Verteiler, ein Porträt. Das ist der größte einzelne Qualitätssprung, den diese Seite machen kann.
- Bis dahin Handyfotos von euren letzten Baustellen reichen völlig, wenn sie scharf und hell sind. Bitte quer aufnehmen, nicht hochkant.
- Rechtliches Für Innenaufnahmen bei Kunden brauchen wir eine kurze schriftliche Freigabe. Einen Textbaustein dafür liefere ich mit.
F4 · Fragen
Was ich von euch brauche
Alles der Reihe nach ausfüllen, oder nur das, was gerade bekannt ist. Die Eingaben bleiben in diesem Browser gespeichert, es wird nichts verschickt. Am Ende auf „Antworten kopieren“ und mir in den Chat einfügen.
Fragebogen wird geladen …
F5 · Technik & Recht
Wie die Seite gebaut und betrieben wird
Vorschlag, solange nichts dagegen spricht. Alle Punkte lassen sich im Fragebogen korrigieren.
Bau
Statische Seite, kein Baukasten
Handgebautes HTML und CSS, mit Vite gebaut. Ergebnis: reine Dateien, die auf jedem Hoster laufen. Kein WordPress, das monatlich Sicherheitsupdates braucht, keine Abhängigkeit von einem Anbieter, kein Abo.
Tempo
Unter einer Sekunde
Bilder werden vorab verkleinert, Schriften kommen vom eigenen Server, es läuft kaum JavaScript. Auf dem Bau mit zwei Balken Empfang zählt das mehr als jede Animation.
Datenschutz
Ohne Banner
Keine Cookies, keine Google Fonts von außen, keine eingebettete Google-Karte ohne Klick. Damit entfällt das Einwilligungsbanner – und mit ihm der häufigste Grund, eine Handwerkerseite sofort wieder zu schließen.
Auffindbarkeit
Lokal, nicht global
Eigene Seite je Leistung, saubere Auszeichnung als Handwerksbetrieb mit Adresse und Öffnungszeiten, dazu das Google-Unternehmensprofil. Für einen Betrieb mit 40 km Radius bringt das mehr als alles andere.
Formular
Anfragen ohne Fremddienst
Ein schlankes Skript beim Hoster nimmt die Anfrage entgegen und schickt sie per Mail weiter. Spamschutz ohne Rätselbilder, damit niemand auf halber Strecke aufgibt.
Barrierearmut
Bedienbar für alle
Kontraste über dem geforderten Wert, sichtbare Tastaturführung, echte Beschriftungen an jedem Feld, respektierte Systemeinstellung für weniger Bewegung. Kostet im Bau nichts extra und schließt niemanden aus.
F6 · Ablauf
Wie es weitergeht
- Schritt 1 · jetzt Fragebogen ausfüllen, Antworten kopieren, mir schicken. Was fehlt, ergänzen wir später – Pflichtangaben brauche ich vorab.
- Schritt 2 · Entwurf Ich baue die Startseite fertig aus, mit euren Texten und Bildern. Ihr seht sie live im Browser, nicht als Bildchen.
- Schritt 3 · Korrektur Eine Runde Anmerkungen, gern direkt am Telefon. Danach baue ich die Unterseiten im gleichen Muster.
- Schritt 4 · Recht und Technik Impressum und Datenschutzerklärung vorbereiten, Domain verbinden, Postfächer einrichten, Formular testen.
- Schritt 5 · Live Veröffentlichen, Google-Profil verknüpfen, Suchmaschinen anmelden. Danach eine kurze Einweisung, was ihr selbst ändern könnt.