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¹ 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.

Feedback: 2 Kommentare

Dynamische Gestaltung existiert online seitdem es Javaskript gibt. Spätestens seit jQuery ist es nicht mehr unüblich, ein wenig Intelligenz in die Schnittstelle zwischen Nutzer und Inhalt zu basteln. Zeit Online zeigt dem Neuanstrich, dass solche Ansätze wohl auch bereit für ihren großen Auftritt sind. Ich finde damit öffnet sich die Büchse der Webdesign-Pandora, doch einen winzigen Spalt breit. Plötzlich ist es nicht mehr unrealistisch auch abseits des Browserhacks, für mehr als einen möglichen Fall zu gestalten.

Bin gespannt, wie der weitere Weg hier aussehen wird. Für diese Lösungen gibt es definitiv ein Problem, nur sucht man es derzeit noch mit der Lupe. Klar ist, dass man solche Lösungen klar am Anfang planen muss. Ein trendmäßiges Draufklatschen skalierender Elemente auf ein bestehendes Design, dürfte der falsche Weg sein, auch weil man sein CSS um einen solchen Ansatz strukturieren muss. Welche Eigenschaften kommen zum Element, welche zur ID und welche zur Klasse?

Bisher nehme ich eher Abstand von flexiblen Layouts. Bisher bedeutete dies alle Elemente mit relativen Größen zu bemaßen und dann alles hübsch schrumpfen und wachsen zu lassen. Damit ein Grundraster einzuhalten, ist sehr schwierig. Jene 2-Phasen Skalierung wiederum, lässt viel präziseres Planen zu und somit sind auch Raster wieder einzuhalten. Ein paar Dinge habe ich schon getestet, um eine möglichst elegante Lösung zu finden. Mein Ansatz ist das Zuweisen bzw. Entfernen von CSS-Klassen auf den jeweils zu verändernden Elementen, hier eine Testseite dafür.

Abbildung auflösungsabhängiger Layouts. Links die schmale und rechts die breite Variante.

Die Umsetzung ist einfacher als vermutet. jQuery überprüft die Fenstergröße, weist je nach Ergebnis eine entsprechende CSS-Klasse zu und wechselt diese, wenn auch das Fenster seine Größe verändert. Alles Nötige steckt in diesen Zeilen. In meinem Beispiel bekommt die Div mit der ID “content” je nach Auflösung eine unterschiedliche zusätzliche Klasse. Schlüsselwert ist die Horizontale des Browserfensters. Bei weniger als 1096 Pixeln wird die CSS-Klasse “schmal” zugewiesen und die Klasse “breit” entfernt. Sind die 1096 Pixel vorhanden, werden die Klassen ausgetauscht.

$(document).ready(function() {
    function elementResize() {
        var browserWidth = $(window).width();
        if ((browserWidth) < '1096'){
           $('#content').addClass('schmal');
           $('#content').removeClass('breit');
        } else {
           $('#content').addClass('breit');
           $('#content').removeClass('schmal');
        }
    }

    elementResize();

    $(window).bind("resize", function(){
        elementResize();
    });
});

Worin liegt der Unterschied zwischen der Verwendung relativer Größen und dieser Lösung? Man behält hier die volle Kontrolle über jeden einzelnen Pixel, allerdings auf Kosten eines zusätzlichen CSS-Wasserkopfs. Es entstehen zwei Varianten, die beide komplett durchgestaltet werden möchten. Ganz klar findet man auch hier kein Allheilmittel für sämtliche möglichen Problemfälle, aber ein wirklich effizientes Werkzeug, um ein Layout ein Stückchen mitdenken zu lassen.

Das CSS3 Spalten-Modul bietet hierfür sicherlich große Angriffsfläche. Mehrspaltigkeit setzt voraus, dass man den Text auch ohne zu scrollen komplett lesen kann. Dafür braucht es nun mal eine bestimmte Auflösung, die man mit so einem kleinen Skript effektiv auch kleineren Formaten zugänglich machen kann, ohne das die Typografie aus dem Ruder läuft. Falls ich mich auf der eigenen Seite mal satt gesehen habe, sehe ich gute Chancen auch mal auf so eine Lösung zu setzen.

Feedback: 0 Kommentare

