nicht angemeldet
Um das Problem mit den kleinen Anzeigen wirst Du nur herumkommen, wenn Du möglichst auf Grafiken verzichtest - oder sagen wir mal, Dein Layout nicht auf Grafiken aufbaust, sondern auf Text.
Das häufig verwendete Tabellenlayout ist wahrscheinlich die Todsünde überhaupt, schlimmer wird's nur noch, wenn man alles pixelgenau festlegt.
Tabellen sind doch sicherlich nur dann ein Problem, wenn man genau Größenangaben verwendet. Ohne (oder nur mit Prozentangaben) dürfte es doch keine Probleme geben, oder?
Das sehe ich anders. Das Problem bei Tabellen ist, daß sie nicht aus ihrem Korsett raus können. Eine Tabelle, die du mit drei Spalten definierst, hat immer drei Spalten. Das wird auf einem Monitor, der eh immer etwas breiter als hoch ist, gut funktionieren.
Nun stell' Dir aber mal vor, was in der Anzeige eines Mobiltelefons passiert. Da ist mit Glück Platz für die mittlere Spalte, in der sich ja meistens der Inhalt befindet. Dank der Tabelle müssen aber auch noch die beiden Menüspalten links und rechts mit reingequetscht werden.
Ersetzt Du die dreispaltige Tabellen durch drei <divs>, die mit CSS positioniert werden, hast Du zwei Möglichkeiten, dem Problem aus dem Weg zu gehen:
1. Du positionierst die Menüspalten (jetzt: Menü-<divs>) mit float, so daß sie links bzw. rechts am Rand liegen und der Inhalt quasi um sie herum fließt, oder in diesem Falle genauer gesagt zwischen ihnen hindurch:
float:left
|
AAAAA Der Text BBBBB
AAAAA in der BBBBB
AAAAA Mitte BBBBB
|
float:right
Der Effekt von float ist derselbe, wie bei Grafiken, die in HTML mit align=left oder right positioniert wurden. Auch dort fließt der Text um die Grafik herum.
Wird der Platz zu schmal, können die Elemente aber, im Gegensatz zur Tabelle, auch automatisch vom Browser übereinander angeordnet werden:
AAAAA
AAAAA
AAAAA
BBBBB
BBBBB
BBBBB
Der
Text
in
der
Mitte
Bei einer Tabelle müssen A und B auf Gedeih und Verderb links und rechts vom Text stehen.
2. Du kannst für jedes Ausgabemedium ein Style Sheet definieren. Die Spalten A und B von eben könnten dann in normalen Browsern auch fest links und rechts positioniert werden (ohne float), in Handhelds aber über dem Text. Oder wenn in B nur eher unwichtige Daten sind, kann man dieses <div> auch ganz verschwinden lassen.
Man kann auch ohne Tabellen Seiten zusammenstellen, die denen mit Tabellen in nichts nachstehen müssen und in der Regel auch noch kleiner und handlicher sind.
Hast du das ein Beispiel? Kann ich mir irgendwei gar nicht so recht vorstellen ...
Einige Beispiele hat Stefan ja schon aufgelistet (schönen Dank für die Nennung meiner Seite:).
Ein einfaches: http://kino-fahrplan.de/magazin/, die Tabellenversion (also das Original) dazu findet sich unter http://http://www.magazinfilmkunst.de/. Das Bild im Verzeichnis auf meinem Server zeigt übrigens, was mit der Tabellenversion passiert, wenn man das Fenster verkleinert. Du solltest bei diesem Beispiel unbedingt mal die Übersichtlichkeit der Quelltexte vergleichen!
Vor ein paar Tagen kam hier außerdem eine sehr schöne Adresse durch: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html.
Den Effekt finde ich sehr genial. Du brauchst allerdings einen vernünftigen Browser, der IE kann die dort verwendeten Standard-CSS-Anweisungen nicht umsetzen, Opera AFAIK auch nicht. Mit Mozilla geht's aber einwandfrei (der Browser ist übrigens auch sonst ganz klasse, ich habe meinen IE jetzt in's "Kämmerchen für Kompatibilitätstests" verbannt:).
Aber davon abgesehen:
Ich will mich nicht so weit aus dem Fenster lehnen und sagen, daß man jede Tabellenseite exakt pixelgenau 1:1 in eine CSS-Seite umwandeln kann.
Ich bin aber durchaus der Meinung, daß sich die allermeisten Seiten wirklich gut umsetzen lassen und war während der Umstellung an meinen eigenen Seiten (und inzwischen einigen anderen) doch immer wieder überrascht.
Zum einen, weil CSS garnicht so sehr schwierig ist, zum anderen, weil meine Seiten nach der Umstellung im Schnitt ein Viertel bis ein Drittel kleiner sind - es fehlt halt der ganze Tabellenkram.
Und der dritte Vorteil ist, daß der HTML-Code einfacher zu bearbeiten ist - auch wieder wegen dem fehlenden Tabellenkram. Es steht in den Dokumenten wirklich nur noch das drin, was auch an Inhalt reingehört.
Dazu kommen dann noch Dinge wie sehr gute Lesbarkeit auf allen Medien (weil mit HTML nur noch der Sinn von Textstellen definiert wird, nicht aber sein Aussehen) oder auch bessere Indizierung durch Suchmaschinen (die sich nicht mehr durch tonnenweise <td> quälen müssen, sondern direkt zum <h1>-Titel kommen).
Grundsätzlich sollte man bei der Arbeit mit CSS aber offen sein für neue Layouts und nicht immer an dem alten Schema "Logo oben quer, drei Spalten drunter" festhalten. Etwas Kreativität kann nicht schaden. Der Versuch ist es jedenfalls wert.
Gruß,
soenk.e