Eichhörnchen Berger: Webdesign, das im Notfall hilft
Webdesign von LK Media für eine ehrenamtliche Auffangstation: direkter Notfallkontakt, Tiergeschichten und Wissen – umgesetzt mit Astro und Tailwind CSS.
Projektwebsite ansehen (neuer Tab) ↗
Herausforderung: Hilfe finden, wenn es schnell gehen muss
Wer ein verletztes, krankes oder verwaistes Eichhörnchen findet, braucht klare Orientierung und einen direkten Kontakt zu erfahrenen Helfern. Die Website darf diese Informationen nicht zwischen langen Texten verstecken. Gleichzeitig soll sie zeigen, wer hinter der ehrenamtlichen Auffangstation von Tanja und Marco Berger im Landkreis St. Wendel steht – und wie Menschen die Arbeit unterstützen können.
LK Media hat diese Anforderungen in einer Website zusammengebracht: Notfallhilfe zuerst, Stationsarbeit und Unterstützung mit klaren eigenen Bereichen.
Lösung: Der Notfallkontakt ist der wichtigste Einstieg
Die Kontaktleiste am oberen Seitenrand zeigt die Telefonnummern auf jeder Seite. Auf der Startseite führen zwei auffällige Schaltflächen zur Notfallanleitung und direkt zum Anruf. Die Erste Hilfe in vier Schritten gibt einen schnellen Überblick; die eigene Notfallseite ergänzt eine ausführliche Schrittfolge, Bilder und eine weitere Kontaktbox.
Auf dem Smartphone sind Telefonnummern als tel:-Links antippbar. Ein WhatsApp-Link ermöglicht die Übermittlung von Fotos. Der Hinweis, Notfälle telefonisch und nicht per E-Mail zu melden, steht direkt beim Kontakt. So unterstützt die Gestaltung den tatsächlichen Ablauf der Station.
Die Notfallseite auf der Projektwebsite ansehen →
Gestaltung: Nah an den Tieren und den Menschen dahinter
Warme Creme- und Erdtöne, orange Akzente, abgerundete Karten und echte Fotos aus der Station prägen den Auftritt. Montserrat für Überschriften und Nunito Sans für Fließtext schaffen eine deutliche Hierarchie. Die Bildsprache zeigt die Pfleglinge und die Stationsarbeit, statt mit austauschbaren Motiven zu arbeiten.
Großzügige Abstände und große Kontaktflächen helfen beim schnellen Erfassen. Sichtbare Tastatur-Fokuszustände, ein Sprunglink zum Hauptinhalt und die mobile Navigation berücksichtigen unterschiedliche Arten der Bedienung. Die Website muss sowohl für einen aufgeregten Finder als auch für jemanden funktionieren, der sich in Ruhe informieren möchte.
Stationsarbeit, Tiergeschichten und Unterstützung
Die Website bietet mehrere Zugänge zur Arbeit der Auffangstation:
- Neuigkeiten: Aktionen, Aufrufe und Berichte aus dem Stationsalltag auf eigenen Übersichts- und Artikelseiten.
- Tiergeschichten: Einzelne Pfleglinge mit Datum und Status wie „In Pflege“ oder „Ausgewildert“. So wird ihr Weg nachvollziehbar.
- Wissen und Notfallhilfe: Thematisch gegliederte Artikel und bebilderte Anleitungen mit weiterführenden Links.
- Die Station: Menschen, Hintergründe und Bildergalerien als Einblick in die ehrenamtliche Arbeit.
- Unterstützen: PayPal, Bankverbindung, Amazon-Wunschliste, Patenschaften, Eichhörnchen-Taxi und praktische Hilfe mit passenden Kontaktwegen.
Die Tiergeschichten auf der Projektwebsite lesen →
Verwendete Technik
Die technische Basis ist bewusst auf eine inhaltsreiche, überwiegend statische Website abgestimmt. Die Seiten werden beim Build erzeugt und über Cloudflare Pages ausgeliefert.
| Baustein | Einsatz im Projekt |
|---|---|
| Astro | Komponenten, Seitenlayouts und vorab erzeugte HTML-Seiten. |
| TypeScript | Typisierte Komponenten, Daten und Hilfsfunktionen. |
| Tailwind CSS und Vite | Responsive Gestaltung, gemeinsame Farben, Abstände und Schriftstile. |
| Markdown, Content Collections und Zod | Getrennte Sammlungen für Neuigkeiten, Tiergeschichten und Wissen mit Inhaltsprüfung beim Build. |
| Astro-Bildverarbeitung und Sharp | Optimierte Bildvarianten und responsive Bildgrößen. |
| Lucide Astro | SVG-Symbole für Navigation, Kontakt und Hinweise. |
| Cloudflare Pages | Hosting der statischen Build-Ausgabe. |
| pnpm und Git | Paketverwaltung, Build-Befehle und nachvollziehbare Versionierung. |
Der Großteil der Website kommt als HTML und CSS beim Besucher an. Kleine Skripte ergänzen das mobile Menü, die Bildergalerie und das gezielte Nachladen von Instagram-Beiträgen. Es braucht keine große JavaScript-Anwendung, um die Informationen zu lesen oder den Notfallkontakt zu finden.
Inhalte pflegen, Bilder ausliefern, Einbettungen bewusst laden
Neuigkeiten, Tiergeschichten und Wissensartikel liegen als Markdown-Inhalte getrennt vom Layout vor. Die Content Collections prüfen unter anderem Pflichttexte, Kategorien, Datumsangaben, Tierstatus und Bildbeschreibungen. Änderungen werden im Projekt versioniert und mit dem nächsten Build veröffentlicht.
Die Bildverarbeitung erzeugt optimierte Varianten; responsive Größen helfen, auf dem Smartphone passende Bilder auszuliefern. Die Schriftdateien werden lokal bereitgestellt. Instagram-Beiträge erscheinen zunächst als Platzhalter und laden erst, wenn Besucher den entsprechenden Button betätigen. Die Bildergalerie verwendet einen nativen Dialog und unterstützt die Navigation mit Pfeiltasten.
Suchmaschinen und maschinenlesbare Inhalte
Ein gemeinsames Layout setzt Seitentitel, Beschreibungen, Canonical-URLs und Vorschauen für geteilte Links. Hinzu kommen XML-Sitemap, robots.txt und strukturierte Daten: Die Station wird als AnimalShelter beschrieben, ergänzt um Website-, Seiten-, Artikel- und Breadcrumb-Informationen.
Veröffentlichte Artikel stehen zusätzlich als Markdown bereit und sind aus der HTML-Seite verlinkt. llms.txt und llms-full.txt erschließen die Inhalte auch für Werkzeuge, die diese Formate nutzen. Ein eigener SEO-Prüflauf kontrolliert die erzeugten Metadaten, internen Links, Bilder und die Sitemap. Damit bleiben die veröffentlichten Inhalte für Menschen und automatisierte Werkzeuge einheitlich strukturiert.
Ein kurzer Rundgang durch die Website
Die Aufnahme zeigt die Live-Website am Desktop: zuerst die Startseite mit ihren Kontaktbuttons, dann den Erste-Hilfe-Überblick, die ausführliche Notfallseite und die Übersicht der Tiergeschichten. Die gezeigten Bereiche sind auch in den Screenshots dokumentiert.
Ergebnis
Die Website ist live und verbindet Notfallkontakt, Wissen, Stationsarbeit und Unterstützung in einer gemeinsamen Struktur. Besucher können direkt anrufen, die ausführliche Notfallanleitung aufrufen und die Geschichten aus der Station lesen.
Die eigenen Bereiche für Tiergeschichten und Unterstützung machen die laufende Arbeit sichtbar und zeigen konkrete Möglichkeiten zum Mithelfen. Die Screenshots und der Rundgang dokumentieren die umgesetzten Funktionen am realen Projekt.
Eine Website für Ihre Organisation – mit LK Media
Sie brauchen einen Auftritt, der wichtige Informationen leicht auffindbar macht und zu Ihrer Arbeit passt? LK Media verbindet individuelles Webdesign, technische Umsetzung und Suchmaschinenoptimierung. Für Auffangstationen, Vereine und lokale Unternehmen planen wir Inhalt, Gestaltung und Technik entlang der Menschen, die die Website nutzen.
Projekt mit LK Media besprechen → · Unsere Leistungen ansehen →
Pfotenweb: Vereinswebsite und Tierschutz-Verwaltung
Wenn Ihr Team zusätzlich Tierprofile pflegen, Vermittlungsanfragen bearbeiten und Schutz- oder Pflegeverträge erstellen möchte, lohnt sich ein Blick auf pfotenweb.de. Die eigenständige Plattform von LK Media verbindet eine öffentliche Vereinswebsite mit einer auch mobil nutzbaren Verwaltung.
Das Berger-Projekt zeigt unsere individuelle Website-Arbeit. Pfotenweb bietet ein Produkt für die laufenden Abläufe eines Tierschutzvereins. Entdecken Sie die Demos und den aktuellen Funktionsumfang, um den passenden Weg für Ihre Organisation zu finden.