Buck: Wie programmiert man möglichst Browserübergreifend?

Hallo@all,

ich bin neu hier im Forum, meine Diplomarbeit treibt mich her ;)

Ich bin im Rahmen dieser Arbeit dabei ein Internetportal für eine spezielle Zielgruppe zu bauen. Ich würde gerne eine sehe einfache und klare Struktur wählen, so dass möglichst viele Browsertypen eingeschlossen werden. Speziell denke ich auch an Palms, Psions, Handhelds (evtl. auch demnächst Handys), die ja ein recht kleine Display haben. Leider konnte ich bis jetzt noch keine Quelle auftun, wo beschrieben wird, welche Systeme auf diesen ganzen Kleinstgeräten laufen und wie man auch dafür sinnvoll programmiert.

Mein Portal wird aktive Serverseiten beinhalten und es soll so eine Art Community aufgebaut werden.

Hat jemand Quellen, Ideen was es da zu beachten gibt, bzw. mit was man hier am besten programmiert?

Bin für Inputs überaus dankbar!

Buck

  1. Ich bin im Rahmen dieser Arbeit dabei ein Internetportal für eine spezielle Zielgruppe zu bauen. Ich würde gerne eine sehe einfache und klare Struktur wählen, so dass möglichst viele Browsertypen eingeschlossen werden. Speziell denke ich auch an Palms, Psions, Handhelds (evtl. auch demnächst Handys), die ja ein recht kleine Display haben. Leider konnte ich bis jetzt noch keine Quelle auftun, wo beschrieben wird, welche Systeme auf diesen ganzen Kleinstgeräten laufen und wie man auch dafür sinnvoll programmiert.

    Ganz kurz: http://validator.w3.org, Einstellung "HTML 4.01 strict", und sein Kollege unter http://jigsaw.w3.org/css-validator/ :)

    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.
    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.

    Gruß,
      soenk.e

    1. Danke für die Antwort.

      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?

      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 ...

      Grüße, Buck

      1. Hallo Buck,

        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?

        doch, die wird es geben, gerade bei so kleinen Ausgabegeräten. Und
        davon abgesehen ist HTML dazu gedacht, die logische Struktur eines
        Dokumentes festzulegen. Wenn Du die Navigation links und die Inhalte
        auf der rechten Seite haben willst, dann hat das nix mit der log.
        Struktur zu tun, man könnte es ja auch ganz anders darstellen.
        Stundenpläne hingegen u.ä. Sachen sind für Tabellen geeignet und ge-
        hören da rein.

        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 ...

        http://kino-fahrplan.de/ oder http://dijalog.chimerahost.de/ sind nur
        zwei Beispiel-Websites, die die Trennung zwischen Inhalt und Layout
        hervorragend umsetzen. Wenn Du mit Opera surfst, dann drücke einfach
        mal gelegentlich [STRG]+[G] und Du wirst sicher weitere Beispiele
        finden. SELFHTML ist derzeit leider kein Beispiel, was aber letzt-
        endlich auch nachvollziehbar ist.

        Viele Grüße,
        Stefan

        1. http://kino-fahrplan.de/ oder http://dijalog.chimerahost.de/ sind nur
          zwei Beispiel-Websites, die die Trennung zwischen Inhalt und Layout
          hervorragend umsetzen. Wenn Du mit Opera surfst, dann drücke einfach
          mal gelegentlich [STRG]+[G] und Du wirst sicher weitere Beispiele
          finden. SELFHTML ist derzeit leider kein Beispiel, was aber letzt-
          endlich auch nachvollziehbar ist.

          habe jetzt mal fix paar aufgeschrieben, die mir spontan einfallen und
          CSS-Layout haben: http://xse.de/css-layout.html

          Wer noch weitere, wenn möglich gute und prominente, Beispiele weiß,
          kann sie mir gern per e-Mail schicken oder hier posten, danke.

          Viele Grüße,
          Stefan

          1. Hi an alle, die bisher geantwortet haben!

            Ich finde alle Beiträge bisher sehr interessant, nützlich und inspirierend. Leider kann ich noch keine gezielten Fragen stellen (die jedoch hin und wieder auftauchen), da ich erst die ganzen Links prüfen und sacken lassen will!

            Vielen Dank bisher und ich bin auch für weiter Beiträge dankbar, vorallem was aktive Serverseiten betrifft und was die Browser der PDA-Geräte können (bzw. außer dem eigeschränkten Display NICHT können).

            Danke auch dir Stefan für die tolle Link-Liste - sind schon echt geile Sachen dabei. :)

            Was ich aber jetzt schon sagen kann: Mich irritiert, dass einerseits die Einhaltung des W3C-Standards empfohlen wird, auf der anderen Seite, selbst von den "großen" Browsern diese Standards nicht konsequent unterstützt werden. Dem User bringt dann die Einhaltung des W3C Standards auch nix - oder?

            Grüße, Buck

            1. Hallo zusammen!

              ich habe zu diesem Thread eine Frage:
              seit wann _programmiert_ man denn HTML ???

              Gruss Sven

              1. Hallo zusammen!

                ich habe zu diesem Thread eine Frage:
                seit wann _programmiert_ man denn HTML ???

                Gruss Sven

                Jetzt geht die Leier wieder los :-(

                Ihr habt den Frager ja nun kräftig mit CSS versorgt.

                Allerdings würde mich das auch mal interessieren,
                wie das mit Palms, Psions, Handhelds und Handys funktioniert.

                SabineP
                die noch nie ein Handy mit NS, IE oder Mozilla gesehen hat.

                1. ich habe zu diesem Thread eine Frage:
                  seit wann _programmiert_ man denn HTML ???

                  Jetzt geht die Leier wieder los :-(

                  <--ironie an-->
                  auch ich bin schwer beeindruckt, sven. das hilft wirklich weiter.
                  <--ironie aus-->

                  Ihr habt den Frager ja nun kräftig mit CSS versorgt.

                  Allerdings würde mich das auch mal interessieren,
                  wie das mit Palms, Psions, Handhelds und Handys funktioniert.

                  SabineP
                  die noch nie ein Handy mit NS, IE oder Mozilla gesehen hat.

                  handys können wissens meines momentan nur wml, also nicht mal html, geschweige denn css. von handys war aber auch noch nicht die rede, glaube ich ;)

                  handhelds werden das css wohl ignorieren, entsprechend optimierte css-seiten sind aber so geschrieben, daß der text im quelltext in einer sinnvollen reihenfolge steht und auch ohne css gelesen werden kann. links und überschriftenhierarchie stehen ja im css und bleiben erhalten.

                  gini

                  1. ...links und überschriftenhierarchie stehen ja im css und bleiben erhalten.

                    korrektur, das muss natürlich _html_ heißen.

            2. Hi Buck,

              Vielen Dank bisher und ich bin auch für weiter Beiträge dankbar,
              vorallem was aktive Serverseiten betrifft

              für Deine Aufgabenstellung ist m. E. alles, was serverseitig stattfindet, irrelevant. Will sagen: Mit welcher serverseitigen Technologie Du die an
              den Browser übertragenden Seiten herstellst, das ist für den Anwender
              völlig transparent - da kannst Du nehmen, was Du zur Verfügung hast.

              Und je mehr Du serverseitig löst, desto weniger mußt Du darüber nach-
              denken, was die verschiedenen Clients davon halten - JavaScript wird ja
              wohl nicht vorausgesetzt werden dürfen, also muß vermutlich sämtliche
              Intelligenz auf dem Server stattfinden.

              Mich irritiert, dass einerseits die Einhaltung des W3C-Standards
              empfohlen wird, auf der anderen Seite, selbst von den "großen"
              Browsern diese Standards nicht konsequent unterstützt werden.

              Alles ist relativ. Erstens werden hinreichend viele Dinge eben _doch_
              unterstützt (die Zahl der Anfängerpostings hier, denen man erst mal die
              Validierung der Seite empfehlen muß, wobei das Problem automatisch ver-
              schwindet, ist durchaus beachtlich), und zweitens ist es schon für Dich
              selbst sinnvoll, einen Haufen möglicher Fehler zu eliminieren.
              Validierter Code hat ähnliche Eigenschaften wie ein Perl-Skript, das
              mit "perl -w" und "use strict;" läuft: Die ganz doofen Fehler werden
              automatisch gefunden. Das löst nicht alle Probleme - aber es beruhigt
              ungemein ...

              Dem User bringt dann die Einhaltung des W3C Standards auch nix - oder?

              Das kommt darauf an, welchen Browser er verwendet. Je pingeliger sein
              Browser ist, desto mehr bringt es ihm.
              Gerade für Dein Szenario, also das exakte Gegenteil der M$-Monokultur,
              dürften Standard wesentlich mehr bringen als für eine typische Firmen-
              Intranet-Anwendung.

              Viele Grüße
                    Michael

              1. Hi Michael, danke für deinen Beitrag!

                Dem User bringt dann die Einhaltung des W3C Standards auch nix - oder?

                Das kommt darauf an, welchen Browser er verwendet. Je pingeliger sein
                Browser ist, desto mehr bringt es ihm.
                Gerade für Dein Szenario, also das exakte Gegenteil der M$-Monokultur,
                dürften Standard wesentlich mehr bringen als für eine typische Firmen-
                Intranet-Anwendung.

                Das ist ja gerade der Punkt. Ich hab nicht als Ziel den User zu irgendwelchen Browsern zu erziehen. Ich merke jedoch, dass es anscheinend unmöglich ist einen "kleinsten gemeinsamen Nenner" für alle Browser zu finden und dennoch eine etwas komplexere Site (was Navigation und Inhalt betrifft) zu basteln. :(

                Mal sehen, was sich alles so Server-seitig lösen lässt. Danke auch für diese Antwort!

                Grüße, Buck

            3. Was ich aber jetzt schon sagen kann: Mich irritiert, dass einerseits die Einhaltung des W3C-Standards empfohlen wird, auf der anderen Seite, selbst von den "großen" Browsern diese Standards nicht konsequent unterstützt werden. Dem User bringt dann die Einhaltung des W3C Standards auch nix - oder?

              dem user ist das egal, er will ja nur den inhalt sehen. aber weil du seinen browser/system/einstellungen nicht kennst, hoffst du daß du mit w3c standards am besten wegkommst. von den standards musst du natürlich alle features abziehen, die auf dem zielsystem möglicherweise nicht verfügbar sind, zumindest sollte die lesbarkeit nicht davon abhängen.

              beispiel: letztes jahr wollte ich an einem internetterminal am flughafen athen  die fahrplanauskunft http://www.bahn.de benutzen. unmöglich, weil das ergebnis eine mit javascript aufpoppende seite war, was dieser terminal anscheinend nicht unterstützte. die macher habens anscheinend auch mitbekommen, heute würde das klappen.

              ich hab noch was zum surfen mit palms gefunden:
              http://home.foni.net/~mohnhaupt/pilot/palmweb/#browser

              am einfachsten ist es wohl, wie auf http://www.bjoernsworld.de komplett auf positionierung zu verzichten, evtl. ein inhaltsverzeichnis mit css zu positionieren wie auf www.einfachfueralle.de.

              nicht so einfach wird wohl eine community, eine threadansicht wie hier im forum wird einfach recht breit. das ist erstmal mehr eine design- als eine technische frage, soll das ganze auch userbasiert sein ect.. eine sehr schlanke, aber auch purisische variante gibt es auf http://www.designmadeingermany.de/. der code wurde dort mal gepostet, ist also kein geheimnis, hab ich auch noch irgenwo auf platte (php).

              1. ich hab noch was zum surfen mit palms gefunden:
                http://home.foni.net/~mohnhaupt/pilot/palmweb/#browser

                Danke für diesen Link! Beantwortet viele Fragen auf einen Schlag!

                nicht so einfach wird wohl eine community, eine threadansicht wie hier im forum wird einfach recht breit. das ist erstmal mehr eine design- als eine technische frage, soll das ganze auch userbasiert sein ect.. eine sehr schlanke, aber auch purisische variante gibt es auf http://www.designmadeingermany.de/. der code wurde dort mal gepostet, ist also kein geheimnis, hab ich auch noch irgenwo auf platte (php).

                Stimmt ist nicht so einfach. Netscape 4 zickt auf dieser Site nämlich und zeigt fast nichts an :(

                Trotzdem danke :) Buck

          2. Hi, Stefan

            habe jetzt mal fix paar aufgeschrieben, die mir spontan einfallen und
            CSS-Layout haben: http://xse.de/css-layout.html

            Wer noch weitere, wenn möglich gute und prominente, Beispiele weiß,
            kann sie mir gern per e-Mail schicken oder hier posten, danke.

            - http://www.codestyle.org/
              - http://www.cross-browser.com/
              - http://www.w3.org/Style/

            Ich bastle derzeit auch an einem solchen Layout -> http://www.skop.net/preview/ Dieses ist zwar noch lange nicht fertig, aber zur Demonstration bereits geeignet. Achja, kurzes Feedback hierzu würde mich freuen - die Inhalte sind zwar noch nicht... usw ;-)

            LG Orlando

            1. hi!

              Ich bastle derzeit auch an einem solchen Layout -> http://www.skop.net/preview/ Dieses ist zwar noch lange nicht fertig, aber zur Demonstration bereits geeignet. Achja, kurzes Feedback hierzu würde mich freuen - die Inhalte sind zwar noch nicht... usw ;-)

              an sich schön, aber es sind mir zuviele verschiedene, nicht zu einander passende Farben (vor allem: die Blautöne).

              vielleicht könntest du auch noch auch an der Schriftart und der Zeilenbreite (besser nicht über die ganze Bildschirmbreite) feilen.

              james.

              1. Hi, James

                Ich bastle derzeit auch an einem solchen Layout -> http://www.skop.net/preview/ Dieses ist zwar noch lange nicht fertig, aber zur Demonstration bereits geeignet. Achja, kurzes Feedback hierzu würde mich freuen - die Inhalte sind zwar noch nicht... usw ;-)

                an sich schön, aber es sind mir zuviele verschiedene, nicht zu einander passende Farben (vor allem: die Blautöne).

                Ja, im Moment ist alles noch ziemlich bunt, das werde ich demnächst ändern. Ich bin aber noch auf der Suche nach 'meiner' Farbe.

                vielleicht könntest du auch noch auch an der Schriftart und der Zeilenbreite (besser nicht über die ganze Bildschirmbreite) feilen.

                Die Schriftart hatte ich nicht gesetzt, das war dein System :) Habe mich jetzt für 'Georgia' entschieden. Zum Thema Zeilenbreite habe ich aufgrund der Komplexität einen neuen Thread eröffnet, siehe </?m=60193&t=10861>

                Danke jedenfalls für deine Stellungnahme und
                LG Orlando

            2. Huhu!

              Ich bastle derzeit auch an einem solchen Layout -> http://www.skop.net/preview/ Dieses ist zwar noch lange nicht fertig, aber zur Demonstration bereits geeignet. Achja, kurzes Feedback hierzu würde mich freuen - die Inhalte sind zwar noch nicht... usw ;-)

              Du solltest die Schrift im Code-Beispiel nicht kleiner machen. Denn natuerlich hat die sich jeder so eingestellt, dass er sie gut lesen kann, wenn, ja wenn sie nicht verkleinert wird. ;-)

              Bei der Zeilenbreite kann ich nicht meckern. Ein Browserfenster ist idealerweise so eingestellt, dass eine angenehme Zeilenbreite plus links und/oder rechts eine Menuespalte hinpasst, und da passt Deine Seite perfekt rein. Wer bei 1600x1200 im Vollbild surft, mag das entweder so, oder ist halt selbst schuld, imho.

              HTH && So long

              --
              There are two major products that come out of Berkeley: LSD and UNIX. We don't believe this to be a coincidence.
                  -- Jeremy S. Anderson

              1. Huhu!

                Hihi! ;-)

                Du solltest die Schrift im Code-Beispiel nicht kleiner machen. Denn natuerlich hat die sich jeder so eingestellt, dass er sie gut lesen kann, wenn, ja wenn sie nicht verkleinert wird. ;-)

                Aber dann passt doch der Code nicht mehr in meine schönen bunten Rahmen *g*. Ja, ist schon klar, das ist noch ein 'Überbleibsel' und fliegt raus. Peinlich...

                Bei der Zeilenbreite kann ich nicht meckern. Ein Browserfenster ist idealerweise so eingestellt, dass eine angenehme Zeilenbreite plus links und/oder rechts eine Menuespalte hinpasst, und da passt Deine Seite perfekt rein. Wer bei 1600x1200 im Vollbild surft, mag das entweder so, oder ist halt selbst schuld, imho.

                Du triffst genau den Punkt und hast eigentlich recht. Ich versuche ja sonst auch, die Wahl dem Besucher zu überlassen.

                HTH

                TH'ed ;-)

                Danke & LG
                Orlando

          3. Tach auch,

            habe jetzt mal fix paar aufgeschrieben, die mir spontan einfallen und
            CSS-Layout haben: http://xse.de/css-layout.html

            Wer noch weitere, wenn möglich gute und prominente, Beispiele weiß,
            kann sie mir gern per e-Mail schicken oder hier posten, danke.

            Wieviele willst Du denn? Geh mal hier hin: http://www.webnouveau.net/. Und dort besonders: http://www.webnouveau.net/index1.htmlff. Reichen so an die 700?

            Wenn auch Eigenwerbung erlaubt ist geht mal auf diese Seite http://www.webnouveau.net/index6.html und nehmt dort Nummer

            0555 http://www.grewe.co.uk/ (mit Styleswitcher)
            0556 http://www.worldtour-of-scotland.com/

            Gruss,
            Armin

            1. Hallo Armin,

              Wieviele willst Du denn? Geh mal hier hin: http://www.webnouveau.net/. Und dort besonders: http://www.webnouveau.net/index1.htmlff. Reichen so an die 700?

              ja ;-)

              Als ich gerade dort war, habe ich mich auch schwach wieder daran
              erinnert, dass ich die Website bereits kenne, muß aber schon etwas
              her sein, damals waren es auch sehr viel weniger Beispiele. Mir ist,
              obwohl ich eigentlich ein sehr gutes "URL-Gedächtnis" habe, einfach
              nicht mehr eingefallen, aber dank Deiner Hilfe ist ja jetzt alles
              wieder da, danke :-)

              Wenn auch Eigenwerbung erlaubt ist geht mal auf diese Seite http://www.webnouveau.net/index6.html und nehmt dort Nummer
              0555 http://www.grewe.co.uk/ (mit Styleswitcher)
              0556 http://www.worldtour-of-scotland.com/

              wieviel Besucher bringen Dir diese beiden Links so im Monat?

              Viele Grüße,
              Stefan

              1. Tach auch Stefan,

                Als ich gerade dort war, habe ich mich auch schwach wieder daran
                erinnert, dass ich die Website bereits kenne, muß aber schon etwas
                her sein, damals waren es auch sehr viel weniger Beispiele.

                Das kann gut sein. Zeldman hat sie vor ein paar Wochen in seinem Weblog gehabt, danach ist es ziemlich hochgegangen. Mir ist gerade noch eine zweite Seite eingefallen, allerdings duerften viele Seiten die gleichen sein: http://www.dotfile.net/ala_list.php Die ist allerdings nicht 100% korrekt, da ist mindestens eine Site drin die nicht tableless ist (meine "alte" Seite, die ich noch nicht umgestellt habe. Da hat es wohl ein Missverstaendnis gegeben)

                Wenn auch Eigenwerbung erlaubt ist geht mal auf diese Seite http://www.webnouveau.net/index6.html und nehmt dort Nummer
                0555 http://www.grewe.co.uk/ (mit Styleswitcher)
                0556 http://www.worldtour-of-scotland.com/

                wieviel Besucher bringen Dir diese beiden Links so im Monat?

                Nicht so furchtbar viele, dafuer sind es a) zu viele Links in der Liste und b) zu ungenaue Beschreibungen. Da bringen andere Sachen mehr: Ich habe aus Jux ein Bild meines "Trusted Assistant" an Zeldman geschickt (fuer seine Buchpromotion) und zu meiner Ueberraschung habe ich neulich herausgefunden dass er es benutzt: http://www.zeldman.com/talent/contest/

                Gruss,
                Armin

            2. Hallo Armin

              0555 http://www.grewe.co.uk/ (mit Styleswitcher)
              0556 http://www.worldtour-of-scotland.com/

              Schöne Seiten, aber schau sie dir doch bitte mal mit Netscape4 an! Das bringt mir dann nicht viel (siehe Hauptthema).

              Trotzdem danke.

              Gruß, Buck

              1. Tach auch,

                0555 http://www.grewe.co.uk/ (mit Styleswitcher)
                0556 http://www.worldtour-of-scotland.com/

                Schöne Seiten, aber schau sie dir doch bitte mal mit Netscape4 an! Das bringt mir dann nicht viel (siehe Hauptthema).

                Brauch ich nicht, kann ich mir gut vorstellen. Ich habe keinen NS4 installiert und teste meine Seiten auch nicht damit. Ist mir auch vollkommen bewusst dass dies nicht notwendigerweise mit dem Hauptthema uebereinstimmt. Dies sind private Seiten bei denen ich ganz bewusst die Entscheidung getroffen habe einen total veralteten Browser nicht mehr zu unterstuetzen. Ich bin nicht bereit meine Zeit fuer ihn aufzuwenden und habe den wirtschaftlichen Bedarf nicht dies zu tun. Gleichzeitig bin ich der Ansicht dass sich alles irgendwann weiterentwickelt und man bei gewissen Sachen irgendwann einen Schlussstrich ziehen muss. Oder willst Du 2010 immer noch NS4 unterstuetzen? Die Frage ist wann der Zeitpunkt gekommen ist diesen Schlussstrich zu ziehen. Ich habe mich entschieden es jetzt zu tun, da ich die Freiheit habe dies zu tun (keine wirtschaftlichen Zwaenge).

                Gruss,
                Armin

                PS: Schalte beim NS4 JS und damit CSS ab und Du kannst insbesondere bei http://www.grewe.co.uk/ die Texte sehr bequem lesen. Und bevor mir jemand den @import "workaround" vorschlaegt: Ja, ich kenne ihn, will ihn aber nicht nutzen.

      2. 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 ...

        Grüße, Buck

        da kommts jetzt darauf an was du willst, mit css kann man da schon richtig zaubern. http://www.einfachfueralle.de/ zeigt einige möglichkeiten ganz gut, wenn du das ganz schmal machst rutscht die navi ganz nach unten. die seite ist ohne tabellen. bei http://www.css-design.de/ kannst du lustig zwischen verschiedenen styles umschalten...

        diese lösungen sind aber recht aufwendig, wenn es hauptsächlich um den inhalt geht würde ich einfach _nicht_ positionieren, weder mit tabellen noch mit css. schriftart und größen natürlich schon mit css formatieren. beispiel: http://www.bjoernsworld.de/.

      3. 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

          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

          Bei float gibts leider das Problem, dass es jeder Browser anders interpretiert...

          MFG

          Philipp

    2. Hi,

      Das häufig verwendete Tabellenlayout ist wahrscheinlich die Todsünde überhaupt, schlimmer wird's nur noch, wenn man alles pixelgenau festlegt.
      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.

      Leider geht es nicht immer ohne Tabellen... positioniere ein Fenster ohne Frames oder Tabellen horizontal und vertikal mittig... viel Spass, spaetestens an Opera wirst du verzweifeln...

      Auch auf meiner Seite komme ich dank der gescheiten Browser nicht ohne Tabellenlayout aus...
      Wenn es ein paar bessere Moeglichkeiten zur Positionierung gaebe, koennte man die Tabellen vergessen, aber... nun denn, das alte leid ;)

      MFG

      Philipp

      1. Hi, Philipp

        Leider geht es nicht immer ohne Tabellen... positioniere ein Fenster ohne Frames oder Tabellen horizontal und vertikal mittig... viel Spass, spaetestens an Opera wirst du verzweifeln...

        http://forum.de.selfhtml.org/archiv/2002/4/9306/#m51587 -> http://www.skop.net/self/zentriertes_div.html

        Ich teste meine Entwürfe zuerst mit Opera ;-)

        LG Orlando

        1. http://forum.de.selfhtml.org/archiv/2002/4/9306/#m51587 -> http://www.skop.net/self/zentriertes_div.html

          hallo Orlando, Satz mit x? ->war wohl nix!
          Deine Div's sind bei mir schön auf der Seite verteilt (halblinks oben und halbrechts unten) in der Mitte muß ich mir wohl einen malen.
           gruß, Andreas

          1. Hi, Andreas

            http://www.skop.net/self/zentriertes_div.html

            Deine Div's sind bei mir schön auf der Seite verteilt (halblinks oben und halbrechts unten) in der Mitte muß ich mir wohl einen malen.

            Verrätst du mir, welchen Browser (Version) auf welchem Betriebssystem du nutzt?

            Danke & LG
            Orlando

  2. http://selfaktuell.teamone.de/artikel/design/pocket/index.htm

    gerade erst gesehen...