Am 1. März werden ein paar wenige deutsche Blogs ihren Beitrag zu einem gemeinsamen Thema verfassen. Dieser Eintrag möchte noch zusätzliche Teilnehmer finden und den Ursprung des Ganzen erläutern. Statt dem Trend der Blogs totschreibenden Masse zu folgen, stecke nicht nur ich mehr Sorgfalt in diese kleine Nische des Internets. Mittlerweile statten mehr Blogger ihre Werke mit individueller Gestaltung aus. Und spätestens das böse i-Wort hat in vielen Köpfen das Licht augehen lassen, dass auch ein Online-Artikel aus mehr als einer Überschrift, Symbolbild und einer Textblockspalte bestehen kann. Um zu zeigen was jetzt schon machbar ist, kam der Gedanke auf, dass man auf einer gemeinsamen inhaltlichen Basis, seinen invividuellen Beitrag veröffentlicht. Aus der Idee soll nun was Greifbares werden. Bühne frei‽

Der erste Versuch

Noch ist die Liste der Teilnehmer übersichtlich. Mit dabei sind bisher Ben_, Markus, Maurice, Nico, Oliver und meine Wenigkeit. Wer sich angesprochen fühlt und mitmachen möchte, der ist herzlich eingeladen. Unser erster Termin ist jetzt der 1. März und das Thema soll Musik sein, wobei ein paar wenige Richtlinien existieren. Es gilt sich einen einzigen Titel zu wählen, der als MP3 oder Video in den Eintrag eingebettet sein muss. Auf diesem Lied sollten sich dann 200 bis 500 Wörter Text aufbauen, wobei niemand nachzählen wird, aber der Umfang sollte übersichtlich sein. Was inhaltlich passiert ist völlig offen. Man kann “seine” Geschichte zum Lied erzählen, schreiben warum die eigene Wahl so toll ist, oder wie furchtbar man den Song findet. Das Lied dient nur als Haken, was dran hängt, entscheidet jeder selbst und wie es umgesetzt ist auch. Jeder der Teilnehmer wird sicher mehr als den “normalen” Blogpost anbieten.

Intention

Für mich persönlich geht es hierbei um zwei Kleinigkeiten. Zum einen soll es Werbung sein, für den Ansatz vielleicht doch mal mehr Sorgfalt und Zeit bei der Gestaltung eines einzelnen “Blogeintrags” zu benutzen. Zum anderen sehe ich jetzt schon im Link-Blog, dass einfach nur mehr Beispiele, dass Niveau der Idee doch sehr eindeutig voran treiben. Hier kommen viele neue und praktische Beispiele ans Tageslicht, bei denen man sich gern was abschaut. Zumindestens nehme ich mich dabei nicht raus. Dieser Ansatz profitiert langfristig ganz klar davon, dass wir mehr Beispiele bekommen. Wenn wir dabei ein paar zusätzliche Leser von der Idee überzeugen, dann ist dies ein positiver Nebeneffekt, aber nicht das erste Ziel. Allerdings kann ich nur von dieser Seite bestätigen, dann die Besucherzahlen in den letzten Wochen überraschend eindeutig angestiegen sind. Die sehenswerteren Seiten, sammeln hier klar die meisten Klicks.

Ganz abgesehen davon, bin ich einfach sehr drauf gespannt, was der Rest so produziert und es geht nicht nur um die visuelle Oberfläche. An dieser Stelle interessieren mich mehr die gewählten Titel des Themas. Musik ist halt doch was so Subjektives, dass sie viel über den Menschen verrät, der sie hört.

Experiment

Wenn sich alle Teilnehmer den Spaß an der Sache bewahren, dann kann man hier zukünftig einiges von versprechen. Themen lassen sich genügend finden und ich denke schon einen Schritt weiter, ob man diesen Ansatz nicht sogar in eine eigens dafür geschaffene Seite integriert, um eine zentrale Anlaufstelle zu bieten. Möglich wär auch ein Kettenbrief-Ansatz, wo jeder einen kleinen Teil für einen gemeinsamen Beitrag stellt…aber schön der Reihe nach.

Zum Anfang steht der 1. März als Termin für den ersten Versuch. Schauen wir mal wie es läuft.

Feedback: 7 Kommentare

