ScooterProfi.de - Astro E-Commerce Plattform

Technologies
Astro HTML5 CSS3 JavaScript WebP Matomo Analytics

ScooterProfi.de - Astro E-Commerce Plattform

Projektübersicht

Kunde: ScooterProfi Norddeutschland Jahr: 2024 Framework: Astro URL: https://scooterprofi.de/

ScooterProfi.de ist eine spezialisierte E-Commerce-Plattform für den An- und Verkauf sowie die Vermietung von gebrauchten Elektromobilen und Seniorenmobilitätslösungen. Die mit Astro entwickelte Website richtet sich primär an Senioren und mobilitätseingeschränkte Personen in Norddeutschland und bietet transparente Preisgestaltung mit bis zu 50% Ersparnis gegenüber Neupreisen.

Hauptfunktionen

E-Commerce Features

  • Produktkatalog: Umfangreiche Übersicht gebrauchter Elektromobile
  • Vergleichstools: Interaktive Modellvergleiche mit detaillierten Spezifikationen
  • Zubehörkatalog: Über 200 Artikel für Elektromobile und Seniorenscooter
  • Preistransparenz: Klare Preisdarstellung mit Ersparnis-Hinweisen
  • Kaufratgeber: Interaktive Checklisten und Entscheidungshilfen

Service-Portal

  • Ankauf & Verkauf: Online-Bewertungssystem für Gebrauchtgeräte
  • Vermietung: Mietangebote für temporäre Mobilitätsbedürfnisse
  • 24h-Notdienst: Rund-um-die-Uhr Service bei Pannen
  • Wartungsverträge: Online-Abschluss von Serviceoptionen
  • Versicherungsberatung: Informationen zu Krankenkassen-Zuschüssen

Barrierefreie Gestaltung

  • Senior-optimiertes Design: Große Schriftarten und kontrastreiche Farben
  • Einfache Navigation: Klare Struktur mit Icon-basierter Orientierung
  • Breadcrumb-Navigation: Transparente Seitenstruktur
  • Mobile-First: Optimiert für Tablets und Smartphones
  • Accessibility: Screenreader-freundliche Umsetzung

Technische Details

Astro Framework

  • Static Site Generation: Optimale Performance durch vorgerenderte Seiten
  • Component Islands: Interaktive Komponenten nur wo benötigt
  • Zero JavaScript Default: Minimaler Client-Side JavaScript-Overhead
  • Fast Page Loads: Unter 1 Sekunde Ladezeit

Performance-Optimierungen

  • WebP Images: Moderne Bildformate für schnellere Ladezeiten
  • Lazy Loading: Bilder werden erst bei Bedarf geladen
  • Code Splitting: Optimierte JavaScript-Bundles
  • CDN Delivery: Schnelle Auslieferung statischer Assets

Datenschutz & Analytics

  • Matomo Analytics: Privacy-friendly Alternative zu Google Analytics
  • Cookie Consent: DSGVO-konforme Cookie-Verwaltung
  • No Third-Party Tracking: Datenschutzfreundliche Implementierung
  • Local Analytics Hosting: Daten bleiben in Deutschland

Design-Features

User Experience

  • Card-Based Layout: Moderne Karten für Produktdarstellung
  • Icon-System: Emoji-basierte visuelle Hierarchie
  • Filteroptionen: Standort- und kategoriebasierte Filterung
  • Real-Time Indicators: Live-Anzeige aktueller Seitenbesucher
  • Bildergalerien: Hochwertige Produktfotografie

Responsive Design

Vollständig optimiert für:

  • Desktop: 1920px+ mit Grid-Layouts
  • Tablet: 768px - 1024px mit angepasster Navigation
  • Mobile: 375px+ mit Touch-optimierten Controls

Corporate Design

  • Professionelle Farbgestaltung: Vertrauenswürdige, seniorengerechte Palette
  • Konsistente Typography: Gut lesbare Schriftarten
  • Strukturierte Layouts: Klare visuelle Hierarchien
  • Hochwertige Produktbilder: Professionelle Fotografie

Besondere Highlights

