Wenn man sich aktuelle Webseiten anschaut, erkennt man zunächst, dass diese aus immer den gleichen Elementen bestehen. Im Basislayout gibt es den sogenannten Header (Kopfbereich), die Hauptnavigation, den Hauptbereich (meist ein-, zwei- oder drei-spaltig) und den Footer (Fußbereich). Manchmal findet man auch noch die Seitenavigation für untergeordnete Seiten. Bevor man also an die Erstellung der einzelnen Webseiten geht, sollte man sich gut überlegen, wie man seine Präsenz im Internet konzipiert und gestaltet.

Struktur

Dieser Artikel bezieht sich auf den vorherigen Artikel “Eine Web-Präsenz planen und umsetzen“. In diesem Artikel erläuterte ich das Ziel meine Webseiten unter einem gemeinsamen Corporate Design zu bringen. Dazu gab ich mehrere Voraussetzungen und Bedingungen an, die für eine Umsetzung gegeben sein müssen. Ich beziehe mich hier in diesem Artikel auf diese zehn Punkte. ^[1]

Um mein Vorhaben zu beginnen, entschied ich das Layout auf Basis des YAML-Frameworks zu entwerfen.

“Yet Another Multicolumn Layout” (kurz: YAML) ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.Quelle: yaml.de

In Blogsystemen gibt es zusätzlich zu den aus der Einleitung oben genannten Elementen meist noch die Topnavigation ganz an oberster Stelle, welche Links zum Anmelden, zum Kontaktformular und zum Impressum aufnimmt. Im Kopfbereich wird oft ein Logo und/oder ein Motivbild verwendet. Zwischen dem Hauptbereich und dem Fußbereich wird häufig ein erweiterter Bereich eingefügt, der bei Blogsystemen zum Beispiel die Tag-Cloud ^[2] aufnimmt. Der Hauptbereich wird oft in Anlehnung an herkömmliche Printmedien in einem Spaltenlayout gestaltet. Häufig sind das zwei- oder dreispaltige Layouts, seltener vierspaltige Layouts. ^[3]
Immer häufiger sieht man in letzter Zeit sogenannte Gridlayouts. Dies ist ein sehr flexibles System, das die Aufteilung einer Webseite nicht in Spalten sondern in einzelne unterschiedlich angeordnete Bereiche erlaubt.

Lösungsansatz

Für eben so ein Gridlayout des YAML-Frameworks habe ich mich als Basis für mein Corporate Design entschieden. Vorteil der Verwendung des YAML-Frameworks ist, dass die Vorlagen die aktuellen Standards berücksichtigen (sowohl HTML als auch CSS) und eine enorme Browserkompatibilität garantieren, da die bekannten Browser oder Parserbugs des InternetExplorers bis zurück zu Version 5.0 und auch die Fehler in früheren Versionen der anderen gängigen Browser ^[4] berücksichtigt und korrigiert werden bzw. Grundlagen zur Korrektur liefern. Ebenso wird mit den flexiblen oder variablen Größenangaben der Vorlagen ein Grundstein für ein barrierearmes Weblayout gegeben. Mit diesen Voraussetzungen werden bereits die ersten drei Bedingungen meiner Vorüberlegungen erfüllt.

Man wächst mit seinen Herausforderungen.

Da YAML ein Framework und keine fertige Vorlage ist, erstelle ich mir mein Template für mein Corporate Design selbst und kann somit ein Template für WordPress erstellen und eines auf Basis von HTML und PHP womit auch der vierte Punkt meiner Bedingungen erfüllt ist. Da ich aber ein Template für all meine Webseiten verwende stelle ich sicher, dass alle Seiten ein einheitliches Layout haben. Die individuelle Unterscheidung wird über das Farbschema erfolgen. Dazu habe ich alle Farbangaben die in den Standard Stylesheets der YAML-Vorlage gegeben waren in ein eigenes Stylesheet color.css ausgelagert. Die Farben werden auf Basis einer Hauptfarbe ausgewählt. Hierzu verwende ich den Color Sceme Designer 3, um die passenden Farbkombinationen zu finden sowie eine Komplementärfarbe. Ich habe mich bei drei meiner Websites bereits für eine Farbe festgelegt, bei der vierten (Foto-Knoten) bin ich mir noch nicht sicher. Mit den unterschiedlichen Farbschemata bei einheitlichem Layout wird die fünfte Bedingung erfüllt.