Statt einen riesigen Text mit Details vollzustopfen, die nur einen Bruchteil der Leser interessieren, pflücke ich das Ganze etwas auseinander. Heute möchte in ein paar Worte zum Raster und zum Kopf der Seite verlieren. Das Grundraster ist nur eine Erweiterung des alten Rasters. Man muss sich vor Augen halten, dass diese Gestaltung einmal für eine Auflösung von 800x600 Pixeln vorgesehen war, was erklärt, wieso in einigen alten Artikeln, die Bilder so winzig sind. Losgelegt habe ich hier einmal mit einer Hauptspalte von 468 Pixeln. Auf dieser alten Bildbreite basiert heute noch das Raster, was schließlich nun aus 18 Spalten mit je 41 Pixel Breite und einem Spaltenabstand von 20 Pixeln besteht. In dieses Raster passen alle alten Inhalte und ich habe genug Spielraum, um alles völlig variable zu platzieren. Keine Allround-Lösung, aber meine Lösung für diese Seite.

Ein Wort zum Grundlinien-Raster. Grundlinien-Raster ist eines dieser Schlagworte, die sich in der Praxis nicht 100% umsetzen lassen. Spätestens wenn Bilder den Float in eine halbe Zeile zwingen, brechen alle folgenden Elemente aus dem Raster. In Frage käme alle Bilder in der Höhe passend zu bemaßen, aber da rechtertigt der Aufwand niemals den Nutzen. Auf dieser Seite passiert zuviel Ungewöhnliches, um ein Grundraster wirklich konsequent durchzuziehen.

Kopfelement

Der Kopf hat hier schon eine sehr durchlebte Vorgeschichte. Selbst bei der vorherigen Version brauchte es 3 verschiedene Ansätze, bevor schließlich gefunden war, was sich ein gutes Jahr bewährt hat.

Kopf der vorherigen Version, der damals auch schon mehrfach verändert wurde.

Die alte Version hat für die Startseite selbst gut funktioniert, für eine einzelne Inhaltsseite aber weniger gut. Wenn ich gar eine einzelne Seite individuell gestaltet habe, war der Kopf immer viel zu dominant und wirkte deplaziert. Dies musste ich ändern. Der Kopf sollte so neutral wie nur möglich sein, ohne aber jemals als Kopf ignoriert zu werden. Essentiell war, endlich die Teaser-Bildchen angemessen darzustellen und obendrein musste alles noch so rund wirken, dass es auf jeder Ebene der Seite funktioniert.

Die Größe und Position dieser ganz wenigen Elemente im Kopf so festzulegen wie sie jetzt dargestellt werden, hat praktisch die längste Zeit der Gestaltung in Anspruch genommen. Ich habe irgendwann aufgehört zu zählen, bei welchem Versuch ich nun war. Bis schließlich dies hier zu sehen war:

Was übrig bleibt sind wirklich nur Elemente, die ich hier für essentiell halte. Warum dieser Kasten oben links? Gleichgewicht zum Teaserbild und Überbrückung zum Logo. Ohne diesen Kasten entsteht da ein Loch auf der Startseite, dass einfach nicht funktioniert.

Logografik

Zuvor hatte ich das Problem das Kopfelemente auf verschiedensten Hintergründen funktionieren müssen. Dafür brauche ich logischerweise auch mal die Negativ-Version des Logos, vorher eine separate Grafik. An diesem Punkt möchte ich auch betonen, dass hier nur ein echtes 24-Bit PNG in Frage kommt. Gerade für diese Zwecke ist dieses Format perfekt.

Diesmal wollte ich alles richtig machen und habe eine einzige Grafik erstellt. Die beinhaltet alle benötigten Tonwerte, welche dann am Schluss mit CSS in die richtige Position gerückt werden. Klingt komplizierter als es ist. Wichtig ist nur eine einzelne Grafik und ein wechselnder CSS-Wert lassen das Logo auf wirklich allen Hintergründen funktionieren. Unter dem Begriff CSS Sprites findet man dazu endlos viele Tutorials. Statt halt alle möglichen Grafiken separat zu laden, packt man alle in ein großes Bild und positioniert dieses, so wie man es braucht.

Feedback: 2 Kommentare

Die letzten Tage, Wochen und Monate geistern wieder unglaublich viele Artikel durchs Netz, die wieder einmal ihre selbst erstellten Regeln durchdrücken wollen. War es früher die These “weg mit Tabellen, her mit den Divs” konzentriert man sich heute auf Schönheitskorrekturen. Spaltenraster, Grundlinienraster, goldener Schnitt. Gezielt auf einzelne Punkte eingehen werde ich explizit nicht, weil im Gegensatz zur Web 2.0 Design-Revolution (CSS) es heute kein einfaches Richtig oder Falsch mehr gibt.

