individuelle Grundlagenforschung

Individuelle Artikelgestaltung ist wie eine Schachtel Pralinen, man weiß nie was man bekommt…wenigstens am Anfang. Ich hab lange überlegt, was mein persönlicher Aha-Moment war. Es ist dieser alte Artikel von A Brief Message. Seitdem möchte ich mehr als nur den puren Text veröffentlichen. Nachhaltigkeit ist ein Schlüsselwort. In einer Zeit, wo selbst persönlichste Wortfetzen zum Wegwerfprodukt mutiert sind, ist es schwer geworden im Netz Inhalte zu finden, die auch nach Jahren noch das Anschauen lohnen.

Ich möchte Pausensnacks veröffentlichen, die noch Jahre später schmecken. Die alten 2000 Wörter Monster eignen sich hierfür weniger, drum bin ich auch weg davon. 500 Wörter sind ein ziemlich guter Richtwert. Solche Einträge entwickeln sich auch viel stärker, als ein purer Text. Früher oder später opfert man Inhalt für Gestaltung und noch später findet beides völlig parallel ohne Kompromisse stattt. Ich habe noch keine Formel-X gefunden, die alle Probleme löst. Vielmehr besitzt fast jeder Eintrag seine Geschichte, was die Arbeit und auch die persönliche Nachhaltigkeit so wertvoll macht.

Leinwand

Der aktuelle Aufbau der Seite bedient zu 120% das Ziel möglichst einfach und ohne Grenzen einzelne Artikel zu gestalten. Ich mag den Begriff Framework nicht, weil er so nach Kompromiss klingt, aber Sieben ist ein ziemlich guter Rahmen und Leinwand geworden. Was ich nicht dabei vergesse, sind die „alten“ Tugenden: Trennung von Form und Inhalt, Lesbarkeit, Validität, Semantik, einfache Struktur. Wir haben Jahre gebraucht um hier Ordnung zu bekommen. Dies alles für den Show-Effekt zu opfern ist falsch. Alles was ich mittlerweile veröffentliche funktioniert auch ohne die individuelle Gestaltung. Alle zusätzlichen Regeln (CSS, Javaskript) sind nur das Eis auf dem Kuchen, aber kein Muss.

Unverzichtbar ist ganz klar auch ein Gestaltungsraster. Es hält die Seiten zusammen, erleichtert ungemein das Individualisieren und ist Rettungsleine für jeden misslungenen Versuch. Je feiner das Raster, umso mehr Freiheit entsteht später beim Platzieren der Elemente. Ich bin auch überzeugt, dass es ohne eine einfache und logische HTML-Struktur nicht geht. Ohne zu sehr die Hosen runter zu lassen, aber es gibt schon genug Fehler, die ich in einer neuen Variante nicht mehr machen würde. Dieser Prozess ist ein endloses Try&Error. Vorausdenken ist ein weiteres Schlüsselwort. Je mehr man individualisiert, umso stärker verschmilzt man mit dem Status Quo der „normalen“ Gestaltung. Der schlimmste Fall, nämlich der Rückschritt auf das Standardlayout, muss immer ohne Einschränkungen möglich sein.

Browser- und Progressionsnazi

Individuelle Artikelgestaltung ist auch eine Grundhaltung ob und wie Onlineinhalte Plattform übergreifend aussehen sollen, dürfen oder müssen. Wir betreiben hier private kleine Seiten, mit ziemlich homogener Leserschaft. Ich traue meinem Leser zu, sich einen Firefox, Chrome oder Safari installieren zu können und diese immer aktuell zu halten. Vom Gedanken die IE-Nutzer hiermit bedienen zu wollen, muss man sich verabschieden und wer gleich richtig voran schreiten möchte, sollte sich auch an aktuellste CSS3-Eigenschaften binden. Einiges davon ist optional (border-radius) und skaliert auch wunderbar in beide Richtungen. Anderes (rgba, pseudo-selectors) dagegen ist so wertvoll, dass man es einfach nutzen muss.

Text oder Bild

Was ist früher da, Inhalt oder Gestaltung? Mittlerweile bei mir weder das eine, noch das andere. Ein paar Anekdoten zu bisherigen Artikeln. Alles Banane begann als Tribut zum Simpsons Jubiläum, der sich textlich doch einfach nicht in Form biegen ließ, dessen Gestaltung aber praktisch fertig war. Der neue Text war dann in kurzer Zeit geschrieben und das Motiv ausgetauscht. Hier diktierte Gestaltung klar das Thema.

