Was der Betrieb sich wünschen könnte.
Der erfundene Garten- und Landschaftsbauer Grünkante bekommt viele Anfragen, die mit „Was kostet ein neuer Garten?“ beginnen. Die ehrliche Antwort hängt vom Ablauf ab: erst der Ortstermin, dann ein Entwurf mit festem Preis. Der angenommene Wunsch: Die Website soll diesen Ablauf so erklären, dass Interessierte wissen, worauf sie sich einlassen, und den ersten Termin vereinbaren.
Unser Ansatz
Eine Scroll-Story mit vier Schritten. Ein Gartenplan bleibt beim Lesen stehen und verändert sich mit jedem Schritt, vom vermessenen Grundstück bis zum gewachsenen Garten.
Die Entscheidungen im Entwurf.
Das Bild erzählt mit
Jeder Schritt hat einen eigenen Zustand des Plans: Vermessung, gestrichelter Entwurf, gebaute Flächen, gewachsene Pflanzen. Wer nur auf die Grafik schaut, versteht den Ablauf trotzdem.
Dauer und Mitwirkung an jedem Schritt
Vor einem Auftrag kommen zwei Fragen am häufigsten: Wie lange dauert das, und was muss ich selbst tun? Beide stehen bei jedem Schritt.
Die Seite scrollt normal
Die Grafik bleibt mit position: sticky stehen, während der Text weiterläuft. Die Seite übernimmt das Scrollen nicht, und der Text bleibt in seiner Reihenfolge lesbar.
Der Weg dorthin.
Erste Skizze: vier Kacheln mit Icons
Übersichtlich, aber austauschbar. So sieht der Ablauf bei fast jedem Dienstleister aus.
Ein Garten statt vier Icons
Wir haben die Icons durch einen einzigen Plan ersetzt, der sich verändert. Der Fortschritt wird so an einem Grundstück sichtbar.
Bewegung nur, wo sie erklärt
Die Grafik wechselt an festen Lesepunkten und folgt nicht jedem Pixel. Bei reduzierter Bewegung wechseln die Zustände ohne Übergang.
Was die fertige Section leistet.
Die fertige Section führt in vier Schritten durch einen Auftrag, jeweils mit Dauer und dem, was Kundinnen und Kunden beitragen. Am Ende steht die Einladung zum Ortstermin.
Im echten Projekt würden wir prüfen, ob Anfragen nach dem Lesen konkreter werden, etwa mit Gartengröße und Wünschen, und ob seltener nach dem Ablauf gefragt wird. Diese Konzeptstudie enthält keine gemessenen Zahlen.
Verständlich für Suche und KI.
Die vier Schritte sind eine geordnete Liste im HTML, Dauer und Mitwirkung stehen als Text daneben. Fragen wie „Wie läuft eine Gartenplanung ab?“ lassen sich daraus direkt beantworten, auch von KI-Assistenten, die Seiten zusammenfassen. Die Animation verändert nur die Grafik, nie den Text.
Diese Seite enthält kein Markup für einen Betrieb, weil es Grünkante nicht gibt. Für ein echtes Unternehmen kämen Leistungsgebiet, Adresse und Kontakt als LocalBusiness hinzu. Unser Vorgehen bei SEO und KI-Suche erklärt die gemeinsamen Grundlagen.
Auch ohne Maus verständlich.
Screenreader lesen eine nummerierte Liste mit vier Schritten. Die Grafik ist Schmuck und wird übersprungen, weil der Text alles enthält. Bei reduzierter Bewegung entfallen Übergänge und der mitlaufende Fortschrittsbalken. Ohne JavaScript stehen alle Schritte untereinander neben dem fertigen Garten.
Fragen zur Demo.
Schaden Scroll-Animationen der Suchmaschinenoptimierung?
Nicht, solange der Inhalt als Text im HTML steht und ohne Animation erreichbar ist. Schwierig wird es, wenn Texte erst durch ein Script erscheinen oder die Seite das Scrollen übernimmt.
Funktioniert das auf dem Smartphone?
Ja. Der Plan steht dort verkleinert am oberen Rand, und die Schritte laufen darunter durch.