An dieser Stelle ein kleiner Ausblick auf die kommenden Änderungen hier, welche relativ gut zum Thema passen. Dieses mal habe ich zu 80% mit puren Zahlen gearbeitet. Alle Änderungen begründen sich auf Rastergrößen. Das neue Raster wiederum ergibt sich auf Grund der aktuellen Bild- und Spaltengrößen. Gestalten nach Zahlen, nicht mehr und nicht weniger, was bis zu einem bestimmten Punkt sehr gut funktioniert hat.

Hier zu sehen zwei fast identische Kompositionen für die neue Startseite.

Die Details sind noch im Entstehen, aber der grobe Aufbau ist soweit abgeschlossen. Zwischen beiden Versionen besteht ein winziger Unterschied in Form einer leicht veränderten Spaltenbreite. Ohne zu sehr ins Details gehen zu wollen: mein neues Raster hat 18 Spalten. Links sehen wir eine Aufteilung von 8 zu 10 Spalten, rechts 7 zu 11. Die wirklich spannenden Stellen habe ich rot markiert.

Wenn Raster gegen einen arbeiten entstehen solche Situationen. Gegen die obere Version ist nichts zu sagen. Auch wenn ich unten aus dem Raster breche, so fliegt mir auch dort nichts gestalterisch um die Ohren. Ohne hinterlegtes Raster, sähe das normale Auge den winzigen Makel unten sowieso nicht. Das eine ist richtig, das andere richtiger.

Mein Bauchgefühl sagt die rechte Version ist weniger falsch Hier ist das eigentliche Problem. Mit 11 Spalten habe ich eine Zahl, die sich weder durch 2, noch durch 3 Teilen lässt und somit eigentlich das Spaltenraster ignoriert, darin enthaltene mehrspaltige Inhalte betrifft. Dies ist nicht hunderprozent korrekt, auch nicht falsch, aber wer es weiß, sieht den Makel. Gute Raster sind jene, die man nicht sofort erkennt, auch darum gefällt mir die weniger richtige Variante am Ende besser, da es nicht so steril konstruiert wirkt, wie die eigentlich korrektere Version.

Was letztendlich hier demnächst zu sehen sein wird, ist noch unsicher und wahrscheinlich werde sowieso nur ich die mehr oder weniger falschen Details sehen. Ich jedenfalls nehme erstmal wieder etwas Abstand von Zahlen und Regeln. Jede Gestaltung funktioniert individuell für sich und diesem Medium teils jahrtausende alte Regeln aufzwingen zu wollen, ist einfach falsch. Es muss immer Platz für Kompromisse sein. Das ist keine schlechte Schule sondern Erfahren und Lernen neuer noch ungeschriebener Regeln. Auch Webgestaltung ist nicht nur reine Mathematik.

Feedback: 7 Kommentare

Habe die Tage beruflich wieder etwas Luft zum Bloggen äh zum Atmen. So oder so ähnlich hätte der Tag dieses Blogs heute aussehen können. Ein ALA-Artikel über dynamische Raster wird hier und da (primär vom harten Kern der Seite) verlinkt und bejubelt. An sich ein feiner Artikel, wenn auch 200% theoretisch genial, praktisch höchst fragwürdig. Ein möglicher heutiger Blogeinträg, hätte das Thema kleinlichst analysiert, um zu zeigen, dass fluid grids nicht mehr sind als ein sehr tolles Oxymoron.

Ein zweiter Eintrag hätte sich wohl um die Autoindustrie in Deutschland gedreht. Eigentlich hatte ich dieses Wochenende vor, mir ein sehr gutes Angebot näher anzuschauen - und ja voll im Sinne und Rausch der Abrwrackhysterie. Einen Anruf später jedoch zeigt sich, dass deutsche (Premium-)Marken nicht gefühlt überteuert sind. Die Margen der Händler sind noch immer lächerlich hoch, im Vergleich zur Konkurrenz. Mein Super-Angebots-Händler handelt aber wieder nach dem Marktwirtschaftsprinzip des Angebots und der Nachfrage, weshalb sein “Angebot” eine Woche später schon massiv angehoben wurde und man zusätzlich mit Lieferzeiten bis Juni rechnen muss. Vielen Dank.

