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

"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: [border padding="5" align="alignleft"]http://137pillarshouse.com/[/border] Weitere Beispiele: http://www.macdonaldhotels.co.uk/ und http://www.sonnenburg.at/ Beispiele aus der Gastronomie: [border padding="5" align="alignleft"]http://panchopistolas.com/[/border] Weitere Beispiele: http://www.enochs.co.uk/ und http://brasseriecayman.com/ Beispiel einer Destination: [border padding="5" align="alignleft"]http://traveloregon.com/[/border] ... 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: [border padding="5" align="alignleft"]http://www.ideas4hotels.com[/border] 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