Bernd: Warum CSS-Layout anstatt Frames oder Tabellenlayout

Hallo,

könnt ihr mir sagen, welche Vorteile eine CSS-Layout gegenüber einem Tabellenlayout bzw. gegenüber Frames hat?

  1. könnt ihr mir sagen, welche Vorteile eine CSS-Layout gegenüber einem Tabellenlayout bzw. gegenüber Frames hat?

    Wann hast du das letzte mal eine komplette Frameseite mit dem richtigen Inhalt via Google gefunden?
    Wann hattest du den letzten Nervenzusammebruch über verschachteltem Tabellencode?

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    1. Naja,

      und wie erkläre ich das einem Kunden am besten. Dem ist doch egal, ob ich bei einem Tabellenlayout einen Nervenzusammenbruch habe oder nicht. Hauptsache seine Seite funktioniert richtig.

      Wie kann ich einem Kunden (einem Laien) der eine Seite mit einem Tabellenlayout oder Frames hat, davon überzeugen das es notwendig ist auf eine CSS-Layout umzustellen.

      Könnt ihr mir hier ein paar Tips geben?

      1. Moin

        Erkläre dem Kunden die Vorteile von CSS-Layout in Bezug auf Suchmaschinen. Erläutere ihm weiterhin die Vorteile bei einem Redesign (Zentralisierte CSS-Dateien vorausgesetzt). Erläutere weiterhin die Vorteile beim Einbinden von weiteren Modulen (Erweiterungsmöglichkeit). Als näüchstes kannst du noch die Möglichkeit der Formatierung für Druckausgabe mit CSS und Div-Layout erklären. Ich denke das sind genügend Gründe!!!

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
        -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
        ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        1. (...)
          Als näüchstes kannst du noch die Möglichkeit der Formatierung für Druckausgabe mit CSS und Div-Layout erklären.
          (...)

          * ...Möglichkeit der Formatierung für mobile Endgeräte
           * Screenreader
           * Braille-Zeile
           * CSS ermöglicht im Grund erst die Semantik (zumindest wird dies durch Tabellen erschwert) => Das Angebot wird Maschinenlesbar, er kann z.B. in Preissuchmaschinen auftauchen (also der Kunde)
           * Geringere Folgekosten durch leichtere Wartbarkeit

          --
          sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
          1. Moin

            * ...Möglichkeit der Formatierung für mobile Endgeräte
            * Screenreader
            * Braille-Zeile
            * CSS ermöglicht im Grund erst die Semantik (zumindest wird dies durch Tabellen erschwert) => Das Angebot wird Maschinenlesbar, er kann z.B. in Preissuchmaschinen auftauchen (also der Kunde)
            * Geringere Folgekosten durch leichtere Wartbarkeit

            Danke für die sinnvolle Ergänzung.

            Gruß Bobby

            --
            -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
            -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
            ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        2. Hallo,

          Erkläre dem Kunden die Vorteile von CSS-Layout in Bezug auf Suchmaschinen.

          und der wäre?

          Grundsätzlich sehe ich schon hinreichend Vorzüge bei -dazu framelosem- CSS-Layout für einen barrierefreien suchmaschienfreundlichen Webauftritt, allerdings relativiert sich das in der Praxis schon etwas. So finden sich bei Google-Suchergebnissen häufig Tabellen-Layouts auf den ersten Plätzen, Zelleninhalte der Tabellen werden von Screenreadern nicht überlesen, und Frames können Inhalt und Navigation sauber trennen.

          Als näüchstes kannst du noch die Möglichkeit der Formatierung für Druckausgabe mit CSS und Div-Layout erklären.

          Und eine Formatierung der Tabllen per CSS für Druckausgabe wäre gleich hoffnungslos?

          Grüsse

          Cyx23

          1. Moin

            und Frames können Inhalt und Navigation sauber trennen.

            Das kann man auch mit CSS-basierten DIV-Design erreichen! Gewußt wie... ;-)

            Und eine Formatierung der Tabllen per CSS für Druckausgabe wäre gleich hoffnungslos?

            Ja, Ausblendung von bestimmten Inhalten funktioniert nur sehr schwerlich, sowie Formatierung (z.B. Verschiebung) der einzelnen Inhalte funktionieren überhaupt nicht, da Tabellen an die starre Spalten-Zeilen-Struktur gebunden sind. Diese Bindung hast du mit CSS-basierten Layouts nicht.

            Gruß Bobby

            --
            -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
            -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
            ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
            1. Das kann man auch mit CSS-basierten DIV-Design erreichen! Gewußt wie... ;-)

              wuah - bitte kein div-design :(
              versuchs mit semantisch vernünftigem code - listen, textabsätze, überschriften - div-suppen haben äusserst wenig vorteil gegenüber tabellen

              Ja, Ausblendung von bestimmten Inhalten funktioniert nur sehr schwerlich, sowie Formatierung (z.B. Verschiebung) der einzelnen Inhalte funktionieren überhaupt nicht, da Tabellen an die starre Spalten-Zeilen-Struktur gebunden sind. Diese Bindung hast du mit CSS-basierten Layouts nicht.

              das ist nicht ganz richtig: in einem vernünftigen browser ist es egal ob tabelle, div oder sonstiges markup - lediglich ältere browser rendern tabellen "immer" als tabellen und können deren darstellungseigenschaften sogut wie nicht beeinflussen

              1. Moin

                versuchs mit semantisch vernünftigem code - listen, textabsätze, überschriften - div-suppen haben äusserst wenig vorteil gegenüber tabellen

                Ist ja klar, das man Divs sparsam einsetzen soll. Ich koch mir auch kein Div-Süppchen, aber gegen Top,Content und Footer-Div ist doch nix einzuwenden oder?

                Gruß Bobby

                --
                -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
                -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
                ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                1. Ist ja klar, das man Divs sparsam einsetzen soll. Ich koch mir auch kein Div-Süppchen, aber gegen Top,Content und Footer-Div ist doch nix einzuwenden oder?

                  gegen "top" ist sehrwohl etwas einzuwenden, da "top" die aktuelle darstellung im namen beinhaltet

                  was ist wenn dein inhalt ganz oben kommt und die seitenüberschrift rechts neben der seite steht?

                  benennst du dann "top" in "right" um? :)

                  1. Moin

                    Die Struktur ist je projekt individuel. Ich hab eein Templat in welches die Inhalte modular eingebunden werden. Daher bin ich völlig frei. Die "klassischen Webseiten" sin dnun mal in Oben, Mitte, Unten aufgeteilt.

                    Ich meinte ja nur, das ich die Divs auf wenige Bereiche beschränke und ansonsten semantisch richtige Elemente benutze.

                    Alles weitere ist Haarspalterei

                    Gruß Bobby

                    --
                    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
                    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
                    ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                    1. Die Struktur ist je projekt individuel.

                      das ist auch gut so, fließbandarbeit finde ich uncool :)

                      Ich hab eein Templat in welches die Inhalte modular eingebunden werden. Daher bin ich völlig frei. Die "klassischen Webseiten" sin dnun mal in Oben, Mitte, Unten aufgeteilt.

                      wenns aber mal "links, rechts, mitte" oder "oben, links, rechts" ist, bist du mit deiner benennung schon wieder unlogisch

                      Alles weitere ist Haarspalterei

                      natürlich ist es das - es ist deine weise zu arbeiten, du musst damit leben :) ich verwende ein ähnliches system - allerdings imho sinnvoller benannt

                      versteh mich nicht falsch: es gib nix schlimmeres als eine klasse "kleiner_blauer_pfeil" zu kennen oder ein include "suchfeld_rechts_oben" - aber wenn man etwas genauer überlegt, gehört auch "top" oder "bottom" dazu

                      generische, nicht auf die darstellung bezogene, namen sind weitaus geschickter - besonders wenn mehrere leute am selben "ding" arbeiten

                    2. Hi,

                      Die "klassischen Webseiten" sin dnun mal in Oben, Mitte, Unten aufgeteilt.

                      nein, in "Header, Content, Footer". Ob davon jemand "top" platziert wird oder links, rechts oder von mir aus diagoquer und zu 42° in der Z-Achse gedreht, ist Sache von CSS. Entsprechend ist es unsinnig, eine derartige Benamsung durchzuführen.

                      Ich meinte ja nur, das ich die Divs auf wenige Bereiche beschränke und ansonsten semantisch richtige Elemente benutze.

                      Ja, dieser Punkt ist richtig. Aber:

                      Alles weitere ist Haarspalterei

                      Nein, Thema dieses Forums.

                      Cheatah

                      --
                      X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                      X-Will-Answer-Email: No
                      X-Please-Search-Archive-First: Absolutely Yes
                      1. Yerf!

                        Alles weitere ist Haarspalterei

                        Nein, Thema dieses Forums.

                        s/Nein,/und/g

                        *scnr*

                        Gruß,

                        Harlequin

                        --
                        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
                      2. Hallo Cheatah,

                        ... oder von mir aus diagoquer und zu 42° in der Z-Achse gedreht, ist Sache von CSS.

                        Beispiel?

                        Gruß, Jürgen

                        1. Yerf!

                          ... oder von mir aus diagoquer und zu 42° in der Z-Achse gedreht, ist Sache von CSS.

                          Beispiel?

                          Also das zumindest ist SVG und kein CSS...

                          Mal schauen was CSS 5 bringt ;-)

                          Gruß,

                          Harlequin

                          --
                          <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
              2. Moin

                das ist nicht ganz richtig: in einem vernünftigen browser ist es egal ob tabelle, div oder sonstiges markup - lediglich ältere browser rendern tabellen "immer" als tabellen und können deren darstellungseigenschaften sogut wie nicht beeinflussen

                Leider haben nicht alle User einen vernünftigen und aktuellen Browser.... :-D ;-)

                Gruß Bobby

                --
                -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
                -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
                ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                1. Leider haben nicht alle User einen vernünftigen und aktuellen Browser.... :-D ;-)

                  das hat aber nichts mit css zu tun :)

                  1. Hi,

                    Leider haben nicht alle User einen vernünftigen und aktuellen Browser.... :-D ;-)
                    das hat aber nichts mit css zu tun :)

                    doch: Wenn alle User einen vernünftigen und aktuellen Browser hätten, bräuchte niemand mehr irgendwelche IE-Hacks ;-)

                    Cheatah

                    --
                    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                    X-Will-Answer-Email: No
                    X-Please-Search-Archive-First: Absolutely Yes
                    1. doch: Wenn alle User einen vernünftigen und aktuellen Browser hätten, bräuchte niemand mehr irgendwelche IE-Hacks ;-)

                      ja, aber das hat immer noch nichts mit css zu tun :)

                      css verhält sich zum ie wie ein kreisverkehr zu einem autofahrer

                      ein kreis verkehr funktioniert prinzipiell auch sehr gut, leider sind die leute zu blöd dafür - das ist aber noch lange kein fehler des kreisverkehrs :)

                      1. css verhält sich zum ie wie ein kreisverkehr zu einem autofahrer

                        ein kreis verkehr funktioniert prinzipiell auch sehr gut, leider sind die leute zu blöd dafür - das ist aber noch lange kein fehler des kreisverkehrs :)

                        Sehr schön erklärt :D

                        Grüße

                        1. kreisverkehr [...] kreis verkehr [...] kreisverkehrs :)
                          Sehr schön erklärt :D

                          wobei ich mich grade frage, warum ich 1x ein deppenleerzeichen eingebaut habe :D

                          1. [latex]Mae  govannen![/latex]

                            kreisverkehr [...] kreis verkehr [...] kreisverkehrs :)
                            Sehr schön erklärt :D
                            wobei ich mich grade frage, warum ich 1x ein deppenleerzeichen eingebaut habe :D

                            Du warst wohl im Gedanken noch bei deiner letzten Orgie :D

                            Cü,

                            Kai

                            --
                            Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
                            SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
                            1. bei deiner letzten Orgie :D

                              meine letzte orgie? na hör mal - ich bin noch jung und knackig, da werden viele orgien folgen :D

                              1. [latex]Mae  govannen![/latex]

                                bei deiner letzten Orgie :D
                                meine letzte orgie? na hör mal - ich bin noch jung und knackig, da werden viele orgien folgen :D

                                Na dann koste es aus; von »jung und knackig« zu »alter Knacker« ist's nur ein ganz kleiner Schritt ;)

                                Cü,

                                Kai

                                --
                                Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
                                SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
                          2. Hi,

                            wobei ich mich grade frage, warum ich 1x ein deppenleerzeichen eingebaut habe :D

                            Du leidest unter Agovis Wahn ;-)

                            Chea "Wer zur Hölle ist Agovi?" tah

                            --
                            X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                            X-Will-Answer-Email: No
                            X-Please-Search-Archive-First: Absolutely Yes
                            1. Agovis Wahn

                              agovis wohin ich schau' ...

      2. Hi,

        Wie kann ich einem Kunden (einem Laien) der eine Seite mit einem Tabellenlayout oder Frames hat, davon überzeugen das es notwendig ist auf eine CSS-Layout umzustellen.

        Wenn du nur zusaetzliche Auftraege fuer dich aus dem "Nichts" heraus generieren willst: Vermutlich gar nicht.
        Der Kunde hat etwas, das "funktioniert" - warum sollte er es jetzt aendern lassen? Nur damit du wieder Geld von ihm verlangen kannst ...?

        Die angebliche "Notwendigkeit" duerfte gar nicht gegeben sein.

        Klingt irgendwie so, als ob du von der aktuellen Idee der "Abwrackpraemie" fuer Autos so begeistert waerst, dass du sie jetzt auf die Webseitenerstellung uebertragen willst.
        Dann musst du dem Kunden also vermitteln koennen, welchen Mehrwert das fuer ihn bietet.
        Wenn du dich dazu nicht in der Lage siehst - dann hat dein Kunde doch wohl keinen Grund, dich jetzt mit einer Ueberarbeitung seiner Seite zu beauftragen.

        Dass du bei der Neuentwicklung auf aktuelle Techniken setzt, sollte sich wohl von selber verstehen.
        Und wenn du bereits damit arbeitest - und damit auch gut umgehen kannst - dann sollte sich fuer *dich* die Frage nach den Vorteilen ja sowieso nicht mehr stellen, denn dann kennst du sie ja bereits aus erster Hand.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
      3. und wie erkläre ich das einem Kunden am besten. Dem ist doch egal, ob ich bei einem Tabellenlayout einen Nervenzusammenbruch habe oder nicht. Hauptsache seine Seite funktioniert richtig.

        Und du fragst nach den Nachteilen von Frames oder Tabellen?
        Sorry, der Mensch ist mit seinen Frames besser aufgehoben, denn als dein Kunde.

        mfg Beat

        --
        Woran ich arbeite:
        X-Torah
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o