Auch wollte ich Dawn of War 2 dokumentieren, denn seit Jahren habe ich hier mal wieder was gefunden, dass die Zeit völlig vergessen lässt. Es ist ein Musterbeispiel für ein PC-Spiel im Jahre 2009. Es ist nicht perfekt aber gut genug um Wrath of the Lich King zum ersten mal seit Release vom Thron der Verkaufs- bzw. Download-Charts zu verdrängen. Ein fast geschriebener Text hätte heute hier den Tag füllen können.

Adobe’s Onlinebaukasten Dreamweaver wäre auch ein sehr nettes Thema. Die aktuelle Version CS4 ist einen Blick wert, im positiven und negativen Sinn. Ich habe seit es noch ein reines Macromedia-Produkt war, nicht mehr Dreamweaver genutzt. Zu schlecht war nicht nur der Workflow, sondern auch die Unterstützung von CSS, validem Code und dynamischen Seiten. Mittlerweile hat sich viel verbessert und besonders für schnelle Prototypen scheint Dreamweaver geeignet. Besonders die Synergie mit Photoshop ist sehr beeindruckend. Beeindruckend ist auch das UI des Programms. Ich habe noch nie so völlig überfrachtete UI-Panel gesehen. Allein die Lernkurve des Interface ist brutal hoch. Einsteigerfreundlich sieht anders aus.

Statt all diese Texte zu schreiben, verzweifle ich am Photoshop-Template für ein mögliches grafisches Update dieser Seite. Erstens kommt es anders und zweitens als ich denke. Mittlerweile sind alle vorherigen Ansätze über Bord geworfen und ich klebe an _ben’s “Ist das richtig, dass ich hier unter dem Artikel schon die Teaser (endlich in größeren Bildern)” fest. Ja endlich wird man dann mehr sehen, aber nein nahtlos fügt sich da noch nix zusammen.

PS. Liedtexte, die aus einer Silbe zwei machen, sind ganz große Kunst oder Spuren eines faulen Texters? “Sicher-ha-iet”

PPS. Fuck YouTube dafür, dass sie das neue Depeche Mode Video blockieren.

Feedback: 3 Kommentare

Wenn ich am Zeitungsstand stehe, sehe ich zur Linken eine günstige und zur Rechten eine teure Alternative für ähnlichen Inhalt. Worin unterscheiden sich beide? Meist in der Qualität der Gestaltung, der Qualität (Grammatur/Veredlung) des Papiers und des Drucks.

Die Frage drängt sich auf, wieso existiert im Online-Medium kein Pendant zur günstigen und teuren Alternative? Sind wir hier zu versaut von den Anfangsjahren des Mediums?, zu konditioniert, dass jede Information gratis sein muss? Bis heute hat sich außer bei expliziten Inhalten, kein Bezahl-Modell durchgesetzt. Wer wäre nicht bereit für Premium-Inhalte und Präsentation mehr zu zahlen? Ist es auch die schnelle Kopierbarbeit, Austauschbarkeit, Beliebigkeit der Inhalte?

Hier im Bild ein neues bzw. erweitertes Grundraster, für bevorstehende Änderungen. Ein tolles Skript zum Erstellen von Rastern mit Photoshop nennt sich GridMaker.

Wieso dieser Eintrag? Nun ich feile am Grundraster für den Relaunch hier und eine der ersten Fragen dafür, dreht sich um Auflösungen. Sind Auflösungen oberhalb der 1280 in der Horizontalen, das Online-Pendant zum Premium-Papier und Hochglanz-Druck im Print? Es sieht fast danach aus. Fakt ist, dass ich wohl mein aktuelles Raster erweitern werde und ich somit bei 1118px Breite lande.

Drei Gründe. Erstens sind meine Leser schon jetzt zu einer großen Mehrheit mit hohen Auflösungen unterwegs. Zweitens ist mehr Platz = mehr Freiheit = mehr Abwechslung. Drittens sollte sich dieses Raster spätestens mit CSS3 als glücklich erweisen. Eine Testseite, zeigt aber in welche Richtung es mit CSS3 gehen kann und funktioniert derzeit nur im FF, Safari bzw. Chrome. Nicht den Text lesen, wie gesagt, dieser Eintrag ging irgendwie auch inhaltlich ins Leere, drum bisher unveröffentlicht.

Feedback: 7 Kommentare

Via Codecandies konnte ich diese durchaus lesenswerte Frage beantwortet bekommen: Grid-Layouts – das neue Tabellenlayout? Ich komme nicht herum, hier meinen Blickwinkel festzuhalten. Für meinen Geschmack nähert sich der Artikel, dem Thema aus einer ungünstigen perspektive: des Programmierers. Grids oder Raster, sind ein Werkzeug zur Gestaltung. CSS ist der Buntstift des Webdesigners. Vorgefertigte Grid-Lösungen wie Yahoo’s oder Blueprint, sind jedeglich Mahlen nach Zahlen.

