Die Zeiten ändern sich schnell

Dieser Artikel ist älter als 7 Jahre — im Internet eine sehr lange Zeit. Eventuell ist der Inhalt beziehungsweise sind die getroffenen Aussagen nicht mehr aktuell.

Eine Web-Präsenz planen und umsetzen

Ich betreibe mehrere verschiedene Websites zu unterschiedlichen Themen. Insgesamt sind dies sieben Webprojekte, jedoch sind aktuell drei Projekte inaktiv. Die Projekte sind in unterschiedlichen Jahren gestartet und haben sich mit der Zeit verändert, sowohl inhaltlich als auch von ihrem Layout und Design. Für mich sind meine Webprojekte Spielwiesen, um einen kreativen Ausgleich zu meinem Beruf zu haben und um Neuerungen in (X)HTML, CSS, PHP und MySQL zu testen und umzusetzen. Ich betreibe also meine Webprojekte privat als Hobby, d.h. aber nicht, dass ich keine professionellen Ansprüche an meine Websites habe. Das Gegenteil ist der Fall, da ich auch Websites für Freunde und Bekannte erstelle, sind mir professionelle Techniken und Umsetzungen wichtig.

Ausgangssituation und Ziel

Vor einiger Zeit kam mir nun der Gedanke, dass ich meine Webprojekte „irgendwie“ unter einen Hut bringen wollte, aber ohne die Individualität der einzelnen Websites aufzugeben. Mir schwebte so etwas ähnliches vor, wie eine aus der Wirtschaft bekannte Corporate Identity (CI) oder besser ein Corporate Design (CD).

Screenshot koschel.EU

Screenshot koschel.EU

Ziel meiner Bemühungen soll also sein, dass ich ein Layout oder Design für meine Webprojekte finde, welches ich für alle meine vier aktiven Websites gleichermaßen verwenden kann, welches aber gleichzeitig eine individuelle Unterscheidung der Projekte ermöglicht, auf die jeweils speziellen Bedürfnisse der Projekte eingeht und es erlaubt, weitere Projekte in das Layout und Design zu integrieren.

Meine Überlegungen und die Umsetzungen werde ich hier veröffentlichen und mit Ihnen diskutieren. Ich freue mich also, wenn Sie mir zahlreich konstruktives Feedback geben. Das Feedback können Sie mir über die Kommentarfunktion geben. Feedback, welches Auswirkung auf mein Vorhaben hat, werde ich im eigentlichen Artikel ergänzen. Aktualisierungen am Artikel werde ich im Kommentar bekanntgeben, so dass, falls Sie die Kommentare abonnieren, über Neuerungen informiert werden.

Voraussetzungen

Zunächst möchte ich die folgenden vier Websites in ein Corporate Design bringen. Es soll aber die Möglichkeit bestehen zukünftig weitere Webprojekte zu integrieren.

  1. koschel.EU

    koschel.EU ist meine private Homepage, auf der ich Informationen rund um mich, meine Projekte, meine Arbeit und Hobbys gebe. Die Website ist mehr oder wenig statisch mit wenig wechselndem Inhalt. Ein paar Daten kommen aus einer Datenbank und werden über PHP geladen; der Großteil des Inhalts ist jedoch statisch im HTML-Teil untergebracht

  2. Digital Workflows

    Digital Workflows ist das Blog, das Sie gerade lesen. Es ist auf Basis von WordPress erstellt und hat damit oft wechselnden dynamischen Inhalt. Das Template habe ich selbst entwickelt und umgesetzt.

  3. music-knoten.de

    Der Music-Knoten ist eine Website, auf der ich Musikinterpreten und ihre Alben vorstelle. Ich sammle dazu Rezensionen aus verschiedenen Quellen. Die textlichen Inhalte darf ich aus lizenrechtlichen Gründen nicht wiedergeben, sondern nur einen Link zu den Originalrezensionen. Ebenso notiere ich die Bewertung der einzelnen Rezensionen und errechne eine Durchschnittsbewertung. Die Website ist mit PHP geschrieben und hat eine MySQL-Datenbank als Datenbasis. Alle Funktionalitäten sind von mir selbst entwickelt.

  4. mkPhotographie

    mkPhotographie ist eine Website auf der ich meine „besten“ Fotos ausstelle. Die Website ist mit Contao umgesetzt. Das Layout ist von Peter Müller, welches ich an meine Bedürfnisse angepasst habe. Diese Website in mein Vorhaben zu integrieren sehe ich als die größte Hürde, da ich ganz eigene Vorstellungen und Bedingungen an ein Fotoblog habe. Eventuell werde ich diese Website bei der Umsetzung (zunächst) außen vor lassen.