Bilder von der NYTimes App für das iPad kennen sicher viele. Sollen wir mal wieder mehr Realität in die sich übergebenden Superlativen der Präsentation bringen? Worin bestehe die zwei einzigen echten Unterschiede zwischen dieser gezeigten Applikation und der normalen Website? Fixes Format und fehlende Werbung. Ließe man die Werbung auf nytimes.com weg und läge sich auf ein fixes Format fest, würde die Website ein in meinem Fall 24-Zoll-Farb-Display sein. Viel Glück dabei, mir ein dagegen iPad als “beste Browsererfahrung” verkaufen zu wollen.

“Still there is something new that might be worth paying for: a much stronger focus on design via a 9.7 inch colour display.” #

Ich weiß, dass ich nicht Zielgruppe für dieses Produkt bin, aber es wäre dann doch etwas realistischer die Fakten präzise zu benennen. Ein 9.7 Zoll XGA Display ist ein Rückschritt für Screendesign und auch wenn es eine separate Applikation ist, ein “much stronger focus on design” ist purer Hohn, besonders wenn man einen besseren Effekt schon jetzt erzielen könnte, würde man auf den ganzen Wasserkopf verzichten, den Webdesign mit sich rum schleppt (Browserversionen, Displaygrößen, Schriften, Flash, Werbung). Ohne diesen Kram erzielt man natürlich bessere Ergebnis, vielleicht nicht die NYTimes, aber viele Blogs die sich so eine Strategie leisten können.

Keine Frage ich bin überzeugt davon, dass man die Masse der Nutzer vom iPad überzeugen können wird, aber man erfindet das Rad nicht neu, was Informationdesign auf einem Display betrifft. Größe spielt für die Gestaltung von Informationen eine Rolle und ein Display wie dieses ist gemessen an der Dichte an Informationen ein Rückschritt. Ja es gibt Umwege, um aus so einem Display mehr rauszuholen, aber Design ist auch Detail und wenn ich zoomen muss um Details zu finden, dann ist die klassische Website auf einem großen Display am Schreibtisch die klar bessere Alternative.

Ein weiteres Detail ist auch die Dichte der Bildpunkte. Ein Tablet-Display besitzt einen ähnlichen Abstand zum Auge wie ein gedrucktes Produkt, gleichzeitig aber eine viel geringere Bildpunktdichte. Auch ein iPad ist noch ganz weit von 300 dpi entfernt, was dazu führen wird, dass viele Nutzer größere Schriften für langes Lesen benutzen werden und so schrumpft die effektive Größe des Displays noch weiter.

Grundsätzlich begrüße ich ein Produkt wie dieses neue Apple Spielzeug. Ich sehe seinen Sinn und auch ein tolles Geschäfftsmodell für viele Beteiligten, aber ich sehe ganz klar nicht die Premium-Version zum Konsumieren von digitalen Informationen. Dies ist nicht die Lösung des frustrierten Print-Layouters, der sich schwer tut HTML und CSS zu lernen. Dies ist nicht die Plattform für einen stärkeren Fokus auf Gestaltung. Der heilige Gral¹ für ausladendes Screendesign findet sich nicht auf dem Display eines iPad. Einfach mal die Superlativen wieder zurück in die Schublade stecken und abwarten, fände ich sehr angebracht.

Feedback: 5 Kommentare

Das Tutorial zum Balkendiagramm gehört zu den stillen Klickfallen der Seite. Über Google kamen dann doch mehr Besucher auf die Seite, als gedacht. Ein Kommentar hat das Thema wieder aktuell werden lassen und ist für mich Anlass, das Thema mal zu überarbeiten. Ich präsentiere Balkendiagramm 2.0 oder so ähnlich.

Ich bleibe bei der HTML-Struktur. Eine Definitionsliste bietet sich hier mehr an, als eine normale Liste, die ich bei anderen Lösungen oft sehe. Es gibt allerdings vor und Nachteile, besonders mit Blick auf Internet Explorer, der jedoch schneller und schneller an Popularität verliert. Eine Definitionsliste hat den großen Vorteil gleich zwei HTML-Tags für einen Wert zu bieten. In einer normalen Liste wird zusätzlich oft mit spans-Tags gearbeitet, um mehr Struktur zu bekommen. Eine dl-Liste braucht sowas nicht. Der große Nachteil lässt sich aber nicht verschweigen. In einer dl-Liste existieren zwar zwei separate Tags, aber diese sind nicht logisch miteinander vom Rest der Liste abgetrennt. Kein Problem für moderne Browser, aber IE kommt wieder und wieder durcheinander, wenn man einzelne Elemente der Liste floatet. Wenn ich Vor- und Nachteile abwiege, bleiben klar mehr Argument für eine dl-Liste übrig. Drum ändern sich am HTML fast nichts.

