Einblick in mein Arbeitsmuster bei individueller Artikelgestaltung.

individuelle Grundlagenforschung

• Mo, 30. November 2009,
• 1223 Wörter,
• 2 Kommentare,
• Tags:
• CSS,
• Raster,
• Web Design,
• Website

Indi­vi­du­elle Arti­kel­ge­stal­tung ist wie eine Schach­tel Pra­li­nen, man weiß nie was man bekommt…wenigstens am Anfang. Ich hab lange über­legt, was mein per­sön­li­cher Aha-Moment war. Es ist die­ser alte Arti­kel von A Brief Mes­sage. Seit­dem möchte ich mehr als nur den puren Text ver­öf­fent­li­chen. Nach­hal­tig­keit ist ein Schlüs­sel­wort. In einer Zeit, wo selbst per­sön­lichste Wort­fet­zen zum Weg­werf­pro­dukt mutiert sind, ist es schwer gewor­den im Netz Inhalte zu fin­den, die auch nach Jah­ren noch das Anschauen loh­nen.

Ich möchte Pau­sens­nacks ver­öf­fent­li­chen, die noch Jahre spä­ter schme­cken. Die alten 2000 Wör­ter Mons­ter eig­nen sich hier­für weni­ger, drum bin ich auch weg davon. 500 Wör­ter sind ein ziem­lich guter Richt­wert. Sol­che Ein­träge ent­wi­ckeln sich auch viel stär­ker, als ein purer Text. Frü­her oder spä­ter opfert man Inhalt für Gestal­tung und noch spä­ter fin­det bei­des völ­lig par­al­lel ohne Kom­pro­misse stattt. Ich habe noch keine Formel-X gefun­den, die alle Pro­bleme löst. Viel­mehr besitzt fast jeder Ein­trag seine Geschichte, was die Arbeit und auch die per­sön­li­che Nach­hal­tig­keit so wert­voll macht.

Lein­wand

Der aktu­elle Auf­bau der Seite bedient zu 120% das Ziel mög­lichst ein­fach und ohne Gren­zen ein­zelne Arti­kel zu gestal­ten. Ich mag den Begriff Frame­work nicht, weil er so nach Kom­pro­miss klingt, aber Sie­ben ist ein ziem­lich guter Rah­men und Lein­wand gewor­den. Was ich nicht dabei ver­gesse, sind die “alten” Tugen­den: Tren­nung von Form und Inhalt, Les­bar­keit, Vali­di­tät, Seman­tik, ein­fa­che Struk­tur. Wir haben Jahre gebraucht um hier Ord­nung zu bekom­men. Dies alles für den Show-Effekt zu opfern ist falsch. Alles was ich mitt­ler­weile ver­öf­fent­li­che funk­tio­niert auch ohne die indi­vi­du­elle Gestal­tung. Alle zusätz­li­chen Regeln (CSS, Javaskript) sind nur das Eis auf dem Kuchen, aber kein Muss.

Unver­zicht­bar ist ganz klar auch ein Gestal­tungs­ras­ter. Es hält die Sei­ten zusam­men, erleich­tert unge­mein das Indi­vi­dua­li­sie­ren und ist Ret­tungs­leine für jeden miss­lun­ge­nen Ver­such. Je fei­ner das Ras­ter, umso mehr Frei­heit ent­steht spä­ter beim Plat­zie­ren der Ele­mente. Ich bin auch über­zeugt, dass es ohne eine ein­fa­che und logi­sche HTML-Struktur nicht geht. Ohne zu sehr die Hosen run­ter zu las­sen, aber es gibt schon genug Feh­ler, die ich in einer neuen Vari­ante nicht mehr machen würde. Die­ser Pro­zess ist ein end­lo­ses Try&Error. Vor­aus­den­ken ist ein wei­te­res Schlüs­sel­wort. Je mehr man indi­vi­dua­li­siert, umso stär­ker ver­schmilzt man mit dem Sta­tus Quo der “nor­ma­len” Gestal­tung. Der schlimmste Fall, näm­lich der Rück­schritt auf das Stan­dard­lay­out, muss immer ohne Ein­schrän­kun­gen mög­lich sein.

Browser- und Pro­gres­si­ons­nazi

