Hotelmarketing Blog

Responsive Webdesign für Hotels – Eine Klasse für sich

Responsives Webdesign: Ein Thema, das wir beim Hotelcamp 2012 #hcb12 in Bendorf angesprochen und im Rahmen einer Session mit den Teilnehmern diskutiert haben.

Zuerst die Begriffserklärung: Was ist responsives Webdesign?

„Responsive Webdesign bedeutet reaktionsfähiges Webdesign und bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau, insbesondere die Strukturierung der einzelnen Elemente wie z.B. Navigationen und Texte, von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt. Technische Basis sind neuste Webstandards wie HTML5 und CSS3.“ [Auszug aus Wikipedia]

Wer, in punkto Technik, tiefer einsteigen will, findet reichlich an Infos hier und hier und hier und hier natürlich über die Suche in den Suchmaschinen.

Wir wollen uns aber hier kaum mit Technik beschäftigen und möchten deshalb diesen Artikel auch nicht als „technischen Fachbeitrag“ verstanden wissen. Technisch erklärt haben das andere schon mehrfach, – sicher auch ausführlicher und besser, als wir das je könnten.

Versteht bitte dieses post als Gedankenanstoß für evtl. aktuelle oder zukünftige Überlegungen zu eurer Webseite.

Vorab der Versuch einer Erklärung im „Klartext“, die sicher auch ein Nicht-Techniker verstehen kann:
Bei responsivem Webdesign erkennt eure Webseite, welche Bildschirmgröße das Gerät hat, mit dem der Zugriff auf eure Webseite erfolgt. Je nach Bildschirmgröße ändert sich dadurch die Darstellung der Webseite und passt sich automatisch in Größe, Gestaltung und Darstellung an das jeweilige Gerät an.

Voraussetzung hierfür ist, dass das Webdesign

• keine starren Layouts (also starr vorgegeben z.B. oben einen Block in quer, mittig 3 oder 4 Spalten in hoch)
• keine festen Schriftgrößen und
• keine festen Bildgrößen

mehr haben darf.

Um das ganze jetzt noch etwas „griffiger“ zu machen, hier einige Beispiele für responsive gestaltete Webseiten aus der Hotellerie & Gastronomie, die wir in der Session beim Hotelcamp 2012 versprochen hatten, noch nachzureichen.

Beispiele aus der Hotellerie:

Weitere Beispiele: http://www.macdonaldhotels.co.uk/ und http://www.sonnenburg.at/

Beispiele aus der Gastronomie:

Weitere Beispiele: http://www.enochs.co.uk/ und http://brasseriecayman.com/

Beispiel einer Destination:

… logisch sind auch hier wieder die „Großen“ dabei: http://www.starbucks.com/

Viele weitere Beispiele findet ihr auch bei http://mediaqueri.es/.

Braucht ihr das wirklich? Ist das nicht unnützer „Schnickschnack“?
Solange die Besucher eurer Webseite nur vor ihrem Desktop, Laptop oder ihrem Tablet-Rechner sitzen, kann das vielleicht als „Schnickschnack“ oder unnütze „Spielerei“ abgetan werden.

ABER, was passiert, wenn ein Besucher eurer Webseite mit  iPhone, Android-Handy, Blackberry oder einem Windows Phone bei euch surfen will?

Schon darüber nachgedacht und das auch einmal konkret recherchiert?

Dazu unser erster Tipp:
Probiert es einfach selber aus. Nutzt ein mobiles Endgerät und surft auf eurer Webseite.

Oder Ihr nutzt einfach dieses Testing-Tool, das allerdings nur eure normale Webseite checkt und nicht erkennt, ob ihr eine mobile Webseite habt oder nicht.

Müsst ihr von oben nach unten, von links nach rechts schieben, um etwas zu erkennen?
Müsst ihr mit 2 Fingern eure Bilder oder den Text vergrößern, damit ihr überhaupt etwas lesen könnt?
Funktionieren alle Buttons auf euren Menüleisten?
Gefällt euch eure Seite hier immer noch?