“D’oh”

Der größte Makel meiner bisheringen Lösung war der Unterschied zwischen echtem Wert der Liste und Breitenwert des HTML-Elements. Wenn ein Element einen Wert von 89% darstellen soll, dann sollte es auch 89% breit sein. Alles andere ist unlogisch und war nur ein Herumarbeiten um das eigentliche Problem. Dieser Makel ist nun behoben. DD-Tags sind nun so breit, wie der Wert den sie darstellen sollen.

<dl class="data-1">
<dt>Wert 1</dt>
<dd style="width:46%;">46%</dd>

<dt>Wert 2</dt>
<dd style="width:24%;">24%</dd>

<dt>Wert 3</dt>
<dd style="width:89%;">89%</dd>

<dt>Wert 4</dt>
<dd style="width:62%;">62%</dd>

<dt>Wert 5</dt>
<dd style="width:29%;">29%</dd>

<dt>Wert 6</dt>
<dd style="width:81%;">81%</dd>

<dt>Wert 7</dt>
<dd style="width:41%;">41%</dd>

<dt>Wert 8</dt>
<dd style="width:72%;">72%</dd>

<dt>Wert 9</dt>
<dd style="width:19%;">19%</dd>

<dt>Wert 10</dt>
<dd style="width:56%;">56%</dd>
</dl>

Zweites Problem war bisher der mögliche Platz für das Label. Hier habe ich zwei Fliegen mit einer Klappe erwischt. Zum einen sind Label und Wert nun so positioniert, dass sie völlig (fast) unabhängig voneinander positioniert werden, was zum Zweiten dem Label endlos viel Platz verschafft.

Die Details sind wichtig, aber es sind wenige. Label (dt) und Wert (dd) sind nun übereinander positioniert, Z-Index sei Dank. Trickreich ist nur eine Sache und zwar die Einrückung der Schrift des Labels, zwar im CSS dokumentiert, aber hier noch exlizit erwähnt. Linker Margin-Wert und Breite des dt-Elements, entsprechen summiert dem negativen linken Margin des dd-Elements. In meinem Beispiel sind es 25% (24% width + 1% margin-left). Die Prozentzahlen zeigen es schon, das Diagramm skaliert mit der Breite einer Seite mit.

Es existiert noch ein winziger Fehler, oder vielleicht sogar zwei. Border und padding des dd-Elements fügen dem Wert ein paar Pixel in der Breite hinzu, die kombiniert mit dem darzustellenden Wert, immer ein paar Pixel mehr darstellen, als eigentlich richtig wäre. Ich nenne es mal “künstlerische Freiheit” und effektiv sind es in meinem Beispiel jeweils 6 Pixel zu viel, ein Wert der zu verschmerzen ist.

CSS3

So ein Diagramm schreit förmlich nach neuen CSS3 Werkzeugen. Neue Pseudo-Selektoren lassen jeden einzelnen Wert im Diagramm adressieren, ohne zusätzliches HTML in die Liste zu schreiben. Optisch lassen sich abgerundete Ecken, wie auch Verläufe integrieren.

Solide

Schaue ich mir alle Fehler und Stärken der Lösung an, komme ich zu einem sehr soliden Ergebnis. Das HTML ist sehr sauber und entspricht der Semantik einer Definitionsliste, der Fehlerquotient liegt im Rahmen, es gibt genug Freiheiten für CSS und die Lösung skaliert relativ gut auf gängigen Browsern. Es soll nur ein Vorschlag sein, einer der sich wunderbar erweitern lässt, um seine Schwächen auszumerzen. Ideal wäre ein zusätzliches Tag im dt-Tag, um den Inhalt absolut zu positionieren, relativ zum dt-Tag. So bekommt man völlige Freiheit bei Länge der Label und Relation zum darzustellenden Wert. Lange Labels für kleine Werte sind ein Problem, dass sich so lösen lässt.

Feedback: 0 Kommentare

