Dokumentation zur neuen Gestaltung – Konzept und Raster
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
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
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.
3 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>Ich mag das neue Design!Die letzte Version war ein kleines „Feature Creep“.
Das ist ziemlich lustig, mit den .01110000 Klassen. Hast Du die alle von Hand geschrieben? Ich hatte das ja in meinem letzten Blog automatisiert und über zwei Typen von Klassen abgebildet: .glwidth3 (für Grid Layout Box, Breite: zwei Spalten) und .glstart2 (für Grid Layout Box, Erste Spalte der Box ist die zweite Spalte des Rasters von Links gesehen).
Noch findet alles ganz altmodisch in Handarbeit statt. Schaue mir gerade ein paar Java-Frameworks an, speziell jQuery. In der Theorie könnte ich damit alle Bilder/Elemente nach ihrer Breite scannen lassen, um anschließend die passenden CSS-Klassen zuzuordnen. Soviel zur Theorie.
Praktisch sieht es wie immer anders aus. Davon abgesehen, dass ich mit so tiefgreifenden Skript-Methoden eher wenig anfangen kann, funktioniert sowas das sicherlich auch nur in einer idealen Umgebung: Bilder alle gleich groß mit zugewiesener Breite. Nun soweit bin ich hier noch nicht. Ich tue mich auch schwer so abstrakte CSS-Klassen zu nutzen. Drum bleibe ich erstmal beim jetzigen System. Es gibt (logische) 13 Klassen für Elemente innerhalb der Texte, die erstmal weiter manuell zugewiesen werden.
Wie immer wird sich hier kontinuierlich was verändern. Als nächstes werde ich wohl Links zu thematisch ähnlichen Artikel weiter in den Fokus rücken, die gehen soweit unten und eingeengt ziemlich unter. Warscheinlich gibt es dann jeweils 10 oder 12 Links eher ungewöhnlich, nahe der eigentlich Hauptüberschrift plaziert. Muss nur noch schauen, ob die Hierarchie der Typo bzw. der Seite ingesamt dann nich gestört wird.