Raster sind ein Konzept, dass vielen Anfängern sicherlich zu uneffektiv erscheint. Statt die eigene CSS-Lösungen zu entwickeln, setzt man auf die schnelle vorgefertigte Lösung. Grids sind nicht Blueprint.

Richtig ist, dass eine rasterbasierte Gestaltung, auch im CSS mehr Arbeit bedeutet, für einen weniger sichtbaren Vorteil. Der hippe Wedesigner, verbringt sicherlich lieber mehr Zeit im Photoshop-Template, wo Änderungen schneller sichtbar sind, als Zeit für ein Raster im CSS zu verschwenden.

Für meinen Fall, käme eine Lösung mit diesen Frameworks nicht in Frage, weil man aufgeblähten Quellcode bekommt. Quellcode, der in der Tat eine Einbahnstraße ist. Wer solche Frameworks nutzt, scheint nicht willig, die Zeit zu investieren, die es braucht, um die Vorteile von Grids, HTML und CSS zu nutzen. Die schnelle Lösung beinhaltet immer Nachteile und diese schildert der Artikel wirklich gut.

Raster grundsätzlich zu verteufeln ist völlig absurd. Je dichter die Informationsfülle wird, umso essentieller werden Grundraster und auch bei wenigen Informationen, bieten sie eine unsichtbare optische Führung. Raster bedeuten noch immer deutlich mehr Aufwand, möchte man als Webdesigner, alle deren Vorteile nutzen und gleichzeitig weiter flexibel bleiben.

Fazit? CSS Frameworks sind sehr mit Vorsicht zu genießen. Zum Layouten gänzlich drauf verzichten und mehr Zeit in das eigene Raster/CSS investieren. Ich fürchte das Thema spaltet sich beim Nutzer. Wer mehr der Programmierer ist, wird wohl eher zur Fast-Food-Lösung greifen, die auf lange Sicht ungesünder ist. Der Gestalter dagegen wird ganz schnell realisieren, wieviel mehr Freiheit, eine eigene Raster-Lösung bietet. CSS-Frameworks ruhig verteufeln, Grundraster im Webdesign nicht. Wie überall belohnen Raster im Webdesign auch nur das gute Handwerk.

Feedback: 0 Kommentare

Das WordPress-Theme ist nun aktualisiert. Gibt in der Tat noch etliche kleine Macken, besonders mit IE. Was hat sich geändert? Nun erstmal ist der Kopf deutlich verändert wurden. Die Links zu den letzten Einträgen sind nun in die Seite integriert und nicht mehr so an den Rand verdrängt wie vorher. Weil ich nicht weitsichtig genug war, Bildgröße und Raster damals besser aufeinander abzustimmen, musste eines der Bilder dran glauben. Aus 4 sind nun 3 geworden. Ich hab echt viel versucht, irgendwie ist dies die für mich am besten funktionierende Lösung geworden. Ich wollte etwas, aber nicht zuviel verändern.

So oder so ähnlich sieht die korrekte neue Darstellung aus. Bis auf Kleinigkeiten sollten alle aktuellen Browser gut bedient sein: Firefox, Safari, IE7.

Typografie

Ich finde es immer noch schwierig serifenlose und eine Serife miteinander zu mischen. Vorher war mir da zuwenig Linie drin. Die neue Lösung ist ganz einfach: Georgia bleibt einzig Eintrags-Inhalten vorgesehen, Titel und Zwischenüberschriften. Alle anderen Überschriften sind wieder serifenlos.

Archiv

Wenn ich einen neuen Weblog sehe, schaue ich immer als erstes, wie das Archiv aufgebaut ist. Bis heute, ist mir nicht wirklich ein makelloses Archiv unter die Augen gekommen, was sehr schade ist. Ich wollte die ewig langen Link-Listen loswerden. Die jetzige Kalender-Lösungen gefällt mir besser. Ich habe dieses sehr brauchbare Plugin gefunden, dass im Laufe der nächsten Wochen deutlich angepasst werden möchte. Auch wenn man es vielleicht nicht sofort sieht, aber hier ist vieles noch einfacher geworden und gleichzeitig stimmen die Details besser. Bin zufrieden, nun muss erstmal das Stylesheet optimiert werden.

Feedback: 10 Kommentare