Sorry, aber es ist so, manchmal kann man hier wirklich viele „blaue Wunder“ erleben.

Unser zweiter Tipp:
Sicherlich habt ihr auf eurer Webseite Tracking-Tools, z.B. „Google Analytics“, die festhalten, wie viele Besucher ihr wann hattet, woher und über welche Suchmaschinen sie kamen, welche Suchbegriffe eingegeben wurden usw.
Diese Tracking-Tools protokollieren in aller Regel auch die Bildschirmgrößen der Geräte, mit denen der Besucher eure Webseite besucht.

Habt ihr euch dazu die Statistik schon einmal genauer angesehen?
Ja, das mag vielleicht lästig sein, aber es lohnt sich!

Bei uns z.B. sind es ca. 20% der Besucher unserer Webseite, die mit mobilen Endgeräten auf die ideas4hotels Seite zugreifen. In der Stadthotellerie liegen diese Zahlen ähnlich hoch.
Selbst in der Ferienhotellerie, in ländlichen Gebieten, verzeichnen wir bei unseren Kunden bereits eine mobile Nutzung, die 10% überschritten hat. Das sind immerhin, bei ca. 5.000 Besucher pro Monat auf eurer Webseite, schon 500 ! potentielle Gäste, die sich über euer Hotel oder über eure Gastronomie informieren wollen.

Und die Zahl steigt. Denn zur Zeit findet ein gewaltiger Umbruch in der Nutzung des Internets statt, in dessen Verlauf sich die mobile Nutzung bald exponentiell erhöhen wird. Wer hier als Webseitenbetreiber nicht dabei ist, kann vielleicht bald das Nachsehen haben.
Denn wo wird gesurft, wo wird gekauft? Nur dort, wo man auch einen mobilen Nutzer optimal zufrieden stellen können.

• Nun werdet ihr vielleicht sagen:
Ja, wir haben doch eine APP für unser Hotel!

Dann müsst ihr euch fragen: Funktioniert diese neben dem iPhone auch auf anderen mobilen Geräten?
Denn es braucht für die unterschiedlichen Geräte auch unterschiedliche APP’s, denn nicht jede APP funktioniert auf  Geräten verschiedener Hersteller.

Nicht umsonst haben Anbieter wie hrs.de, hotel.de, booking.com und andere, verschiedene APP’s für Geräte verschiedener Hersteller im Angebot. Warum? Weil sie optimale Nutzerzufriedenheit bei den APP’s erreichen und natürlich möglichst viele Übernachtungen verkaufen wollen!

• Vielleicht werdet ihr auch sagen:
Ja, aber wir haben doch eine mobile Webseite für unser Hotel!

Dann solltet ihr prüfen, wie diese auf den verschiedenen mobilen Endgeräten aussieht.
Oft sind mobile Webseiten spartanisch umgesetzt und bieten nur die wichtigsten Funktionen an.
Und wie ist hier eurer Nutzer-Erlebnis? Macht das Laune? Ist das „sexy“? Würdet ihr nach dem Besuch eurer mobilen Webseite bei euch buchen?

Mobile Webseiten rufen auch eure SEO-Spezialisten auf den Plan, die bei einer „normalen“ Webseite und zusätzlich einer „mobilen“ Webseite von „duplicate content“ sprechen, der, wie man weiß, von Suchmaschinen abgestraft wird.

Ob APP’s, oder mobile Webseite, in jedem Fall bedeutet es zusätzlichen Aufwand und Kosten, um auch den stetig steigenden mobilen Nutzungsanforderungen gerecht zu werden.

Daher stellt sich unseres Erachtens die Frage, wenn ihr ohnedies ein neues Projekt für eure Hotel- oder Gastro- Seite plant: Warum nicht gleich an ein responsives Webdesign denken?

Ja sicher, das kostet mehr, als eine „normale“ Webseite, aber auch verschiedene APP’s und verschiedene mobile Webseiten kosten in der Anschaffung und in der laufenden Pflege Geld, wenn man für die Zukunft gerüstet sein will.

