Neue Hotel-Webseite: buelow-hotels.de

Andiministrator · 12. Oktober 2011 10:48

Wir haben mal wieder eine Hotel-Webseite mit CMSms veröffentlicht:
http://www.buelow-hotels.de
Die Webseite ist in Zusammenarbeit mit Nic (nicmare) entstanden.

Die grafischen Effekte der Webseite sind mit massiven Einsatz von jQuery umgesetzt.
Die FullScreen-Hintergrund-Bilder sind über das Gallery-Modul eingebunden. Bilder-Gallerien können alternativ aber auch aus Picasa stammen (grafisch macht das keinen Unterschied). Die Hintergrund-Bilder werden übrigens nachgeladen, behindern also nicht die Ladezeit der Seite.
Allgemein wurde beim Erstellen der Seite großer Wert auf SEO, Social Media und Co. gelegt. So ist z.B. zu jeder Seite ein separater Meta-Title, Meta-Description sowie nofollow/noindex-Attribute individuell festlegbar.
Für mobile Geräte gibt es ein separates Template sowie zu jeder Seite ein separates Tab.

Da auf der Seite sowohl verschiedene Sprachen als auch verschiedene Domains verwendet werden, kommt das Modul MultiDomains zum Einsatz. Dadurch gibt es keine Probleme mit Duplicate Content innerhalb der unterschiedlichen Domains. Außerdem werden damit 301-Weiterleitungen realisiert - von der alten Webseite gibt es ja viele URLs, die sonst ins Leere laufen würden.
Zum Erfassen der fehlerhaften URLs dient auch wieder das MultiDomain-Modul. Es bietet ein integriertes 404-Tracking, welches nicht nur Seiten, sondern auch fehlende Bilder usw. auflistet. Aus der Liste kann man gleich eine 301-Weiterleitung oder einen Ignorieren-Filter anlegen (inkl. RegExp-Möglichkeiten).

Für die Content-Pflege kam das Modul AdvancedContent (+ GBFilePicker) zum Einsatz, außerdem das News-Modul (um AComments erweitert), für Events haben wir das Modul Eventlistings erweitert. Der Nic hat auch einiges mittels CGSimpleSmarty realisiert. Die Formulare sind mit FormBuilder umgesetzt, angekoppelt haben wir das Modul FormBrowser, um die Eingaben (zusätzlich zu den EMails) zu speichern. Für EMail-Newsletter steht Newsletter Made Simple zur Verfügung, samt angepasstem EMail-Template. Um die schnelle Auslieferung der Seite kümmert sich (neben einer angepassten .htaccess) auch das Modul ScriptDeploy, welches auch bei der Entwicklung ein paar Vorteile bietet. Bei der Entwicklung haben wir natürlich auch TemplateExternalizer eingesetzt.

Wenn Ihr Fragen oder Anregungen habt, freuen sich Nic und ich auf Eure Kommentare ...

piratos · 12. Oktober 2011 11:10

Sehr schöne Site die vor allem durch die hervorragenden Fotos gewinnt.
Nachteil echte Informationen sind nur in einem scrollbaren Bereich zu lesen.

Die Suchfunktion läuft in der Praxis auf viele Nichtreffer hinaus, da scheint etwas nicht zu stimmen.

Und - auch schöne Hotels finden einen Großteil ihrer Kunden im benachbarten Ausland und dafür ist die Seite zu langsam:

http://www.webpagetest.org/result/111012_EG_1VZ2D/
http://www.webpagetest.org/result/111012_KA_1VZ1N/

Andiministrator · 12. Oktober 2011 11:39

Ja, bei der Ladezeit gibt es sicherlich noch ein paar ToDo's, das zeigt auch Page Speed: https://developers.google.com/pagespeed … bile=false
Die oben genannten Speed-Tests arbeiten jedoch nicht ganz korrekt, gerade die großen Bilder im Hintergrund werden nachgeladen, die eigentliche Seite ist also schon wesentlich früher komplett geladen.

piratos · 12. Oktober 2011 11:59

Chrome 14, gelöschter Cache, 64 MBit Anbindung , Direktmessung Network

