Sven Rautenberg: Der heilige Gral des CSS-Designs?

Beitrag lesen

Moin!

irgendwo hab ich mal gelesen, dass viele Leute Webseiten einfach nur als ein weiteres Printmedium ansehen/nutzen, mit dessen Konventionen...eben "pixelgenaues" Layout

...und das läßt sich am "einfachsten" per Tabellen lösen

Da will ich doch mal energisch widersprechen. Zwar kann man mit Tabellen unstrittig auch recht pixelgenau arbeiten, aber "am einfachsten" sicherlich nicht. Da glänzt dann doch wieder CSS, denn damit kann man wirklich am einfachsten ein pixelgenaues 1:1 auf den Bildschirm übertragen, indem man einfach alle möglichen Elemente absolut positioniert. Dass Puristen und semantische Textauszeichner mit dem HTML-Ergebnis solch einer Pixelorgie nicht wirklich zufrieden sind, ist eine andere Sache - aber wenn es um Einfachheit geht, liegt auch dort CSS eindeutig vorn.

Zumal es mit CSS im Gegensatz zum Tabellendesign wesentlich einfacher ist, nachträglich noch mal eben kleine Korrekturen durchzuführen. Das Verschieben um zehn Pixel nach links ist mit CSS genau ein Eintrag in der CSS-Datei - gültig für alle Seiten, die sie verwenden.

Mit Tabellen und einem fähigen WYSIWYG-Editor hat man es _vielleicht_ auch einigermaßen leicht, die Verschiebung durchzuführen, muß aber immerhin die Änderung in JEDER einzelnen HTML-Seite machen.

Im Zweifel aber sitzt man mit einem Quelltexteditor vor dieser Aufgabe und darf sein komplexes Tabellengerüst nochmal komplett neu durchrechnen - eine tierisch nervige Aufgabe, insbesondere wenn es aufgrund von Schludrigkeiten zu Darstellungsfehlern in einzelnen Browsern kommt, die der Validator nicht zwingend aufdecken kann, weil das HTML tatsächlich valide ist. (Aus diesem Grund entstand damals, als ich auch noch mit Tabellen arbeitete, mein Plugin "Tabellenzerleger" für Phase 5 - es funktioniert aber auch mit vielen anderen Editoren, die die gleiche Schnittstelle benutzen.)

ja .. CSS ist in in der Darstellung pixelgenauer Layouts etwas begrenzt, liegt hier aber weniger an CSS als an unwilligen Browsern, dafür gibt es andere Möglichkeiten (Stichwort "liquid design")

CSS ist bei der Darstellung pixelgenauer Layouts ideal - sofern man solche Layouts machen will. Die Probleme mit CSS entstehen eigentlich erst dann, wenn man der HTML-Seite mehr Freiheit geben will, und sie entstehen hauptsächlich durch den IE, der sich nicht an jahrealte Standards hält bzw. willkürlich einfach nur einen Teil dessen versteht - Stichwort min-width/max-width, zwei für flüssiges Layout _mit_ Lesbarkeitshilfestellung eigentlich unerläßliche CSS-Anweisungen.

dem Nutzer ist es letztlich egal, WIE etwas entsteht, er will nur das es ihm gefällt...und gefallen tun nicht nur "pixelgenaue" Layouts, aber viele scheinen das zu denken

Diesen Satz kann man nur doppelt unterstreichen und rot einrahmen. Nach meiner Erfahrung entscheiden die Auftraggeber sich in der Regel für ein in einem Pixelprogramm erstelltes Design, verlangen aber keinesfalls, dass das fertige Produkt wirklich pixelgenau aus dem Browser wieder herauskommt.

Im Gegenteil: Flüssiges Layout ist sogar ein großer Vorteil, denn man weiß ja nie, was insbesonder beim Auftraggeber für Bildschirm- und Browserfenstergrößen vorhanden sind. Manche Mitarbeiter dort mögen nämlich das links eingeblendete Fenster mit den Bookmarks auch sehr gerne, und haben so plötzlich trotz 1024er-Auflösung oder mehr nur noch knappe 900 Pixel Breite für die Webseite zur Verfügung. Da ist es dann blöd, wenn man ständig horizontal scrollen muß. :)

Als Resultat erhält man mit flüssigem, anpassungsfähigem Layout per CSS eine Webseite, die bei jeder Fenstergröße (oder zumindest bei den zu erwartenden Fenstergrößen) dem ursprünglichen Design sehr ähnlich sieht (mit Abstand zum Browserfenster, Menü, Kopfleiste etc.) und immer (meistens) ins Fenster hineinpaßt. Extreme Fenstergrößen kann man natürlich nicht unbedingt erschlagen, Tabellen würden sich aber noch viel viel schwerer bändigen lassen.

ps: in dem Zusammenhang zwar erst in Jahren akut aber trotzdem interessant...wie wollen die Designer/Auftraggeber das schöne pixelgenaue Layout auf allen (!!) Viewports gleich ausgeben...ich sag nur Handy und Co.

Ich hatte meinen Palm 3 (16 Graustufen-Grafik) mit dem Eudora-Browser über die Infrarot-Schnittstelle meines Laptops mal mit dem Internet verbunden. Das Ergebnis war sehr ... hm... interessant. :)

- Sven Rautenberg