Interessant was hier gerade passiert. Wie jedes Jahr, gibt es im Blog zu Weihnachten wieder einen Überbrückungs-Eintrag. Kurz aber prägnant. Eyecandy. Natürlich habe ich wieder von von einem individuellen Layout locken lassen. Eine passende Schrift wurde schnell gefunden. Weihnachten darf’s etwas mehr sein, auch wenn ich sonst kein Freund immer neuer Schriften hier bin. Plötzlich merke ich, dass sich hier langsam, still und heimlich durchaus ein Stil für individuelle Gestaltung eingeschlichen hat. Spätestens der Bud Spencer Eintrag sollte mir ein Licht aufgehen lassen. Für sich allein mag es noch unbeholfen wirken, aber in der Masse, erkenne ich zumindestens eine Linie, auch wenn sie weniger absichtlich entstanden ist.

Der Weihnachtseintrag sieht in der finalen Form definitiv mehr nach diesem Blog aus, als eine vielleicht noch aufwendigere Variante. Weniger ist doch wieder mehr.

Es gibt auch hierbei sowas wie übergestaltete Beispiele. An dieser Stelle sollte ich The Bold Italic erwähnen. Zwar schwanken für meinen Geschmack neue Artikel stark in der Qualität ihrer Gestaltung, aber eines muss man anerkennen: TBI versucht tatsächlich immer was Neues zu finden. The Chosen Few ist wirklich anders geworden. Sicher gibt es Fragwürdiges, aber wenigstens versucht man dort wieder und wieder aus dem Rahmen zu brechen. Sowas verdient Anerkennung.

Was mich zum Fazit dieses kurzen Eintrags bringen soll. Ich denke Abwechslung ist zwar zu begrüßen, aber eine gewisse Grundlinie werde ich nicht ignorieren. Besonders mit Blick in die Zukunft bietet es sich an, wenn jede Phase auch in den individuell gestalteten Beispielen sichtbar ist. Ich glaube für diese Version des Blogs, habe ich die Linie gefunden.

Feedback: 2 Kommentare

Uniques ist ein sehr unterhaltsames kleines neues Projekt im Blog. Uniques ist Link- bzw. Bildblog zu Artikeln mit individueller Gestaltung. Im Folgenden möchte ich ein paar Bemerkungen darüber schreiben. Wie so Vieles hier, soll es nur ein erster Entwurf sein. Irgendwo muss man ja anfangen. Letztendlich ist es zwar nicht so einfach in der Handhabung geworden wie angedacht, aber es funktioniert wie geplant. Anfangs spielte ich noch mit dem Gedanken, eine der fertigen Mikroblog-Lösungen zu nutzen, aber langfristig möchte ich alles hier bei mir auf dem Server haben.

Die Umsetzung erfolgt wie schon bei den Randnotizen. Es existiert eine neue Kategorie, die an den üblichen Stellen rausgefiltert wird und eben nur dort erscheint, wo ich sie explizit aufrufe. Es ist nicht wahnsinning elegant, aber es funktioniert. Bisher ist ein neuer Eintrag Handarbeit, primär um ein gutes Bild der Seite zu bekommen. Bilder sind ein wichtiger Punkt. Noch habe ich kein fixes Template für einen Screenshot, da noch zu viel variiert. Einige Seiten setzen schon auf 1280px andere noch auf 1024px. Die kompletten Seiten abzubilden und nicht nur einen Ausschnitt, ist vielleicht Thema für die Zukunft. Bisher fand es nicht statt, weil ich noch nicht wusste, wie letztendlich die Darstellung erfolgen wird. Später mehr dazu.

Sinnvoller wäre es sicherlich schon, die kompletten Inhalte abzubilden, aber das werden dann teilweise riesige Bilder, selbst wenn man die Breite reduziert. Erstmal bleibt es beim Ausschnitt vom Kopf einer Seite. Ich versuche schon alles immer ins rechte Licht zu rücken. Soll keiner benachteiligt werden.

Meine Artikel lasse ich außen vor, dafür existiert schließlich ein separates Archiv. Uniques soll Archiv für fremde Werke sein. Inhaltlich passiert nicht viel. Ein Bild, samt Link und Titel. Mehr braucht es nicht. Ich habe das Archiv ganz gezielt auf 10 Bilder pro Seite beschränkt. Mehr führt nur zu Lade- und Scrollorgien. Langfristig werden es vielleicht noch mehr, aber erstmal fühlen sich 10 pro Seite gut an.