Indi­vi­du­elle Arti­kel­ge­stal­tung ist auch eine Grund­hal­tung ob und wie Onlin­ein­halte Platt­form überg­rei­fend aus­se­hen sol­len, dür­fen oder müs­sen. Wir betrei­ben hier pri­vate kleine Sei­ten, mit ziem­lich homo­ge­ner Leser­schaft. Ich traue mei­nem Leser zu, sich einen Fire­fox, Chrome oder Safari instal­lie­ren zu kön­nen und diese immer aktu­ell zu hal­ten. Vom Gedan­ken die IE-Nutzer hier­mit bedie­nen zu wol­len, muss man sich ver­ab­schie­den und wer gleich rich­tig voran schrei­ten möchte, sollte sich auch an aktu­ellste CSS3-Eigenschaften bin­den. Eini­ges davon ist optio­nal (border-radius) und ska­liert auch wun­der­bar in beide Rich­tun­gen. Ande­res (rgba, pseudo-selectors) dage­gen ist so wert­voll, dass man es ein­fach nut­zen muss.

Text oder Bild

Was ist frü­her da, Inhalt oder Gestal­tung? Mitt­ler­weile bei mir weder das eine, noch das andere. Ein paar Anek­do­ten zu bis­he­ri­gen Arti­keln. Alles Banane begann als Tri­but zum Sim­psons Jubi­läum, der sich text­lich doch ein­fach nicht in Form bie­gen ließ, des­sen Gestal­tung aber prak­tisch fer­tig war. Der neue Text war dann in kur­zer Zeit geschrie­ben und das Motiv aus­ge­tauscht. Hier dik­tierte Gestal­tung klar das Thema.

Anders dage­ge­gen Anti­ci­ti­zen One, der viel­leicht Zeit inten­sivste Arti­kel bis­her. Der jet­zige Text ent­spricht der drit­ten Fas­sung. Die Gestal­tung ist nur ein Schat­ten der ursprüng­li­chen Idee und ein schö­nes Bei­spiel, wie man sich auch in eine fal­sche Rich­tung fest­lau­fen kann. Ange­dacht war sehr auf­wen­di­ges Bild­ma­te­rial. Hier­für habe ich einige Stun­den in Garry’s Mod rum­ge­klickt und teil­weise bekom­men was ich wollte. Als es dann an die Umset­zung im Brow­ser kam, lief alles nicht so wie ich wollte und die ursprüng­li­che Idee hätte eben jenen zusätz­li­chen HTML-Code ver­langt, den ich so expli­zit zu ver­mei­den ver­su­che. Sicher­lich einer der auf­wen­digs­ten und lehr­reichs­ten Ver­su­che.

Der “erfolg­reichste” Arti­kel die­ser Art ist auch der am schnells­ten hin­ge­rotzte mit prak­tisch kei­nem Inhalt: Learning.

Inspi­ra­tion oder Funk­tion folgt Form

Inspi­ra­tion ist auch so ein ver­fälsch­tes Wort. “50 inspi­ra­tio­nal Web­de­signs to copy from” beherrscht auf vie­len Galerie-Seiten das Tages­ge­schäfft. Im Gegen­satz zur dreis­ten Kopie, lässt sich bei die­sem Thema aber wirk­lich Inspi­ra­tion fin­den. Ein tol­les Bild, ein inter­es­san­ter Kon­trast, ein schö­ner Font. Mehr denn je, hab ich pure Bild­blogs im RSS-Reader. Alte Film­pos­ter sind immer eine exzel­lente Quelle für einen Gestal­tungs­an­satz. Wer hier nach Ideen sucht, sollte ins­ge­samt mehr nach gedruck­tem Mate­rial schauen: Maga­zine, Pos­ter, Flyer geben gute Grund­la­gen. Grund­sätz­lich schaue ich eher nach älte­rem Mate­rial, ein­fach weil es unbe­kann­ter und meist mit weni­ger Ele­men­ten mehr aus­drückt, als heu­tige Schlagschatten-Verlaufsorgien. Was mich zu einem wei­te­ren Punkt bringt.

soweit so gut

