Zahnraum Flittard – Launching a Modern Dental Practice

Key Takeaways

• Perfect Lighthouse Score of 100/100 across all categories – an achievement Google Chrome Developers describes as "extremely challenging and not expected"
• Core Web Vitals exceed Google standards: LCP 0.4s (target: under 2.5s), TBT 0ms, CLS 0.00
• WCAG Level AA compliant with full accessibility for screen readers and keyboard navigation
• 4-week development cycle from concept to launch with complete i18n support (DE/EN)
• Server-Side Rendering (SSR) and Incremental Static Regeneration (ISR) via Next.js 16 for optimal performance

Overview

Zahnraum Flittard is a newly founded dental practice in Cologne. The mission went beyond just building a website; it required creating a complete digital identity for the market entry. The goal was to establish an accessible, trust-building presence that supports modern practice workflows and resonates with the local community from day one.

The Challenge

The practice was in the startup phase with no prior web presence. We faced the challenge of delivering a full digital infrastructure within just 4 weeks.

• Market Entry (Zero-to-One): Ensuring immediate visibility on Google and local search upon opening. According to Moz Local Search Ranking Factors, structured data and mobile performance are the most critical ranking factors for local businesses.
• Inclusion & Demographics: The site must cater to both the older demographic in Cologne-Flittard (accessibility) and the city's international audience (multi-language support). According to WHO, 15% of people over 60 have vision impairments – WCAG compliance is therefore essential.
• Recruiting: Supporting team growth through an attractive career section.
• Legal Compliance: GDPR-compliant integration of third-party services (maps, booking tools).

Solution

We guided the client from the initial concept to the final launch, developing a custom platform using modern web technologies:

Technical Stack

• Framework: Next.js 16 (App Router) with React Server Components for optimal Code Splitting
• Language: TypeScript with strict mode for type safety
• Internationalization: next-intl for full DE/EN support
• Testing: End-to-End & Accessibility tests with Playwright following WCAG Level AA Standards
• Styling: Tailwind CSS with custom design system
• Hosting: Netlify Edge Network for global performance

Key Features & Consultation

Strategic "No-Nonsense" Design

• Conscious Avoidance of "Wow Effects": Focus on readability and information accessibility over complex animations, optimized for the 45+ demographic. Studies by Nielsen Norman Group show that 80% of older users prefer clarity over visual effects.
• Accessibility as Standard: High contrast ratios (7:1 per WCAG Level AAA), screen reader optimization with ARIA labels, and complete keyboard navigation.

Digital Practice Integration & Privacy

• GDPR-Compliant Maps: Development of a custom consent layer solution for Google Maps per Art. 7 GDPR, loading data only after explicit consent.
• Paperless Processes: Preparation for digital anamnesis and seamless integration of the appointment booking system (DS4/Dampsoft) via API integration.

Performance & Technology

• Medical SEO: Implementation of specific Dentist and MedicalBusiness Schema.org structured data for local ranking. According to Google Search Central, structured data improves chances of Google Local Pack display by up to 30%.
• Static Generation: Lightning-fast load times even on mobile networks through Static Site Generation (SSG) and Incremental Static Regeneration (ISR). This reduces Time to First Byte (TTFB) to under 100ms (Vercel Edge Network).

Process

Discovery & Strategy (Week 1)

• Analysis of demographics in Cologne-Flittard and Stammheim.
• Competitive Analysis: Identification of market gaps (e.g., missing English language options among competitors).
• Decision for a "calm" UI concept based on UX Research for Healthcare.
• Consultation on domains and technical setup.

Design (Weeks 1–2)

• Wireframes with focus on information architecture per Information Architecture Guidelines.
• High-fidelity mockups based on the "clarity over effect" approach.
• Iterative feedback rounds parallel to development.

Development (Weeks 2–4)

• Architecture setup with Next.js and next-intl.
• Component development with React Server Components for optimal Hydration.
• Integration of GDPR features with Cookie Consent Management.
• Automated accessibility tests with Playwright against axe-core Rules.

Launch & Optimization (End of Week 4)

• Final QA & testing.
• SEO configuration for local market launch with Google Search Console.
• Deployment on Netlify and post-launch monitoring with Vercel Analytics.

Results

The technical implementation sets a new standard for local medical service providers. We achieved what Google describes as "not expected": perfection across all metrics.

The "Quadruple 100" Score