Ich bin immer noch dabei am CSS große Teile zu verändern. Beim Schreiben des zweiten Teils zur neuen Gestaltung, fiel auf, dass vieles was ich predigen wollte, letztendlich nicht wirklich konsequent realisiert wurde. Fünf Veränderungen. Zum einen rückt der Inhalt der Seite wieder eine Spalte nach links. Die Seite war vorher zu rechtslastig und ich konnte die Startseite nur sehr schwer erweitern, ohne dass die Seite aus dem Gleichgewicht fällt.

Die alten nun zu kleinen Bildformate wurden umgestaltet, haben nun links und rechts eine mächtige Kante, passen dafür aber viel angenehmer ins Gesamtbild. Diese Veränderung ist permanent. Zwischenüberschriften floaten nicht mehr links, sondern werden wieder als Block-Level-Element dargestellt. Das Kommentarformular ist nochmal vereinfacht, zwecks Browserkompatibilität. Zusätzlich habe ich Markdown für Kommentare aktiviert. Die Darstellung ist insgesamt nun harmonischer, es springt nicht mehr soviel von Spalte zu Spalte. Ich werde nun auch wieder mehr Artikel auf der Startseite zeigen, ähnlich im Stil der neuen Archiv-Darstellung, mit einer kleinen Skript-Spielerei. Nur die Details dafür halten die Umsetzung noch auf.

Das bisher größte Fazit lautet für die Zukunft: Bilder runter skalieren funktioniert immer, andersrum kaum. Für die Zukunft werde ich wohl die meisten Bilder größer speichern, als ich sie eigentlich brauche. Speicherplatz und Bandbreite wird immer günstiger und man kann nie wissen, wann man einmal hochaufgelöstes Bildmaterial benötigt. HTML-seitig wünschte ich mir für die nächste Version, mehr Optionen für das uralte IMG-Tag. Es gibt zwar schon wunderbar funktionierende Möglichkeiten, Webseiten relativ auflösungsunabhängig auch bei Bildern funktionieren zu lassen, aber dafür braucht es immer noch zuviel zusätzlichen Quellcode. Ganz klassisch ist die Methode Bilder als Hintergrundgrafik in DIVs zu packen, wobei das DIV quasi als Maske dient. Das Bild bleibt somit immer scharf, der gezeigte Aussschnitt jedoch skaliert mit der Seitengröße. Es wäre wünschenswert solch eine Funktion standardmäßig für ein IMG-Tag nutzen zu können.

Feedback: 0 Kommentare

Das schwierige an neuen Einträgen mittlerweile? Die optimale Länge zu finden. Auch dieser Text könnte ohne weiteres die 3000er Work-Marke sprengen, aber gestalterisch wie inhaltlich, soll sich hier was ändern. Gleich noch ein kleiner Haken vorweg. Dieser Text beinhaltet zwei Diagramme die im RSS-Reader zwar dargestellt werden, denen dort jedoch das CSS fehlt, um sowohl optisch als auch inhaltlich zu funktionieren. Die Logik hinter dieser Lösung folgt im weiteren Verlauf dieses Eintrags. Wer den Text vollständig erschließen möchte, muss wohl oder übel die Seite besuchen.

In Zeiten wo jeder Mensch mit etwas Freizeit, sich kreativ im Internet vererwigen kann, ist es schwieriger geworden dem Handwerk weiterhin viel Wert zu suggerieren. Selbst der blutigste Anfänger darf sich heute im Web etablieren. Das ist die Essenz vom “Web 2.0″-Konzept. Jeder darf daran teilhaben. Was eins einer kleinen technisch versierten Gruppe vorbehalten blieb, steht nun wirklich auch dem letzten Anwender offen, was dem Content mehr Bedeutung verschafft und somit langfristig gut ist. Die eigentliche Ebene der Gestaltung ist transparent und zugänglich geworden. Jeder darf munter kostenlose Themes für seinen Webauftritt auswechseln. Mit einem Click zur besseren Optik, wobei das besser immer subjektiv zu bewerten ist. Gestaltung mit Substanz zieht sich immer tiefer hinter die eigentlich sichtbare Ebene. Gestaltung für mich ist mittlerweile mehr als die Optik der Fonts, Farben und Texturen. Gestaltung findet hier fast nur noch im Unbewusstem statt: Struktur, Navigation, Typografie.

Essenz