Ich werde mich hüten Regeln dik­tie­ren zu wol­len, möchte aber etwas mein Mus­ter beschrei­ben. Grund­sätz­lich suche ich immer nach einem guten Ansatz. Eine gute Schrift. Ein tol­ler Kon­trast. Ein mar­kan­tes Bild­mo­tiv. Eine ein­drucks­volle Tex­tur. Wenige der Zuta­ten möchte ich mischen, aber zuviel und die Wir­kung der ein­zel­nen Ele­mente ver­wäs­sert. Ich möchte auch die auf­wen­di­ge­ren Ele­mente gleich ins Auge sprin­gen las­sen und nicht erst am Ende eines lang zu scrol­len­den Tex­tes ver­ste­cken.

Far­big­keit besitzt eine steile Lern­kurve. Mag Brow­ser überg­rei­fende Dar­stel­lung von HTML/CSS noch irgend­wie auf den kleins­ten gemein­sa­men Nen­ner zu brin­gen sein, so sind Far­ben noch viel sen­si­bler. Es ist prak­tisch unmög­lich die per­sön­li­che Far­big­keit auf ein zwei­tes Sys­tem zu trans­por­tie­ren. Farb­pro­file, Gam­ma­werte und per­sön­li­che Prä­fe­ren­zen des Nut­zers, ver­zer­ren jedes Farb­bild. Auf Apple-System herrscht ein andere Gam­ma­wert. Apple ist hell, Win­dows dun­kel. Farb­pro­file in Bil­der ein­zu­bet­ten oder in ein System-RGB zu kon­ver­tie­ren, ergibt im Mix mit ech­ten HTML-Farbwerten sicht­bare Unter­schiede. Beson­ders sicht­bar wird die­ser Effekt, wenn Bil­der mit Hin­ter­grund ver­schmel­zen sol­len. Zwei Links zum Thema, die mei­ner Mei­nung nach alles auf den Punkt brin­gen: Save for the Web, Sim­ply und The Mys­te­rious “Save For Web” Color Shift. Grund­sätz­lich ver­trägt Web­de­sign eher mehr Kon­trast als zu wenig.

Eine alles umfas­sende Lösung für zusätz­li­che Fonts exis­tiert ein­fach nicht. Alles hat bis­her Vor- und Nach­teile. Gene­rell ver­su­che ich so weit wie mög­lich ohne zusätz­li­che Schrif­ten aus­zu­kom­men. Für den sel­te­nen Fall, kommt bei mir sIFR zum Ein­satz. @font-face bie­tet mir noch zu viele Stol­per­steine und das Rie­sen­pro­blem deut­scher Umlaut. Jeder wirk­lich tolle Font, bringt eben noch keine Umlaute mit und das Packet selbst um Umlaute zu erwei­tern, geht mir dann zu weit.

Für Bil­der fin­det man genug kos­ten­lose gute Quel­len, glei­ches gilt für Schrif­ten. Hin­ter­grund­bil­der zu set­zen ist noch etwas sen­si­bler, was sich spä­tes­tens mit brei­ter Unter­stüt­zung (Hallo Fire­fox) von background-size erüb­ri­gen wird. Fet­tes Bild fin­den und vom Brow­ser ska­lie­ren las­sen, fer­tig.

Frankenstein-Faktor

Letzt­end­lich gilt es ein­fach nur Spaß beim Arbei­ten abseits der übli­chen Schiene zu haben. Es ist defi­ni­tiv ein Pro­zess und kein ein­fa­ches “Veröffentlichen”-Klicken im CMS sei­ner Wahl. Gleich­zei­tig ist es aber auch eine ver­dammt effi­zi­en­tes Labor für CSS-Spielerein und wenn das Mons­ter mal lebt, dann aber rich­tig. Wenn ich mir die wach­sende Liste¹ so anschaue, dann finde ich eigent­lich nichts wirk­lich Schlech­tes. Im Gegen­teil, oft sind es sehr per­sön­li­che Per­len, exakt was ich mir von einem pri­va­ten Blog 2009 wün­sche.

Zum gleichen Thema

• letzter Eintrag 2006Fundstücke

• PNG TrainingTutorials

• Details zum Update - QuellcodeWeb Design

• Sieben.5Fundstücke

• 1024.2 - Tanz auf dem RasterTutorials

• Stolpersteine bei Grundrastern für WebseitenWeb Design

• Konfuzius sagt... - Update und FrageOff-Topic