Dieser neue Teil des Blogs soll puren Showeffekt besitzen. Bei einigen Seiten der Liste, kommen mehr neue Artikel als bei anderen. Besonders The Bold Italic legt ein hohes Tempo vor. Hier nehme ich es mir raus zu filtern und nur die Rosinen rauszupicken. Nicht alle neuen Beiträge sind dort wirklich Referenzmaterial.

Gestaltung

Eigentlich wollte ich Uniques nutzen, um mal abseits der Linie des Blogs zu gestalten. Alle Versuche verliefen jedoch ins Nichts, weshalb ich wieder zur Einfachheit gewechselt bin. So minmalistisch ging es hier noch nicht zu, aber dort passt es, weil die Bilder der fremden Artikel klar im Mittelpunkt stehen sollen und nicht meine Gestaltung.

Trotzdem soll es als eigener Teil der Seite wirken, drum bekommt Uniques eine Zentrierung spendiert. Grundraster ist das gleiche wie üblich, aber die Gestaltung ist entgegen dem Blog auf 1024px Breite angepasst. Je mehr Artikel in die Liste wandern, umso mehr werde ich etwas verändern. Uniques wird ein schönes Labor für ein paar CSS-Experimente. Das Stylesheet ist ja schon jetzt auf etwas mehr Farbe vorbereitet. jQuery wird dort auch etwas mehr Einzug halten. Vermutlich werde ich meinen Kalender im Archiv als Vorlage nehmen.

Angedacht ist auch das jeweils letzte Bild der Liste, auf die Startseite des Blogs zu nehmen, aber bisher existiert dafür kein Platz. Kommt als neuer Punkt auf die To-Do-Liste für Version 8. Nervig war auch die Anpassung der Menüpunkte im Kopf der Seite. Aus ehemals zwei Links sind nun vier geworden und dabei wird es nicht bleiben. Erstmal habe ich da oben alles um ein paar Pixel verschoben.

“If you build it, they’ll come.”

Selten hat sich im Blog etwas Neues so schnell (fast) von selbst erschaffen, wie dieser neue Abschnitt. Bin überzeugt davon, dass es auf dieser Seite Sinn macht. Habe schon im Vorfeld oft ein Archiv dieser Art gesucht, um einem Dritten mal schnell zu zeigen, was eigentlich machbar ist. Zwar ist die Pflege neuer Links umständlicher als gedacht, aber noch hält sich der Umfang in Grenzen. Sollten mal täglich dutzende neue Links im Reader auftauchen, muss ich sicher umdenken. Dis dahin ist’s erstmal was zum Zeigen.

Beeindruckt war ich, wie sehr “mein” Wordpress mittlerweile zum Framework geworden ist. Jemand anders alles zu erklären wäre Horror, aber mir jetzt selbst jedes noch so kleine Detail der Installation (Templates, Plugins, Skripts) so vertraut, dass es ein Segen ist damit zu arbeiten. Vertrautheit ist sicher auch hier ein Schlüsselwort. Mal schauen wie sich Uniques entwickeln wird.

Feedback: 0 Kommentare

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

Die kleine Nische individuell gestalteter Blogeinträge rappelt sich langsam aber sicher zu einem populären Thema auf. Die letzten Wochen sehe ich im RSS Reader mehr und mehr Links zum Thema. Spätestens wenn Smashing Magazine sich des Themas annimmt, dann springen Armeen von Gestaltern auf den Zug auf. Ich empfehle unbedingt die Kommentare zum Artikel zu lesen. Wie schon damals die Diskussion auf deutschsprachigen Seiten, finden sich auch hier Befürworter und Gegner und wie schon vor Monaten, haben beide Seiten gute Argumente. Ich mag den eigentlichen Artikel eher weniger, aber der Kommentare wegen lohnt sich das Lesen.

Auf ein paar Punkte möchte ich hier noch einmal eingehen. Offensichtlich ist es ein Thema, das polarisiert. Weder halte ich es für die einzig beste, noch für eine überflüssige Lösung. Es ist eine neues Werkzeug, das in den richtigen Händen einen deutlichen Mehrwert bieten kann. Ein Rückschritt sehen wir, wenn jetzt alle Kommentatoren bei Smashing Magazine anfangen ihre Blogposts zu verschlimmbessern. Aus der eigenen Erfahrung heraus, kann ich aber sagen, dass dieser Prozess wunderbar als Filter für die Spreu vom Weizen funktioniert. Wer es nur als schnellen Trend behandelt, wird keine fünf Artikel dieser Art zustande bringen, denn der zusätzliche Aufwand ist am Anfang enorm. Ich bin zuversichtlich, dass dieser Ansatz erstmal nicht verwässern werden wird. Auch wenn es arrogant klingen mag, aber die Lernkurve hierfür ist ziemlich hoch und erfordert mehr als eine Tastatur und eine vorgefertigete CMS Installation.