Das ist auch der Ansatz für meine Seite hier. Weniger ist immer noch mehr. Zurück zu den Wurzeln. Als klassisches Blog-Element, dass in meinen Augen total versagt, sei hier beispielhaft die so beliebte, mit Link-Listen zugeladene, Seitenspalte unzähliger Webseiten, zu nennen. Es gibt einen Grund wieso, ich ganz explizit auf solche Elemente verzichte. Solche Elemente sind die Antwort auf eine Frage, die niemand heute mehr stellt.

Ich habe hier immer die Seite basteln wollen, die mir selbst als Anwender gefällt. Das Lesen neuer Inhalte, das Finden neuer Links, all das findet bei mir fast ausschließlich nur noch im RSS-Reader statt. RSS öffnet eine komplett neue Form der Ästhetik, wie man Informationen aufnimmt bzw. präsentiert. Informationen werden wieder nur auf ihre Essenz reduziert. Ich verstehe weiterhin, wieso viele andere ihre Informationen nur in Auszügen über die Plattform RSS anbieten möchten. Es geht sehr viel Wert verloren, wenn man plötzlich nur noch eine simple Überschrift zwischen hunderten ist.

Was bleibt ist eine Essenz aus Inhalt, samt der dazugehörigen Gestaltung, um die Seite auch außerhalb einer Feed-Reader Umgebung, funktionieren zu lassen. Jener Leser, der vom RSS-Reader hierher findet, soll nur die bekannten Inhalte angenehmer aufbereitet vorfinden. Nicht mehr und nicht weniger. Das ist das Konzept der Seite für die aktuelle Version. Was momentan zu sehen ist, sind die Grundzutaten um alles funktionieren zu lassen. Ein Element dafür: das gewachsene neue Spaltenraster.

1024 Pixel zum Glück

Auch wenn es ein paar Jahre gedauert hat, aber nun bin auch ich, von den Vorteilen der zusätzlichen Pixel, überzeugt. Im Gegenteil, mehr Raum untertreicht auch meinen oben beschriebenen Ansatz, Inhalten die perfekte Bühne bereiten zu wollen. Seit Ewigkeiten waren die Leser hier mit hohen Auflösungen unterwegs. Eine aktuelle Übersicht über Browserauflösungen der Besucher hier sieht so aus:

Die Frage “Wie” war das größere Übel. Ich hatte im letzten Jahr schon einmal die Richtung 1024 Pixel angepeilt, bis dahin mit wenig Erfolg. Zwei ältere Texte behandeln einige der Stolpersteine. Die Transformation vom alten zum neuen Raster will durchaus sorgfältig geplant sein. Wichtig war, durchaus mehr Platz nutzen zu wollen, jedoch nicht auf Kosten der Lesbarkeit der Texte. Laufen die Zeilen zu lang, verlieren sie an Lesbarkeit. Eine volle zusätzliche “alte” Spalte hätte die Breite der Zeilen auf 712 Pixel erhöht, eine Länge die nicht mehr angenehm zu lesen ist. Stattdessen habe ich das alte Raster verfeinert und so dem Text eine zusätzliche halbe “alte” Spalte zu göhnen. Damit wächst die Breite der Text-Spalte von ehemals 468 Pixel, auf nun 590.

Somit ist das neue Raster um eine zusätzliche Spalte gewachsen, es ist feiner geworden und erlaubt nun sehr viel mehr Größen als vorher, was spätestens bei Bildern und Ausrichtung von Elementen, bedeutsam sein wird. Hier eine kleine Veranschaulichung des neuen Grundrasters - dies ist übrigens keine Grafik sondern ein mit CSS gestyltes Diagramm.

2 Spalten

224 Pixel

3 Spalten

346 Pixel

4 Spalten

468 Pixel

5 Spalten

590 Pixel

6 Spalten

712 Pixel

7 Spalten

834 Pixel

8 Spalten

956 Pixel

Hier zu sehen ein Diagramm zur Illustration aller möglichen Spaltengrößen des aktuellen Rasters.

Fokus beim neuen Raster blieb also die Lesbarkeit der Texte, sowie ein möglichst großer Spielraum, zum Positionieren der Elemente. Vorher hatte ich praktisch zwei Bildformate. Eines mit 468 Pixeln der Textbreite, sowie eines mit voller Breite des Rasters: 712 Pixel. Mit diesen zwei Formaten kam ich schon recht weit. Beispiele gibt es hier und hier zu sehen. Plötzlich jedoch stehen weit mehr Formate zur Verfügung und noch schlimmer, die alten wollen nicht mehr so recht ins Raster passen.

