15,1 % aller Hotelübernachtungen in Deutschland wurden 2023 in Echtzeit über die hoteleigene Website gebucht. Dieser Wert aus der HOTREC-Distributionsstudie 2024 rückt Webdesign für Hotels aus der Image-Ecke: Die Website ist ein Vertriebsweg, und jede Hürde zwischen Zimmeransicht und Buchungsbestätigung kann eine Direktbuchung kosten.
Ein guter Hotelauftritt muss deshalb mehr leisten, als schöne Bilder zu zeigen. Er muss auf dem Smartphone verständlich sein, Preise und Bedingungen klar darstellen und Besucher ohne Umwege durch eine funktionierende Buchungsstrecke führen. Die entscheidende Prüfung verbindet Buchbarkeit, mobile Performance und Barrierefreiheit zu einem messbaren Gastweg.
Inhaltsverzeichnis
- Die wichtigsten Anforderungen auf einen Blick
- Buchungsmaschine technisch richtig einbinden
- Mobile Performance messen und verbessern
- Barrierefreiheit im Buchungsprozess sichern
- CMS wählen, das Buchung und Pflege trägt
- Conversion-Elemente, die Direktbuchungen auslösen
- Relaunch planen und Anbieter prüfen
Die wichtigsten Anforderungen auf einen Blick
| Bereich | Zielwert | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| Ladezeit mobil | Largest Contentful Paint unter 2,5 Sekunden | PageSpeed Insights | Unkomprimierte Zimmerfotos |
| Interaktion | Interaction to Next Paint unter 200 Millisekunden | Search Console (Felddaten) | Schwere Buchungswidgets blockieren Eingaben |
| Layout-Stabilität | Cumulative Layout Shift unter 0,1 | Lighthouse | Widget lädt nachträglich und verschiebt Buttons |
| Buchungsschritte | Höchstens 3 bis zur Bestätigung | Testbuchung auf echtem Smartphone | Zusätzliche Upselling-Seite vor der Zimmerwahl |
| Tap-Ziele | Mindestens 44 × 44 Pixel | Manueller Test | Datumsfelder sind zu klein |
| Textkontrast | Mindestens 4,5 : 1 | Kontrast-Checker | Hellgrau auf Weiß bei Preisangaben |
| Formularfelder | Sichtbares Label und Fehlertext | Tastatur-Test | Nur Platzhaltertext statt Beschriftung |
| Preisangaben | Endpreis inklusive Mehrwertsteuer und Nebenkosten vor der Buchung sichtbar | Durchlauf des Buchungsprozesses | Endpreis erst im letzten Schritt |
Die drei Performance-Werte beziehen sich auf die Core Web Vitals. Ladezeit und Interaktion sollten sowohl mit Felddaten als auch im Labor geprüft werden: PageSpeed Insights zeigt, wie eine Seite unter kontrollierten Bedingungen reagiert, während die Search Console reale Nutzungserfahrungen bündelt. Labortests allein können ein zu positives Bild liefern, wenn sie auf einem schnellen Rechner und mit stabiler Verbindung stattfinden.
Der Buchungsablauf muss sich ebenfalls als Ganzes testen lassen. Ein Gast sollte Zimmer auswählen, Daten prüfen und bestätigen können, ohne sich durch wiederholte Zwischenseiten zu arbeiten. Die Richtlinie von höchstens drei Schritten ist ein praktischer Zielwert, keine Garantie für Conversion. Entscheidend ist, dass jeder Schritt eine klare Aufgabe hat und kein zusätzlicher Bildschirm den Weg unnötig verlängert.
Tap-Ziele, Labels und Kontrast sind keine kosmetischen Details. Auf kleinen Displays erschweren enge Datumsfelder die Auswahl; ohne dauerhaft sichtbare Feldbeschriftung ist zudem oft unklar, welche Angaben erwartet werden. Bei Preisen kann schwacher Kontrast gerade die Information verstecken, die Gäste für ihre Entscheidung benötigen. Das Ziel, Buchbarkeit, Bedienbarkeit und Verständlichkeit gemeinsam zu prüfen, passt auch zur Planung eines Hotel-Webdesigns mit Connexly.
Übertragen Sie die Tabelle in das Lastenheft oder die Angebotsanfrage. So müssen alle Anbieter dieselben Punkte prüfen und können nicht nur mit Screenshots oder allgemeinen Versprechen überzeugen.
Ohne messbare Zielwerte lässt sich kein Webdesign-Angebot ehrlich vergleichen.
Buchungsmaschine technisch richtig einbinden
| Integration | Ablauf für den Gast | Vorteil | Nachteil |
|---|---|---|---|
| Eigene Buchungsmaschine mit Channel-Manager-Anbindung | Buchung auf der Hotel-Domain, Verfügbarkeit live | Volle Datenhoheit und Direktbuchungen | Raten und Kontingente müssen gepflegt werden |
| iFrame-Widget des Buchungsanbieters | Eingebettetes Formular, Zahlung beim Anbieter | Schnell eingerichtet | Layoutbruch und eigenes Design nur eingeschränkt anpassbar |
| Weiterleitung auf die Buchungsseite | Button führt auf die Seite des Anbieters | Geringer Aufwand | Abbrüche durch Wechsel des Designs |
| OTA-Widget (Vermittlungsportal) | Verfügbarkeit des Portals auf der Hotelseite | Reichweite über bekannte Marke | Provision pro Buchung und wenig Direktgeschäft |
Die Wahl hängt nicht nur davon ab, wie schnell sich eine Funktion einbauen lässt. Eine externe Buchungsseite kann die Einrichtung vereinfachen, aber der Wechsel von der Hotelmarke zu einem anderen Design kann Gäste verunsichern. Ein integriertes Widget hält den Gast eher im vertrauten Umfeld, verlangt jedoch sorgfältige Gestaltung und Tests auf verschiedenen Geräten.
Der Vertriebsgrund ist konkret: Laut HOTREC-Distributionsstudie 2024 liefen 2023 15,1 % aller Hotelübernachtungen in Deutschland als Echtzeitbuchung über die eigene Hotelwebsite. Bei Individualhotels stieg der Anteil der Buchungen über eine Internet Booking Engine von 9,0 % im Jahr 2021 auf 11,4 % im Jahr 2023. Online-Reiseagenturen vermittelten im selben Jahr 31,2 % der deutschen Hotelübernachtungen. Die eigene Website sollte daher nicht bloß auf ein Vermittlungsportal verweisen, sondern eine nachvollziehbare Direktbuchung ermöglichen.
Einrichtung in der richtigen Reihenfolge
Buchungsmaschine und Channel Manager auswählen. Legen Sie Zimmertypen, Raten und Kontingente vollständig an. Klären Sie vorher, welches System die maßgeblichen Verfügbarkeiten verwaltet und wie Änderungen übertragen werden.
Verfügbarkeiten abgleichen. Prüfen Sie vor dem Livegang mehrere Zimmer und Reisedaten im Hotel- und Buchungssystem. Falsche Raten oder freie Zimmer, die tatsächlich belegt sind, führen zu Rückfragen, Korrekturen und vermeidbaren Stornierungen.
Den Gastweg praktisch durchspielen. Starten Sie drei Testbuchungen von der Zimmerseite aus, darunter einen Durchlauf auf einem echten Smartphone. Achten Sie auf Datumswahl, Zimmerdetails, Zahlungsangaben und verständliche nächste Schritte.
Bestätigungsmail kontrollieren. Vergleichen Sie Zimmertyp, Reisedaten und Preis mit der abgeschlossenen Testbuchung. Eine Buchungsstrecke ist erst dann vollständig getestet, wenn auch die Nachricht nach dem Abschluss stimmt.
Abbrüche messen. Erfassen Sie, an welchem Formularschritt Gäste aussteigen. Viele Direktbuchungen gehen nicht an einem schlechten Foto verloren, sondern an einem Widget, das ein separates Fenster öffnet oder den vertrauten Buchungsweg unterbricht.
Mobile Performance messen und verbessern
Eine mobile Hotelwebsite muss Gäste ohne Umwege von der Information zur Buchung führen. Entscheidend ist der gesamte Buchungsweg: Ladezeit, verständliche Inhalte und bedienbare Eingabefelder. Eine Seite kann schnell öffnen und trotzdem Buchungen verlieren, wenn der Kalender verzögert reagiert oder die Verfügbarkeit schwer zu finden ist.
Daten nach Gerät und Buchungsschritt trennen. Vergleichen Sie Analytics- und Buchungssystemdaten nach Gerät, Quelle und Funnel-Schritt. Steigen mobile Besucher bereits bei der Datumswahl aus, liegt die Ursache wahrscheinlich an einer anderen Stelle als bei Abbrüchen kurz vor der Bestätigung.
Die mobile Startseite auf eine Hauptaktion ausrichten. Machen Sie klar erkennbar, wie Gäste Verfügbarkeiten prüfen oder buchen. Ein auffälliger Button hilft wenig, wenn mehrere gleichrangige Aktionen um dieselbe Aufmerksamkeit konkurrieren.
Entscheidungsinformationen schnell auffindbar machen. Preise und Stornierungsbedingungen sollten ohne langes Suchen erreichbar sein. Eine klickbare Telefonnummer erleichtert Rückfragen, wenn Gäste unterwegs nur kurz auf die Website schauen.
Auf echten Geräten testen. Prüfen Sie den Buchungsweg auf verschiedenen Smartphones und mit einer langsamen Mobilfunkverbindung. Kontrollieren Sie nicht nur, ob die Seite lädt. Felder, Buttons und Kalender müssen auch während der Eingabe reagieren, ohne zu springen oder zu blockieren.
Bilder passend ausliefern. Komprimieren Sie Zimmerfotos und verwenden Sie WebP oder AVIF, sofern die technische Umgebung es unterstützt. Bilder weiter unten können verzögert laden, damit der sichtbare Einstieg nicht auf den vollständigen Seitenaufbau warten muss.
Gestaltungsvarianten erst bei stabiler Funktion vergleichen. Testen Sie dann unterschiedliche Button-Positionen, Formularlängen oder Vertrauenshinweise. Ein A/B-Test auf einer instabilen Seite zeigt nicht zuverlässig, welche Gestaltung den Buchungsweg verbessert. Auch mobil nutzbares Webdesign sollte bei Hotels an den konkreten Buchungsschritten geprüft werden, nicht nur an der Darstellung der Startseite.
Ein typischer Testfehler ist die Prüfung am leistungsstarken Rechner. Auf einem Smartphone können nachladende Buchungsfelder springen oder Eingaben blockieren. Feldmessungen bilden besser ab, was Gäste tatsächlich erleben.
Zur Veranschaulichung der mobilen Prüfung dient dieses Video:
Barrierefreiheit im Buchungsprozess sichern
Ein barrierefreier Buchungsweg muss auch mit Tastatur und Screenreader funktionieren. Prüfen Sie Zimmerauswahl, Datumsfelder, Formulare und Fehlermeldungen als zusammenhängenden Ablauf. Ein Kalender, der keine Tastatureingaben annimmt, oder ein Fokus, der nach einer Fehlermeldung an die falsche Stelle springt, kann die Buchung unterbrechen.
Was der Buchungsweg erfüllen muss
Als Prüfbasis dienen WCAG 2.1 auf Konformitätsstufe AA, die BITV 2.0 und EN 301 549. Die Erläuterungen zu EN 301 549 der Bundesstelle für Barrierefreiheit beschreiben Anforderungen an Webinhalte und verweisen auf die einzuhaltenden WCAG-Erfolgskriterien der Stufen A und AA.
Prüfen Sie die Bedienung Schritt für Schritt. Formularfelder brauchen verständliche Beschriftungen, die auch nach der Eingabe verfügbar bleiben. Fehlermeldungen müssen konkret benennen, was zu korrigieren ist. Der Tastaturfokus sollte sichtbar bleiben und logisch vom Datumsfeld über die Zimmerauswahl bis zum Checkout führen. Auch Farbkontraste, Alternativtexte und eingebettete Elemente gehören zur Prüfung.
Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025. Es erfasst unter bestimmten Voraussetzungen digitale Dienstleistungen, über die Verbraucher einen Vertrag abschließen können. Eine Hotel-Buchungsmaske kann darunterfallen. Prüfen Sie die Anwendbarkeit und mögliche Ausnahmen, etwa für bestimmte Kleinstunternehmen, für den jeweiligen Betrieb, statt pauschal von einer Befreiung auszugehen.
Website und Drittanbieter gemeinsam prüfen
Automatisierte Tests zeigen technische Auffälligkeiten, ersetzen aber keine manuelle Prüfung. Durchlaufen Sie die Buchung mit Tastatur und Screenreader und beziehen Sie die Buchungsmaschine ein. Ein externes Widget kann den Ablauf weiterhin behindern, auch wenn die Hotelwebsite selbst korrekt umgesetzt ist.
Die Praxisempfehlungen zur barrierefreien Hotelbuchung verweisen auf eine Auswertung von einer Million Startseiten: 95,9 % wiesen mindestens einen automatisch erkennbaren WCAG-Verstoß auf, im Durchschnitt wurden 56,1 Fehler pro Seite festgestellt, und bei 51 % fehlten Formularbeschriftungen. Die Zahlen zeigen, warum ein automatisches Plugin allein keine ausreichende Prüfung darstellt. Erfassen Sie Mängel nach Schweregrad, weisen Sie Verantwortliche zu und setzen Sie Nachbesserungsfristen, auch für Drittanbieter.
CMS wählen, das Buchung und Pflege trägt
| CMS-Typ | Stärken | Schwächen | Passt für |
|---|---|---|---|
| WordPress mit Buchungs-Plugin | Große Auswahl an Erweiterungen, günstige Pflege | Plugin-Updates und Sicherheitspflege nötig | Kleine und mittlere Häuser mit fester Pflegeroutine |
| TYPO3 | Stabil, feine Rechteverwaltung, gute Mehrsprachigkeit | Höhere Entwicklungskosten und Spezialisten nötig | Hotelgruppen und mehrsprachige Häuser |
| Baukasten-Systeme | Schnell live, einfache Bedienung | Buchungsschnittstellen oft eingeschränkt, Grenzen bei Performance | Kleine Häuser ohne eigene Buchungslogik |
| Individuelle Lösung | Volle Kontrolle, Schnittstellen frei wählbar | Hohe Einstiegskosten und laufende Wartung | Häuser mit eigenem Buchungssystem und Entwicklerteam |
Die Tabelle zeigt den grundlegenden Tausch: Je mehr Kontrolle das System bietet, desto mehr technische Pflege muss jemand übernehmen. Ein individuelles CMS ist nicht automatisch besser, wenn niemand Schnittstellen oder Updates betreut. Ein Baukasten ist nicht automatisch zu einfach, wenn er die nötige Buchungsmaschine sauber anbinden kann.
Vor der Auswahl sollten Verantwortliche vier Fragen beantworten:
- Wer pflegt Preise und Fotos? Wenn eine Person die Inhalte neben dem Tagesgeschäft aktualisiert, ist eine übersichtliche Oberfläche wichtiger als eine lange Liste technischer Funktionen.
- Welche Buchungsschnittstelle ist zwingend? Prüfen Sie, ob das CMS sie ohne individuelle Entwicklung unterstützt. Ein vermeintlich günstiges System kann teuer werden, wenn ein zentrales Widget nur mit Sonderbau funktioniert.
- Welche Sprachen werden benötigt? Mehrsprachigkeit umfasst nicht nur Menüs. Zimmerdetails, Bedingungen und Bestätigungstexte müssen ebenfalls gepflegt und übersetzt werden.
- Wer übernimmt die Sicherheitspflege? Legen Sie fest, wer Updates, Backups und Zugänge kontrolliert. WordPress kann viele Hotelwebsites tragen, braucht aber eine verlässliche Plugin- und Wartungsroutine.
Kleine Häuser mit wenig Zeit kommen oft mit einem Baukasten gut zurecht, sofern die Buchungsschnittstelle vorher geprüft wurde. Mehrere Häuser oder eine eigene Buchungslogik sprechen eher für ein Redaktionssystem wie TYPO3 oder eine individuelle Lösung mit einem erreichbaren Entwicklerteam.
Conversion-Elemente, die Direktbuchungen auslösen
Gäste brauchen Informationen in einer bestimmten Reihenfolge: erst Verfügbarkeit, dann passende Zimmer und Preise, anschließend Sicherheit über Bewertungen, Zahlung und Bedingungen. Eine Hotelwebsite sollte diese Fragen dort beantworten, wo sie entstehen, nicht erst im letzten Checkout-Schritt.
Verfügbarkeitssuche oberhalb der Falz. Gäste sollten Reisedaten und Personenzahl eingeben können, ohne zuerst durch lange Einleitungstexte zu scrollen. Vorausgefüllte Beispieldaten dürfen dabei nicht mit einer tatsächlichen Verfügbarkeit verwechselt werden.
Zimmerübersicht mit klaren Preisen. Stellen Sie Zimmeroptionen so gegenüber, dass Ausstattung, Bettgröße und Preis leicht vergleichbar sind. Ein „ab“-Preis braucht eine klare Erläuterung, etwa ob Frühstück enthalten ist und welche Nebenkosten hinzukommen.
Direktbuchungs-Button. Halten Sie die Handlungsaufforderung sichtbar und verständlich. Ein Button sollte eindeutig in die Verfügbarkeitssuche oder Buchung führen, statt mit einem allgemeinen Text wie „Mehr erfahren“ eine unklare Erwartung zu wecken.
Vertrauen durch Bewertungen. Zeigen Sie Bewertungen mit Herkunft und Kontext, nicht nur einen Durchschnittswert ohne Erläuterung. Klickbare Telefonnummern und ein zusätzlicher Kontaktweg, etwa per Messenger, helfen Gästen, die vor der Buchung eine konkrete Frage haben.
Flexible Zahlungsoptionen. Benennen Sie die akzeptierten Zahlungsmethoden, bevor der Gast den Checkout abschließt. Vertraute Auswahlmöglichkeiten und ein nachvollziehbarer Zahlungszeitpunkt vermeiden Überraschungen im letzten Schritt.
Klare Stornobedingungen. Platzieren Sie die Bedingungen auf der Zimmerseite und ordnen Sie sie der jeweiligen Rate zu. Wer erst kurz vor der Zahlung erfährt, welche Stornierungsfrist gilt, kann das Angebot schlechter beurteilen.
Für Gruppen und Firmenkontingente sollte es zusätzlich ein kurzes Anfrageformular geben. Fragen Sie nur nach den Angaben, die zur Bearbeitung nötig sind, und nennen Sie deutlich, wann und auf welchem Weg das Hotel antwortet. So bleibt die Direktbuchung für einzelne Gäste einfach, während komplexere Anfragen nicht in ein unpassendes Standardformular gezwungen werden.
KI nur mit klaren Verantwortlichkeiten einsetzen
Ein Chatbot sollte freigegebene Informationen verwenden, etwa zu Frühstückszeiten, Parkmöglichkeiten oder Zimmerregeln. Preise und Verfügbarkeiten gehören nur dann in automatische Antworten, wenn das System verlässliche, aktuelle Daten erhält. Bei individuellen oder preisrelevanten Fragen muss es einen klaren Übergang zu Mitarbeitenden geben.
Die Digitalisierungsthemen des Hotelverbands greifen eine 2025 veröffentlichte europäische Hotellerie-Studie mit deutscher Beteiligung auf: 41 % der befragten Hotels setzten KI bereits aktiv ein, aber nur 9 % hatten sie in einem formalen Strategiedokument verankert. Vor dem Start sollten daher Zuständigkeit für Antworten, erlaubte Gästedaten und der Umgang mit falschen Auskünften feststehen. Ein Chatbot ohne Qualitätskontrolle ist kein Conversion-Element, sondern eine zusätzliche Fehlerquelle.
Relaunch planen und Anbieter prüfen
Ein Pflichtenheft macht Angebote vergleichbar. Nehmen Sie Buchungsintegration, mobile Messung, Barrierefreiheitsprüfung und Pflegeübergabe auf und fordern Sie für jeden Punkt eine konkrete Beschreibung. Als ergänzende Planungshilfe bietet die Edmund Barks Checkliste zum Website-Relaunch eine strukturierte Orientierung, welche Aufgaben rund um den Websitewechsel bedacht werden sollten.
Stellen Sie jedem Anbieter dieselben Fragen:
- Welche Buchungsschnittstelle wird umgesetzt, und wer pflegt Raten und Kontingente?
- Wie wird Barrierefreiheit getestet, und wird die Buchungsstrecke ausdrücklich mitgeprüft?
- Wie werden Mängel dokumentiert, und welche Frist gilt für Nachbesserungen?
- Wer ist für Fehler in Drittanbieter-Widgets verantwortlich?
- Wie läuft die Pflege nach dem Launch, einschließlich Updates, Backups und festem Ansprechpartner?
Fehlt eine dieser Antworten, ist das Angebot nicht sauber mit anderen vergleichbar. Planen Sie Anforderungen, Angebotsvergleich und Umsetzung als getrennte Arbeitsschritte, statt die Auswahl allein an Entwürfen oder Referenzbildern festzumachen. Wer zusätzlich wissen möchte, worauf bei einem Angebot für Webdesign zu achten ist, sollte dieselben messbaren Anforderungen als Grundlage verwenden.
Eine Vergleichsplattform kann die Suche ergänzen, ersetzt aber nicht das Pflichtenheft. Connexly ist eine kostenfreie Vergleichs- und Vermittlungsplattform für Betriebe in Gastronomie, Handel und Dienstleistungen. Nach einer kurzen Bedarfsabfrage erhalten Unternehmen passende, individuell zugeschnittene Angebote von geprüften Partnern.
Für den Relaunch eines Hotels sollten Buchungsweg, mobile Nutzbarkeit und Barrierefreiheit bereits in der Angebotsanfrage messbar feststehen. Connexly ermöglicht Hotels, ihren Bedarf zu beschreiben und passende Webdesign-Angebote geprüfter Anbieter zu vergleichen. Starten Sie mit den Prüfpunkten aus dem Pflichtenheft und wählen Sie einen Anbieter, der Buchung, Tests und Pflege nachvollziehbar abdeckt.