Mir fällt es noch immer schwer, einen kurzen prägnanten Begriff zu finden. Für den weiteren Verlauf lege ich mich mal auf individuelle Artikelgestaltung fest. Was ich oft lese und höre klingt nach “Content first” oder “Das ist ja nur Profilierung”. 2009 ist Gestaltung im Netz Content. Wenn man tausendfach das Gleiche finden kann, entscheidet die Gestaltung, welche der endlos gleichen Optionen gewählt wird. Jeder Output, egal ob Text, Musik oder Bild ist Profilierung. Selbst völlig objektive Nachtichtenmedien profilieren sich in ihrer Art der Berichterstattung. Es ist völlig abwegig zu glauben Blogs im Schema-X seien keine pure ich-bezogene Profilierung eines Individuums. Besonders Blogs tun sich schwer, aus der Masse heraus zu ragen. Wenn man durch solch einen Ansatz seine Nische verankern kann, dann soll man es tun.

Warum ich so früh und so massiv auf diese Lösung setze ist schnell erklärt. Zum einen finde ich die Filterfunktion für neue Artikel, die so ein Ansatz mit sich bringt, hervorragend. Enorm viel Müll schafft es garnicht mehr zur Veröffentlichung. Zusätzlich bekomme ich eine zusätzliche Möglichkeit mal wieder mehr als nur CSS und Textverarbeitung zu benutzen. Es ist selten geworden, dass ich mich irgendwo als echter Gestalter auslassen kann. Schriften, Farben, Bilder auswählen und zu einer runden Komposition zusammenfügen, macht mir Spaß und kommt im täglichen Arbeitsalltag leider immer seltener vor. Dass ich so die Artikel hier verbessern kann, ist eher positivier Nebeneffekt und weniger das eigentliche Ziel.

Übrigens entsteht gerade ein Link-Archiv ähnlich wie ich es für meine Artikel habe, dann separat auch für fremde Artikel als Bild mit Link. Funktioniert schon alles, nur Gestaltung und Rahmen möchte ich noch verbessern. Wäre für Hinweise für mir noch unbekannte Beispiele sehr dankbar. Mehr Deutschsprachiges wäre toll. Bisher umfasst meine Liste folgende Seiten:

• http://www.acwe.co.uk/
• http://www.anmutunddemut.de/
• http://danny-garcia.com/
• http://dustincurtis.com/
• http://gregorywood.co.uk/
• http://jackcheng.com/
• http://jasonsantamaria.com/articles/
• http://thebolditalic.com/
• http://www.tonydewan.com/
• http://trentwalton.com/

Nächste Woche gibt’s mehr zum Thema.

Feedback: 3 Kommentare

Im Juni gestartet hat diese Seite nun seine Linie gefunden. Im Laufe der letzten Monate sind viele neue Details und Inhalte hinzugekommen. Mein Fazit bisher würde lauten: “Operation gelungen, Patient lebt.” Mein Arbeitsablauf beim Kreieren neuer Dinge der Seite ist mittlerweile wirklich nahtlos und einzig dies war mein Ziel. Es gibt nichts Angenehmeres, als das einfach alles so funktioniert wie man möchte, was nicht heißen soll, dass ich vollständig am Ziel bin.

Den Sinn der Seite zu formulieren ist schwierig. Ich glaube meine Inhalte sollen ein paar mal die Woche für fünf Minuten ein kleines Schmunzeln hervorzaubern. Ich möchte weder die Welt erobern, noch meine Meinung aufdrängen, keine Produkte verkaufen oder gar das Echo vom Echo einer alten Nachricht sein. So sieht der inhaltliche Plan für die nächsten zwölf Monate aus. Dass hier und da pure Show-Einträge kommen, stört mich dabei nicht mehr. Im Gegenteil, mir gefiel sowas bei anderen eigentlich immer sehr gut, weil man vom winzigen Nischeneintrag, mehr Persönlichkeit bekommt, als vom epischen 2000 Wörter-Massaker zur neusten Google-Beta. Hier geht es noch einfacher als bisher. Bilder werden demnächst auch mehr zum Thema.