Und ja, auch beim responsiven Webdesign gibt es natürlich Fallstricke, die bedacht und beachtet werden müssen.

Hier ein paar Punkte, die in unserer Diskussionsrunde beim Hotelcamp 2012 angesprochen wurden:

1.) Auf die Ladezeiten der Seite achten, wenn diese mobil abgerufen wird.
2.) Der Inhalt der einzelnen Seiten muss wohl durchdacht sein. Hier ist nicht mehr gewohnt viel Platz für ellenlangen Text. Hier ist Umdenken angesagt, dabei darf das Thema Suchmaschinenoptimierung (SEO) und die Online-Buchungsmöglichkeit (IBE) nicht aus den Augen verloren werden.
3.) Menüführung ist nicht gleich Menüführung! Ein Touchscreen eines mobilen Endgerätes funktioniert anders.

Überwiegend wurde bei dieser Session übrigens die Ansicht vertreten, dass Responsives Webdesign durchaus Zukunft für Hotel-Webseiten hat.

Weil wir Empfehlungen für Hoteliers und Gastronomen immer so verstehen, dass wir Dinge, über die wir sprechen, selber ausprobieren und umsetzen, waren wir bei diesem Thema unser „eigenes Versuchskaninchen“ und haben die neue ideas4hotels Webseite responsiv gestaltet.

Ja, es war absolutes „Neuland“, ja es hat diverse Nachtschichten und auch a bisserl Nerven gekostet, gleichzeitig unheimlich viel Spaß gemacht und wir haben viel gelernt …

Und das Ergebnis seht ihr hier:


Gefällt euch die ideas4hotels responsive Webseite? Probiert sie doch bitte einmal auf eurem mobilen Endgerät aus und teilt mit uns eure Erfahrungen. Wir freuen uns auch über kritische Anmerkungen, gerne auch evtl. Fehlermeldungen und natürlich noch viel lieber, bei Gefallen auch ein „kleines Lob“.

Herzlichst
Michael und Andy

Eine kleine Bitte und Anmerkung für Kommentierungen: Für den Fall, dass Anbieter von APP’s, mobilen Webseiten oder ähnlich aufgestellten Unternehmen kommentieren möchten, freuen wir uns über eure Kommentare, so lange von Produkt-Vorstellungen oder Produkt-Anpreisungen Abstand genommen wird. Wir sind und bleiben bei unseren Empfehlungen für Kunden stets neutral und so soll es auch bleiben, weshalb auch dieses Blog Post nicht als geeignete Litfasssäule für Produktvorstellungen verstanden werden sollte. Die Freischaltung von Kommentaren mit Anpreisung eines Anbieters oder eines Produkts behalten wir uns deshalb vor. In jedem Fall sind wir sehr gespannt, auf weitere Beispiele responsiver Hotel- und Gastro-Webseiten.

Bild copyright: www.istockphoto.com

© 2012, Michael M. Rotter. All rights reserved.

Top