22 requests ❘ 276.87KB transferred ❘ 1.53s (onload: 1.53s, DOMContentLoaded: 750ms)

Das kann nur noch langsamer werden, denn nicht alle saugen mit 64 Mbit.

Wohlfühlgrenze <=1 Sekunde , Schmerzgrenze 2 Sekunden, dazwischen hat man schon diverse Besucher verloren, bei > 2 Sekunden geht der Erfolg einer Site ganz steil nach unten.

Das sind so Werte die man als Designer immer im Auge behalten muss, denn eine Site hat ja auch eine Funktion, hier klar definiert Kunden werben und möglichst Buchungen generieren.

Daran ist schon so manche wunderschöne Site gescheitert.

NaN · 12. Oktober 2011 12:12

Sehr interessante Seite.
Schade dass es keine Fallback-Lösung gibt, falls kein Javascript verfügbar.
Immerhin werden die Scripte von externen Quellen geladen, die können (unter sehr unwarscheinlichen Umständen) auch mal nicht erreichbar oder durch diverse Tools (z.B. RequestPolicy für Firefox) geblockt sein (wie es bei Überparanoiden wie mir der Fall ist). Und schon geht auf der Seite nicht mehr viel was Inhalte angeht.
Ich weiß, dass heutzutage in beinahe jedem Staubsauger ein Javascript-Interpreter steckt und eigentlich fast nichts mehr ohne auskommt, aber das ist ein Punkt auf den ich persönlich sehr viel Wert lege. Eine Seite sollte meiner Meinung nach zumindest bei der Darstellung des Inhalts von so wenig wie möglich extras abhängen.

Aber sonst - als Mensch - nichts zu meckern.

Andiministrator · 12. Oktober 2011 12:16

@piratos
Wie bereits geschrieben - Dinge wie die großen Hintergrund-Bilder werden nachgeladen. Es ist nicht die Gesamtladezeit, die wichtig ist, sondern der Zeitpunkt, ab dem die Seite vollständig benutzbar ist. Und damit sind wir ganz zufrieden. Die Absprungrate der gemessenen Seite liegt bei 16%, das ist weit unter dem Durchschnitt und zeigt, dass die Besucher kein Problem mit der Ladezeit haben.

@NaN
Da hast Du natürlich recht. Interessant wäre es zu wissen, wie hoch der Anteil der Besucher ohne JavaScript ist - dies bekomme ich in Google Analytics ja nicht mit.
Allerdings: An externen Scripten verwenden wir eigentlich nur Google Analytics (was asynchron geladen wird). Alles andere liegt lokal auf dem Server. Einzige Ausnahme: Eine Bildergalerie wird von Picasa verwendet.

piratos · 12. Oktober 2011 12:32

Die Direktmessung beinhaltet keine Gesamtladezeit sondern genau den Zeitpunkt wann eine Seite komplett nutzbar ist.

Man sollte solch Randinformationen bedenken wie 100ms langsameres Web kostet Amazon 1% Umsatz oder auch mal andere Werte die unter http://www.stevesouders.com/blog/2010/0 … imization/ zu finden sind.

Da ich ja nun auch Hotelseiten mache, weiß ich auch das Hotels bei exakt gleichem Design und Inhalten nur dann über ein Speedweb enorm bei den Onlinebuchungen hoch geschossen sind, was mir sagt, das es nicht nur bei den dicken Anbietern solche Zusammenhänge gibt sondern auch bei den kleinen.
Die Erfahrung wollte ich dazu mal beisteuern.

NaN · 12. Oktober 2011 12:36

Andiministrator schrieb:

Allerdings: An externen Scripten verwenden wir eigentlich nur Google Analytics

Und was ist mit ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js ? wink

Andiministrator · 12. Oktober 2011 12:42

Auch gerade gesehen - danke für den Hinweis. Habe es sogleich geändert. Es lohnt sich doch immer, hier eine Seite vorzustellen smile

mike-r · 12. Oktober 2011 13:22

