Für meinen langjährigen Kunden Indigourlaub übernahm ich auch die Umsetzung der Websites für die zwei weiteren Eigenhäuser. Die Website für das Kleebauer Hof Retreat Center im Mühlviertel wurde dabei komplett neu erstellt, während die Webpräsenz für das Mountain Retreat Center im Chiemgau einem Relaunch unterzogen wurde um endlich Jimdo zu kündigen. Wie auch schon für den Webauftritt für die Son Manera Retreat Finca auf Mallorca war auch hier WordPress das CMS meiner Wahl.
Website des Kleebauer Hof Retreat Centers
Der Kunde wünschte sich eine zeitgemäße Website, die möglichst kostenfreundlich und schnell umgesetzt werden kann. Da auch hier der Traffic primär über organische Suchergebnisse kommen sollte, stand SEO von Anfang an im Mittelpunkt.
Die Suche nach einem Theme beginnt
Es lohnt sich immer etwas Zeit in die Auswahl eines für das jeweilige Projekt passende WordPress Theme zu stecken. Man hat hier wirklich die Qual der Wahl: sowohl zwischen kostenlosen und kostenpflichtigen Themes als auch hinsichtlich dem „out of the box“ Funktionsumfang. Nach einigen Recherchen wurde ich auf das kostenlose Theme Palmeria aufmerksam, das mir – und besonders dem Kunden – hinsichtlich Aufbau sehr gut gefiel. Positiv zu erwähnen ist auch die volle Gutenberg Kompatibilität und die gute Integration des Plugins Hotel Booking Lite. Negativ gestaltete sich der Blick auf die Performance via PageSpeed Insights:
PageSpeed Insights: Palmeria Theme
Obwohl Labdaten nur die halbe Wahrheit sind: Man sieht, dass dieses Theme hinsichtlich Performance deutlichen Verbesserungsbedarf hat.
Die Karenz meiner Frau neigte sich dem Ende zu und so hielt sie schon seit einiger Zeit Ausschau nach neuen Herausforderungen, die sich bevorzugt im Homeoffice meistern lassen. Das Reiseunternehmen Indigourlaub setzt auf via Internet vernetzte Mitarbeiter und suchte Verstärkung. Eine Empfehlung einer früheren Arbeitskollegin brachte die beiden zusammen und so kam es, dass Sonja seit April 2017 für Indigourlaub tätig ist.
Indigourlaub ist spezialisiert auf Reisen mit Yoga, Qi Gong, Ayurveda & Co
Retreat Finca Son Manera
Zu den Hauptaufgaben meiner Frau zählt die Komplettbetreuung der Finca Son Manera auf Mallorca: Schriftliche Bearbeitung von Kundenanfragen und Buchungen, Kommunikation mit den Agenturpartnern und Verwaltung der Einträge auf diversen Buchungsplattformen. Was noch fehlte war ein professioneller Webauftritt, der die nur bedingt brauchbare Jimdo-Website in Rente schickt.
Die Zeiten, in denen Websites fast ausschließlich mit Desktop-Computern aufgerufen wurden, sind schon lange vorbei. Man surft heutzutage regelmäßig mit Smartphones, Tablets oder sogar mit internetfähigen Fernsehern („Smart TVs“) im Netz. Unterschiedliche Geräte mit stark variierenden Auflösungen und unterschiedlichen Anforderungen hinsichtlich der Bedienung. Ein verschachteltes Navigationsmenü, das sich per Maus problemlos bedienen lässt, könnte beispielsweise schnell zu Frust führen wenn man auf einem kleinen Smartphone-Display mit den Fingern sein Glück versucht. Genau hier setzt das Responsive Webdesign an und versucht allen Endgeräten eine bedienungsfreundliche und an die Rahmenbedingungen des jeweiligen Endgeräts angepasste Darstellung zu bieten. Das Hauptkriterium für das optimierte Erscheinungsbild ist in der Regel die Anzahl der Pixel, die der Browser in der der Breite zur Verfügung hat.
ResponsiveWebdesign.com/robot – Ein Beispiel für Responsive Webdesign
Werfen wir zunächst einen Blick auf die „Zutaten“ für das Responsive Webdesign.
Anhand eines einfachen Beispiels werde ich nun die Grundlagen der responsiven Websitegestaltung aufzeigen. Grundlegende HTML/CSS-Kenntnisse werden vorausgesetzt!
Es war bisher eines meiner umfangreichsten Projekte in meiner Selbstständigkeit: Im Auftrag meines langjährigen Kunden Streifzug Media aus Kitzbühel realisierte ich eine Top-Immobilienplattform mit Fokus auf Österreich und München. Die Plattform bot Top-Maklern und Bauträgern die optimale Möglichkeit, ihre Premium-Immobilien in Österreich bzw. in und um München auf hochwertigem und ansprechendem Niveau zu präsentieren, um somit gezielt eine kaufkräftige Klientel anzusprechen. Die Premium-Plattform war komplett zweisprachig (deutsch und englisch) ausgeführt und stellte nur Immobilien mit einem Mindestkaufpreis von EUR 500.000 bzw. einem Mindestmietpreis von EUR 2.500 vor.
Premium Immobilienplattform
Die Website beruhte auf der im Mai 2009 online gestellten Plattform für die internationale Luxusimmobilie, die aus organisatorischen Gründen in dieser Form nicht mehr weitergeführt wurde. Im Zuge der Überarbeitung wurde die bestehende Plattform noch in vielen Bereichen optimiert und mit neuen Funktionen ausgestattet. Die Wartungsoberfläche wurde auch komplett aufpoliert und generell die Benutzerfreundlichkeit der Website – im Frontend und Backend – erhöht.
Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines „Kunstwerk“ dar, das mit vertretbarem Zeitaufwand nur vom ursprünglichen Entwickler komplett durchschaut wird. Diese Tatsache macht es auch sehr schwierig im Team an den Styles einer Website zu arbeiten. Auch eine Wiederverwendung von CSS-Dokumenten für andere Projekte ist nur eingeschränkt möglich.
Die Lösung: OOCSS
Die Webentwicklerin Nicole Sullivan versucht mit ihrer Objektorientiertes CSS (OOCSS) genannten Methode einen Lösungsansatz zu finden. OOCSS versucht die Idee der Objektorientierung auf CSS zu übertragen. Objektorientiertes CSS ist dabei keine neue Technik, sondern vereint eine Reihe von Regeln für die Gestaltung von CSS-Dateien. Grundgerüst von OOCSS ist eine von Nicole Sullivan auf ihrer GitHub Projektseite bereitgestellte Code-Bibliothek im Alpha-Stadium. Um das CSS-Framework einsetzen zu können, müssen wie schon erwähnt einige Regeln beachtet werden. Die zwei wichtigsten:
Trenne Container und Inhalt Gemäß Sullivans Terminologie bildet ein simpler HTML-Tag (z.B. <h1>, <p>, <li>, …) mit zugehörigem CSS einen Inhalt. Komplexere Strukturen bestehend aus mehreren <div>-Elementen werden als Container bezeichnet. Ordnet man diesen Containern jetzt noch über mehrere CSS-Klassen Layout und Design (Skins) zu, dann entstehen Sullivans Objekte.
Trenne Struktur und Design Nicole Sullivan bezieht sich hier auf das CSS von Containern und Inhalten. Durch die Verwendung unterschiedlicher Klassen für Layout- und Design-Elemente wird die Wiederverwendbarkeit von Objekten in anderen Projekten ermöglicht.
