Hier sammle ich Dinge, die eine Website über Text und Bilder hinaus tun und herzeigen kann, und zwar so, dass Sie sie gleich ausprobieren können. Jedes Beispiel beginnt bei einem Ziel, nicht bei der Technik: mehr konkrete Anfragen, mehr Vertrauen, etwas verständlicher machen oder im Gedächtnis bleiben.
Ein Effekt auf der eigenen Website lohnt sich, wenn er eine Frage Ihrer Besucher beantwortet oder ihnen eine Entscheidung abnimmt. Jeder Beitrag hier zeigt ein lauffähiges Beispiel, nennt seine gemessene Ladezeit und erklärt die Wege dorthin, vom Plugin bis zum eigenen Code.
Schmökern Sie kurz in dieser Übersicht und klicken Sie sich dann gleich zu Ihrem Favoriten durch. Oder überlegen Sie, was Ihre Website eigentlich gut brauchen könnte. Vielleicht ist es hier dabei. Wenn nicht, dann freue ich mich über Anregungen, Wünsche, Beschwerden ... naja, hauptsächlich über die ersten beiden.
Website-Effekte, die zu mehr Anfragen führen
- Preisrechner für die eigene Website: Besucher sehen einen Richtpreis, und Sie bekommen Anfragen, in denen schon alles Wichtige steht.
- Konfigurator für die Website: Kunden sehen ihr Produkt nach Maß, und die Anfrage kommt mit Zeichnung.
Website-Effekte, die Vertrauen schaffen
- Vorher-Nachher-Slider: Besucher decken das Ergebnis Ihrer Arbeit selbst auf.
- Wohin fließt der Mitgliedsbeitrag?: Vereinsfinanzen als Flussdiagramm, mit einem Feld für den eigenen Beitrag.
- Interaktive Karte ohne Google Maps: wo Sie gearbeitet haben und ob Sie auch zu Ihren Besuchern kommen.
- Zeitstrahl für die Firmengeschichte: Ihre Geschichte in wenigen Stationen, die beim Scrollen erscheinen, bis zu dem, was Besucher heute bei Ihnen bekommen.
Website-Effekte, die im Gedächtnis bleiben
- Animierter Hintergrund: WebGL gegen Video: was ein bewegter Hintergrund wirklich kostet, gemessen an meiner eigenen Website.
Die Grundlage: eigener Code in WordPress
- Eigenen Code in WordPress einbauen: welcher Ort wofür passt und welcher das nächste Update nicht überlebt.
Nach welchen Regeln die Beispiele der Website-Werkstatt gebaut sind
Mit einem hübschen Effekt ist es nicht getan. Jedes Beispiel hier hält sich an dieselben Regeln. Die ersten vier prüft zusätzlich ein Skript, bevor ein Beispiel online gehen darf:
- Kein fremder Server. Keine Anfrage geht an einen Dritten, und nichts verlangt deshalb nach einem Cookie-Banner.
- Nichts wird gespeichert. Keine Cookies, kein Speicher im Browser.
- Bewegung nimmt Rücksicht. Wer in den Bedienungshilfen von Handy oder Computer „Bewegung reduzieren“ eingeschaltet hat, sieht weniger, und was länger läuft, lässt sich anhalten.
- Die Daten sind erfunden und als solche gekennzeichnet. Die hier gezeigten Betriebe und Preise gibt es nicht.
- Am Handy und mit Tastatur bedienbar. Ein Diagramm hat immer auch eine Textfassung.
Die Größenangaben in den Beiträgen sind übertragene Daten, komprimiert mit gzip, so wie der Server die Dateien schickt, jeweils an den echten Dateien gemessen. Weil jedes Beispiel erst lädt, wenn Sie in seine Nähe scrollen, belastet es den Rest der Seite nicht.
Fehlt Ihnen etwas? Schreiben Sie mir, was Ihre Website erreichen soll. Mit einer guten Idee entsteht daraus vielleicht das nächste Beispiel.