Schöne runde Sache, die Ladezeit ist wie bereits gesagt, etwas grenzwertig, aber imho eigentlich ok (DSL2000).
Das mit dem JS ist mir auch aufgefallen, da die Struktur soweit ganz brauchbar ist, sollte zumindest die Anordnung der Elemente mit wenigen Handgriffen zu beheben sein.

Hinter dem verschwimmen der Grafiken habe ich kein System entdecken können, ich finde es reichlich verwirrend, würde auf jeden Fall auf den Effekt verzichten.

NaN · 12. Oktober 2011 13:39

Andiministrator schrieb:

Auch gerade gesehen - danke für den Hinweis. Habe es sogleich geändert.

Das habe ich damit nicht bezwecken wollen.
Es gibt durchaus Gründe, die dafür sprechen, diese oder jene Daten von externen Quellen (CDN) zu beziehen.
Ich persönlich mag es zwar nicht, wenn eine Seite Anfragen an andere Adressen stellt (dem ich nicht zugestimmt habe), aber wenn es tatsächlich um Performance-Kriterien geht, bei der ich den Server entlasten muss, würde ich selbst auch auf externe Quellen zurückgreifen.

Was ich meinte war eigentlich nur, dass die Seite auch ohne Javascript funktionieren sollte.
Meine Lösung für solche Fälle sieht meist so aus:
Man gibt all den Elementen, die mit Javascript gesteuert werden sollen eine Klasse. Z.B. "no_js".
Im Stylesheet formatiert man diese Klasse so, dass sie ohne Javascript korrekt angezeigt wird.
Dann braucht man nur noch ein kleines Javascript, welches bei allen Elemente dieser Klasse, eben diese Klasse wieder entfernt.
Dann sind die Styles, die nur ohne Javascript gelten sollen, für diese Elemente weg und den rest erledigen dann die Scripte.

Diese Lösung hat aber einen unschönen Nachteil: Wenn die Seite nicht schnell genug ist - und somit auch das kleine Javascript, das die Klasse entfernt, nicht schnell genug ausgeführt wird - dann hat man beim Laden der Seite für einen kurzen Moment alles so, als wäre kein Javascript da und dann erst ändert sich das Layout so wie es sein soll.

Man könnte das evtl. noch beschleunigen, indem man nicht allen JS-Elementen eine Klasse gibt, sondern umgekehrt, dem Body per JS eine ID hinzufügt und dann die JS-Elemente immer nur über diese ID anspricht.

Es ist bei Dir ja zum Glück nur eine Frage des Sytslesheets, ob man die Inhalte auch ohne Javascript sehen kann.

Andiministrator · 12. Oktober 2011 13:57

@mike-r
Danke smile
Die Unschärfe der Hintergrundbilder bei maximiertem Content-Bereich soll bewirken, dass sich der Besucher nicht auf das Bild, sondern auf den Content konzentriert. Ich persönlich wollte sogar die Rahmen oben und unten ausblenden, wenn der Inhalt maximiert wird - damit waren aber unsere Designer nicht einverstanden wink

@NaN
Ich kann es Dir nicht stichhaltig erklären, aber ich mag es nicht, wenn Inhalte von anderen Servern geladen werden. Wie Du richtig bemerkst gibt es sogar Gründe dafür. Vor allem bei Bildern macht es sich bemerkbar, diese von anderen Domains zu laden, dadurch sprengt man die Grenze von 7-12 gleichzeitigen Browser-Verbindungen zu einer Domain.
Das mit den CSS-Klassen via JavaScript ist eine gute Idee. Setz ich mir mal auf die ToDo-Liste. Danke smile

Auf meiner ToDo-Liste stehen übrigens noch einige Sachen. So brauche ich z.B. noch eine angepasste Version für Tabletts - hier funktioniert das JavaScript nicht flüssig genug.
Desweiteren habe ich z.B. auch PreFetching und PreCaching dort stehen, in Zusammenarbeit mit Google Analytics. Über G.Analytics kann ich feststellen, welche Folgeseiten zu einer bestimmten Seite am häufigsten aufgerufen werden. Die Elemente dieser Seite kann ich schon mal vorab in den Browser-Cache laden, so dass die nächste Seite dann in 0,nix da ist. Funktioniert mit Firefox und Google Chrome. Der IE kann zumindest DNS-Caching, so dass ich zu Folgeseiten schon einmal die DNS-Infos in den Browser-Cache legen kann. Zu diesem Thema war in einer der letzten ct's ein schöner Artikel drin.
Naja, bis meine ToDo-Liste abgearbeitet ist, werden wohl noch einige Monate ins Land ziehen ...

