Mobile Buchungen neu gedacht

Die Ausgangslage

Das Hotel Burgenländerhof in Mörbisch wollte seinen Gästen eine moderne Online-Buchungsmöglichkeit bieten. Die Herausforderung: Das EasyBooking-System sollte nicht nur funktionieren, sondern sich nahtlos ins neue Contao 5.3 Design einfügen – und das besonders auf Smartphones, wo die meisten Buchungen heute stattfinden.

Die bisherige Website hatte zwar bereits EasyBooking integriert, aber das war noch aus der Desktop-Ära: Nicht responsive, winzige Buttons auf Handys, endloses Zoomen und Scrollen. Frustrierend für Gäste, die abends gemütlich vom Sofa aus ihren Urlaub buchen wollten. Die Abbruchrate? Entsprechend hoch.

Das Team vom Burgenländerhof kannte das Problem: "Die Gäste rufen an und sagen, sie kommen mit der Buchung nicht klar." Kein Wunder – auf einem 6-Zoll-Display war das alte System schlicht unbenutzbar. Zeit für einen kompletten Neustart mit Mobile-First-Ansatz.

Besondere Herausforderung: Die Integration sollte nicht nur mobiloptimiert sein, sondern das Buchungserlebnis aktiv verbessern. Keine simplen iFrames mehr, die wie Fremdkörper wirken, sondern eine durchdachte Lösung, die sich anfühlt wie aus einem Guss. Die Zielgruppe 45+ sollte dabei genauso glücklich werden wie die Smartphone-Generation.

Unsere Lösung: Ein intelligentes Overlay-System

Statt die Nutzer auf externe Seiten zu schicken oder mit winzigen iFrames zu quälen, haben wir ein cleveres Overlay-System entwickelt:  

So funktioniert’s:
Preise anzeigen → Öffnet direkt im Overlay; Verfügbarkeit prüfen → Kalender poppt elegant auf; ESC-Taste oder Klick → Schließt das Overlay wieder; Responsive bis ins Detail → 5px Rand auf allen Seiten.

Die Integration: 6 Widget-Typen, 1 System

Wir haben alle verfügbaren EasyBooking-Widgets integriert:

• Buchungsmaske für die komplette Buchung
• Smallsearch für die schnelle Verfügbarkeitsprüfung
• PriceOMeter im Footer für Preistransparenz
• Categories für die Zimmerübersicht  

Jedes Widget wurde speziell für Mobile optimiert.
Beispiel gefällig? Die Zimmerkategorien zeigen auf Smartphones keine Bilder mehr – spart Ladezeit und Scrollerei.

Symfony Power unter der Haube

Contao 5.3 basiert vollständig auf Symfony – und das merkt man bei der Entwicklung sofort. Endlich können wir die volle Power des Frameworks nutzen:

• PHP Attributes statt Array-Chaos – #[AsHook('parseTemplate')] ist so viel sauberer als die alten Hook-Arrays
• Dependency Injection vom Feinsten – Services werden automatisch injected, kein manuelles Instanziieren mehr
• Testbare Service-Klassen – Jede Komponente lässt sich isoliert testen, Unit-Tests sind ein Kinderspiel
• Symfony Standards überall – Andere Symfony-Entwickler fühlen sich sofort zu Hause
• Performance durch Autowiring – Der Service Container optimiert alles automatisch, lazy loading inklusive

Das Ergebnis

Eine butterweiche Buchungserfahrung, die sich anfühlt wie aus einem Guss. Gäste können direkt auf der Website Verfügbarkeiten prüfen, Preise einsehen und buchen – ohne das Gefühl zu haben, die Seite zu verlassen.  

Fun Fact: Das gesamte Overlay-System wiegt nur 3KB. Weniger als dieses eine Emoji: 🏨  

Lessons Learned

• Mobile First ist kein Buzzword, sondern Pflicht
• Z-Index Konflikte sind der natürliche Feind jedes Overlays (Sticky Header, wir schauen dich an!)
• Vanilla JavaScript reicht völlig – kein jQuery nötig
• Gute Dokumentation spart beim nächsten Mal Zeit

Tech-Stack

• CMS: Contao 5.3  LTS
• PHP: 8.4.5+
• CSS: Custom mit CSS-Variablen
• JS: Vanilla JavaScript
• Booking: EasyBooking API