Anders dagegegen Anticitizen One, der vielleicht Zeit intensivste Artikel bisher. Der jetzige Text entspricht der dritten Fassung. Die Gestaltung ist nur ein Schatten der ursprünglichen Idee und ein schönes Beispiel, wie man sich auch in eine falsche Richtung festlaufen kann. Angedacht war sehr aufwendiges Bildmaterial. Hierfür habe ich einige Stunden in Garry’s Mod rumgeklickt und teilweise bekommen was ich wollte. Als es dann an die Umsetzung im Browser kam, lief alles nicht so wie ich wollte und die ursprüngliche Idee hätte eben jenen zusätzlichen HTML-Code verlangt, den ich so explizit zu vermeiden versuche. Sicherlich einer der aufwendigsten und lehrreichsten Versuche.

Der „erfolgreichste“ Artikel dieser Art ist auch der am schnellsten hingerotzte mit praktisch keinem Inhalt: Learning.

Inspiration oder Funktion folgt Form

Inspiration ist auch so ein verfälschtes Wort. „50 inspirational Webdesigns to copy from“ beherrscht auf vielen Galerie-Seiten das Tagesgeschäfft. Im Gegensatz zur dreisten Kopie, lässt sich bei diesem Thema aber wirklich Inspiration finden. Ein tolles Bild, ein interessanter Kontrast, ein schöner Font. Mehr denn je, hab ich pure Bildblogs im RSS-Reader. Alte Filmposter sind immer eine exzellente Quelle für einen Gestaltungsansatz. Wer hier nach Ideen sucht, sollte insgesamt mehr nach gedrucktem Material schauen: Magazine, Poster, Flyer geben gute Grundlagen. Grundsätzlich schaue ich eher nach älterem Material, einfach weil es unbekannter und meist mit weniger Elementen mehr ausdrückt, als heutige Schlagschatten-Verlaufsorgien. Was mich zu einem weiteren Punkt bringt.

soweit so gut

Ich werde mich hüten Regeln diktieren zu wollen, möchte aber etwas mein Muster beschreiben. Grundsätzlich suche ich immer nach einem guten Ansatz. Eine gute Schrift. Ein toller Kontrast. Ein markantes Bildmotiv. Eine eindrucksvolle Textur. Wenige der Zutaten möchte ich mischen, aber zuviel und die Wirkung der einzelnen Elemente verwässert. Ich möchte auch die aufwendigeren Elemente gleich ins Auge springen lassen und nicht erst am Ende eines lang zu scrollenden Textes verstecken.

Farbigkeit besitzt eine steile Lernkurve. Mag Browser übergreifende Darstellung von HTML/CSS noch irgendwie auf den kleinsten gemeinsamen Nenner zu bringen sein, so sind Farben noch viel sensibler. Es ist praktisch unmöglich die persönliche Farbigkeit auf ein zweites System zu transportieren. Farbprofile, Gammawerte und persönliche Präferenzen des Nutzers, verzerren jedes Farbbild. Auf Apple-System herrscht ein andere Gammawert. Apple ist hell, Windows dunkel. Farbprofile in Bilder einzubetten oder in ein System-RGB zu konvertieren, ergibt im Mix mit echten HTML-Farbwerten sichtbare Unterschiede. Besonders sichtbar wird dieser Effekt, wenn Bilder mit Hintergrund verschmelzen sollen. Zwei Links zum Thema, die meiner Meinung nach alles auf den Punkt bringen: Save for the Web, Simply und The Mysterious “Save For Web” Color Shift. Grundsätzlich verträgt Webdesign eher mehr Kontrast als zu wenig.

Eine alles umfassende Lösung für zusätzliche Fonts existiert einfach nicht. Alles hat bisher Vor- und Nachteile. Generell versuche ich so weit wie möglich ohne zusätzliche Schriften auszukommen. Für den seltenen Fall, kommt bei mir sIFR zum Einsatz. @font-face bietet mir noch zu viele Stolpersteine und das Riesenproblem deutscher Umlaut. Jeder wirklich tolle Font, bringt eben noch keine Umlaute mit und das Packet selbst um Umlaute zu erweitern, geht mir dann zu weit.

Für Bilder findet man genug kostenlose gute Quellen, gleiches gilt für Schriften. Hintergrundbilder zu setzen ist noch etwas sensibler, was sich spätestens mit breiter Unterstützung (Hallo Firefox) von background-size erübrigen wird. Fettes Bild finden und vom Browser skalieren lassen, fertig.

Frankenstein-Faktor

Letztendlich gilt es einfach nur Spaß beim Arbeiten abseits der üblichen Schiene zu haben. Es ist definitiv ein Prozess und kein einfaches „Veröffentlichen“-Klicken im CMS seiner Wahl. Gleichzeitig ist es aber auch eine verdammt effizientes Labor für CSS-Spielerein und wenn das Monster mal lebt, dann aber richtig. Wenn ich mir die wachsende Liste 1 so anschaue, dann finde ich eigentlich nichts wirklich Schlechtes. Im Gegenteil, oft sind es sehr persönliche Perlen, exakt was ich mir von einem privaten Blog 2009 wünsche.

Work in Progress – wobei der Feed so bestehen bleiben wird. ↩