Inhaltliches

Inhaltlich möchte ich noch eine Lösung finden, sowohl zum einen mehr Kleinigkeiten zu zeigen, als auch nicht den Feed mehrfach täglich zu spammen. Ich bilde mir ein, die Feedleser gut zu kennen. Da sind viele alte Hasen dabei, die einen feuchten Furz auf viele neue Sachen geben werden. Ich bin daran interessiert fremde Texte zu präsentieren, auch weil das Schreiben mir fast mehr Zeit stiehlt, als das Gestalten. Hier aber passende Schreiberlinge zu finden, ist im Deutschsprachigen wirklich schwierig. Geld kann ich keins zahlen und die meisten brauchbaren Sachen wissen um ihren Wert und kleckern lieber auf den eigenen Haufen, so wie ich auch. Thematisch ist hier für alles die Tür offen.

Gestaltung

Gestalterisch bin ich sehr zufrieden. Viele nervige Details, sind mittlerweile verbessert. Die Schriftgröße ist für den Text eines Artikels minimal gewachsen, von 13 auf 14 Pixel. Einige CSS3-Neuerungen sind schon drin, so bricht im Archiv jeder dritte Listeneintrag um und hält so den Float wie er sein soll, egal welche Höhe einzelne Elemente haben. Bei der Einbindung artikelbezogener Daten (CSS/Javaskript) ist mehr Ordnung drin, auch in der Ordnerstruktur auf dem Server. Es wurde dann doch recht schnell sehr unübersichtlich.

auch weil Wordpress’ Plugin Fundus für fast alles eine Lösung parat hält oder man wenigstens immer eine gute Grundlage erhält. Ich habe ein sehr schönes Plugin für Subtitel gefunden und nutze ein Custom-Field für HTML-Formate im Titel.

Alles zielt mehr und mehr auf die individuelle Gestaltung einzelner Einträge. Was mittlerweile an Werkzeugen existiert, treibt mir immer wieder die kleine imaginäre Träne ins Auge. CSS3 ist der heiße Scheiß und ich bin wieder wie das kleine Kind, was einen Satz neuer Lego-Steine bekommen hat und sich grad überlegt, was man daraus bauen kann. Auch wenn lange nicht alles perfekt funktioniert und einiges deplaziert wirkt, vom Gesamtbild bin ich überzeugt genug, es beizubehalten.

Ich habe lange überlegt den Kopf der Seite zu ändern. Fast alle Seiten mit einem ähnlichen Ansatz trennen ihren Kopf ganz klar vom Rest der Seite, was viele Probleme löst. Ich hab viel probiert und lange überlegt, um dann jedoch bei der jetzigen Lösung zu bleiben. Der Grund ist einfach. Ich mag die verdammt “offene” Wirkung der Seiten. Ein Blockelement am Kopf zerstört mir viele der bisherigen Gestaltungen. Was ich wohl ändern werde ist das Logo. Es wird etwas schrumpfen. Der Grauton des Footers ist suboptimal für einige farbige Einträge. CSS3’ rgba() ist hier die Rettung und es wird integriert, wenn ich alle kleinen Details zu einem größeren Update gebündelt habe. Ich habe überlegt die Darstellung von Kommentaren samt Formular per Javaskript aus- und einzublenden, mich aber dann dagegen entschieden. Auch hier bleibt alles beim Alten. Das Archiv wird irgendwann auch mal wieder ein Thema, noch warte ich ein paar Dutzend Einträge, um genug Vorlauf an Einträge mit Teaserbildern zu haben. Diese Bildern werden dann essentielles Element und hier viele Artikel nur mit dem Dummy zu füllen, wäre eine schlechte Lösung.

der übliche Rest

Ich bin daran interessiert einen separaten Blog oder eine Linkliste für individuell gestaltete Online-Artikel zu basteln, also nicht nur meine sondern die vielen anderen, die es mittlerweile zu bestaunen gibt. Die Details machen die Sache aufwendiger als gedacht, aber sagen wir mal so: es läuft. Ein Feed aus dem Google-Reader, hier als Unterseite präsentiert ist kein Problem, aber leider wirken solche Links ohne Screenshot nicht und leider liefern nicht alle ein Bild im Feed mit. Mal schauen, wie die Lösung hier aussehen wird. Nur noch ein Screenshot fehlt, der Rest funktioniert schon mit einem Tag im Reader und meinem alten Skript zur Darstellung eines Feeds.