Bedingungen an mein Corporate Design

  1. Umsetzung und Einhaltung aktueller Standards

    Das Template, welches die Basis für das Corporate Design sein wird, muss die aktuellen Standards der Webtechniken (W3C) berücksichtigen, einhalten und auch nutzen. Die Einhaltung der Standards ist besonders im Hinblick auf den nächsten Punkt Voraussetzung.

  2. Browserkompatibilität

    Meine Websites sollen möglichst in allen oder zumindest in den meisten Browsern korrekt und gleich dargestellt werden. Ist das Layout für ältere oder Textbrowser nicht darstellbar, muss zumindest der Inhalt lesbar und die Funktionalität (z.B. Navigation) gegeben sein.

  3. Barrierefreie bzw. barrierearme Webpräsenz

    Dieser Punkt schließt direkt an den vorherigen an. Das Template soll die Richtlinien für barrierearmes Webdesign einhalten. Für mich heißt barrierearmes Webdesign, dass keine proprietären Techniken zum Einsatz kommen, die einzelne Surfer ausschließen (z.B. Flash 1), Javascript). Genauso sollte der Inhalt auch für Screenreader lesbar sein. Dies bedeutet auch, dass es eine klare Trennung von Inhalt und Layout geben muss. Das Template muss berücksichtigen, dass Größenangaben flexible sein müssen und dass sich die Schriftgröße vom Besucher anpassen lassen muss. Die Farben müssen so gewählt werden, dass sie kontrastreich sind und eventuelle Seheinschränkungen des Besuchers berücksichtigen.

  4. Integration der spezifischen Gegebenheiten (statisches HTML, CMS (WordPress), PHP/MySQL)

    Da ich unterschiedliche Präsentationsplattformen verwende, muss das Design für alle geeignet sein. koschel.EU ist eine statische HTML-Website. koschel.IT wird mit WordPress betrieben, ebenso der Foto-Knoten, allerdings als Fotoblog mit dem speziellen Theme von Frank Bueltge. Der Music-Knoten ist eine dynamische Site, die ich mit Hilfe von PHP und MySQL selbst programmiert habe.

  5. Einheitliches und wiedererkennbares, jedoch individuelles Layout und Design

    Das Grundgerüst aller Seiten soll gleich sein und so den Effekt der Wiedererkennung erleichtern. Dennoch soll jede Site nach ihren Bedürfnissen individuell sein.

  6. Flexible Gestaltung der Inhaltselemente

    Da jede Website unterschiedliche Anforderungen durch ihren Inhalt hat, muss dies durch flexible Gestaltung der Inhalte ermöglicht werden.

  7. Einheitliches und wiedererkennbares, jedoch individuelles Logo für jede Website

    Es soll ein Logo erstellt werden, welches eine einheitliche Basis liefert, um auf allen Websites wiedererkannt zu werden. Für jede Site soll jedoch ein individuelles Merkmal gegeben sein.

  8. Unauffällige Verlinkung aller Websites an prominenter Stelle

    All meine Seiten sollen an einer prominenten Stelle (Header oder Footer) als Liste aufgeführt werden.

  9. Einheitlicher Fußbereich

    Der Fußbereich soll bei allen Websites einheitlich sein. Gegebenenfalls können leichte Farbvarianten auftreten.

  10. Mit maximal zwei bis drei Klicks alle Seiten der gesamten Präsenz erreichen können

    Die Struktur aller Websites soll so aufgebaut sein, dass man innerhalb einer Website mit maximal zwei Klicks alle Seiten erreichen kann. Um von einer Website zu einer beliebigen anderen Seite einer weiteren Website zu gelangen, dürfen maximal drei Klicks von Nöten sein

Lösungsansätze

Um all diese Anforderungen zu erfüllen, habe ich ein erstes Design entworfen. Dieses Design habe ich zunächst auf meiner Homepage koschel.EU versucht umzusetzen.
Eine Erläuterung für meine Entscheidungen folgt in Kürze.

Fußnoten

  1. Den aktuellen Streit zwischen Apple und Adobe um die Verwendung von Flash auf Webseiten möchte ich hier nicht kommentieren. Sicher ist jedoch, dass Inhalte in Flash nicht von allen Browsern oder Surfern erfasst werden können.
Marc Koschel

Über Marc Koschel

Fotograf • Musikhörer • Blogger • Denker • Kaffeetrinker
— Marc Koschel lebt bei Mannheim und bloggt seit 2001 über digitale Workflows

Dieser Unterhaltung fehlt Ihre Stimme

2 Kommentare bisher

1. Pingback

Avatar

Lösungsansätze zur Planung und Umsetzung einer Web-Präsenz - koschel.IT
14. Oktober 2010 um 12:25

[…] 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 […]

2. Pingback

Avatar

Lösungsansätze zur Planung und Umsetzung einer Web-Präsenz » Digital Workflows
6. März 2012 um 10:34

[…] 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 […]