18 Comments

  • Pingback: Linksammlung: Responsive Webdesign aka RWD | Stefan.Waidele.info

  • „Klein ist wichtiger als Groß“ ist definitiv der richtige Ansatz – gerade für Gastronomie und Hotel.

    Allerdings sehe ich responsives Design ein wenig kritischer. Zum einen setzt es die Neugestaltung der gesamten Präsenz voraus. Wichtiger aber noch: Es wird, wie der Name schon sagt das Design angepasst. In der Regel bleiben die Inhalte aber komplett gleich. Dabei hat der mobile Nutzer oft andere Bedürfnisse: Direkter Anruf, Routenplanung, ein Gutschein etc.

    Aus meiner Sicht spricht vieles dafür mobile Websites nicht als „kleingemachte“ normale Websites zu verstehen, sondern als eigenständige Gattung. Gern per Umleitung verbunden mit der normalen Website.

    Viele Grüße aus Berlin

    Sharif

  • Responsive Webdesign sollte für alle Websites, die neu online gehen oher einem Relaunch unterzogen werden, ein Muss sein. Die Zukunft des Webs ist ganz einfach mobil. Das sieht man schon ganz klar in den USA, die uns in Europa bei solchen Themen immer ein paar Schritte voraus sind.
    Und sooo kompliziert ist Responsive Webdesign gar nicht. Ein paar mehr Zeilen im Stylesheet und ein paar Überlegungen hinsichtlich der Seitengestaltung – mehr braucht es eigentlich nicht. Und wenn man sich dabei in die Schuhe des Nutzers versetzt, sollte die Entscheidung doch klar sein, oder?

  • Ich als Techniker denke leider immer wieder deutlich weiter als ich als Hotellier umsetzen kann.

    Du hast recht, momentan ist ‚klein‘ dringender als ‚groß‘

    PS: Threaded comments sind auf Handy eine herausforderung.

  • Endlich wird „Liquid Layout“ hoffähig 😉

    In Richtung mobile Endgeräte wurde schon das meiste kommentiert. Ganz klar muss sein.
    In die andere Richtung sollte (vgl. Stefan Niemeyer) weitergedacht werden.

    Denn dort gibt es zwei Ziele: 1 x Smart-TV, also riesige Bildschirme mit einer Auflösung die ein iPhone nur müde lächeln lassen (also nicht wirklich mehr Pixel bieten) und Desktop-Monitore, die tatsächlich eine große Nutzfläche (im Sinne von Pixeln) mitbringen. Dort hat man dann plötzlich wieder Platz für den langen Text oder (da ich das blöde Querformat wohl nicht alleine „wegbestimmen“ kann) Zusatzinformationen in der Breite.

    So könnte ab einer Bildschirmbreite von 1200px eine weitere Spalte eingeblendet werden mit…keine Ahnung…Ausflugszielen, Kochrezepten, whatever.

    Wichtig sind in diesem Zusammenhang auch hoch Auflösende Header-Bilder, die auch bei 1600+ Pixel über den ganzen Bildschirm reichen (oder Tricks, die den Eindruck erwecken). Und dass genau diese Bilder dann eben NICHT auf die Mobiltelefone ausgeliefert werden 😉

    Wäre gerne dabei gewesen. Wer kommt mit auf’s mTourismuscamp in Hanover?

    • Lieber Stefan,

      herzlichen Dank für deinen Input.

      Ja, du hast – ebenso wie Stefan – recht, man sollte bei der Auslieferung des Contents der Webseite nicht nur in die eine, “kleinere”, sondern auch einmal in die andere “größere” Richtung denken. Das ist eine sehr gute Ergänzung zu diesem Thema und darf natürlich bei der Betrachtung nicht außer acht gelassen werden.

      Momentan aber haben wir den Eindruck, dass leider bei viel zu vielen Gastgebern noch nicht einmal das Thema “mobile Nutzung” ihrer Webseiten durch die “kleineren Varianten” so richtig angekommen ist. So erstaunen nämlich die tatsächlichen Zahlen der mobilen Nutzung von Webseiten noch immer den Einen oder Anderen.

      Deine Einschätzung, dass “Liquid Layout hoffähig” geworden ist, teilen wir unbedingt und wir wünschen uns, dass es nicht nur hoffähig bleibt, sondern auch viel häufiger bei einem Relaunch einer Webseite in die Überlegungen zum Webdesign mit einbezogen wird.

      Du denkst in solchen Sachen als Gastgeber immer sehr innovativ und vorausschauend, daher unser Kompliment, dass du mit deinen Anregungen nicht nur in die nähere, sondern auch schon in die weitere Zukunft denkst, die wohl gar nicht mehr so weit weg ist

      Vielleicht bist du ja beim nächsten Hotelcamp #hcb13 wieder dabei?
      mTourismuscamp in Hannover, sicher auch dazu spannend, aber leider schaffen wir es zeitlich nicht.

      Herzliche Grüße aus München!
      Mikel


Schreib einen Kommentar

Required fields are marked *.

× 4 = 8


Top

Wie können wir Ihnen helfen? + 49 89 12151521