Wieso ich die Grafik weiter oben als Diagramm angelegt habe ist simpel. Pixelgrafiken skalieren sehr schlecht. HTML-Elemente dagegen wunderbar. Die Umstellung der Diagramme auf das neue Raster war ein Kinderspiel: hier und da ein CSS-Wert geändert und fertig. Absolute Skalierbarkeit von Elementen ist noch Illusion, aber wenn man im Einzelfall die Möglichkeit hat, sollte man sie nutzen.

Die Pixelbilder dagegen auf die 590 Pixel hochzuziehen wär zwar einfach gewesen, aber auf Kosten der Qualität. Letztendlich hab ich mich für die einfachste aber effektivste Lösung entschieden. Nun laufen die Texte zwar bei alten Texten weiter als einige Bilder, aber mit dem kleinen Makel muss ich leben, zumal dank CSS immer hier und da noch was zu verbessern ist. Was bleibt ist das neue Raster voll bei einzelnen Artikeln auszunutzen. Vorbereitet ist im Prinzip alles. Trickreich war nicht zu vergessen, die alten Bildformat-Klassen beim Import der Daten zu WordPress, vorher umzubennen, um bei der Menge der neuen Klassen und Formate, die Übersicht zu behalten.

Mehr Platz bedeutet auch jedem kleineren Element plötzlich mehr Möglichkeiten der Positionierung zu geben und hier wird die Geschichte plötzlich aufwendiger. Ein einfaches Beispiel. Mit welcher Vielfalt kann ich ein Bild der Breite 346 Pixel sinnvoll platzieren?

 

346 Pixel über die ersten 3 Spalten - CSS: .11100000

 

.01110000

 

.00111000

 

.00001110

 

.00000111

Positionsmatrix für ein kleineres Bildformat im neuen Raster.

Nun geht es vielleicht schon zu sehr in die praktische Richtung, aber das Prinzip sei hier erklärt. Jede Position braucht ihre separate CSS-Klasse. Noch fehlt mir hier ein sinnvolles Klassensystem, drum an dieser Stelle eine von vielen möglichen Lösungen. Die CSS-Klasse definiert ich dadurch, welche Spalten vom Objekt benutzt werden. Insgesamt gibt es 8 Spalten. Dieses Bildformat deckt 3 davon ab, 5 bleiben unbenutzt. Welche Spalten bei welcher Position benutzt werden, bestimmt dann die CSS-Klasse. Die CSS-Klasse .00111000 definitiert sich wie folgt von links nach rechts: Spalte 1 und 2 sind unbenutzt. Spalte 3, 4 und 5 werden benötigt. Spalte 6, 7 und 8 sind wieder frei.

Welche Position das Bild im Einzelfall dann erhält, geht schon sehr Richtung Gestaltung im Print und muss tatsächlich in jedem Fall einzeln bestimmt werden. Es kommt immer auf das Umfeld des Bildes an. Brauche ich eine Bildunterschrift? Folgt das Bild einer Zwischen-Überschrift? Wieviele Absätze erscheinen vor und nach dem Bild und wie lang laufen diese? Mittlerweile erlaubt das Raster viel mehr Möglichkeiten und somit jedoch auch mehr “Arbeit” und Sorgfalt. Was sich hier andeutet wird sicherlich mit Blick auf die kommende Version von HTML und CSS durchaus zur Regel. Gestaltung von Inhalten im Web wird umfangreicher, benötigt dafür aber mehr Sorgfalt. Ein einfaches Textverfassen und Bilderhochladen reicht da nicht mehr. Aufwendigere Artikel möchte geplant und umgesetzt werden.

Mein Problem bei Übernahme der alten Inhalte war einen gestalterischen Mittelweg zu finden. Ich hätte die alten nun zu kleinen Bilder auch gern aus der Text-Spalte herausgerückt, jedoch besitzen viele davon Bildunterschriften und dort käme es dann zu Überlappungen und hässlichen Auswüchsen des CSS-Float. Jetzt neue geschriebene Artikel dürfen alle Optionen des neuen Rasters nutzen, was auch bedeutet ersteinmal alle Möglichkeiten zu sichten und ein CSS-System zu entwickeln, was späteres Einpflegen neuer Inhalte einfach macht. Von nichts kommt nichts heißt es so schön, auch bei der neuen Gestaltung hier, ist das nicht anders. Im zweiten Teil der kurzen Serie, werde ich ein paar Zeilen zur Typografie notieren.

Feedback: 3 Kommentare