koschel.EU	#420000
Digital Workflows	#09302B
Music-Knoten	#021644
mkPhotographie	<#000000>???

Neben der Unterscheidung durch eine differenzierte Farbgebung wollte ich als sechste Bedingung, dass die Inhaltselemente flexible gestaltet werden können. Hier kommt mir wieder die Vorlage des YAML-Frameworks zu Hilfe. durch die Verwendung des Gridlayouts bin ich nicht an eine fix vorgegebene Spaltenordnung gebunden, sondern kann die Inhaltsbereiche durch die vielseitigen Subtemplates in YAML äußerst flexibel gestalten.

Ähnlich dem Template habe ich ein Logo entworfen, welches in der Basis einheitlich ist, jedoch in den Details an die jeweilige Website angepasst ist. Die Logos sind hier zu sehen. Die einheitlichen aber dennoch individuellen Logos erfüllen Punkt sieben meiner Forderungen an ein Corporate Design.

Punkt neun der Bedingungen verlangte einen einheitlichen Fußbereich bei all meinen Websites. Durch Verwendung ein und desselben Templates ist dies nun gegeben. Selbst die Farbgebung des Fußbereiches (Hintergrund) ist einheitlich; nur die Farbe der Links im Fußbereich ist dem jeweiligen Farbschema der betroffenen Seite angepasst.
Der Fußbereich ist auch geeignet den achten Punkt der Voraussetzungen zu erfüllen, da er die Verlinkung zu all meinen Websites aufnehmen kann. So ist sowohl an prominenter Stelle (Fußbereich als einer der drei Hauptbereiche einer Website), aber dennoch unauffällig, da am Ende der jeweiligen Seite, ein Link zu all meinen Websites gesetzt.

Schließlich sollte die letzte Bedingung sicherstellen, dass mit zwei bis maximal drei Klicks alle einzelnen Seiten all meiner Websites errechbar sind. Schaut man genauer hin, bedeutet dies, dass man, da ja im Fußbereich (und damit auf allen Seiten aller Websites) ein Link zu jeder Website vorhanden ist, mit einem Klick zu einer anderen Website wechseln kann. Nun bleiben noch zwei Klicks übrig um alle Seiten innerhalb einer Website zu erreichen. Dies gewährleiste ich, indem ich über die Hauptnavigation (auf allen Seiten vorhanden) zu den entsprechenden Bereichen navigieren kann und falls vorhanden, kann dann über die Seitennavigation alle Unterseiten des Bereiches ausgewählt werden.

Zusammenfassung und Ausblick

Ich habe die ersten beiden Layouts bereits entworfen und umgesetzt. das Ergebnis können sie zum Einen auf diesem Blog sehen. Das Layout von Digital Workflows ist bereits das Ergebnis meiner Überlegungen und wurde für WordPress angepasst. Ebenso wurde koschel.EU als weiteres bereits umgesetzt.

Bis Herbst 2010 möchte ich dann den Music-Knoten umsetzen. Ob ich mkPhotographie bis Anfang 2011 umgesetzt haben werde, ist noch offen. Momentan fällt es mir schwer ein Fotoblog in das von mir vorgegebene Schema einzupassen. Ich sehe es aber so, dass man mit seinen Herausvorderungen wächst.

Kommentare

Es liegt ein Kommentar vor.
Ich möchte die Kommentare gleich lesen.

1. Gary

   Kommentar vom 16. August 2010 um 09:46

   

   Hi Marc,

   ich finde das einen interessanten Ansatz. Aus meiner Sicht ist es aber für rein private Websites ein enormer Aufwand (ich habe mir die Sites angeschaut und finde sie allerdings sehr professionell). Was mir besonders gefällt, ist die Idee dahinter, sich zu überlegen, was gehört alles auf eine website, was macht Websites heutezutage aus, und sind sie nicht immer irgendwie gleich aufgebaut. Da du dich ja auch mit YAML beschäfftigst, hast du dies also auch schon erkannt.

   Nun bin ich noch auf deinen Musik-Knoten gespannt, ob du die Masse an Informationen auf den Seiten auch in das Gewand zu pressen schaffst. Und dann noch deine Fotoseite; diese kann ich mir in dem Design aber noch nicht vorstellen.

   Keep on working
   Gary