Auch wenn Eigenlob furchtbar stinkt, verglichen mit 2008, finde ich die Seite deutlich an Profil geschärft und mehr möchte ich auch nicht. Nur eine Kleinigkeit fehlt noch…vielleicht jetzt schon der Vorsatz für 2010. Fazit: die nächsten Monate geht alles so weiter wie bisher mit weiteren kleinen Verbesserungen hier und da. Die nächsten Tage werde ich auch mal ein paar neue Details zum Arbeiten mit invividuell gestalteten Artikel festhalten. Wünsche ein angenehmes Wochenende.

Feedback: 4 Kommentare

Im¹ Designtagebuch wird heute der Neuanstrich von Neckermann vorgestellt. Ein Absatz ist besonders erwähnenswert:

dt-Leser balabushka warf in den Kommentaren zum ftd Relaunch die Frage auf, weshalb eigentlich so viele Hauptnavigationen in den letzten Jahren aus dem linken Bereich nach oben gewandert sind, wo sie in Form einer horizontalen Leiste aufgehängt sind. Gute Frage. Anders als eine vertikal angelegte Navigation, stößt ein horizontaler Aufbau schnell an seine Grenzen. 960-980 Bildpunkte sind nach wie vor das Maß aller Dinge, wenn es um die Breite geht. Für Websites mit nur wenigen Hierarchieebenen und nur 5-6 Hauptnavigationspunkten stellt diese Begrenzung kein Problem dar. Nachrichtenportale wie Stern oder Spiegel Online beschränken sich auf die Abbildung von drei bzw. vier Hierarchieebenen. Wenn es, wie bei n-tv in die fünfte Ebene geht, darf ein Brotkrumenpfad nicht fehlen, ansonsten verlöre man die Übersicht. Bei noch komplexeren Strukturen hingegen, etwa wie bei Ebay (6 Ebenen) oder innerhalb von Intranet-Umgebungen großer Unternehmen, ist eine linke Menüleiste unverzichtbar. Nichts scheint also bei großen Onlineshops näher zu liegen, als auf eine linke Navigationsspalte zu setzen.

Der starke Trend hin zu einer horizontalen Navigationsleiste wurde nicht zuletzt auch durch uns Designer befeuert. Eine zentriert sitzende, zweizeilige Leiste sieht einfach schicker aus, als eine L-Lösung. […]

Aus der Rubrik ganz harter Tobak, der vielleicht von ein paar weiteren Augen hätte vorher gelesen werden sollen. “Uns Designer” ist immer deplaziert und unterstreicht die Unsicherheit der eigenen Meinung. Ich-Designer setzen um was funktioniert und nicht was “schick” aussieht, besonders wenn es um das Aufbereiten von Informationen geht, was bei einem Shop wie Neckermann die verdammt einzigste Priorität sein sollte. “Schick” ist immer subjektiv, Funktion immer objektiv.

Ich finde es auch hinterfragenswert, wie hier argumentiert wird, ob oder wie sinnvoll Navigationen links oder oben plaziert sind. Die Form folgt der Funktion, das klingt so einfach wie es ist. So lange wir Webseiten vertikal scrollen, so lange werden horizontale Pixel immer wertvoller sein als vertikale. Navigation ist nach oben gewandert, weil viele erkannt haben, dass eine linke Navigationsleiste zu viel toten horizontalen Raum produziert. Wer dies noch immer in Frage stellt, möchte sich einfach eine Produktseite bei Neckermann anschauen.

Auch was Blickmuster unseres westlichen Auges betrifft, so gehen linke Navigationen oft unter, weil die Köpfe der Seiten immer stärker wachsen und linke Navigationen mehr und mehr aus dem ersten Blick verdrängen. Kopfleisten dagegen lassen sich immer einfacher in den Kopf einarbeiten. Wer dagegen mit Dutzenden Navigationsebenen zu kämpfen hat, sollte lieber ansetzen seine Strukturen zu vereinfachen, als sich mehr Platz für die Elementen zu suchen. Für 9 von 10 Fällen findet sich kein Argument gegen eine Kopfleiste. Gleichzeitig hat man immer noch keine Lösung gegen den toten Raum, den linke Navigationen immer wieder produzieren.

Feedback: 6 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