Notrettung

Der folgende Beitrag hat mehrere Funktionen, die ihr alle ignorieren dürft:

1. Er ist ein Beispiel für die Rettung eines völlig verkorksten Designs eines Internetauftritts
2. Er ist ein Test der neuen "Weiterlesen"-Funktion, die ich in den Blog eingebaut habe
3. Er ist mehr oder weniger Werbung für eine oder zwei meiner Webauftritte
4. Er zeigt dass jeder Webauftritt individuell ist. Standardisierte Lösungsmuster, wie ich es hier ursprünglich versucht hatte funktionieren nur sehr bedingt
5. Es soll ermutigen, bei einem misslungenen Design nicht gleich die Flinte ins Korn zu werfen. Wenn man weiss, was man tut, ist die Rettung nicht so schwer wie man dneken könnte.

Also denn:
Es ist etwa ein Dreivierteljahr her, da machte ich aus dem Blog Spilmkritiken die Webseite spilmkritiken.de, die sich von der Datenstruktur klassischer Blogs völlig lossagte.
Jede Seite war handgeHTMLt und einzeln erreichbar. So etwas wie ein Blogarchiv gab es in der Form nicht mehr. Einzig die Liste der Aktualisierungen sah noch blogartig aus und es gab einen (abgespeckten) RSS-Feed.
Das Ganze erhielt ein recht einfaches Tabellendesign mit zwei Farben und sah dann im Ergebnis so aus:


Und ja, ich hab den Tippfehler im obersten Banner auf der Seite auch bemerkt. Ist eh zu spät jetzt.

Jedenfalls kam ich bald auf die Idee, zusätzlich zu einer Seite über Videospiele als Literatur eine Seite über Videospiele als Sport (das so genannten Exergaming) zu machen.
Da Spilmkritiken nach meinem Empfinden gelungen war nahm ich dessen Design heran und passte es auf das andere Thema an.

Das hieß: Die Banner zu jeder Aktualisierung fielen weg, dafür gab es jetzt rechts einen Nachrichtenbereich.
Die Anzahl der Spalten war von drei auf zwei runtergeschraubt worden.
Das Wichtigste aber waren die angepassten Farben. Türkis, so schien mir, war eine Farbe, die als Hintergrund zum Thema passte. Irgendwie hielt ich die Kombie türkis-weiss für sportlich.

Das Ergebnis war, wie ich mit einigen Monaten Abstand sagen muss, eine Katastrophe:


Trug das dezente Grau von Spilmkritiken das Layout der Seite ohne zu stechen und bot so eine unterbewusste Orientierung für das Auge, lenkte das grelle Türkis eher ab, vermittelte einen poppigen Eindruck wo ein eher ruhiger Stil beabsichtigt war.

Konnte man so etwas noch mit relativ wenigen Handgriffen retten oder musste die Seite komplett neu gemacht werden?

Ist diese Seite noch zu retten? Lesen Sie selbst!

Zum Glück kam mir die Modularität von html zu Gute.

Zunächst einmal musste der türkise Hintergrund weg.
Aber nur weiss war auch nix, also packte ich einen eilig in MS Paint gebastelten Farbverlauf in den Hintergrund, der auch daas Türkis wieder einbrachte, nur um einiges dezenter.
Das Beispiel ist die Impressumsseite, weil die Hauptseite bereits komplett geändert war als ich das hier schrieb:


Als nächstes wurde die nunmehr ohnehin unnötige Hintergrundfarbe der Tabelle gelöscht, damit der Verlauf nicht mehr abrupt an der überdeckenden Tabelle abbrach, sondern auslaufen konnte.
Ich überlegte noch, ob ich jetzt den linken Rand des Textes versetzen sollte, entschied mich jedoch dagegen, weil der Textanfang noch im Farbverlauf der Seite eine gewisse Dynamik zu verleihen schien und beim Lesen nicht störte.



Fehlte noch das Logo. Die alte png-Datei hatte natürlich einen weissen Hintergrund, was auf dem neuen türkisen Hintergrund und einer transparenten Tabelle nun auch sichtbar wurde.
Es brauchte also eine Transparenz. Und zwar eine pixelgenaue, wollte ich kein neues Logo einsetzen (was auch eine Möglichkeit gewesen wäre).
Also nahm ich die originale Bitmap in MS Paint (ja, MS Paint) und ersetzte jeden einzelnen weissen Pixel durch ein beissendes Grün. An den Rändern der Objekte musste ich dann auch wörtlich jeden Pixel einzeln einfärben, weil es noch Kompressionsartefakte gab, die überzeichnet werden wollten.
Dann konvertierte ich die Bitmap in ein Gif und setzte das Grün als transparente Farbe.
Zu meinem absoluten Erstaunen funktionierte das.



Jetzt fehlten nur noch ein paar Details.
Der Nachrichtenbereich funktionierte irgendwie so in die Ecke gedrängt nicht, also wurde das Konzept geändert: Nachrichten und Seitenaktualisierungen stehen in Zukunft gemeinsam im Hauptteil der Tabelle, dem großen Textfeld links.
Das da rechts - nun, man will ja Geld verdienen, ergo kamen AdSense-Anzeigen rein.

Es fehlen noch ein paar kleinere Korrekturen, vor allem stört mich das abrupte Ende des Logos am rechten Ende, aber das liegt daran, dass die Grafik, aus der das Bild stammt ebenfalls so endet.
Ich weiss noch nicht, ob ich mich darum jetzt noch kümmere, oder das mal wieder auf später verschiebe.

Und so wird die Seite am 1. September online gehen.

Protokoll
Grobe Arbeitsschritte: 5
Zeitaufwand: 3 Stunden (geht schneller, wenn die Seite CSS-basiert ist)
Kosten: Keine
Art der auszuführenden Arbeiten: Bildbearbeitung, HTML-Schreiben
Komplexität: Geht so. Man sollte wissen (oder nachschlagen können), wie man Transparenzen in Grafiken einbaut