Zahnärzte am Inn
Petri & Kollegen
Kompetenz und Vertrauen – Implantologie · Ästhetische Zahnmedizin · Orale Chirurgie · Prophylaxe
Moderne Praxis-Website für zwei Standorte (Mühldorf und Töging am Inn). Fokus auf Vertrauen, klare Information zu Leistungen und Terminkontakt. Responsiv, suchmaschinenoptimiert und DSGVO-konform.
Projekt Übersicht
Branche
Medizin / Zahnarztpraxis
Leistung
Webdesign, Content-Struktur, Kontaktformular
Timeline
4–8 Wochen (Konzept bis Go-Live)
Plattform
Web (responsive, mobiloptimiert)
Rolle: Konzeption, Design, Umsetzung (Next.js/React), SEO, Hosting/Vercel-Setup.
Technologien: Next.js 16, TypeScript, Tailwind CSS 4, Framer Motion, Resend (Kontaktformular), Leaflet/Mapbox (Standortkarten), strukturierte Daten (JSON-LD).
Ausgangslage / Problem
Die Praxis benötigte eine moderne, vertrauenswürdige Webpräsenz für zwei Standorte (Mühldorf am Inn, Töging am Inn).
- Ziele: Klare Darstellung der Leistungen (Implantologie, Ästhetik, Orale Chirurgie, Prophylaxe usw.), einfacher Kontakt/Terminanfrage, gute Auffindbarkeit in der Region (z. B. „Zahnarzt Mühldorf am Inn“, „Zahnarzt Töging“).
- Anforderungen: Responsives Design, semantisches HTML, SEO-Metadaten pro Seite, DSGVO-konforme Datenschutzerklärung und Kontaktformular, optional Karten und Öffnungszeiten pro Standort.
Lösung
Eine einheitliche Praxis-Website mit App Router, zentraler Inhaltssteuerung und klarer Informationsarchitektur.
- Startseite: Hero mit Video oder Bild, Praxis-Eindrücke (Carousel), Kontaktformular + Öffnungszeiten, Leistungs-Panels mit Hover-Ausklapp.
- Praxis: Über uns, Werte (Patientenorientierung, Qualität, Vertrauen, Einfühlungsvermögen), Team-Seiten pro Standort.
- Leistungen: Dynamische Unterseiten (Implantologie, Prothetik, Schienentherapie, Prophylaxe usw.) mit einheitlichem Layout, optional FAQ.
- Kontakt: Zwei Kontaktformulare (Mühldorf / Töging), Versand per Resend an die Praxis-E-Mail.
- Rechtliches: Impressum, Datenschutz (HTML-Inhalt zentral gepflegt).
- Karriere: Stellenangebote / Bewerbungshinweise.
Technisch: Next.js 16 (App Router), TypeScript, Tailwind 4, Framer Motion, Resend, Leaflet/Mapbox, JSON-LD für Dentist/LocalBusiness (SEO).
Prozess – Schritt für Schritt
Wie die Webseite erstellt wurde: von Briefing bis Launch.
Briefing & Konzept
Anforderungen und Ziele geklärt: zwei Standorte, Leistungskatalog, Kontakt, Vertrauen, regionale Suchbegriffe. Informationsarchitektur und URL-Struktur festgelegt.
Struktur & Inhalte
Zentrale Konstanten: Standorte, Öffnungszeiten, Navigation, Leistungsliste, Praxisbilder, Team. Einheitliche Benennung von Bildern für einfache Pflege.
Design & Abnahme
Ruhige, medizinisch vertrauensvolle Gestaltung: klare Typografie, Kontrast, Farbakzent. Hero mit Video oder Bild, Carousel, Leistungs-Panels. Desktop und Mobile abgenommen.
Umsetzung (Technik)
Next.js 16 mit App Router, TypeScript, Tailwind CSS 4. Seiten für Start, Praxis, Leistungen, Kontakt, Karriere, Impressum, Datenschutz. Komponenten wie HeroWithVideo, PracticeCarousel, ContactForm.
Content & Bilder
Texte und Bildlisten eingepflegt. Praxis-, Behandlungs- und Teambilder in public/images/. OG-Bild und Favicon. README für spätere Foto-/Video-Erweiterung.
SEO & strukturierte Daten
Pro Seite Metadaten (Titel, Description, Keywords). JSON-LD: Schema Dentist mit beiden Standorten, LocalBusiness. Sitemap, Canonical-URL. Regionale Suchbegriffe.
Kontaktformular & E-Mail
Server Action mit Resend: Formulardaten an Praxis-E-Mail. Datenschutz-Hinweis unter dem Formular. Umgebungsvariablen in Vercel.
Launch & Einweisung
Deployment auf Vercel, Domain und DNS. Sitemap in Search Console eingereicht, Kontaktformular getestet. Kundenseitige Pflege dokumentiert.
Worauf besonders geachtet wurde
Vertrauen und Seriosität
Ruhige Farben, klare Hierarchie, professionelle Bilder. Werte wie Patientenorientierung, Qualität und Transparenz auf der Über-uns-Seite.
DSGVO und Datenschutz
Vollständige Datenschutzerklärung, zentral gepflegt. Kontaktformular mit Hinweis und Link zur Datenschutzerklärung. Keine unnötigen Cookies.
SEO und regionale Auffindbarkeit
Pro Seite Titel, Descriptions und Keywords. JSON-LD für Dentist und LocalBusiness. Sitemap und Canonical-URL für saubere Indizierung.
Barrierefreiheit und Usability
Semantisches HTML, aria-label wo nötig. Kontaktformular mit sichtbaren Labels, Touch-Ziele min. 44px. Klare Kontraste und lesbare Schriftgrößen.
Performance und Wartbarkeit
Next.js Image-Optimierung, statische Generierung. Zentrale Konstanten und Content-Dateien für einfache Pflege. README für Deployment und Fotos/Videos.
Zwei Standorte konsistent
Einheitliche Navigation mit Team Mühldorf und Team Töging, jeweils eigenes Kontaktformular. Öffnungszeiten und Adressen pro Standort klar getrennt.
Design / UI-Showcase
Screenshots der umgesetzten Website: Hero, Leistungsübersicht, Kontakt und Vorher-Vergleich. Karten beim Darüberfahren für Optimierungen und Begründung ausklappen.
Was optimiert
Hero mit klarem Slogan („Ihre Gesundheit – unser Anspruch“), zwei direkte Kontakt-CTAs (Mühldorf / Töging), Team-Vorstellung und Qualitätsmerkmale (01–04) in kompakten Karten. Ruhige Typografie, hoher Kontrast.
Warum sinnvoll
Erster Eindruck zählt: Nutzer sehen sofort den Anspruch der Praxis und können den gewünschten Standort wählen. Werte wie Patientenorientierung und Qualität werden ohne Textflut vermittelt – wichtig für Vertrauen und mobile Nutzung.
Ergebnisse
Go-Live unter Produktionsdomain, zwei Standorte und alle geplanten Seiten umgesetzt. Schnelle Ladezeiten, Kontaktformular per Resend. Pro Seite SEO-Metadaten und strukturierte Daten. Zentrale Pflege über Konstanten und README.
Live
Go-Live
Schnell
Technik
Optimiert
SEO
Zentral
Wartbarkeit
Ähnliches Projekt für Ihre Praxis oder Ihr Unternehmen?
Moderne, vertrauenswürdige Webseiten mit klarer Struktur, Kontaktformular und SEO – von der Konzeption bis zum Launch. Wir setzen auf bewährte Technik und überschaubare Pflege.