Webseiten erstellen mit CHEETAH
Webseiten werden in "Cheetah" aus Bannern aufgebaut (2)
Hier erkennen Sie bereits einen entscheidenden Vorteil von „Cheetah“. Selbst wenn Sie ihre Webseite nur für den PC-Bildschirm designen, wird die Smartphone-Ansicht sofort zumindest brauchbar sein. Selbstverständlich können Sie auf diese Ansicht noch Einfluss nehmen und auch hier spezielle Anpassungen vornehmen. Sie müssen dazu nur den Editor in den Smartphone-Modus schalten. Die entsprechende Schaltfläche finden Sie links oben im Hauptmenü.
Natürlich ist die auf diese Weise in weniger als einer halben Minute zusammengeklickte Webseite noch nicht verwendbar, geschweige denn fertig. Sie müssen zumindest noch die Vorlagentexte durch eigene Texte ersetzen, eventuell das Hintergrundbild ändern oder auch die Positionen der einzelnen Elemente Ihren Vorstellungen entsprechend anpassen. Ihnen sind hierbei keine Grenzen gesetzt. Auch reicht eine Seite nicht aus, denn es fehlt ja noch das obligatorische Impressum und die Datenschutzerklärung. Beides wird man vernünftigerweise auf eine neue Seite auslagern (schon wegen der ausufernden Rechtstexte!) und dann sinnvollerweise mit einem entsprechenden Texthinweis im Footer- oder Header-Bereich der Webseite verlinken. Aber dazu später mehr.
Allgemeines zur Strukturierung einer Webseite mit Banner
Die Arbeit mit Bannern unterstützt den Umstand, dass Webseiten immer eine gewisse Struktur haben sollten. Dabei gilt es, den eigentlichen Inhalt der Webseite nach logischen Gesichtspunkten sowie thematisch passend zu gruppieren und sinnvoll miteinander zu verknüpfen. Das verbessert sowohl die Nutzerorientierung (gemessen an seiner Verweildauer auf der Webseite) als auch die Sichtbarkeit für Suchmaschinen. Ordentlich strukturierte Webseiteninhalte und zur Webpräsentation verknüpfte Unterseiten führen nämlich dazu, dass der Crawler die Seite besser versteht und einordnen kann mit dem Ergebnis eines besseren Rankings in einer Suchmaschine. An dieser Stelle soll es erst einmal um die generelle Struktur einer Einzelseite einer Website gehen, die man sich ganz allgemein aus verschiedenen Bereichen aufgebaut vorstellen kann:
Kopfbereich (Header)
Der Header einer Webseite ist meist ein mehr oder weniger breiter Streifen ganz oben auf der Webseite und enthält meistens ein Logo, eine Überschrift und manchmal auch eine Menüstruktur zur Navigation zu den entsprechenden Unterseiten. Er ist in der gleichen Form oftmals auch auf allen Unterseiten der Website vorhanden und dabei häufig so konfiguriert, dass er beim Scrollen über den Inhalt der Webseite seine Position nicht ändert. „Cheetah“ stellt übrigens mit sogenannten „Header-Vorlagen“, die man separat designen und dann über ihren Namen beliebig anderen Unterseiten explizit zuordnen kann, eine besonders elegante Möglichkeit, Webseiten mit einheitlichen Kopfbereichen auszustatten, zur Verfügung (gilt übrigens analog auch für „Footer“).
Navigation
Webseiten mit mehreren Unterseiten erfordern eine Navigationsmöglichkeit, die so gestaltet sein sollte, dass der Nutzer mit möglichst wenigen Klicks alle Informationen, die ihm interessieren, erreichen kann. Die Navigation kann über eine klassische Menüstruktur, über Buttons, über einfache Links (Impressum) oder auch Tabs realisiert werden. Häufig wird die Hauptnavigation in den Kopfbereich eingebaut, was in den meisten Fällen auch die sinnvollste Möglichkeit darstellt. Aber auch vertikale Menüstrukturen zur internen Verlinkung der einzelnen Unterseiten einer Website sind oftmals sehr gute Alternativen. Und bedenken Sie auch: Suchmaschinen mögen eine gute, logisch strukturierte interne Verlinkung und belohnen Sie mit ein paar Rankingpositionen „nach oben“ in ihren Suchergebnissen.
Hauptinhalt (Content)
Der größte Teil im Zentrum der Webseite ist der Content-Bereich, der gemäß seinem Inhalt natürlich auch strukturiert sein sollte. Er enthält Texte, Bilder, Videos etc. pp. und wird auf jeder Unterseite andere Inhalte haben. Trotzdem sollte man hier ein gewisses "Corporate Identity" erkennen können, da genau so etwas das Nutzerverhalten positiv beeinflusst. Wenn es das Thema Ihrer Webseite zulässt und Sie für ausgewählte Keywords gleichsam hoch in den Suchmaschinenergebnissen ranken möchten, dann sollten Sie möglichst viel „Inhalt“ in Form von Texten in ihre Webseite einbauen. Das signalisiert dem Crawler nämlich eine gewisse Relevanz der Webseite. Als Faustregel sollte man sich dabei merken, dass der Gesamttext auf der Webseite rund 500 Wörter (und mehr) betragen sollte, um vom Crawler als „besonders relevant“ eingeschätzt zu werden.
Sidebar
Zusätzliche Informationen in Form von Links, von Zitaten oder von Werbung wird man nicht im Hauptfenster darstellen, sondern in eine rechts oder links angeordnete Sidebar auslagern. Man kann diese Vorgehensweise besonders oft auf Zeitungs-Webseiten beobachten. Manchmal findet man auf Sidebars auch Informationen und Navigationsmenüs, die auf allen Unterseiten gleich sind. Man beachte aber, dass eine derartige Anzeige in der mobilen Ansicht nicht möglich ist. Hier muss man u. U. auf andere Gestaltungsmittel zurückgreifen, die ein analoges Ergebnis zeigen.
Fußbereich (Footer)
Hierbei handelt es sich um einen Streifen am Ende der Webseite, der meist in kleiner Schrift Informationen zum Herausgeber der Webseite, Links auf Impressum. Datenschutzerklärung und Haftungsausschluss und manchmal auch eine Maske für die Bestellung eines Newsletters enthält. Er kann zwar auch unten fixiert werden. Meist wird man ihn aber nur dann erreichen, wenn man bis an das Ende der Webseite scrollt. In „Cheetah“ lassen sich Footer genauso wie Header separat designen und dann über ihren Namen den anderen Unterseiten explizit zuweisen.
Bildschirm, Seitenhintergrund und Banner
Desktop-Bildschirme können unterschiedliche Größen und Auflösungen besitzen. Webseiten, die sich diesem Umstand anpassen, nennt man „responsiv“. Bei mit „Cheetah“ erstellten Webseiten kann man dieses Verhalten sehr gut beobachten, sobald man das Browserfenster stufenlos verkleinert. Der Inhalt passt sich dem an und schlägt irgendwann in die mobile Ansicht um. Oder anders ausgedrückt: Das responsive Verhalten von mit „Cheetah“ erzeugten Webseiten ist diesen Webseiten inhärent und braucht von Ihnen als Designer nicht weiter beachtet zu werden.
Aber es gibt noch ein „Element“, welches wir noch nicht behandelt haben. Es ist der Seitenhintergrund selbst, auf dem wiederum die einzelnen Banner angeordnet sind. Standardmäßig ist er weiß und kann auch meist so belassen werden. Er lässt sich aber auch farbig gestalten oder mit einem Bild oder einem Kachelfeld von Bildern ausstatten, was im Zusammenspiel mit mehr oder weniger transparenten Bannern interessante optische Effekte erlaubt.
Den „Seitenhintergrund“ an sich finden Sie nicht in der Banner- oder Elementepalette des rechten Randmenüs, sondern unter einem eigenen Icon am Anfang der Werkzeugleiste des Editors. Hier können Sie explizit eine Hintergrundfarbe festlegen, ein Hintergrundbild aus dem Builderall-Repository zuweisen und dessen Anordnung, Position und Skalierung festlegen. Was hier die einzelnen Auswahlmöglichkeiten bedeuten, erschließt sich aus dem dazugehörigen Hint und dem damit einhergehenden Verhalten.