Vergleichstools

  • Interaktive Modellvergleiche verschiedener Elektromobile
  • Side-by-Side Spezifikationsvergleich
  • Preisvergleich mit Neugeräten
  • Filterfunktionen nach Reichweite, Geschwindigkeit, Gewicht

Kaufberatung

  • Checklisten: Strukturierte Entscheidungshilfen
  • Krankenkassen-Guide: Informationen zu Zuschüssen und Kostenübernahme
  • Versicherungsportal: Vergleich verschiedener Versicherungsoptionen
  • FAQ-System: Umfangreiche Antworten auf häufige Fragen

Service-Features

  • Online-Terminbuchung: Für Probefahrten und Wartung
  • Standortfilter: Regionale Verfügbarkeit prüfen
  • Kontaktformulare: Anfragen für Ankauf, Verkauf, Vermietung
  • Newsletter: Updates zu neuen Angeboten

Technologien

Frontend

  • Astro 4.x: Static Site Generator Framework
  • HTML5: Semantisches Markup
  • CSS3: Modern Styling mit Grid und Flexbox
  • Vanilla JavaScript: Minimaler, performanter Code
  • WebP: Next-gen Bildformate

Backend & Tools

  • Matomo: Self-hosted Analytics
  • Webfonts: Optimierte Schriftarten
  • Responsive Images: Adaptive Bildgrößen
  • SEO Optimization: Strukturierte Daten und Meta-Tags

Herausforderungen & Lösungen

Challenge: Senior-freundliche UX

Problem: Zielgruppe benötigt besonders einfache, klare Benutzerführung Lösung:

  • Große, gut lesbare Schriftarten (min. 16px)
  • Hohe Kontraste für bessere Lesbarkeit
  • Icon-basierte Navigation mit Text-Labels
  • Reduzierte Komplexität in Formularen
  • Klare Call-to-Actions mit hohem Kontrast

Challenge: Performance bei vielen Produktbildern

Problem: Hunderte hochauflösende Produktfotos belasten Performance Lösung:

  • Astro’s Built-in Image Optimization
  • WebP-Format für 30-50% kleinere Dateien
  • Lazy Loading für Off-Screen Images
  • Responsive Images mit srcset

Challenge: E-Commerce ohne komplexes Backend

Problem: Kleine Preisanpassungen sollten schnell möglich sein Lösung:

  • Astro Content Collections für Produktdaten
  • Markdown-basierte Produktbeschreibungen
  • Git-basierter Workflow für Updates
  • Statische Generierung für maximale Performance

SEO & Marketing

Suchmaschinenoptimierung

  • Structured Data: Schema.org Markup für Produkte
  • Meta Tags: Optimierte Titles und Descriptions
  • Semantic HTML: Korrekte Heading-Hierarchie
  • Fast Load Times: Core Web Vitals optimiert
  • Mobile-First: Google Mobile-First Indexing ready

Regional SEO

  • Standort-Targeting: Fokus auf Norddeutschland
  • Lokale Keywords: Hamburg, Bremen, Lübeck, etc.
  • Regional Maps: Standortinformationen
  • Local Business Schema: Strukturierte Unternehmensdaten

Ergebnis

Eine moderne, performante E-Commerce-Plattform mit:

  • Sub-Sekunden Ladezeiten durch Astro Static Generation
  • Senior-optimierte UX mit hoher Barrierefreiheit
  • Umfangreicher Produktkatalog mit 200+ Artikeln
  • Datenschutzfreundliches Tracking mit Matomo
  • Mobile-First Design für optimale Darstellung auf allen Geräten
  • DSGVO-Compliance ohne externe Tracking-Dienste

Die Plattform ermöglicht es ScooterProfi, ihre gebrauchten Elektromobile effizient online zu vermarkten und bietet Senioren eine zugängliche, vertrauenswürdige Shopping-Erfahrung.

Technische Betreuung

  • Content Updates: Einfache Produktpflege via Markdown
  • Performance Monitoring: Regelmäßige Lighthouse-Audits
  • SEO Optimization: Kontinuierliche On-Page-Optimierung
  • Security: Automatische Dependency-Updates
  • Analytics: Matomo-basierte Auswertung und Reporting