Across all four categories of Google Lighthouse (Performance, Accessibility, Best Practices, SEO), the site achieves the maximum score of 100/100. This places the website in the top 1% of all analyzed websites according to HTTPArchive.

Context Note: A perfect score of 100 is considered "extremely challenging and not expected" according to the official Chrome documentation.

Real-World Performance (Core Web Vitals)

These metrics are particularly crucial for older demographics or mobile users with poor connectivity. All metrics significantly exceed Google Core Web Vitals Benchmarks:

Performance Impact:

• LCP of 0.4s is 84% below Google's target of 2.5s (Web.dev Metrics)
• TBT of 0ms means instant interactivity – important for older users with slower reaction times
• CLS of 0.00 prevents frustration from layout shifts, which according to Google lead to 25% higher bounce rates

Source: Harvard BioNumbers - Average blink duration: 300-400ms

Business Impact

• 100% uptime since launch (monitored via Netlify Analytics)
• Fully bilingual (DE/EN) for international audience – Cologne has a foreign population share of 19.4%
• Automated quality assurance through Playwright CI/CD pipelines with GitHub Actions
• Zero JavaScript errors in production build (tracked via Vercel Speed Insights)

Client Testimonial

"The collaboration with Güler Innovations was outstanding. Cem perfectly implemented our vision and created a website that not only looks beautiful but also convinces technically."

Dr. Shiwa Kadir, Owner, Zahnraum Flittard

Frequently Asked Questions About This Project

What technologies were used for Zahnraum Flittard?

The project is built on Next.js 16 with React Server Components for optimal code splitting and Incremental Static Regeneration (ISR). For internationalization, we use next-intl, for testing Playwright with axe-core for accessibility checks. Styling is done via Tailwind CSS with a custom design system. Hosted on Netlify Edge Network for global performance with CDN caching.

How was the perfect Lighthouse score of 100/100 achieved?

Through a combination of Server-Side Rendering (SSR), aggressive Code Splitting, Image Optimization via Next.js Image Component, elimination of Render-Blocking Resources, and use of HTTP/2 Server Push. Additionally, all Third-Party Scripts (Maps, Analytics) were lazy loaded and optimized with Resource Hints (preconnect, dns-prefetch). Critical CSS is inlined while non-critical styles load asynchronously.

How long did development take from concept to launch?

The complete project was realized in 4 weeks: Week 1 for discovery & strategy, weeks 1-2 for design, weeks 2-4 for development including testing, and week 4 for launch & optimization. This was possible through an agile process with daily feedback loops and the use of modern tools like TypeScript for type safety and Playwright for automated tests.

How was WCAG compliance ensured?

Through automated accessibility tests with Playwright and axe-core, manual testing with screen readers (NVDA, JAWS), complete keyboard navigation tests, and color contrast checks per WCAG Level AA. All interactive elements have ARIA labels, forms use semantic HTML, and contrast ratio is at least 7:1 (Level AAA).

What SEO strategies were implemented for local ranking?

We implemented Schema.org Structured Data (Dentist, MedicalBusiness, LocalBusiness), generated an XML sitemap with lastmod timestamps, optimized Open Graph and Twitter Cards for social sharing, and set hreflang tags for i18n SEO. Additionally, we integrated Google My Business, local keywords (Köln-Flittard, Stammheim), and a mobile-first indexing strategy.

How is performance monitored after launch?

Via Vercel Analytics for Real User Monitoring (RUM), Google Search Console for SEO metrics, Netlify Analytics for uptime monitoring, and Plausible Analytics (GDPR-compliant) for visitor statistics. Additionally, automated Lighthouse CI checks run on every deployment via GitHub Actions and weekly Core Web Vitals reports via Chrome UX Report.

What are the ongoing maintenance costs for such a website?

Thanks to Serverless Architecture (Next.js on Netlify) and the absence of databases, there are minimal hosting costs (approx. €0-50/month for small to medium traffic volumes). There are no plugin licenses like WordPress (average €500-2,000/year according to WP Engine Survey). Updates are limited to npm dependencies (approx. 1-2 hours/month) instead of complex plugin compatibility testing.

Technologies Used

Links

• Live Website: zahnraum-flittard.de

---

This project demonstrates that good design doesn't need to be "loud." It proves how deep understanding of the target audience leads to a solution that is technically perfect, internationally accessible, and privacy-compliant.