coldheat

Webdesign ist der kleinste gemeinsame Nenner

• Mo, 19. Mai 2008,
• 522 Wörter,
• 3 Kommentare,
• Tags:
• CSS,
• Typografie,
• Website

Diese Woche gibt es ver­mut­lich ein klei­nes neues Update, pri­mär der Seiten-Kopf, wenn ich es schaffe auch das Archiv. Ich sitze seit letz­ter Woche dran, sofern es die Zeit zulässt, noch wei­ter zu otpi­mie­ren. Die jet­zige Kopf­zeile mit den Bilder-Links ist wirk­lich sehr effek­tiv. Mehr als jeder zweite Besu­cher, der sich auf die Seite ver­läuft, klickt auch einen die­ser obe­ren Links. Als ich damals mit Word­Press anfing, hatte ich ein sol­ches Ele­ment nicht in Pla­nung. Nun funk­tio­niert es, wirkt aber depla­ziert, genau dies soll sich ändern.

Fol­gende These nach den letz­ten Tagen. Web­ge­stal­tung, inhalt­lich und visu­ell, von der Eimilch­le­gen­den­woll­milch­sau, oder wie Ben es neu­lich als Simic bezeich­nete, ist der kleinste gemein­same Nen­ner aus Pro­gram­mie­rer, Autor und Desi­gner.

Klas­sisch ist der Weg von der Skizze, über das Photoshop-Template hin zum Style­s­heet. Skizze und Tem­plate fin­den bei mir nur noch im Kopf statt, zumin­des­tens bei den Pro­jek­ten, wo ich völ­lige Kon­trolle habe. Ich weiß was gestal­te­risch geht und was nicht. Ich weiß genau, was ich hier ändern möchte. Es wäre ein­fach, eine Gra­fik vor­zu­be­rei­ten und diese dann ganz ein­fach zu plat­zie­ren, mit CSS den Text ver­ste­cken und gut: image repla­ce­ment. Der Gra­fi­ker in mir schreit ja, der Web­ge­stal­ter nein, der Autor hält sich da raus.

Wenn ich mit die­ser klei­nen Geschichte fer­tig bin, dann wird man sehen, dass ich natür­lich keine Gra­fik ver­wende, son­dern nur mit HTML und CSS Ele­men­ten arbeite. Der Auf­wand dafür und die immer sicht­ba­rer wer­den­den Gren­zen (Browser-Kompatibilität) sind der beste Leh­rer, wenn es um Web­ge­stal­tung geht. Keine noch so alte Schule, kann die Rea­li­tät erset­zen. Trial&Error scheint hier ein guter Leh­rer.

Unter­halt­sam ist die­ser Arti­kel von Michael Prei­del aus der letz­ten Woche. Alles was dort steht ist 100% kor­rekt. Der Arti­kel ver­schweigt jedoch Details, wie z.B. den Unter­schied im Schrift­bild bei serifen- und seri­fen­lo­sen Schrif­ten. Nicht umsonst wählt der Arti­kel eine seri­fen­lose Schrift und über­haupt kann diese schöne Anlei­tung auch lei­der nicht über Schrift­dar­stel­lung auf Windows-Systemen, hin­weg trös­ten. Egal ob echte oder fal­sche Kapi­täl­chen, auf Windows-Systemen wird alles zer­matscht. Auch wenn ich mit über­teu­er­ten Macs wenig anfan­gen kann, allein die Schrift­dar­stel­lung unter OSX wird dafür sor­gen, dass mein nächs­ter pri­va­ter Rech­ner, ein Apple wird.

Web-Typografie scheint die Suche nach der Nadel im Heu­hau­fen. Das Regel­werk scheint gren­zen­los, ebenso jedoch auch die Ergeb­nisse. Typo­gra­fie ist für mich die Kon­trolle von Schrift. Irgend­wie scheine ich jedoch im Grenz­fall nur kon­trol­lie­ren zu kön­nen, wie unter­schied­lich, dass Ergeb­nis in allen Brow­sern ist. Mer­ken könnte man sich:

• Span-Elemente abso­lut zu posi­tio­nie­ren hat klare Gren­zen
• line-height scheint bei gro­ßen Schrift­grö­ßen von Brow­ser zu Brow­ser immer unter­schied­li­cher aus­zu­fal­len. Kein Drama bei Men­gen­text, aber kri­tisch für pixel­ge­naues Posi­tio­nie­ren gro­ßer Schrift-Elemente
• rela­tive Schrift­grö­ßen sind auch immer noch ein rotes Tuch, wenn es im wirk­lich exakte Posi­tio­nie­rung geht, die alle Brow­ser gleich dar­stel­len sol­len
• große Schrif­ten und Kon­trast um Him­mels­wil­len ver­mei­den. Window’s Cle­ar­Type kotzt sonsts eimer­weise den Raum voll
• Internet-Explorer 6 ist keine wirk­lich ernst­zu­neh­mende Platt­form mehr

Und die Moral von der Geschicht? Vetrau CSS bei Schrif­ten nicht. Für wirk­lich solide Typo-Spielereien fehlt noch immer eine Basis an wirk­li­cher Browser-Kompatibilität. Es bleibt wei­ter ein­fa­cher nur’ne Gra­fik zu machen, als zu ver­su­chen echte HTML-Schriften pixel­ge­nau zu posi­tio­nie­ren. Ich hoffe für mein Bei­spiel die gol­dene Mitte gefun­den zu haben.

Zum gleichen Thema

• John F. Obama und ein PosterFundstücke

• 1024 PixelFundstücke

• zusätzliche Änderungen und skalierbare BilderCSS

• Site Updates und was noch so zu machen istCSS

• kleines neues FeatureFundstücke

• neues IconFundstücke

• Wicked Worn HeaderFundstücke