nhaack · 12. Oktober 2011 19:29

Coole Site. Das ganze Konzept finde ich recht gelungen. Die macht mich persönlich nach dem ersten Klick so neugierig, dass ich da heute bestimmt noch mal genauer draufgucken werde. Interessantes Bedienkonzept. Das wirkt mehr wie eine Anwendung als das, was gemeinhin als Site verstanden wird.

Allein das "ausmilchen" des Hintergrunds bei Detailansichten ...

Schönes Konzept .... toller Job!

Grüße
Nils

noober · 13. Oktober 2011 08:42

sehr schöne Seite, rundum gelungen. Design, Programmierung, Bedienbarkeit KLASSE.

wenn ich residenz -> Suche -> "Zimmer" -> Zimmer Suiten Residenz (Suchergebnis) gehe erscheint folgender Screen:

Ich denke, das "werbisch" verwirrt: der "normale" User weiß nicht was ein "Relaunch" ist

Beitrag geändert von noober (13. Oktober 2011 08:45)

antibart · 13. Oktober 2011 08:48

Klasse Webauftritt. Nix zu meckern.

Andiministrator · 13. Oktober 2011 08:57

@noober + @antibart
Danke smile

@noober
Danke für den Hinweis. Muss ich mir noch einmal anschauen.

antibart · 14. Oktober 2011 08:48

Andiministrator schrieb:

Danke für den Hinweis. Muss ich mir noch einmal anschauen.

Man könnte auf die Begründung (wegen Relaunch) theoretisch verzichten. Auf der anderen Seite muss man das Wort nicht kennen, um die Aussage zu verstehen: Das Bild ist halt nicht da.

Außerdem schadet es ja nicht, wenn ein User mal ein neues Wort kennenlernt.

Forum für CMS/made simple

#1 12. Oktober 2011 10:48

Neue Hotel-Webseite: buelow-hotels.de

#2 12. Oktober 2011 11:10

Re: Neue Hotel-Webseite: buelow-hotels.de

#3 12. Oktober 2011 11:39

Re: Neue Hotel-Webseite: buelow-hotels.de

#4 12. Oktober 2011 11:59

Re: Neue Hotel-Webseite: buelow-hotels.de

#5 12. Oktober 2011 12:12

Re: Neue Hotel-Webseite: buelow-hotels.de

#6 12. Oktober 2011 12:16

Re: Neue Hotel-Webseite: buelow-hotels.de

#7 12. Oktober 2011 12:32

Re: Neue Hotel-Webseite: buelow-hotels.de

#8 12. Oktober 2011 12:36

Re: Neue Hotel-Webseite: buelow-hotels.de

#9 12. Oktober 2011 12:42

Re: Neue Hotel-Webseite: buelow-hotels.de

#10 12. Oktober 2011 13:22

Re: Neue Hotel-Webseite: buelow-hotels.de

#11 12. Oktober 2011 13:39

Re: Neue Hotel-Webseite: buelow-hotels.de

#12 12. Oktober 2011 13:57

Re: Neue Hotel-Webseite: buelow-hotels.de

#13 12. Oktober 2011 19:29

Re: Neue Hotel-Webseite: buelow-hotels.de

#14 13. Oktober 2011 08:42

Re: Neue Hotel-Webseite: buelow-hotels.de

#15 13. Oktober 2011 08:48

Re: Neue Hotel-Webseite: buelow-hotels.de

#16 13. Oktober 2011 08:57

Re: Neue Hotel-Webseite: buelow-hotels.de

#17 14. Oktober 2011 08:48

Re: Neue Hotel-Webseite: buelow-hotels.de

Fußzeile des Forums