Sophie: Flexbox Grid

0 137

Flexbox Grid

Sophie
  • css
  • html
  1. 1
    Gunnar Bittersmann
    1. 0
      Sophie
      1. 0
        Gunnar Bittersmann
        1. 0
          Sophie
          1. 0
            Gunnar Bittersmann
            1. 0
              Gunnar Bittersmann
  2. 0
    at
    1. 0
      Gunnar Bittersmann
      1. 0
        at
        1. 0
          Gunnar Bittersmann
          1. 1
            at
            1. 0
              Gunnar Bittersmann
              1. 1
                at
                1. 0
                  Gunnar Bittersmann
                  1. 1
                    at
                    1. 1
                      Gunnar Bittersmann
                      1. -1
                        at
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              at
                            2. 0
                              Mitlesender Dummer
                              1. 0
                                Gunnar Bittersmann
                                1. 2
                                  Mitlesender Dummer
                                  1. 0
                                    marctrix
                                  2. 0
                                    Gunnar Bittersmann
                              2. 0
                                TS
                                1. 1
                                  Rolf ẞ
                                  1. 0
                                    TS
                                    1. 1
                                      Matthias Scharwies
                                      1. 1
                                        Mitlesender Dummer
                                        1. 0
                                          Gunnar Bittersmann
                                        2. 2

                                          Grid Layout im Wiki

                                          Matthias Scharwies
                                        3. 4

                                          Grid im Self-Wiki

                                          Matthias Scharwies
                                          • css
                                          • grid
                                          • html
                                          1. 1
                                            marctrix
                                            1. 1
                                              Gunnar Bittersmann
                                              • css
                                              • grid
                                              1. 0
                                                marctrix
                                                1. 0
                                                  marctrix
                                                  1. 1
                                                    Gunnar Bittersmann
                                                    1. 0
                                                      marctrix
                                                  2. 0
                                                    marctrix
                                                2. 0
                                                  Gunnar Bittersmann
                                                  1. 1
                                                    JürgenB
                                                    1. 0
                                                      marctrix
                                                      1. 0
                                                        Gunnar Bittersmann
                                                        • html
                                                        1. 0
                                                          marctrix
                                                    2. 0
                                                      Gunnar Bittersmann
                                                  2. 0
                                                    marctrix
                                                    1. 0
                                                      Gunnar Bittersmann
                                                      1. 0
                                                        marctrix
                                                        1. 0
                                                          Gunnar Bittersmann
                                                          1. 0
                                                            marctrix
                                                      2. 0
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          marctrix
                                                          1. 0
                                                            Gunnar Bittersmann
                                                            1. 0
                                                              marctrix
                                                              1. 0
                                                                Gunnar Bittersmann
                                                                1. 0
                                                                  marctrix
                                                                  1. 0
                                                                    Gunnar Bittersmann
                                                                    1. 0
                                                                      marctrix
                                            2. 0
                                              Matthias Scharwies
                                              1. 0
                                                Julius
                                                • browser
                                                • microsoft
                                                1. 0
                                                  Matthias Scharwies
                                                  1. 0
                                                    Auge
                                                    1. 0
                                                      Sophie
                                                      1. 0
                                                        Auge
                                              2. 0
                                                marctrix
                                                1. 0
                                                  Christian Kruse
                                                  1. 0
                                                    marctrix
                                                    1. 0
                                                      Christian Kruse
                                                  2. 0
                                                    Gunnar Bittersmann
                                                  3. 0
                                                    Gunnar Bittersmann
                                                  4. 2
                                                    MudGuard
                                                2. 0
                                                  marctrix
                                                  1. 0
                                                    Gunnar Bittersmann
                                                3. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    marctrix
                                                    1. 1
                                                      MudGuard
                                    2. 2
                                      Rolf ẞ
                                      • css
                                      • html
                                      • humor
                                      1. 0
                                        TS
                                        • css
                                        • html
                                        1. 0
                                          Rolf ẞ
                                          1. 0
                                            Tabellenkalk
                                      2. 0
                                        marctrix
                            3. 0
                              Sophie
                              1. 0
                                Julius
                          2. 0
                            at
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                at
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    at
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 1
                                        at
                                        1. 1
                                          Gunnar Bittersmann
                                          1. 0
                                            at
                                            1. 0
                                              Sophie
                            2. 0
                              marctrix
                              1. 1
                                at
                                1. 0
                                  marctrix
                                  1. 0
                                    at
                                  2. 0
                                    Gunnar Bittersmann
                                    • zu diesem forum
                                    1. 0
                                      marctrix
                                      1. 3
                                        at
                                        1. 0
                                          marctrix
                                          1. 2
                                            Christian Kruse
                                            1. 0
                                              marctrix
                                              1. 0
                                                Christian Kruse
                                                1. 1
                                                  marctrix
                                                  1. 0
                                                    Gunnar Bittersmann
                                                    1. 1
                                                      marctrix
                                                      1. 3
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          marctrix
                                                2. 0
                                                  marctrix
                                                  1. 0
                                                    at
                                                    1. 0
                                                      marctrix
                                                      1. 0
                                                        at
                                                        1. 0
                                                          marctrix
                                                    2. 0
                                                      Gunnar Bittersmann
                                                      1. 1
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          JürgenB
                                                          1. 0
                                                            marctrix
                                                      2. 0
                                                        at
                                                        1. 1
                                                          Gunnar Bittersmann
                2. 0
                  marctrix
                  1. 0
                    at
                    1. 0
                      marctrix
                      1. 0
                        at
                        1. 0
                          marctrix
                          1. 0
                            at
                            1. 0
                              marctrix
                              1. 2
                                Christian Kruse
                                1. 0
                                  marctrix
                                  1. 0
                                    at
                                2. 0
                                  Pronnewoppen
                                  • meinung
                                  1. 0
                                    marctrix
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Matthias Apsel
                                        • menschelei
                                      2. 1
                                        marctrix

Hallo,

ist dieses Flexbox Grid zu empfehlen? http://flexboxgrid.com/

  1. @@Sophie

    ist dieses Flexbox Grid zu empfehlen? http://flexboxgrid.com/

    Nein.

    <div class="row">
        <div class="col-xs-12
                    col-sm-8
                    col-md-6
                    col-lg-4">
            <div class="box">Responsive</div>
        </div>
    </div>
    

    Es wird Bootstrap mit Flexbox nachgebaut.

    You do not need a CSS Grid based Grid System.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo Gunnar Bittersmann,

      wurdest du denn heute schon http://caniuse.com/#search=grid einsetzten um ein Layout zu gestallten? Oder hast du damit schon Erfahrungen?

      1. @@Sophie

        wurdest du denn heute schon http://caniuse.com/#search=grid einsetzten

        Ja. Grün, soweit das Auge reicht.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar Bittersmann,

          was ist wenn ein User mit einem IE 9 oder 10 kommt? Wie sieht dieser die Seite? Alles untereinander? Gar nicht? Total zerschossen?

          1. @@Sophie

            was ist wenn ein User mit einem IE 9 … kommt?

            Mit IE 9 kommt wohl keiner mehr. Und wenn, dann ein Bot, der sich als IE 9 ausgibt.

            Wie sieht dieser die Seite? Alles untereinander? Gar nicht? Total zerschossen?

            So, wie du den Fallback angibst.

            … oder 10 kommt?

            IE ab 10 versteht Grid (mit Präfix, alte Syntax, noch nicht alle Features) – schließlich kommt das Ganze ja von Microsoft.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. @@Gunnar Bittersmann

              Wie sieht dieser die Seite? Alles untereinander? Gar nicht? Total zerschossen?

              So, wie du den Fallback angibst.

              z.B. auf inline-block zurückfallen

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Hallo Sophie,

    unter bestimmten Umständen kann das so sein:

    • Wenn komplexe Inhalte mittels eines CMS von technischen Laien erstellt werden sollen, so dass der Integrator nur ein Raster vorgibt, nicht aber das das Endergebnis kennt.
    • Wenn sich der Integrator mit Bootstrap auskennt, es aber zu mächtig für das Projekt ist.
    • Wenn nicht davon ausgegangen werden kann, dass die Zielgruppe Browser verwendet, die CSS-Grids unterstützen.

    MfG, at

    1. @@at

      unter bestimmten Umständen kann das so sein:

      • Wenn komplexe Inhalte mittels eines CMS von technischen Laien erstellt werden sollen, so dass der Integrator nur ein Raster vorgibt, nicht aber das das Endergebnis kennt.
      • Wenn sich der Integrator mit Bootstrap auskennt, es aber zu mächtig für das Projekt ist.

      Guter Punkt.

      • Wenn nicht davon ausgegangen werden kann, dass die Zielgruppe Browser verwendet, die CSS-Grids unterstützen.

      Ähm, von welcher Zielgruppe genau willst du da (nicht) ausgehen? IE 9 und abwärts?

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hallo Gunnar,

        • Wenn nicht davon ausgegangen werden kann, dass die Zielgruppe Browser verwendet, die CSS-Grids unterstützen.

        Ähm, von welcher Zielgruppe genau willst du da (nicht) ausgehen? IE 9 und abwärts?

        Android 4.4.

        MfG, at

        1. @@at

          • Wenn nicht davon ausgegangen werden kann, dass die Zielgruppe Browser verwendet, die CSS-Grids unterstützen. Android 4.4.

          Laut Can I Use summieren sich 4er Androide in Deutschland auf etwa 2%. Und das System läuft wohl größtenteils auf Smartphones, wo Inhalte sowieso eher untereinander als mehrspaltig nebeneinander dargestellt werden; Grid-Unterstützung dann irrelevant. Verbleiben noch ein paar Tablets.

          Will man wegen einer verschwindend kleinen Anzahl von Nutzern auf die Vorzüge von CSS Grid verzichten? Ich denke: nein.

          Und – wenn der Aufwand gerechtferigt erscheint – kann man ja einen Fallback vorsehen. Das könnten Floats sein. Und wenn es doch display: inline-block sein sollte, dann haben die paar Nutzer eben ein bisschen Abstand zwischen Boxen – so what? Sie werden’s überleben.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Hallo Gunnar,

            ich gratuliere dir zu der Erkenntnis, dass „Deutschland“ als Ganzes offenbar nicht unter besagte Zielgruppe fällt.

            MfG, at

            1. @@at

              Es ist eigentlich auch völlig egal, ob wir hier über 2% reden oder 5%. Oder 50%. Oder 98%. Progressive enhancement.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hallo Gunnar,

                das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.

                MfG, at

                1. @@at

                  das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.

                  Inwiefern berücksichtigt „ich mache es für die gesamte Zielgruppe gut und für einen Teil noch besser“ Zielgruppen nicht hinreichend?

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. Hallo Gunnar.

                    Inwiefern berücksichtigt „ich mache es für die gesamte Zielgruppe gut und für einen Teil noch besser“ Zielgruppen nicht hinreichend?

                    Insofern, als dass sich der Aufwand für einen möglichst großen Teil der Zielgruppe lohnen sollte, um gerechtfertigt zu sein. Und bei Techniken, deren Mehrwert sich für den Nutzer in engen Grenzen hält, liegt diese Hürde noch höher.

                    MfG, at

                    1. @@at

                      Insofern, als dass sich der Aufwand für einen möglichst großen Teil der Zielgruppe lohnen sollte, um gerechtfertigt zu sein. Und bei Techniken, deren Mehrwert sich für den Nutzer in engen Grenzen hält, liegt diese Hürde noch höher.

                      Da scheint der Mehrwert, den Grid mit sich bringt, ja alle Grenzen zu sprengen. Kaum ein Feature wurde in so kurzer Zeit in allen relevanten Browsern implementiert.

                      LLAP 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                      1. Hallo Gunnar,

                        Insofern, als dass sich der Aufwand für einen möglichst großen Teil der Zielgruppe lohnen sollte, um gerechtfertigt zu sein. Und bei Techniken, deren Mehrwert sich für den Nutzer in engen Grenzen hält, liegt diese Hürde noch höher.

                        Da scheint der Mehrwert, den Grid mit sich bringt, ja alle Grenzen zu sprengen.

                        Deshalb sprach im vom Mehrwert für den Nutzer, im konkreten Fall also keinen nennenswerten.

                        MfG, at

                        1. @@at

                          Deshalb sprach im vom Mehrwert für den Nutzer, im konkreten Fall also keinen nennenswerten.

                          Du findest, dass flexible grid gegenüber inline-block layout keinen nennenswerten Mehrwert für den Nutzer bringt?

                          LLAP 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                          1. @@Gunnar Bittersmann

                            Deshalb sprach im vom Mehrwert für den Nutzer, im konkreten Fall also keinen nennenswerten.

                            Du findest, dass flexible grid gegenüber inline-block layout keinen nennenswerten Mehrwert für den Nutzer bringt?

                            Oder gegenüber float layout?

                            Und da bringt’s auch Mehrwert für Entwickler: die ganzen media queries fallen weg; mit Grid geht’s viel einfacher.

                            LLAP 🖖

                            --
                            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                            1. Hallo Gunnar,

                              Oder gegenüber float layout?

                              Ja.

                              MfG, at

                            2. Hi Gunnar!

                              die ganzen media queries fallen weg; mit Grid geht’s viel einfacher.

                              Für mich sind Grids völliges Neuland. Ich verstehe deshalb nicht, wieso bei deren Verwendung die Media Queries wegfallen sollten. Wenn ich ein responsive Design mache, dann brauche ich doch auch bei der Verwendung von Grids Breakpoints und somit Media Queries, oder?!

                              Wie meintest Du das?

                              LG

                              Ein dummer Mitlesender

                              1. @@Mitlesender Dummer

                                Für mich sind Grids völliges Neuland. Ich verstehe deshalb nicht, wieso bei deren Verwendung die Media Queries wegfallen sollten. Wenn ich ein responsive Design mache, dann brauche ich doch auch bei der Verwendung von Grids Breakpoints und somit Media Queries, oder?!

                                Nein, brauchst du nicht. Anstatt mit MQs festzulegen, wie viele Boxen jeweils in Spalten nebeneinander sein sollen, und ½, ⅓, ¼ usw. in Prozente umzurechnen, kannst du bei Grid einfach sagen: du hömmal Browser, pack mir mal soviele Boxen nebeneinander wie Platz ist, wobei die Boxen mindestens soundso breit sein sollen.

                                Wie meintest Du das?

                                Wie im verlinkten Codepen gezeigt.

                                LLAP 🖖

                                --
                                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                1. Es tut mir leid, aber je länger ich darüber nachdenke, darüber lese und mich damit beschäftige, um so weniger verstehe ich es. 😟

                                  Wenn ich ein Mobile-First Design schreibe, in dem Header, Content, Navigation, Side-Content und Footer untereinander stehen sollen, dann brauche ich ja nur 1 Box in der Breite.

                                  Bei der Ausgabe für Monitore, wo dann Content, Navigation und Side-Content nebeneinander sein sollen, müssen es mindestens 3 Boxen sein.

                                  Wie das jetzt verwirklicht werden kann ohne Media Queries, ist mir ein Rätsel.

                                  1. Hej Mitlesender,

                                    So ähnlich wie bei flexbox, aber die Syntax ist anders und das Ergebnis detaillierter beeinflussbar - Media queries können als finetuning noch oben drauf gesetzt werden, ich würde aber vorschlagen, weniger verdammten Code zu schreiben…

                                    Marc

                                  2. @@Mitlesender Dummer

                                    Wenn ich ein Mobile-First Design schreibe, in dem Header, Content, Navigation, Side-Content und Footer untereinander stehen sollen, dann brauche ich ja nur 1 Box in der Breite.

                                    Bei der Ausgabe für Monitore, wo dann Content, Navigation und Side-Content nebeneinander sein sollen, müssen es mindestens 3 Boxen sein.

                                    Wie das jetzt verwirklicht werden kann ohne Media Queries, ist mir ein Rätsel.

                                    Nun ja, wenn du ein Grid willst, willst du ein Grid. Wenn du flexible Boxen willst, willst du flexible Boxen.

                                    LLAP 🖖

                                    --
                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                              2. Hello,

                                die ganzen media queries fallen weg; mit Grid geht’s viel einfacher.

                                Für mich sind Grids völliges Neuland. Ich verstehe deshalb nicht, wieso bei deren Verwendung die Media Queries wegfallen sollten. Wenn ich ein responsive Design mache, dann brauche ich doch auch bei der Verwendung von Grids Breakpoints und somit Media Queries, oder?!

                                Vielleicht sind die Grids auch nur ein Versuch des Redesigns der Tables unter Entzug der semantischen Bedeutung?

                                Ich schnall da auch noch nicht durch, wann man Grids und wann man Tables zu verwenden hat :-O

                                Liebe Grüße
                                Tom S.

                                --
                                Es gibt nichts Gutes, außer man tut es
                                Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                                1. Hallo TS,

                                  Grid: Kein starren Zuordnungen im HTML - Layout rein im CSS

                                  Table: Aufteilung im HTML in Zeilen und Spalten - CSS kann deren Größe steuern

                                  Sprich: Wenn Du je nach Medium die Aufteilung in Zeilen und Spalten verändern willst, hast Du bei Tables verloren und mit Grid alle Möglichkeiten.

                                  Abgesehen davon gilt immer noch der einfache Merksatz: table $$\Longleftrightarrow$$ tabellarische Daten. Wobei der Grenzbereich zwischen "tabellarische Daten" und "Listendaten" breit und grau ist...

                                  Rolf

                                  --
                                  Dosen sind silbern
                                  1. Hello,

                                    Grid: Kein starren Zuordnungen im HTML - Layout rein im CSS Table: Aufteilung im HTML in Zeilen und Spalten - CSS kann deren Größe steuern

                                    Dann finde ich die leicht verständlichen Anleitungen zu "von Table- zu Grid-Markup" wo?

                                    Liebe Grüße
                                    Tom S.

                                    --
                                    Es gibt nichts Gutes, außer man tut es
                                    Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                                    1. Servus!

                                      Hello,

                                      Grid: Kein starren Zuordnungen im HTML - Layout rein im CSS Table: Aufteilung im HTML in Zeilen und Spalten - CSS kann deren Größe steuern

                                      Dann finde ich die leicht verständlichen Anleitungen zu "von Table- zu Grid-Markup" wo?

                                      Im Wiki: Grid

                                      Unten finden sich viele der Links, die auch Gunnar des Öfteren schon vorgestellt hat;

                                      z. B. gridbyexamples.com von Rachel Andrews.

                                      Liebe Grüße
                                      Tom S.

                                      Herzliche Grüße

                                      Matthias Scharwies

                                      --
                                      Es gibt viel zu tun: ToDo-Liste
                                      1. Hallo Matthias!

                                        Im Wiki: Grid

                                        Den Artikel fin de ich für einen Neuling bei dem Thema nicht sehr gut geschrieben. Gunnar hat weiter oben in diesem Thread gesagt, man brauche jetzt keine Media Queries mehr. Zu diesem Thema steht im Wiki ganz unten plötzlich:

                                        " Natürlich ist es auch möglich, mit media queries die Anordnung der Elemente an den Viewport anzupasssen ".

                                        Was heißt "auch"? Wie denn sonst?

                                        Ich finde, da sollte SELFHTML im Wiki eine Standard-Seite mit Header, Content, Navigation, Side-Content und Footer, wo das Layout mit Grid verwirklicht ist, bereitstellen und dabei zeigen und erklären, wie sich die Seite bei Verkleinerung des Viewports ändert.Aber die Verbindung Grids <-> Responsive Webdesign vermisse ich.

                                        Liebe Grüße

                                        Eun dummer Mitleser

                                        1. @@Mitlesender Dummer

                                          Gunnar hat weiter oben in diesem Thread gesagt, man brauche jetzt keine Media Queries mehr.

                                          So, hat er das?

                                          Für manches, was früher nur mit MQs ging, braucht man jetzt keine mehr. Ich wollte nicht sagen, dass man jetzt überhaupt keine MQs mehr bräuchte.

                                          Ich finde, da sollte SELFHTML im Wiki eine Standard-Seite mit Header, Content, Navigation, Side-Content und Footer, wo das Layout mit Grid verwirklicht ist, bereitstellen und dabei zeigen und erklären, wie sich die Seite bei Verkleinerung des Viewports ändert.

                                          Auf die Beispiele in Rachel Andrews Grid by example wurde ja schon verwiesen.

                                          LLAP 🖖

                                          --
                                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                        2. Servus!

                                          Hallo Matthias!

                                          Im Wiki: Grid

                                          Den Artikel fin de ich für einen Neuling bei dem Thema nicht sehr gut geschrieben.

                                          Das gibt ewige Diskussionen, wo und wie Einsteiger bei Selfhtml einsteigen.

                                          Der Bereich CSS/Eigenschaften soll die einzelnen Eigenschaften erklären. Das würde bei grid zugegebenermaßen mehrere Unterseiten erfordern. Hier sind unten unter Siehe auch vorhandene Tutorials verlinkt.

                                          Anfänger kommen über das Nachwort des HTML-Einstiegstutorials ( und anderer) direkt zu

                                          Gunnar hat weiter oben in diesem Thread gesagt, man brauche jetzt keine Media Queries mehr. Zu diesem Thema steht im Wiki ganz unten plötzlich:

                                          " Natürlich ist es auch möglich, mit media queries die Anordnung der Elemente an den Viewport anzupasssen ".

                                          Was heißt "auch"? Wie denn sonst?

                                          Über die von Gunnar genannte Methode des Auto placement. Habe auf der grid-Seite eine kurze Erklärung eingefügt.

                                          Ich finde, da sollte SELFHTML im Wiki eine Standard-Seite mit Header, Content, Navigation, Side-Content und Footer, wo das Layout mit Grid verwirklicht ist, bereitstellen und dabei zeigen und erklären, wie sich die Seite bei Verkleinerung des Viewports ändert.Aber die Verbindung Grids <-> Responsive Webdesign vermisse ich.

                                          Zieh dir mal das im anfänglich genannten Artikel verlinkte Tutorial rein. Da findest du das Gewünschte:

                                          Liebe Grüße

                                          Eun dummer Mitleser

                                          Du könntest ja vom Mitleser zum aktiven Mitarbeiter werden, wenn du bei solch fehlenden Verlinkungen stöberst und evtl. die passenden Links einfügst.

                                          Herzliche Grüße

                                          Matthias Scharwies

                                          --
                                          Es gibt viel zu tun: ToDo-Liste
                                        3. Servus!

                                          @mitlesender Dummer @TS

                                          Im Wiki: Grid

                                          Den Artikel fin de ich für einen Neuling bei dem Thema nicht sehr gut geschrieben.

                                          Ich habe jetzt einen dritten Artikel:

                                          Mit dem Seitennamen bin ich noch nicht zufrieden. (implizite Erzeugung von Rastern klingt aber auch nicht gut)

                                          Da ich grad nur mit dem Tablet unterwegs bin, sind Beispiele, interne Links und weiteres noch nicht so ausgefuxxt.

                                          Gunnar hat weiter oben in diesem Thread gesagt, man brauche jetzt keine Media Queries mehr.

                                          Am Ende wird gezeigt, wie man mit 5 Zeilen CSS eine responsive Seite hinkriegt. (Ich muss mir mal selber auf die Schulter klopfen , weil's kein anderer tut.)

                                          Zu diesem Thema steht im Wiki ganz unten plötzlich:

                                          " Natürlich ist es auch möglich, mit media queries die Anordnung der Elemente an den Viewport anzupasssen ".

                                          Was heißt "auch"? Wie denn sonst?

                                          So, wie ich's gezeigt hab. Das Wiki ist (nicht nur) in diesem Bereich ein work in progress und ich bitte um aktive Mithilfe.

                                          Herzliche Grüße

                                          Matthias Scharwies

                                          --
                                          Es gibt viel zu tun: ToDo-Liste
                                          1. Hej Matthias,

                                            " Natürlich ist es auch möglich, mit media queries die Anordnung der Elemente an den Viewport anzupasssen ".

                                            Was heißt "auch"? Wie denn sonst?

                                            So, wie ich's gezeigt hab. Das Wiki ist (nicht nur) in diesem Bereich ein work in progress und ich bitte um aktive Mithilfe.

                                            Bei CSS-Grid bin ich tatsächlich noch Neuling und möchte dazu noch ncihts selber schreiben, vor allem, weil ich eine Sache besser machen möchte, als andere Tutorials. Ich bin total genervt davon, dass es nirgends Beispiele gibt, die auch im IE/Edge bis Version 15 funktionieren. Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt. Denn damit lässt man wirklich noch zu viele Nutzer zurück und ich würde dann (wenn ich es eh als Fallback brauche) in der Praxis wohl eher noch bei Flexbox bleiben - was dann wiederum bedeutet, dass ich Grid-Anfänger bleibe. Da beißt die Katze sich selber in den Schwanz…

                                            Marc

                                            PS: Ich lasse mich gerne eines besseren belehren!

                                            PPS: Dessen ungeachtet dir ein herzliches Dankeschön für Artikel und Beispiele, @Matthias Scharwies — und natürlich ein + (=virtuelles Schulterklopfen)

                                            1. @@marctrix

                                              Ich bin total genervt davon, dass es nirgends Beispiele gibt, die auch im IE/Edge bis Version 15 funktionieren.

                                              Ich hab mal die -ms--Dingens zu einem Beispiel hinzugefügt.

                                              Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt.

                                              Naja, so erheblich ist der Aufwand nun auch wieder nicht:

                                              Zu display: grid gesellt sich display: -ms-grid; versteht sich von selbst.

                                              grid-template-columns heißt -ms-grid-columns.

                                              Was bei -ms- wohl[1] nicht geht: benannte Rasterlinien/Felder (obwohl im WD vom 2011-04-07 vorgesehen).

                                              Was man wohl auch tun muss: Den Items die Zeile per -ms-grid-row zuweisen; das geschieht bei IE/Edge wohl noch nicht automatisch.

                                              Die Deklaration der Zeilen mit -ms-row-columns: auto[4] ist allerdings nicht erforderlich.

                                              PS: Ich lasse mich gerne eines besseren belehren!

                                              Bist du?

                                              Was bei -ms- allerdings noch nicht geht: auto-fill. Solch ein flexibles Grid wäre im IE/Edge noch nicht möglich.

                                              LLAP 🖖

                                              --
                                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

                                              1. „wohl“ meint: es ist mir bei meinen Versuchen nicht gelungen und ich habe im MSDN nicht anderweitiges gefunden ↩︎

                                              1. Hej Gunnar,

                                                Ich bin total genervt davon, dass es nirgends Beispiele gibt, die auch im IE/Edge bis Version 15 funktionieren.

                                                Ich hab mal die -ms--Dingens zu einem Beispiel hinzugefügt.

                                                Da ich bei deinen Beispielen schon öfters nach Lösungen gesucht habe: danke dafür!

                                                Da hast du dir aber (absichtlich?) das einfachste herausgesucht. 😉

                                                Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt.

                                                Was man wohl auch tun muss: Den Items die Zeile per -ms-grid-row zuweisen; das geschieht bei IE/Edge noch nicht automatisch.

                                                Und per -ms-grid-column der Spalte.

                                                Das kann sehr aufwändig werden und ist einer der Hauptgründe für mich CSS-Grid noch nicht verwendet zu haben (produktiv zumindest, zum Üben schon).

                                                Was ich an Grid erst mal toll finde ist zum Beispiel eine (Bilder-) Galerie mit drei Zeilen Code zu erstellen — like so:

                                                ul {
                                                	display: grid;
                                                	grid-gap: 1em;
                                                	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                                                }
                                                

                                                Soll es aber im IE/Edge funktionieren müsste das Folgende daraus werden (und das wäre nicht mal responsiv - man müsste also mittels @media den Code mehrfach für unterschiedliche Bildschirmgrößen schreiben - völlig inakzeptabel für mich), wenn ich nicht was wesentliches übersehen habe (anyone?) - online Beispiel für diese CSS-Grid-Übung

                                                			ul {
                                                				display: -ms-grid;
                                                				-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
                                                				-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                                                				display: grid;
                                                				grid-gap: 1em;
                                                				padding: 1em;
                                                				white-space: nowrap;
                                                				list-style: none;
                                                				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                                                			}
                                                			ul li {
                                                				box-shadow: 0px 0px 4px 5px #ddd098 inset;
                                                				text-align: center;
                                                			}
                                                			ul li {
                                                				box-shadow: 0px 0px 4px 5px #ddd098 inset;
                                                				text-align: center;
                                                			}
                                                			ul li:nth-child(-n+35) {
                                                				-ms-grid-row: 7;
                                                			}
                                                			ul li:nth-child(-n+30) {
                                                				-ms-grid-row: 6;
                                                			}
                                                			ul li:nth-child(-n+25) {
                                                				-ms-grid-row: 5;
                                                			}
                                                			ul li:nth-child(-n+20) {
                                                				-ms-grid-row: 4;
                                                			}
                                                			ul li:nth-child(-n+15) {
                                                				-ms-grid-row: 3;
                                                			}
                                                			ul li:nth-child(-n+10) {
                                                				-ms-grid-row: 2;
                                                			}
                                                			ul li:nth-child(-n+5) {
                                                				-ms-grid-row: 1;
                                                			}
                                                			ul li:nth-child(1),
                                                			ul li:nth-child(6),
                                                			ul li:nth-child(11),
                                                			ul li:nth-child(16),
                                                			ul li:nth-child(21),
                                                			ul li:nth-child(26),
                                                			ul li:nth-child(31) {
                                                				-ms-grid-column: 1;
                                                			}
                                                			ul li:nth-child(2),
                                                			ul li:nth-child(7),
                                                			ul li:nth-child(12),
                                                			ul li:nth-child(17),
                                                			ul li:nth-child(22),
                                                			ul li:nth-child(27),
                                                			ul li:nth-child(32) {
                                                				-ms-grid-column: 2;
                                                			}
                                                			ul li:nth-child(3),
                                                			ul li:nth-child(8),
                                                			ul li:nth-child(13),
                                                			ul li:nth-child(18),
                                                			ul li:nth-child(23),
                                                			ul li:nth-child(28),
                                                			ul li:nth-child(33) {
                                                				-ms-grid-column: 3;
                                                			}
                                                			ul li:nth-child(4),
                                                			ul li:nth-child(9),
                                                			ul li:nth-child(14),
                                                			ul li:nth-child(19),
                                                			ul li:nth-child(24),
                                                			ul li:nth-child(29),
                                                			ul li:nth-child(34) {
                                                				-ms-grid-column: 4;
                                                			}
                                                			ul li:nth-child(5),
                                                			ul li:nth-child(10),
                                                			ul li:nth-child(15),
                                                			ul li:nth-child(20),
                                                			ul li:nth-child(25),
                                                			ul li:nth-child(30),
                                                			ul li:nth-child(35) {
                                                				-ms-grid-column: 5;
                                                			}
                                                

                                                Marc

                                                1. Hej marctrix,

                                                  [Unterstützung für IE gte 10 und Edge lte 15]

                                                  Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt.

                                                  Auf einer Seite mittels CSS-Grid einige wenige Bereiche (Kopf, Navi, Randspalte, Hauptinhalt und footer) zu positionieren, ist dagegen kein Problem - die paar Elemente sind schnell platziert und es müsste einige Vorteile gegenüber flexboxen geben - zum Beispiel sollten sich in unabhängigen Containern Raster festlegen, die zueinander bündige Spalten haben (was mir mit flexbox nicht gelungen ist..

                                                  Also dass man im Fußbereich, der breiter als der Hauptinhalt ist, Elemente bündig zum Hauptinhalt ausrichtet.

                                                  Das wollte ich jedenfalls noch ausprobieren…

                                                  Marc

                                                  1. @@marctrix

                                                    es müsste einige Vorteile gegenüber flexboxen geben - zum Beispiel sollten sich in unabhängigen Containern Raster festlegen, die zueinander bündige Spalten haben (was mir mit flexbox nicht gelungen ist..

                                                    Flexbox wirkt ja nur in eine Richtung. Auch wenn sich diese durch wrap schlängeln kann, bleibt’s doch eine Richtung.

                                                    Willst du ein 2D-Raster, willst du Grid.

                                                    LLAP 🖖

                                                    --
                                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                    1. Hej Gunnar,

                                                      @@marctrix

                                                      es müsste einige Vorteile gegenüber flexboxen geben - zum Beispiel sollten sich in unabhängigen Containern Raster festlegen, die zueinander bündige Spalten haben (was mir mit flexbox nicht gelungen ist..

                                                      Flexbox wirkt ja nur in eine Richtung. Auch wenn sich diese durch wrap schlängeln kann, bleibt’s doch eine Richtung.

                                                      Das Problem ist hier die Methode von Flex, den nach Zuteilung der in flex-basis angegeben Größe den frei verfügbaren Platz an alle Elemente entsprechend des mit flex-grow angegebenen Verhältnisses zu verteilen. Wenn zwei Container unterschiedlich groß sind, können die enthaltenen Boxen nicht gleich groß und damit nicht bündig sein, weil der zu verteilende Latz unterschiedlich ist.

                                                      Durch das Umbrechen erhält man natürlich automatisch eine zweite Dimension, ähnlich wie bei meinem CSS-Grid-Beispiel für eine Galerie, die ja auch automatisch umgebrochen wird und sich mit ein paar Ausnahmen wie eine Flex-Box-Umsetzung verhält. Flex-Boxen haben in bestimmten Einsatz-Szenarien sogar Vorteile — CSS-Grid ist Aja ich kein Ersatz für Flexbox sondern eine zusätzliche Methode, um Elemente anzuordnen.

                                                      Die zweidimensionalen Fähigkeiten von Grid kommen bei anderen Einsatzzwecken deutlicher zum Tragen und entfalten dort auch Ihre Vorteile (natürlich vor allem bei der Seitenaufteilung).

                                                      Willst du ein 2D-Raster, willst du Grid.

                                                      Klar. 😉

                                                      Marc

                                                  2. Hej marctrix,

                                                    Auf einer Seite mittels CSS-Grid einige wenige Bereiche (Kopf, Navi, Randspalte, Hauptinhalt und footer) zu positionieren, ist dagegen kein Problem - die paar Elemente sind schnell platziert und es müsste einige Vorteile gegenüber flexboxen geben - zum Beispiel sollten sich in unabhängigen Containern Raster festlegen, die zueinander bündige Spalten haben (was mir mit flexbox nicht gelungen ist..

                                                    Also dass man im Fußbereich, der breiter als der Hauptinhalt ist, Elemente bündig zum Hauptinhalt ausrichtet.

                                                    Ja, das geht. Ein online-Beispiel mit Elementen in verschiedenen Eltern die zueinander bündig ausgerichtet sind mittels CSS-Grid

                                                    Marc

                                                2. @@marctrix

                                                  Was ich an Grid erst mal toll finde ist zum Beispiel eine (Bilder-) Galerie mit drei Zeilen Code zu erstellen […]

                                                  Soll es aber im IE/Edge funktionieren müsste das Folgende daraus werden […]

                                                  Nei-en! Es wäre in der Tat Wahnsinn, ein auto-fill-Grid für IE/Edge mit MQs nachbauen zu wollen. Da ist man wohl – wie gezeigt – mit einem Fallback auf inline-block besser dran. (Bei gleichhohen Boxen gingen auch Floats.)

                                                  LLAP 🖖

                                                  --
                                                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                  1. Hallo,

                                                    ihr solltet euch mal darauf einigen, was ein Fallback sein soll:

                                                    • exakter Nachbau,
                                                    • etwas halbwegs Brauchbares,
                                                    • ein freundlicher Hinweis, einen vernümftigen Browser zu verwenden,

                                                    Gruß
                                                    Jürgen

                                                    1. Hej JürgenB,

                                                      • etwas halbwegs Brauchbares,

                                                      Von meiner Seite aus. Wie @Gunnar Bittersmann bereits weiter oben erwähnte, sollte man sich sehr gut überlegen, wie viel Arbeit man noch in die Unterstützung veralteter Software stecken sollte (bzw muss) - mehr als unbedingt nötig würde ich dafür nicht investieren.

                                                      Wie viel das genau ist und welche Browser gemeint sind, hängt einerseits vom Projekt ab. Andererseits konzipiere ich meine Seiten möglichst so (gelingt nicht immer, wenn nicht alle Beteiligten und die verwendete Software mitspielen), dass zur Not nur eine korrekt ausgezeichnete HTML-Seite übrig bleibt.

                                                      Die wäre responsive, zugänglich und zu jedem Browser (bis hin zum ersten jemals entwickelten) kompatibel.

                                                      Marc

                                                      1. @@marctrix

                                                        […] dass zur Not nur eine korrekt ausgezeichnete HTML-Seite übrig bleibt.

                                                        Die wäre responsive, zugänglich und zu jedem Browser (bis hin zum ersten jemals entwickelten) kompatibel.

                                                        Mitgeschleppte Sprachdesignfehler aus den Anfangstagen von HTML stehen dem entgegen.

                                                        LLAP 🖖

                                                        --
                                                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                        1. Hej Gunnar,

                                                          @@marctrix

                                                          […] dass zur Not nur eine korrekt ausgezeichnete HTML-Seite übrig bleibt.

                                                          Die wäre responsive, zugänglich und zu jedem Browser (bis hin zum ersten jemals entwickelten) kompatibel.

                                                          Mitgeschleppte Sprachdesignfehler aus den Anfangstagen von HTML stehen dem entgegen.

                                                          Zugegeben — wenn ich pingelig sein will (und das bin ich ja gerne), gehört in den Fließtext allerdings auch eine Beschreibung dessen, was man in einem Bild sieht, damit jedem klar wird, warum sich das Bild da befindet, so dass die weitere Argumentation für jeden verständlich bleibt.

                                                          Beispiel: „Wie auf der Darstellung zu sehen, ist die Temperatur des Wassers umso höher gestiegen, je länger der Topf auf der Herdplatte stand. Daraus schließe ich, dass die Herdplatte wärmer ist als die Umgebung und das Wasser dadurch erhitzt wurde. Das bedeutet…“

                                                          Dann kann man den Artikel sogar noch verstehen, wenn die Bilder nicht angezeigt werden. — Aber ich bin Redakteuren gegenüber nicht weisungsbefugt 😉

                                                          Marc

                                                    2. @@JürgenB

                                                      • exakter Nachbau,

                                                      Wenn dasselbe mit alten Techniken möglich wäre, dann gäbe es die neuen wie Grid ja gar nicht.

                                                      Man kann sich sicher die Ausmaße und Positionierung der einzelnen Elemente mit JavaScript ausrechenen. Allerdings wäre das nun wirklich sehr viel Entwicklungsaufwand.

                                                      Und alte Browser laufen wohl meist auf alten Maschinen, die nicht die schnellsten sind. Da noch zusätzlich Unmengen an JavaScript draufzuballern dürfte der Fluffigkeit bei der Bedienung, also der UX kaum zugute kommen.

                                                      • etwas halbwegs Brauchbares,

                                                      Wobei „halbwegs“ auch „Viertel“ oder „drei Viertel“ heißen kann. Das muss man je nach Projekt (incl. dessen jeweiliger Zielgruppe) abwägen.

                                                      • ein freundlicher Hinweis, einen vernümftigen Browser zu verwenden,

                                                      Der darf auch weniger freundlich sein; wird sowieso nicht gelesen, geschweige denn befolgt. Außerdem müsste ein solcher Hinweis meist an den Systemadministrator denn an den Nutzer gehen.

                                                      LLAP 🖖

                                                      --
                                                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                  2. Hej Gunnar,

                                                    @@marctrix

                                                    Was ich an Grid erst mal toll finde ist zum Beispiel eine (Bilder-) Galerie mit drei Zeilen Code zu erstellen […]

                                                    Soll es aber im IE/Edge funktionieren müsste das Folgende daraus werden […]

                                                    Nei-en! Es wäre in der Tat Wahnsinn, ein auto-fill-Grid für IE/Edge mit MQs nachbauen zu wollen. Da ist man wohl – wie gezeigt – mit einem Fallback auf inline-block besser dran. (Bei gleichhohen Boxen gingen auch Floats.)

                                                    Da du das mehrfach erwähnt und in Codepens so umgesetzt hast: mir erscheinen flexboxen näherliegend - nimmst du inline-block und float „nur“ wegen der Unterstützung (noch) älterer Browser?

                                                    Marc

                                                    1. @@marctrix

                                                      Da du das mehrfach erwähnt und in Codepens so umgesetzt hast: mir erscheinen flexboxen näherliegend - nimmst du inline-block und float „nur“ wegen der Unterstützung (noch) älterer Browser?

                                                      Wie’s der Zufall so will, hatte ich u.a. das Thema gerade beim Mittagessen mit meinem geschätzten Kollegen.

                                                      Flexbox als Fallback kann sinnvoll sein für Browser, die Flexbox schon können, aber Grid noch nicht. Also irgenwelche WebKits/Chromes/Chromiums auf irgendwelchen Androiden, die niemals ein Update erfahren. (Samsung bspw.)

                                                      Nun könnte man ideologisch argumentieren, dass die Leute sich doch ein vernünftiges Gerät zulegen sollen (und nicht eine Wanze, die sie bereitwillig überall mit hinnehmen), das dürfte aber nicht im Sinne der Stakeholder sein.

                                                      LLAP 🖖

                                                      --
                                                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                      1. Hej Gunnar,

                                                        @@marctrix

                                                        Da du das mehrfach erwähnt und in Codepens so umgesetzt hast: mir erscheinen flexboxen näherliegend - nimmst du inline-block und float „nur“ wegen der Unterstützung (noch) älterer Browser?

                                                        Wie’s der Zufall so will, hatte ich u.a. das Thema gerade beim Mittagessen mit meinem geschätzten Kollegen.

                                                        Viele Grüße nächstes Mal!

                                                        Flexbox als Fallback kann sinnvoll sein für Browser, die Flexbox schon können, aber Grid noch nicht.

                                                        Merke gerade, ich hatte hier Anwendungsfälle wie die hier beschriebene Galerie im Sinn, die sich mit Flexbox schön umsetzen lässt.

                                                        Damit löse ich eher das Problem, die Browser zu unterstützen, die CSS-Grid zwar können, aber nicht vollständig. Die Browser, die Grid gar nicht können, können ja (fast?) alle auch keine flexboxen…

                                                        Insofern machen die dann auch keinen Sinn als Fallback - wobei ich wie gesagt auch mit dem Fallback beginnen würde und es dann auch nicht so bezeichne - eher als erste Annäherung an den Wunschzustand.

                                                        Marc

                                                        1. @@marctrix

                                                          Wie’s der Zufall so will, hatte ich u.a. das Thema gerade beim Mittagessen mit meinem geschätzten Kollegen.

                                                          Viele Grüße nächstes Mal!

                                                          Hach, siehste, über dich haben wir gar nicht gesprochen. Nächstes Mal.

                                                          Flexbox als Fallback kann sinnvoll sein für Browser, die Flexbox schon können, aber Grid noch nicht.

                                                          Merke gerade, ich hatte hier Anwendungsfälle wie die hier beschriebene Galerie im Sinn, die sich mit Flexbox schön umsetzen lässt.

                                                          Was bei Flexbox unschön ist: Die Items in der letzten Zeile richten sich in ihrer Breite nicht nach denen in den vorigen Zeilen (Flexbox ist ja kein 2D-Grid.)

                                                          Damit löse ich eher das Problem, die Browser zu unterstützen, die CSS-Grid zwar können, aber nicht vollständig. Die Browser, die Grid gar nicht können, können ja (fast?) alle auch keine flexboxen…

                                                          Ich hatte gerade welche genannt, auf die das nicht zutrifft.

                                                          LLAP 🖖

                                                          --
                                                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                          1. Hej Gunnar,

                                                            @@marctrix

                                                            Wie’s der Zufall so will, hatte ich u.a. das Thema gerade beim Mittagessen mit meinem geschätzten Kollegen.

                                                            Viele Grüße nächstes Mal!

                                                            Hach, siehste, über dich haben wir gar nicht gesprochen. Nächstes Mal.

                                                            😂 - Ich bin sicher, es gibt interessantere Themen.

                                                            Flexbox als Fallback kann sinnvoll sein für Browser, die Flexbox schon können, aber Grid noch nicht.

                                                            Merke gerade, ich hatte hier Anwendungsfälle wie die hier beschriebene Galerie im Sinn, die sich mit Flexbox schön umsetzen lässt.

                                                            Was bei Flexbox unschön ist: Die Items in der letzten Zeile richten sich in ihrer Breite nicht nach denen in den vorigen Zeilen (Flexbox ist ja kein 2D-Grid.)

                                                            Das ist nicht unschön. Das ist ein anderes Verhalten. Manchmal kann gerade das gewünscht sein - daher ist es gut, dass es beides gibt!

                                                            Damit löse ich eher das Problem, die Browser zu unterstützen, die CSS-Grid zwar können, aber nicht vollständig. Die Browser, die Grid gar nicht können, können ja (fast?) alle auch keine flexboxen…

                                                            Ich hatte gerade welche genannt, auf die das nicht zutrifft.

                                                            Dann muss ich das noch mal nachlesen…

                                                            Marc

                                                      2. @@Gunnar Bittersmann

                                                        nimmst du inline-block und float „nur“ wegen der Unterstützung (noch) älterer Browser?

                                                        Funfact: Nachdem ich ein Layout mit Flexbox so halbwegs hinbekommen hatte, da aber noch was rein musste und ich eine Weile überlegt hatte, ob nun Flexbox oder Grid das geignete Mittel sein, führen hier doch tatsächlich Floats zum Ziel.

                                                        Wie’s der Zufall so will, hatte ich u.a. das Thema gerade beim Mittagessen mit meinem geschätzten Kollegen.

                                                        Ja, der hat ein bisschen mit überlegt. 😉

                                                        LLAP 🖖

                                                        --
                                                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                        1. Hej Gunnar,

                                                          @@Gunnar Bittersmann

                                                          nimmst du inline-block und float „nur“ wegen der Unterstützung (noch) älterer Browser?

                                                          Funfact: Nachdem ich ein Layout mit Flexbox so halbwegs hinbekommen hatte, da aber noch was rein musste und ich eine Weile überlegt hatte, ob nun Flexbox oder Grid das geignete Mittel sein, führen hier doch tatsächlich Floats zum Ziel.

                                                          Jein - ich nehme an, es sieht so aus, wie vorgegeben und ja: Floats bleiben ein Mittel zur Ausrichtung und Positionierung. Aber nein: float:right will man nicht für fokussierbare Elemente, weil es die Tab-Reihenfolge kaputt macht…

                                                          Marc

                                                          PS: Darum will man Flex-box- oder Grid-Elemente, die fokussierbare Inhalte haben, auch nicht anders anordnen, als im DOM — der Accessibility-Tree könnte da Abhilfe schaffen. PPS: FF hatte die Fokus-Reihenfolge mal der optischen Darstellung angepasst. Das wurde aber als Bug gekennzeichnet und "gefixt".

                                                          1. @@marctrix

                                                            Aber nein: float:right will man nicht für fokussierbare Elemente, weil es die Tab-Reihenfolge kaputt macht…

                                                            Nicht in meinem Beispiel, weil das Site-Logo kein fokussierbares Element ist.

                                                            Und selbst wenn, könnte man argumentieren, dass zuerst das Sprachmenü vorgelesen werden soll und dann die Site-Kennung, auch wenn das Sprachmenü rechts davon steht.

                                                            LLAP 🖖

                                                            --
                                                            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                            1. Hej Gunnar,

                                                              @@marctrix

                                                              Aber nein: float:right will man nicht für fokussierbare Elemente, weil es die Tab-Reihenfolge kaputt macht…

                                                              Nicht in meinem Beispiel, weil das Site-Logo kein fokussierbares Element ist.

                                                              Und selbst wenn, könnte man argumentieren, dass zuerst das Sprachmenü vorgelesen werden soll und dann die Site-Kennung, auch wenn das Sprachmenü rechts davon steht.

                                                              Es geht dabei nicht um die Lesereihenfolge — die ist unproblematisch. Insbesondere Blinden ist es egal, wo Elemente angeordnet sind. Es geht darum, sehende Tastaturnutzer nicht zu verwirren. Und es ist in unserem Kulturkreis schon verwirrend, wenn der erste angetabbte Link am rechten Browserrand zu suchen ist. Auf großen Monitoren ist das leicht zu übersehen.

                                                              Würde ich also auch in diesem Fall nicht empfehlen- in der Sprachauswahl werden die Links dann ja auch wieder von links nach rechts durchgetabbt — logisch nachvollziehbar ist das nicht wirklich.

                                                              Marc

                                                              1. @@marctrix

                                                                Es geht darum, sehende Tastaturnutzer nicht zu verwirren. Und es ist in unserem Kulturkreis schon verwirrend, wenn der erste angetabbte Link am rechten Browserrand zu suchen ist. Auf großen Monitoren ist das leicht zu übersehen.

                                                                In meinem Beispiel ist das Sprachmenü nichts rechts am Bildrand, sondern schließt sich rechts an die Sitekennung an.

                                                                Und steht außerdem in der Höhe noch über dieser, wodurch es nicht verwirren sollte, wenn es als erstes angetabbt wird. Wenn die Sitekennung denn überhaupt fokussierbar wäre.

                                                                LLAP 🖖

                                                                --
                                                                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                                1. Hej Gunnar,

                                                                  @@marctrix

                                                                  Und steht außerdem in der Höhe noch über dieser, wodurch es nicht verwirren sollte, wenn es als erstes angetabbt wird. Wenn die Sitekennung denn überhaupt fokussierbar wäre.

                                                                  Tatsache ist, dass Nutzer bei uns oben links den ersten fokussierbaren Beitrag erwarten.

                                                                  Auch auf Deinen Seiten - dass sich ganz rechts noch etwas darüber findet, dürfte nicht der Erwartungshaltung der meisten Deutschen entsprechen (oder anderer, die von links nach rechts schreiben).

                                                                  Marc

                                                                  1. @@marctrix

                                                                    Tatsache ist, dass Nutzer bei uns oben links den ersten fokussierbaren Beitrag erwarten.

                                                                    Da ist ja auch der Skip-navigation-Link!!1elf (Jetzt auch im Codepen.)

                                                                    Mit dem sollte die Tab-Reihenfolge Skip-navigation-Link, Sprachmenü, Site-Kennung, Navigation noch eindeutiger sein.

                                                                    Wenn denn die Site-Kennung überhaupt in der Tab-Reihenfolge wäre, wohlgemerkt.

                                                                    LLAP 🖖

                                                                    --
                                                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                                    1. Hej Gunnar,

                                                                      @@marctrix

                                                                      Tatsache ist, dass Nutzer bei uns oben links den ersten fokussierbaren Beitrag erwarten.

                                                                      Wenn denn die Site-Kennung überhaupt in der Tab-Reihenfolge wäre, wohlgemerkt.

                                                                      Darum geht es nicht. Wenn ich eine Seite mit Tastatur benutze, dann starre ich regelrecht in die obere linke Ecke und warte darauf, dass sich dort was tut, während ich auf die Tab-Taste hämmere.

                                                                      Insbesondere weil viele Seiten die Skip-Tastatur immer noch nicht für Sehende zugänglich machen. In Deinem Fall hast du das vorbildlich gelöst. Die versteckten Links werden bei Fokussierung dort angezeigt, wo ich sie erwarte (oben links).

                                                                      Obwohl die Site-Kennung in Deinem fall nicht fokussierbar ist, starre ich aber weiter dahin, weil dort muss doch (wie auf den meisten Seiten) gleich die Fokus-Markierung erscheinen. Tut sie zwar nicht, aber nach ein paar weiteren Tastendrücken dann doch. Na also geht doch. Nur schade, dass ich die Seite nicht im klingonischen Original lesen kann.

                                                                      Kann ich?

                                                                      Aber da ist kein Languge-Switcher!

                                                                      Ist da? - Habe ich nicht gesehen…

                                                                      So weit zu meiner ganz persönlichen Art, Webseiten mit der Tastatur zu bedienen…

                                                                      Marc

                                            2. Servus!

                                              Ich bin total genervt davon, dass es nirgends Beispiele gibt, die auch im IE/Edge bis Version 15 funktionieren. Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt.

                                              Gunnar hatte bereits gezeigt, dass es hauptsächlich nur um vendor-Prefixes geht. Ich habe für mich und für das Wiki beschlossen mit meiner begrenzten Zeit darauf zu verzichten.

                                              Denn damit lässt man wirklich noch zu viele Nutzer zurück und ich würde dann (wenn ich es eh als Fallback brauche) in der Praxis wohl eher noch bei Flexbox bleiben - was dann wiederum bedeutet, dass ich Grid-Anfänger bleibe. Da beißt die Katze sich selber in den Schwanz…

                                              Im September/Oktober kommt Edge 16 und wie viel Prozent IE11 wirklich hat, hat Gunnar schon mal problematisiert (laut caniuse 5%).

                                              Matthias Scharwies

                                              --
                                              Es gibt viel zu tun: ToDo-Liste
                                              1. Hallo Matthias,

                                                Im September/Oktober kommt Edge 16 und wie viel Prozent IE11 wirklich hat, hat Gunnar schon mal problematisiert (laut caniuse 5%).

                                                Wird der nicht auch bei der Mehrheit der Nutzer zwangsweise installiert? (Hätte nicht gedacht, dass ich diesen Zwangsupdates von MS mal etwas Positives abgewinnen könnte...)

                                                Gruß
                                                Julius

                                                1. Servus!

                                                  Hallo Matthias,

                                                  Im September/Oktober kommt Edge 16 und wie viel Prozent IE11 wirklich hat, hat Gunnar schon mal problematisiert (laut caniuse 5%).

                                                  Wird der nicht auch bei der Mehrheit der Nutzer zwangsweise installiert?

                                                  Ja, so wie bei Firefox, Chrome, Safari auch.

                                                  (Hätte nicht gedacht, dass ich diesen Zwangsupdates von MS mal etwas Positives abgewinnen könnte...)

                                                  Ja. Was mich aber wundert, ist dass der Edge laut Caniuse wohl nur 2-3% Marktanteil, IE11 aber noch viel mehr hat. IE8 ist mit 0.2% wohl endlich ausgestorben.

                                                  Browser-statistik.de sieht es ähnlich.

                                                  Gruß
                                                  Julius

                                                  Herzliche Grüße

                                                  Matthias Scharwies

                                                  --
                                                  Es gibt viel zu tun: ToDo-Liste
                                                  1. Hallo

                                                    Was mich […] wundert, ist dass der Edge laut Caniuse wohl nur 2-3% Marktanteil, IE11 aber noch viel mehr hat. IE8 ist mit 0.2% wohl endlich ausgestorben.

                                                    Das Problem ist mMn, dass z.B. Windows 10, zumindest, wenn man es als Update von Windows 7 aus installiert hat, sowohl den IE11 als auch den Edge anbietet. Der Dateityp HTML ist standardmäßig mit dem Edge verknüpft. Aber mal ehrlich, wie viele Benutzer werden wohl lokale HTML-Dokumente aus ihrem Dateimanager heraus aufrufen? Viele werden es wohl nicht sein. Typisch ist eher der Aufruf des Browsers selbst. Und so wird wohl von vielen der IE statt des Edge gestartet, schon alleine, weil man den namentlich und sein Icon kennt.

                                                    Tschö, Auge

                                                    --
                                                    Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                                                    Toller Dampf voraus von Terry Pratchett
                                                    1. Guten Morgen,

                                                      Das Problem ist mMn, dass z.B. Windows 10, zumindest, wenn man es als Update von Windows 7 aus installiert hat, sowohl den IE11 als auch den Edge anbietet.

                                                      Der IE ist auch mit dabei, wenn du ein frisches Windows 10 installierst. Außerdem kannst du innerhalb vom Edge sagen diese Seite bitte im IE öffnen.

                                                      1. Hallo

                                                        Das Problem ist mMn, dass z.B. Windows 10, zumindest, wenn man es als Update von Windows 7 aus installiert hat, sowohl den IE11 als auch den Edge anbietet.

                                                        Der IE ist auch mit dabei, wenn du ein frisches Windows 10 installierst.

                                                        Aha, ich kenne Windows 10 nur aus der Firma und wir haben die Karte mit dem Update gezogen.

                                                        Außerdem kannst du innerhalb vom Edge sagen diese Seite bitte im IE öffnen.

                                                        Na toll. Nicht, dass ich selbst einen dieser Browser in täglichem Gebrauch habe — mich betrifft es also nicht —, aber das ist das Angebot des Rückschritts. Ich kann aber durchaus verstehen, warum manche von vornherein den IE statt des Edges benutzen. Die Programmoberfläche des Edge ist, gelinde und mit Vorsicht gesagt, sehr aufgeräumt.

                                                        Tschö, Auge

                                                        --
                                                        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                                                        Toller Dampf voraus von Terry Pratchett
                                              2. Hej Matthias,

                                                Ich bin total genervt davon, dass es nirgends Beispiele gibt, die auch im IE/Edge bis Version 15 funktionieren. Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt.

                                                Gunnar hatte bereits gezeigt, dass es hauptsächlich nur um vendor-Prefixes geht. Ich habe für mich und für das Wiki beschlossen mit meiner begrenzten Zeit darauf zu verzichten.

                                                Das kann ich sehr gut nachvollziehen. Wenn ich mal dazu komme, werde ich sehen, dass ich da was zu beisteuern werde.

                                                War auch keine Kritik am Self-Wiki. Ist nur schwer, funktionierende Beispiele zu finden.

                                                Ich wollte halt direkt als erste eine Galerie umsetzen - da kommt man mit ein paar vendor-Präfixes nicht hin (wie auch @Gunnar Bittersmann bestätigt, scheint es keine Möglichkeit zu geben, das mit Grid in Edge < 16 oder IEs zu erreichen)

                                                Denn damit lässt man wirklich noch zu viele Nutzer zurück und ich würde dann (wenn ich es eh als Fallback brauche) in der Praxis wohl eher noch bei Flexbox bleiben - was dann wiederum bedeutet, dass ich Grid-Anfänger bleibe. Da beißt die Katze sich selber in den Schwanz…

                                                Im September/Oktober kommt Edge 16 und wie viel Prozent IE11 wirklich hat, hat Gunnar schon mal problematisiert (laut caniuse 5%).

                                                Auch das nützt mir nichts, da in meinen Statistiken IE einen sehr höheren Anteil hat - speziell bei Angeboten, die sich an Bundesbehörden und Landesbehörden richten.

                                                Und wenn eine öffentliche Seite einen IE-Anteil von 0,1% hätte, aber ein Behörden-Leiter mit dem IE nicht das sieht, was als Layout abgenommen wurde, kann auch dieser eine Nutzer schon mal darauf bestehen, dass sein Browser unterstützt statt ausgetauscht wird - auf dem privaten iPhone soll es natürlich auch laufen…

                                                Und barrierefrei sein. Und responsiv. Und überhaupt! - Vor allem aber gestern fertig 😉

                                                Nein, Spaß, wenn auch mit einem Körnchen Wahrheit…

                                                Grundsätzlich ist es aber schon so, dass ich ältere Browser länger an der Backe haben dürfte, als der Rest von Euch…

                                                Marc

                                                1. Hallo marctrix,

                                                  Grundsätzlich ist es aber schon so, dass ich ältere Browser länger an der Backe haben dürfte, als der Rest von Euch…

                                                  Habe ich erwähnt, dass einer unserer Kunden gerade auf IE9 upgedated hat? 😉 Enterprise-Kunden können Behörden-artige Strukturen aufweisen…

                                                  LG,
                                                  CK

                                                  1. Hej Christian,

                                                    Grundsätzlich ist es aber schon so, dass ich ältere Browser länger an der Backe haben dürfte, als der Rest von Euch…

                                                    Habe ich erwähnt, dass einer unserer Kunden gerade auf IE9 upgedated hat? 😉 Enterprise-Kunden können Behörden-artige Strukturen aufweisen…

                                                    😂

                                                    Herzlichen Glückwunsch — oder doch eher Beileid?

                                                    Marc

                                                    1. Hallo marctrix,

                                                      Habe ich erwähnt, dass einer unserer Kunden gerade auf IE9 upgedated hat? 😉 Enterprise-Kunden können Behörden-artige Strukturen aufweisen…

                                                      😂

                                                      Herzlichen Glückwunsch — oder doch eher Beileid?

                                                      Danke. Ich nehme den Glückwunsch, dass es nicht mehr IE8 ist und das Beileid, dass es noch IE9 ist 😉

                                                      LG,
                                                      CK

                                                  2. @@Christian Kruse

                                                    Habe ich erwähnt, dass einer unserer Kunden gerade auf IE9 upgedated hat? 😉

                                                    Hast du dem Kunden gegenüber auch erwähnt, dass der Systemadministrator mal eines Updates bedarf? 😉

                                                    LLAP 🖖

                                                    --
                                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                  3. @@Christian Kruse

                                                    Habe ich erwähnt, dass einer unserer Kunden gerade auf IE9 upgedated hat? 😉

                                                    Und jetzt laufen die ganzen CSS-Expressions[1] nicht mehr? Is’ ja doof.

                                                    LLAP 🖖

                                                    --
                                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

                                                    1. Für die jüngeren: CSS-Expressions ↩︎

                                                  4. Hi,

                                                    Habe ich erwähnt, dass einer unserer Kunden gerade auf IE9 upgedated hat? 😉

                                                    Was hat den Kunden zu diesem voreiligen Schritt getrieben? 😉

                                                    cu,
                                                    Andreas a/k/a MudGuard

                                                2. Hej marctrix,

                                                  Grundsätzlich ist es aber schon so, dass ich ältere Browser länger an der Backe haben dürfte, als der Rest von Euch…

                                                  Hatte ich schon erwähnt, das ich Vendor-Prefixes nicht leiden kann? Aus Gründen, die man unter anderem bei Lea Verou nachlesen kann

                                                  Marc

                                                  1. @@marctrix

                                                    Hatte ich schon erwähnt, das ich Vendor-Prefixes nicht leiden kann?

                                                    Dann verwende doch einen Auto-Prefixer! *duckundweg*

                                                    LLAP 🖖

                                                    --
                                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                3. @@marctrix

                                                  Auch das nützt mir nichts, da in meinen Statistiken IE einen sehr höheren Anteil hat - speziell bei Angeboten, die sich an Bundesbehörden und Landesbehörden richten.

                                                  Darf ich dich auf Do websites need to look exactly the same in every browser.com verweisen?

                                                  LLAP 🖖

                                                  --
                                                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                  1. Hej Gunnar,

                                                    @@marctrix

                                                    Auch das nützt mir nichts, da in meinen Statistiken IE einen sehr höheren Anteil hat - speziell bei Angeboten, die sich an Bundesbehörden und Landesbehörden richten.

                                                    Darf ich dich auf Do websites need to look exactly the same in every browser.com verweisen?

                                                    Ja, gerne. Mir zaubert die immer ein Lächeln ins Gesicht. Nur meine Vorgesetzten können die leider nicht mehr sehen, ohne violett im Gesicht zu werden… 😉

                                                    Marc

                                                    1. Hi,

                                                      Nur meine Vorgesetzten können die leider nicht mehr sehen, ohne violett im Gesicht zu werden… 😉

                                                      Vielleicht üben die ja auch nur, um eine Rolle in der Fortsetzung von "Schlümpfe im Weltall" (a/k/a "Avatar") zu bekommen 😉

                                                      cu,
                                                      Andreas a/k/a MudGuard

                                    2. Hallo Tom,

                                      einfache Anleitung, hm. Dazu müsste ich Erfahrung damit haben. In meiner naiven Vorstellung sieht das so aus:

                                      1. lösche table-layoutetes HTML
                                      2. verabschiede dich von der Idee, dass DU das Layout pixelgenau vorgibst
                                      3. schreibe den Markup als HTML5 neu
                                      4. gib dem Browser per grid und flex ein paar Tipps, wie er deine Teile je nach Screen-Breite anordnen könnte
                                      5. ducke dich unter dem Geschrei der Altbrowser-Nutzer - bzw. vermeide den Go-Live bevor Du die folgenden Schritte absolviert hast
                                      6. such Dir eine Möglichkeit, mit Altbrowsern zu testen
                                      7. fummele einen Fallback-Style hin, so dass die Seite dort noch halbwegs lesbar ist.

                                      Klingt jetzt blöd. Aber table-layoutetes HTML ist für progressive enhancement bzw. responsive layout einfach nicht geeignet.

                                      Rolf

                                      --
                                      Dosen sind silbern
                                      1. Hello,

                                        einfache Anleitung, hm. Dazu müsste ich Erfahrung damit haben. In meiner naiven Vorstellung sieht das so aus:

                                        1. lösche table-layoutetes HTML
                                        2. verabschiede dich von der Idee, dass DU das Layout pixelgenau vorgibst
                                        3. schreibe den Markup als HTML5 neu
                                        4. gib dem Browser per grid und flex ein paar Tipps, wie er deine Teile je nach Screen-Breite anordnen könnte
                                        5. ducke dich unter dem Geschrei der Altbrowser-Nutzer - bzw. vermeide den Go-Live bevor Du die folgenden Schritte absolviert hast
                                        6. such Dir eine Möglichkeit, mit Altbrowsern zu testen
                                        7. fummele einen Fallback-Style hin, so dass die Seite dort noch halbwegs lesbar ist.

                                        Klingt jetzt blöd. Aber table-layoutetes HTML ist für progressive enhancement bzw. responsive layout einfach nicht geeignet.

                                        Danke dafür, dass Du auf meine Provokation eingegangen bist. Vielleicht hilft DEINE Anleitung nun wirklich ein kleines Stück...

                                        Trotz vieler Quellen ist es auch mir (der seit ca. 21 Jahren HTML-geschädigt ist) bisher nicht gelungen, den Wechsel logisch sauber zu verarbeiten :-O

                                        Liebe Grüße
                                        Tom S.

                                        --
                                        Es gibt nichts Gutes, außer man tut es
                                        Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                                        1. Hallo TS,

                                          na gut, hast mich durchschaut. Ich habe also mal das passende Tag ergänzt 😉

                                          Rolf

                                          --
                                          Rasen ist grün
                                          1. Hallo,

                                            Ich habe also mal das passende Tag ergänzt 😉

                                            Du meinst, weil du „den Markup“ statt „das Markup“ geschrieben hast, sei das schon Satire?

                                            Gruß
                                            Kalk

                                      2. Hej Rolf,

                                        1. fummele einen Fallback-Style hin, so dass die Seite dort noch halbwegs lesbar ist.

                                        Gute Beschreibung in dieser Kürze, ich würde aber raten die Browser und Geräte, die am wenigsten können, zuerst zu erledigen.

                                        Progressive enhancement, mobile first und so 😉

                                        Marc

                            3. Hallo Gunnar Bittersmann,

                              jetzt bin ich doch etwas verwirrt. Warum fallen die Media Queries weg? Wenn ich bei einer kleinen Auflösung nur noch ein einspaltiges Design haben möchte, wie mache ich das dann?

                              1. Hallo Sophie,

                                ändere mal die Skalierung in einem von Gunnars Codepens mit Grid in diesem Thread, dann siehst du, was pasiert.

                                Gruß
                                Julius

                          2. Hallo Gunnar,

                            Du findest, dass flexible grid gegenüber inline-block layout keinen nennenswerten Mehrwert für den Nutzer bringt?

                            Ja.

                            MfG, at

                            1. @@at

                              Du findest, dass flexible grid gegenüber inline-block layout keinen nennenswerten Mehrwert für den Nutzer bringt?

                              Ja.

                              Nun ja, YMMV.

                              Glücklicherweise ist der Mehraufwand, die paar wenigen Code-Zeilen für Grid hinzuzufügen, ja auch nicht nennenswert. Das Kosten-Nutzen-Verhältnis ist also gewahrt.

                              LLAP 🖖

                              --
                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                              1. Hallo Gunnar,

                                Glücklicherweise ist der Mehraufwand, die paar wenigen Code-Zeilen für Grid hinzuzufügen, ja auch nicht nennenswert. Das Kosten-Nutzen-Verhältnis ist also gewahrt.

                                Ist Mehraufwand, daher: Nope.

                                MfG, at

                                1. @@at

                                  Glücklicherweise ist der Mehraufwand, die paar wenigen Code-Zeilen für Grid hinzuzufügen, ja auch nicht nennenswert. Das Kosten-Nutzen-Verhältnis ist also gewahrt.

                                  Ist Mehraufwand, daher: Nope.

                                  Die Seite überhaupt zu layouten ist Mehraufwand. Den muss man nicht betreiben; die Seite ist auch ohne Autorenstylesheet durch das Browserstylesheet bestens lesbar. (Und wenn nicht, dann hat man beim Markup schwerwiegende Fehler begangen.)

                                  Den ganzen Mehraufwand willst du betreiben, aber die 3 Zeilen

                                  {
                                  	display: grid;
                                  	grid-gap: 1rem;
                                  	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
                                  }
                                  

                                  sind dir zuviel?

                                  LLAP 🖖

                                  --
                                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                  1. Hallo Gunnar,

                                    nicht mehr als dir eine funktionierende Variante für den IE. Oder anders: Ja, ein bestehendes Layout noch einmal anzufassen, ohne für den Nutzer einen deutlichen Gewinn zu erzielen, ist unnötig und damit zuviel.

                                    MfG, at

                                    1. @@at

                                      ein bestehendes Layout noch einmal anzufassen, ohne für den Nutzer einen deutlichen Gewinn zu erzielen, ist unnötig und damit zuviel.

                                      Dass ohne Grid die Boxen nicht die komplette Breite ausfüllen, mag verschmerzlich sein. Aber dass mit Grid die Boxen in einer Zeile dieselbe Höhe haben, halte ich schon für einen deutlichen Gewinn für den Nutzer.

                                      Aber die Verwendung von Grid heute schon bringt noch einen anderen deutlichen Gewinn – nämlich für dich als Entwickler. In wenigen Wochen schon ist die Unterstützung in Browsern bei nahezu 100%, und dann kannst du’s schon.

                                      LLAP 🖖

                                      --
                                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                      1. Hallo Gunnar,

                                        ein bestehendes Layout noch einmal anzufassen, ohne für den Nutzer einen deutlichen Gewinn zu erzielen, ist unnötig und damit zuviel.

                                        Dass ohne Grid die Boxen nicht die komplette Breite ausfüllen, mag verschmerzlich sein. Aber dass mit Grid die Boxen in einer Zeile dieselbe Höhe haben, halte ich schon für einen deutlichen Gewinn für den Nutzer.

                                        Ich nicht. Und für den IE ist dir das ja auch egal. – Ich erwähne das nur noch einmal, weil du das Zitat gekürzt hast.

                                        Aber die Verwendung von Grid heute schon bringt noch einen anderen deutlichen Gewinn – nämlich für dich als Entwickler. In wenigen Wochen schon ist die Unterstützung in Browsern bei nahezu 100%, und dann kannst du’s schon.

                                        Dass alte Browser rückwirkend mit neuen Funktionen ausgestattet würden, wäre mir neu. Vielmehr werden noch heute Geräte mit dieser alten Software verkauft und nie aktualisiert.

                                        Für mich als Entwickler spielt das aber keine Rolle. Ich wähle die geeignete Technik nämlich nach der Zielgruppe aus. Folglich arbeite ich auch bereits mit Grids, wo das sinnvoll ist. Aber ich fasse ein bestehendes CSS nicht noch einmal an, nur weil irgendetwas jetzt auch anders gemacht werden kann.

                                        MfG, at

                                        1. @@at

                                          Aber ich fasse ein bestehendes CSS nicht noch einmal an, nur weil irgendetwas jetzt auch anders gemacht werden kann.

                                          Wenn ich’s richtig verstanden habe, war die Frage hier auch nicht, ob man alte Seiten noch mal mit Grid umbauen sollte, sondern, ob man Grid für laufende Projekt verwenden sollte.

                                          LLAP 🖖

                                          --
                                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                          1. Hallo Gunnar,

                                            Wenn ich’s richtig verstanden habe, war die Frage hier auch nicht, ob man alte Seiten noch mal mit Grid umbauen sollte, sondern, ob man Grid für laufende Projekt verwenden sollte.

                                            Das hatte ich anders aufgefasst. Insofern nix für ungut.

                                            MfG, at

                                            1. Hallo,

                                              ich misch mich mal kurz ein. Es geht um eine Neuentwicklung und nicht um eine Überarbeitung einer Webseite.

                            2. Hej at,

                              Du findest, dass flexible grid gegenüber inline-block layout keinen nennenswerten Mehrwert für den Nutzer bringt?

                              Ja.

                              Wen interessiert das? Dies ist ein öffentliches Forum. Da ist deine persönliche Meinung irrelevant. Sie wird erst durch eine nachvollziehbare Begründung wertvoll!

                              Marc

                              1. Hallo marctrix.

                                Wen interessiert das?

                                Gunnar offenbar.

                                Dies ist ein öffentliches Forum.

                                Deshalb verwenden wir es.

                                Da ist deine persönliche Meinung irrelevant.

                                Das ist deine Meinung.

                                MfG, at

                                1. Hej at,

                                  Dies ist ein öffentliches Forum.

                                  Da ist deine persönliche Meinung irrelevant.

                                  Das ist deine Meinung.

                                  Klar - wessen Meinung denn sonst?

                                  Vielleicht stehe ich mit meiner Meinung alleine da, aber wenn du nur von Gunnar verstanden werden möchtest, solltest du vielleicht ein Medium nutzen, das für ein Zwiegespräch geeigneter ist?!?

                                  Marc

                                  1. Hallo marctrix.

                                    Da ist deine persönliche Meinung irrelevant.

                                    Das ist deine Meinung.

                                    Klar - wessen Meinung denn sonst?

                                    Die von jemanden, der persönliche Meinungen nicht als irrelevant bezeichnet.

                                    Vielleicht stehe ich mit meiner Meinung alleine da, aber wenn du nur von Gunnar verstanden werden möchtest, solltest du vielleicht ein Medium nutzen, das für ein Zwiegespräch geeigneter ist?!?

                                    Vielen Dank, wir haben ein geeignetes gefunden. Hier.

                                    Die letzte Frage verstehe ich wegen ihrer Schreibweise nicht. Sie wirkt etwas gestaucht.

                                    MfG, at

                                  2. @@marctrix

                                    solltest du vielleicht ein Medium nutzen, das für ein Zwiegespräch geeigneter ist?!?

                                    Auch für Zwiegespräche sollte hier im Forum Platz sein.

                                    Manche führen hier sogar Selbstgespräche …

                                    LLAP 🖖

                                    --
                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                    1. Hej Gunnar,

                                      @@marctrix

                                      solltest du vielleicht ein Medium nutzen, das für ein Zwiegespräch geeigneter ist?!?

                                      Auch für Zwiegespräche sollte hier im Forum Platz sein.

                                      Richtig. Aus solchen habe ich auch schon viel mitgenommen. Ich hatte aber konkreten Erklärungsbedarf. Ist frustrierend, wenn man eine Erläuterung für eine öffentlich geäußerte Meinung wünscht und statt dessen mit weiter unerklärter Rechthaberei konfrontiert wird.

                                      at war völlig auf dem Holzweg weil seine Grundannahme über das Thema (Neuentwicklung) schon falsch war.

                                      Mit etwas ausführlicheren Antworten wäre dieses Missverständnis womöglich früher geklärt worden.

                                      Darüber hinaus sind seine Ansichten für mich mitunter nicht nachvollziehbar. Auch hier hätte ich mir Gründe für seine Aussagen gewünscht, die auch anderen nachvollziehbar sind, die hier im öffentlichen Raum mitlesen - mindestens auf Nachhaken.

                                      Wenn man dazu nicht bereit ist, stellt sich schon die Frage, wozu den öffentlichen Raum für solch ein Gespräch nutzen?

                                      So sind seine Einwürfe für mich unverständlich. Da ich deine Meinung kenne (und teile), war diese Diskussion eine Zeitverschwendung für mich. Vielleicht auch für andere.

                                      Zwar passiert es auch mir, dass ich mich nicht so verhalte, wie ich es mir von anderen wünsche (geht sicher vielen von uns so), ich bemühe mich aber in der Regel bei nachfragen auf die Diskussion einzugehen.

                                      at hat das offenbar nicht nötig. Nun gut, seine Sache.

                                      Es ist nur schade, weil er kein dummkopf zu sein scheint. Dann wäre es mir wurscht gewesen. So hätte es mich interessiert, wie er zu seinen Ansichten kommt.

                                      Manche führen hier sogar Selbstgespräche …

                                      Autsch - ja das habe ich verdient!

                                      Marc

                                      1. Hallo marctrix.

                                        Ich hatte aber konkreten Erklärungsbedarf. Ist frustrierend, wenn man eine Erläuterung für eine öffentlich geäußerte Meinung wünscht und statt dessen mit weiter unerklärter Rechthaberei konfrontiert wird.

                                        Das liegt daran, dass ich es nicht mag, wenn meine meist wenigen und in aller Regel sorgfältig gewählten Worte falsch wiedergegeben werden. Dann reagiere ich so. Und keine Zielgruppen zu berücksichtigen ist nun einmal etwas deutlich anderes als bestimmte Zielgruppen nicht hinreichend zu berücksichtigen.

                                        at war völlig auf dem Holzweg weil seine Grundannahme über das Thema (Neuentwicklung) schon falsch war.

                                        Wenn du die Diskussion aber richtig verfolgt hast, solltest du festgestellt haben, dass die Grundannahme lediglich für die Frage von Bedeutung war, welchen Aufwand etwas bedeutet, nicht aber für die Frage nach dem Sinn für die Zielgruppe.

                                        Aber weil es dich ja wirklich zu interessieren scheint, hier noch einmal eine Erläuterung:

                                        Progressive Enhancement definiert einen Ausgangszustand und entwickelt von dem ausgehend vorwärts. Wenn aber meine Zielgruppe technisch bereits hinter dem Ausgangszustand zurückliegt, entwickelt Progressive Enhancement nicht für diese Zielgruppe. Um das zu tun, müsste man nicht progressiv, sondern regressiv entwickeln. Das funktioniert aber technisch nicht so recht und widerspricht ja auch schon dem Begriff nach dem Gedanken von Progressive Enhancement. Soweit der simple grundlegende Mechanismus.

                                        Besonders deutlich wird das an HTML-E-Mails. Unter den Prämissen, dass a) solche E-Mails überhaupt gewünscht sind, b) ein vorgegebenes komplexes Layout umzusetzen ist und c) dabei auch sehr rückständige Programme beziehungsweise Dienste zu berücksichtigen sind, bleibt einem häufig nur, den Ausgangspunkt so weit zu verschieben, dass das technische Ergebnis nicht einmal durchschnittlichen Ansprüchen an die Semantik genügt und auch als Grundlage für Progressive Enhancement weitgehend ungeeignet ist. Ignoriert man das und schreibt semantisch korrektes HTML, hat man zwar einen sauberen Ausgangspunkt für Progressive Enhancement, aber die Zielgruppe nicht hinreichend beachtet.

                                        MfG, at

                                        1. Hej at,

                                          Ich hatte aber konkreten Erklärungsbedarf. Ist frustrierend, wenn man eine Erläuterung für eine öffentlich geäußerte Meinung wünscht und statt dessen mit weiter unerklärter Rechthaberei konfrontiert wird.

                                          Das liegt daran, dass ich es nicht mag, wenn meine meist wenigen und in aller Regel sorgfältig gewählten Worte falsch wiedergegeben werden.

                                          Dann reagiere ich so. Und keine Zielgruppen zu berücksichtigen ist nun einmal etwas deutlich anderes als bestimmte Zielgruppen nicht hinreichend zu berücksichtigen.

                                          Das war tatsächlich unsauber von mir. Wenn du mich gefragt hättest, was ich geschrieben habe, hätte ich gesagt „nicht alle“ - das hatte ich auch schreiben wollen. „Keine“ war dort wirklich falsch.

                                          at war völlig auf dem Holzweg weil seine Grundannahme über das Thema (Neuentwicklung) schon falsch war.

                                          Wenn du die Diskussion aber richtig verfolgt hast, solltest du festgestellt haben, dass die Grundannahme lediglich für die Frage von Bedeutung war, welchen Aufwand etwas bedeutet, nicht aber für die Frage nach dem Sinn für die Zielgruppe.

                                          Genau. Hier bin ich anderer Meinung als du. Neuere Techniken sind in aller Regel deutlich effizienter. Sie werden (zumindest seit ein paar Jahren) fast immer entwickelt mit der Absicht mehr oder weniger offensichtliche Lücken zu schließen für die es HTML-, CSS- und/oder JS-Hacks gibt.

                                          Gerade Boostrap ist ein Beispiel für Ineffizienz - oder wie man mit Kanonen auf Spatzen schießt. Selbst in Agenturen wird das in erster Linie nur für das Layout eingesetzt. Und obwohl man Bootstrap durchaus mit semantisch korrekten Elementen verwenden könnte, finden sich selbst in Vorzeige-Projekten wie der deutschen Vogue nur div-Wüsten.

                                          Es ist wirklich Zeit für CSS-Grid und der Nutzen für den Anwender sehr offensichtlich. CSS-Grid ist eine leichtgewichtige, performante, native und vor allem standardisierte Technik, die sich in allen Browsern einheitlich erwartungsgemäß verhalten sollte. Auch wenn wir uns diesem Ideal gerade erst annähern, sind die Browserhersteller ungewöhnlich schnell bei der Implentierung.

                                          Aber weil es dich ja wirklich zu interessieren scheint, hier noch einmal eine Erläuterung:

                                          Progressive Enhancement definiert einen Ausgangszustand und entwickelt von dem ausgehend vorwärts.

                                          Genau. Wenn der korrekt erkannt sind, treffen alle deine folgenden Überlegungen nicht mehr zu. Die zeigen nur, dass dein Ausgangspunkt falsch gewählt war.

                                          Progressive enhancement berücksichtigt alle relevanten Nutzergruppen.

                                          Hier in der Diskussion über eine moderne, neu zu entwickelnde Website mit E-Mail zu kommen, zeigt auch schön, warum dein Diskussionsstil bei mir rechthaberisch wirkt.

                                          Gut, du hast einschränkend gesagt, dass es bei E-Mails nur besonders deutlich ist, aber ich bin mir sicher, ein Beispiel aus dem Web müsste ein ähnlich konstruierter Spezialfall sein (z.B. ein Intranet wo man für den IE 9 oder älter entwickeln muss - dann ist das eigentliche Problem meiner Meinung nach aber nicht CSS-Grid und der Verzicht darauf nur ein Versuch aus unsinnigen Vorgaben das beste zu machen - was in die Hose gehen wird! Denn das wichtigste für eine nutzbare Website ist die bestimmungsgemäße Verwendung von modernem HTML. Und so eine kann man meist direkt mit CSS-Grid layouten. Es sind selten und dann nur wenige semantisch unnötige div-Elemente für ein Grid-Layout nötig.)

                                          Dein Standpunkt bleibt mir nicht nachvollziehbar und ist meiner Meinung nach schlicht falsch.

                                          Wenn aber meine Zielgruppe technisch bereits hinter dem Ausgangszustand zurückliegt…

                                          … ist der Ausgangspunkt falsch festgelegt!

                                          Besonders deutlich wird das an HTML-E-Mails.

                                          Von denen in dieser Diskussion allerdings nie die Rede war…

                                          Marc

                                          1. Hallo marctrix,

                                            Wenn aber meine Zielgruppe technisch bereits hinter dem Ausgangszustand zurückliegt…

                                            … ist der Ausgangspunkt falsch festgelegt!

                                            Das mag wohl so sein, ist in den allermeisten Fällen allerdings nicht änderbar. Etwa einer unserer Hauptkunden hat vor kurzem (sic!) die Umstellung auf IE9 (sic!) abgeschlossen (sic!). Nicht fürs Intranet, sondern überhaupt.

                                            Und das ist halt die Realität für Anwendungsentwicklung im Web, solange man sich im Enterprise-Umfeld bewegt. Da beisst die Maus keinen Faden ab…

                                            LG,
                                            CK

                                            1. Hej Christian,

                                              Wenn aber meine Zielgruppe technisch bereits hinter dem Ausgangszustand zurückliegt…

                                              … ist der Ausgangspunkt falsch festgelegt!

                                              Das mag wohl so sein, ist in den allermeisten Fällen allerdings nicht änderbar.

                                              Doch natürlich. Ich lege den Ausgangspunkt doch fest. Der kann IE6, IE9 oder Edge 16 sein.

                                              Natürlich muss der Ausgangspunkt so festgelegt sein, dass er alle relevanten Nutzergruppen einschließt. Sonst ist er falsch gewählt!

                                              Und das ist halt die Realität für Anwendungsentwicklung im Web, solange man sich im Enterprise-Umfeld bewegt. Da beisst die Maus keinen Faden ab…

                                              Hm. In deinem Fall könnte nun aber ebenfalls CSS-Grid verwendet werden. Die Beispiele werden allmählich knapp 😉

                                              Marc

                                              1. Hallo marctrix,

                                                Natürlich muss der Ausgangspunkt so festgelegt sein, dass er alle relevanten Nutzergruppen einschließt. Sonst ist er falsch gewählt!

                                                Darum ging es doch.

                                                Und das ist halt die Realität für Anwendungsentwicklung im Web, solange man sich im Enterprise-Umfeld bewegt. Da beisst die Maus keinen Faden ab…

                                                Hm. In deinem Fall könnte nun aber ebenfalls CSS-Grid verwendet werden. Die Beispiele werden allmählich knapp 😉

                                                Es geht doch schon die ganze Zeit[tm] nicht mehr um CSS-Grids, sondern um progressive enhancement und die damit verbundenen Probleme.

                                                LG,
                                                CK

                                                1. Hej Christian,

                                                  Natürlich muss der Ausgangspunkt so festgelegt sein, dass er alle relevanten Nutzergruppen einschließt. Sonst ist er falsch gewählt!

                                                  Darum ging es doch.

                                                  at hätte hier dann mehrfach den Kontext einseitig und nicht nachvollziehbar eingeschränkt und erweitert, um seine These halten zu können.

                                                  Entweder wir reden von einer aktuellen Neuentwicklung unter Zuhilfenahme von CSS-Grid für eine Website im offenen Web die erstmals an den Start geht und für die es keine spezifischen Stastiken gibt (meine Annahme).

                                                  Oder wir reden über jeden denkbaren Fall. Dann muss man jede Frage mit „kommt drauf an“ beantworten.

                                                  Außer einer: progressive enhancement ist nämlich in jedem Fall eine gute Idee!

                                                  Aber ob der Mehraufwand lohnt, wo man den Ausgangspunkt festlegt und welche Gewichtung man diesen Werten in einem Umfeld von Hunderten anderen zu treffenden Entscheidungen beimisst, kommt auf das konkrete Projekt und die Beteiligten an.

                                                  Dann wären die Aussagen von at für mich nicht akzeptabel, weil sie zu konkret sind.

                                                  Die hier besprochene Technik CSS-Grid abzulehnen als Teil eines progressive-enhancement-Konzeptes weil es irgendwo im Web, im E-Mail-Umfeld oder in einem hier nicht angenommenen Fall damit Probleme geben könnte, finde ich dann wieder zu weit gefasst.

                                                  Mir hat das das Verständnis dessen, was at sagen wollte, unmöglich gemacht.

                                                  Zumal @Gunnar Bittersmann den Bezug zum Ursprungspost mehrfach herzustellen versucht hat - meiner Meinung hat er sich weiterhin auf diesen bezogen.

                                                  Und nur in diesem Zusammenhang habe ich ein (Verständnis?-)Problem mit den Aussagen von at.

                                                  Und das ist halt die Realität für Anwendungsentwicklung im Web, solange man sich im Enterprise-Umfeld bewegt. Da beisst die Maus keinen Faden ab…

                                                  Hm. In deinem Fall könnte nun aber ebenfalls CSS-Grid verwendet werden. Die Beispiele werden allmählich knapp 😉

                                                  Es geht doch schon die ganze Zeit[tm] nicht mehr um CSS-Grids, sondern um progressive enhancement und die damit verbundenen Probleme.

                                                  Nein, alle Beispiele von Gunnar zeigten mit wenig zusätzlichem Aufwand die Vorteile von CSS-Grid bereit gestellt werden können, während at jedweden Aufwand - egal wie geringfügig - prinzipiell als für Nutzer völlig unnötig abgelehnt hat.

                                                  Er hat meiner Meinung nach seine These als falsch für das konkrete Beispiel erkannt, aber darauf beharrt und dann Fälle als Beleg konstruiert, um seine These zu belegen.

                                                  Nicht dass mir das nicht auch schon hundert mal passiert wäre!

                                                  Jedem von uns, nehme ich an. Ich hatte auch recht bald den Eindruck, dass die beiden aneinander vorbeireden und wollte eigentlich genau diesen Punkt herausfinden, wo die sich denn gedanklich voneinander getrennt hatten. Denn mir schien da ein an sich fruchtbarer Dialog ins unsinnige abzudriften und ich hätte gerne Argumente von beiden für ihre Standpunkte gelesen, weil es immer förderlich ist, den Disputen von kluge. Menschen zu folgen.

                                                  Wenn eine Seite aber nur (zweifelhafte) Behauptungen aufstellt, macht das eher den Eindruck von: ich weiß das und du nicht. Basta!

                                                  Im Fall von Gunnar habe ich allerdings das Gefühl dass das bezogen auf sein Spezialgebiet (Frontend-Entwicklung) oft (aber nicht immer) eine verkehrte Annahme ist.

                                                  Warum ich so insistiert habe: ich hätte mir diese Diskussion gewünscht! 😉

                                                  Aber inzwischen ist der Moment futsch.

                                                  Marc

                                                  1. @@marctrix

                                                    Nein, alle Beispiele von Gunnar zeigten mit wenig zusätzlichem Aufwand die Vorteile von CSS-Grid bereit gestellt werden können, während at jedweden Aufwand - egal wie geringfügig - prinzipiell als für Nutzer völlig unnötig abgelehnt hat.

                                                    Mag sein, dass er mein „die paar wenigen Code-Zeilen für Grid hinzuzufügen“ anders gedeutet hatte als von mir beabsichtigt.

                                                    Gemeint war: bei der Entwicklung eines laufenden Projekts hinzuzufügen – in dem Augenblick, wo man den CSS-Code schreibt. Nicht gemeint war: bei alten Projekten nachträglich hinzuzufügen.

                                                    Vielleicht war’s ja meine Einsilbigkeit, die dieses Missverständnis heraufbeschworen hat?

                                                    LLAP 🖖

                                                    --
                                                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                    1. Hej Gunnar,

                                                      @@marctrix

                                                      Vielleicht war’s ja meine Einsilbigkeit, die dieses Missverständnis heraufbeschworen hat?

                                                      Keine Ahnung, mir scheint, du warst nicht nur ausführlich genug. Jedenfalls warst du deutlich gesprächiger und erklärbereiter als Dein Diskussionspartner.

                                                      We hätte gedacht, dass ich das mal schreiben würde 😉

                                                      Komischerweise verstehe ich dich ohnehin fast immer. Ich meine mich zu erinnern, schon so manches deiner postings in „Normal-lang-deutsch“ übersetzt zu haben. 😉

                                                      Hat aber auch ein bisschen gebraucht, dich so gut zu kennen. Bei @at hatte ich dazu noch nicht ausreichend Gelegenheit.

                                                      Die Frage ist halt (weil man das mit der Zeit vergisst), ob ihr da nicht beide dran arbeiten könntet (so wie ich mich nicht immer erfolgreich um weniger Weitschweifigkeit bemühe).

                                                      Aber das steht mir nicht an einzufordern. Nett wäre halt auf konkrete Aufforderung zum Verständnis nötige Informationen nachzuliefern 😉

                                                      Marc

                                                      1. @@marctrix

                                                        Komischerweise verstehe ich dich ohnehin fast immer. Ich meine mich zu erinnern, schon so manches deiner postings in „Normal-lang-deutsch“ übersetzt zu haben. 😉

                                                        Ich erinnere mich, vor Urzeiten selbiges für Postings von Cheatah getan zu haben.

                                                        Wo steckt der eigentlich? Ich vermisse ihn.

                                                        Na wenigstens ist at wieder da. 😀

                                                        LLAP 🖖

                                                        --
                                                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                        1. Hej Gunnar,

                                                          @@marctrix

                                                          Komischerweise verstehe ich dich ohnehin fast immer. Ich meine mich zu erinnern, schon so manches deiner postings in „Normal-lang-deutsch“ übersetzt zu haben. 😉

                                                          Ich erinnere mich, vor Urzeiten selbiges für Postings von Cheatah getan zu haben.

                                                          Wo steckt der eigentlich? Ich vermisse ihn.

                                                          Da bist du nicht der einzige!

                                                          Na wenigstens ist at wieder da. 😀

                                                          Es freut mich, dass du das sagst. Das macht mich neugierig auf weitere Beiträge von ihm!

                                                          Marc

                                                2. Hej Christian,

                                                  Es geht doch schon die ganze Zeit[tm] nicht mehr um CSS-Grids, sondern um progressive enhancement und die damit verbundenen Probleme.

                                                  Oder um die prinzipielle Ablehnung von progressive enhancement generell.

                                                  Mir klang das jedenfalls danach (was ich so absurd fand, dass ich das gerne näher erklärt bekommen hätte). Als @Gunnar Bittersmann sagte, er wende CSS-Grid im Rahmen von progressive enhancement an, lautete die Antwort von @at in wohl überlegten knappen Worten: „das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.“

                                                  Insofern konnte ich das nur als generelle Ablehnung von progressive enhancement verstehen.

                                                  Damit hätte ich ein Problem gehabt. Schön dass das nun geklärt ist 😉

                                                  Marc

                                                  1. Hallo marctrix.

                                                    Als @Gunnar Bittersmann sagte, er wende CSS-Grid im Rahmen von progressive enhancement an, lautete die Antwort von @at in wohl überlegten knappen Worten: „das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.“

                                                    Du tust es schon wieder, diesmal mit Gunnar: Seine Aussage war eine deutlich andere als von dir hier wiedergegeben wird. Er hat unter Berufung auf Progressive Enhancement behauptet, auch 98% der Nutzer sei eine zu vernachlässigende Größe. Und „das halte ich [nach wie vor] für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt“, also in bestimmten Fällen von diesen 98% auch nach Anwendung von Progressive Enhancement ein zu großer Anteil zurückbliebe.

                                                    Den konkreten Anwendungsfall HTML-E-Mail dann abzuqualifizieren und stattdessen Bootstrap als Beleg für was auch immer anzuführen, führt mich zu der Erkenntnis, dass es dir doch nicht um eine solche ging. Schade eigentlich, vor allem um meine Zeit. Deshalb werde ich mich auch nicht weiter zu deinen Ausführungen äußern.

                                                    Nur eines vielleicht noch einmal ganz deutlich: Es nutzt nichts, Progressive Enhancement als den heiligen Gral zu preisen. Man muss auch die Grenzen eines jeden Konzeptes kennen und als solche anerkennen – oder verschieben, wenn man es kann. Sonst werden gut gemeinte Ratschläge zu Dogmen und das ist selten sachgerecht.

                                                    MfG, at

                                                    1. Hej at,

                                                      Als @Gunnar Bittersmann sagte, er wende CSS-Grid im Rahmen von progressive enhancement an, lautete die Antwort von @at in wohl überlegten knappen Worten: „das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.“

                                                      Du tust es schon wieder, diesmal mit Gunnar: Seine Aussage war eine deutlich andere als von dir hier wiedergegeben wird. Er hat unter Berufung auf Progressive Enhancement behauptet, auch 98% der Nutzer sei eine zu vernachlässigende Größe.

                                                      Da sieht man mal wozu Einsilbigkeit führen kann.

                                                      Hättest dich du mal mit der Auswertung einer einzigen Sammlung Zeugenaussagen beschäftigt, wäre dir klar, dass ein Gespräch von fünf Leuten auf fünf verschiedene Weisen widergegeben wird - sogar auf mehr, wenn die Zeugen mehrfach befragt werden.

                                                      Das ist eigentlich Allgemeinwissen und ich würde dir nicht abnehmen, wenn du behauptest, dass dir das nicht selbst klar ist!

                                                      Nur weil du die in meinen Augen einfach etwas provokanten 98% anders verstanden hast als ich (es war einfach eine Auswahl von mehreren Prozentwerten, deren absolute Zahlenwerte ganz offensichtlich in der Kürze der Zeit nicht alle recherchiert wurden) heißt das nicht, dass du jeden mit einem anderen Verständnis für dieses Posting als jemanden abstempeln kannst, der deiner Antwort nicht die nötige Würdigung entgegen bringt.

                                                      Um es mal aus meiner Sicht als Dozent ganz deutlich zu sagen. Wenn etwas falsch beim Zuhörer ankommt, muss der Erklärende nachliefern. Immer!

                                                      Missverständnisse müssen immer von dem geklärt werden, der etwas mitteilen möchte. Die Aufgabe des Rezipienten ist es, sein Verständnis der Sache darzustellen, um so mögliche Missverständnisse aufzuklären und dem Lehrenden Gelegenheit zu einer Verdeutlichung oder Richtigstellung zu geben.

                                                      Diesen Part habe ich mehrfach übernommen.

                                                      Jedes Gespräch und jeder Beitrag ist missverständlich. Ich kenne mich mit Sprache aus und kann dir versichern: deine ganz besonders!

                                                      Es ist dir sicher nicht zum ersten Mal passiert, dass man dich falsch versteht.

                                                      Und „das halte ich [nach wie vor] für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt“, also in bestimmten Fällen von diesen 98% auch nach Anwendung von Progressive Enhancement ein zu großer Anteil zurückbliebe.

                                                      Selbst das trifft nicht auf jeden Fall zu. Bei einem konkreten Projekt kann selbst diese provokante Aussage von @Gunnar Bittersmann durchaus zutreffen. Mir scheint, ich habe in diesem Fall besser den Punkt von Gunnar verstanden als du — wenn nicht, bin ich durchaus bereit mich korrigieren zu lassen.

                                                      Schade eigentlich, vor allem um meine Zeit.

                                                      Seine eigene Zeit über die von anderen zu stellen sollte ein no-Go für jeden Entwickler und Erklärbär sein.

                                                      Jedenfalls ist das so bei denjenigen, die ich schätze.

                                                      Es nutzt nichts, [irgendetwas] als den heiligen Gral zu preisen. […] Sonst werden gut gemeinte Ratschläge zu Dogmen und das ist selten sachgerecht.

                                                      Das ist eine Selbstverständlichkeit!

                                                      Du wolltest aber doch die Frage allgemeingültig klären, statt auf das Originalposting bezogen?

                                                      Marc

                                                      1. Hallo marctrix,

                                                        als Dozent wirst du sicher verstehen, dass ich als Dozent mir meine Aufträge aussuche und meine Zeit einen Wert hat, der mindestens um meine Bezahlung höher liegt als die meines Gegenübers. Daher lasse ich mir auch in meiner Freizeit keine Ansprüche aufdrängen, die das von mir festgelegte Maß überschreiten.

                                                        MfG, at

                                                        1. Hej at,

                                                          als Dozent wirst du sicher verstehen, dass ich als Dozent mir meine Aufträge aussuche und meine Zeit einen Wert hat, der mindestens um meine Bezahlung höher liegt als die meines Gegenübers. Daher lasse ich mir auch in meiner Freizeit keine Ansprüche aufdrängen, die das von mir festgelegte Maß überschreiten.

                                                          Wenn man etwas nicht richtig macht, kann man es auch gleich sein lassen…

                                                          Meine Prämisse, die auch für alle meine ehrenamtlichen Tätigkeiten gilt.

                                                          Warum mir das wichtig ist: es kostet sonst die Zeit anderer, unter Umständen mehr davon, als wenn man gar nicht erst etwas halb fertig gemacht hätte.

                                                          Selbstverständlich ist niemand in der Lage, immer allen seinen Idealen gerecht zu werden. Es hilft mir aber sehr solche zu haben und mich daran messen zu lassen. Und wenn ich denen nicht entspreche und darauf hingewiesen werde, versuche ich nachzubessern. Das empfinde ich weder als aufdrängen, noch als Zeitverschwendung, denn einerseits tue ich es gerne und andererseits weiß ich selber, wie frustrierend es sein kann, wenn jemand sich solchen bitten verweigert.

                                                          Zwei offensichtlich unterschiedliche Einstellungen.

                                                          Übrigens möchte ich die nicht bewerten. Obwohl dein Weg nichts für mich ist, kann ich nicht ausschließen, dass du mit sehr vielen kurzen postings mehr Menschen hilfst, als ich mit wenigen, bei denen ich mich bemühe auch die letzte Rückfrage zu beantworten. Ich werde wohl weniger frustrierte zurücklassen. Das ist mir persönlich halt wichtig.

                                                          Marc

                                                    2. @@at

                                                      Du tust es schon wieder, diesmal mit Gunnar: Seine Aussage war eine deutlich andere als von dir hier wiedergegeben wird.

                                                      Ich denke, sie war eine deutlich andere als von dir hier wiedergegeben wird.

                                                      Er hat unter Berufung auf Progressive Enhancement behauptet, auch 98% der Nutzer sei eine zu vernachlässigende Größe.

                                                      Nö, hat er nicht.

                                                      In der PE-Denke gibt es das Wort „vernachlässigen“ überhaupt nicht. Bei PE geht es darum, niemanden zu vernachlässigen, sondern allen ein möglichst brauchbares Ergebnis zu bieten.

                                                      Was „möglichst brauchbar“ nun für einen konkreten $Nutzer bedeutet, hängt von dessen Gerät und Browser ab. Wenn das System keine GeoLocation unterstützt (oder $Nutzer das nicht will), dann kann das Startfeld eines Fahrkartenkaufdingens eben nicht mit dem aktuellen Standort vorausgefüllt werden. Trotzdem ist die Anwendung für alle Nutzer bedienbar.

                                                      Und „das halte ich [nach wie vor] für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt“, also in bestimmten Fällen von diesen 98% auch nach Anwendung von Progressive Enhancement ein zu großer Anteil zurückbliebe.

                                                      Nein, man lässt mit PE niemanden zurück. Man bringt manche ein Stück weiter nach vorn.

                                                      Und wenn es nur 2% sind. Wenn der Aufwand minimal ist, kann man ihn auch für 2% betreiben. Denn: ohne weiteres Zutun werden aus den 2% über kurz oder lang (eher kurz) 12%, 20%, 98%.

                                                      Und bei der Frage nach dem Aufwand sollte man auch bedenken: Wenn man’s gleich macht, ist der Aufwand gering. Wenn man’s später nachholen will (oder gar muss, weil die Nutzerbasis stark angewachsen ist: 12%, 20%, 98%, s.o.), dann ist der Aufwand viel größer.

                                                      LLAP 🖖

                                                      --
                                                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                      1. @@Gunnar Bittersmann

                                                        Hach, wusst ich’s doch, dass mir mit meiner Einsilbilbigkeit was durch die Lappen gegangen ist!

                                                        Was „möglichst brauchbar“ nun für einen konkreten $Nutzer bedeutet, hängt von dessen Gerät und Browser ab.

                                                        Was „möglichst brauchbar“ nicht zwangsläfig bedeutet: bestmöglich. Denn hier kommt die Aufwand-Nutzen-Betrachtung ins Spiel.

                                                        Beispiel: Man kann ein Layout mit wenigen Codezeilen mit CSS-Grid umsetzen, mit ein paar Zeilen mehr (welche -ms- beïnhalten) auch für Edge und die letzten IEs. Die Frage ist: Lohnt sich der Aufwand, das Layout für alte IE auch noch umständlich mit einer anderen Technik (irgendwelche CSS-Hacks) umzusetzen, oder ist es OK, dass die immer weiter schwindende Nutzerschaft alter IEs die Seiteninhalte untereinander statt nebeneinander zu sehen bekommt?

                                                        TL;DR: Die Frage ist eigenlich nicht „Lohnt der Aufwand für progressive enhancement schon für neueste Browser/Geräte?“, sondern: „Lohnt der Aufwand für graceful degredation noch für alte Browser/Geräte?“

                                                        LLAP 🖖

                                                        --
                                                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                                        1. Hallo Gunnar,

                                                          … dass die immer weiter schwindende Nutzerschaft alter IEs …

                                                          ich glaube, nicht die „weiter schwindende Nutzerschaft alter IEs“ ist das Problem. Einige aktuelle Android-Browser ohne Grid-Unterstützung erfreuen sich in D/Eu deutlich größerer Beliebtheit. Der 0/8/15-Samsung-User verwendet eben den Samsung-Browser. Und beim UC-Browser kann man nur hoffen, dass er sich nicht nach Europa ausbreitet. Im Moment sehen die beiden so aus, als ob sie die „IEs“ der Zukunft werden wollen.

                                                          Gruß
                                                          Jürgen

                                                          1. Hej JürgenB,

                                                            … dass die immer weiter schwindende Nutzerschaft alter IEs …

                                                            ich glaube, nicht die „weiter schwindende Nutzerschaft alter IEs“ ist das Problem. Einige aktuelle Android-Browser ohne Grid-Unterstützung erfreuen sich in D/Eu deutlich größerer Beliebtheit.

                                                            Wie bereits gesagt wurde: Auf Handys werden die Inhalte, die mittels Grid für große Bildschirme in mehrere Spalten verteilt werden in aller Regel einspaltig untereinander dargestellt - das Standard-Verhalten von Browsern, die CSS-Grid nicht verstehen.

                                                            Das sollte also kein Problem sein, so lange man CSS-Grid nicht benutzt wird um Elemente unabhängig von der Reihenfolge im Quellcode neu anzuordnen (was aus Accessibility-Gründen keine gute Idee ist - insofern bin ich eigentlich um jeden Smartphone-Browser froh, der CSS-Grid nicht unterstützt!).

                                                            Marc

                                                      2. Hallo Gunnar.

                                                        Er hat unter Berufung auf Progressive Enhancement behauptet, auch 98% der Nutzer sei eine zu vernachlässigende Größe.

                                                        Nö, hat er nicht.

                                                        Ich kann „völlig egal“ nicht anders als als Vernachlässigung interpretieren.

                                                        In der PE-Denke gibt es das Wort „vernachlässigen“ überhaupt nicht.

                                                        Den Fehler von PE hatte ich ja bereits herausgestellt.

                                                        MfG, at

                                                        1. @@at

                                                          Er hat unter Berufung auf Progressive Enhancement behauptet, auch 98% der Nutzer sei eine zu vernachlässigende Größe.

                                                          Nö, hat er nicht.

                                                          Ich kann „völlig egal“ nicht anders als als Vernachlässigung interpretieren.

                                                          Was ich sagte: Es ist eigentlich auch völlig egal, ob wir hier über 2% reden oder 5%. Oder 50%. Oder 98% [wo ein $Feature schon unterstützt wird]

                                                          Was ist nicht sagte: Es ist eigentlich auch völlig egal, ob wir hier über 2% reden oder 5%. Oder 50%. Oder 98%, die Anwendung nicht benutzen können.

                                                          LLAP 🖖

                                                          --
                                                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                2. Hej at,

                  das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.

                  Progressive enhancement berücksichtigt keine Zielgruppen? Na auf die Begründung bin ich jetzt aber mal gespannt wie ein Flitzebogen!

                  Marc

                  1. Hallo marctrix,

                    das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.

                    Progressive enhancement berücksichtigt keine Zielgruppen? Na auf die Begründung bin ich jetzt aber mal gespannt wie ein Flitzebogen!

                    Ich habe begründet, was ich gesagt habe, nachzulesen in diesem Thread. Was du meinst, was ich gesagt haben soll, werde ich natürlich nicht begründen.

                    MfG, at

                    1. Hej at,

                      das halte ich für ausgemachten Unsinn, weil der Ansatz Zielgruppen nicht hinreichend berücksichtigt.

                      Progressive enhancement berücksichtigt keine Zielgruppen? Na auf die Begründung bin ich jetzt aber mal gespannt wie ein Flitzebogen!

                      Ich habe begründet, was ich gesagt habe, nachzulesen in diesem Thread. Was du meinst, was ich gesagt haben soll, werde ich natürlich nicht begründen.

                      Hm - dann habe ich dich wohl falsch verstanden. Was hast du denn statt dessen gemeint? Klang für mich unzweifelhaft nach exakt dem, was ich geschrieben habe. Deine Einsilbigkeit dient nicht dem Verstehen…

                      Marc

                      1. Hallo marctrix,

                        ich fasse zu deinem besseren Verständnis noch einmal das Gesagte zusammen:

                        Zielgruppen nicht hinreichend berücksichtigt. [...] berücksichtigt keine Zielgruppen?

                        Finde den Unterschied.

                        MfG, at

                        1. Hej at,

                          ich fasse zu deinem besseren Verständnis noch einmal das Gesagte zusammen:

                          Zielgruppen nicht hinreichend berücksichtigt. [...] berücksichtigt keine Zielgruppen?

                          Finde den Unterschied.

                          Ah, jetzt weiß ich, wo es noch fehlt: Progressive enhancement berücksichtigt alle Zielgruppen.

                          Jedenfalls wenn es noch um Browserkompatibilität geht.

                          Marc

                          1. Hallo marctrix,

                            Progressive enhancement berücksichtigt alle Zielgruppen.

                            Nur eben nicht alle hinreichend.

                            MfG, at

                            1. Hej at,

                              Hallo marctrix,

                              Progressive enhancement berücksichtigt alle Zielgruppen.

                              Nur eben nicht alle hinreichend.

                              Bin ich wohl selbst schuld.

                              Don’t feed the trolls…

                              Marc

                              1. Hallo marctrix,

                                Don’t feed the trolls…

                                😂😂😂

                                at als Troll zu bezeichnen ist aber mal ziemlich gewagt.

                                LG,
                                CK

                                1. Hej Christian,

                                  Hallo marctrix,

                                  Don’t feed the trolls…

                                  😂😂😂

                                  at als Troll zu bezeichnen ist aber mal ziemlich gewagt.

                                  Na ja, als Basis für meine Einschätzung habe ich nur diesen Thread. Vielleicht hat er ja nur einen miesen Tag…

                                  Marc

                                  1. Hallo marctrix,

                                    at als Troll zu bezeichnen ist aber mal ziemlich gewagt.

                                    Na ja, als Basis für meine Einschätzung habe ich nur diesen Thread. Vielleicht hat er ja nur einen miesen Tag…

                                    Du möchtest mich nicht erleben, wenn ich einen miesen Tag habe. Aber du hast natürlich insofern Recht, als dass Christian mich schon sehr viel länger kennt. Daher nehme ich dir deine Einschätzung auch nicht übel.

                                    Ich bitte auch um Beachtung meiner weiteren Ausführungen.

                                    MfG, at

                                2. Helau,

                                  man kann das auch so sehen, dass marctrix genau at aufgefordert hat, die Trolle nicht zu füttern. At also nicht selbst der Troll sein soll.

                                  Hier kann man ats Antwort aber schon als trollig empfinden.

                                  ualeH

                                  1. Hej Pronnewoppen,

                                    man kann das auch so sehen, dass marctrix genau at aufgefordert hat, die Trolle nicht zu füttern. At also nicht selbst der Troll sein soll.

                                    Hier kann man ats Antwort aber schon als trollig empfinden.

                                    Ich denke es liegt zu einem großen Teil daran, dass ich einerseits bisher @at nicht so recht auf dem Schirm hatte und ich seine Aussagen nicht einordnen konnte. Sie kamen mir patzig, überheblich und falsch vor. Typisch für jemanden der nur Unfrieden stiften will. Wenn das noch einsilbig (mit möglichst geringem Aufwand) getan wird, spricht man von trollen.

                                    @Gunnar Bittersmann wird hier regelmäßig vorgeworfen zu knapp zu antworten und „nur“ erläuternde links als Erklärung mitzuliefern. at verzichtet selbst auf diese.

                                    In Verbindung mit Aussagen, die mir objektiv falsch zu sein schienen (Ablehnung von progressive enhancement hatte ich vermeintlich gelesen), schien mir das sehr unsympathisch.

                                    Gerade auf Neulinge im Forum dürfte das abschreckend wirken…

                                    Marc

                                    1. @@marctrix

                                      Gerade auf Neulinge im Forum dürfte das abschreckend wirken…

                                      Die begegnen sich doch gar nicht.

                                      Neulinge lesen gewöhnlich nur above the fold; @at gewöhnlich nur darunter.

                                      LLAP 🖖

                                      --
                                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                      1. Hallo Gunnar Bittersmann,

                                        Neulinge lesen gewöhnlich nur above the fold; @at gewöhnlich nur darunter.

                                        Ob das immer noch so ist??

                                        Dann hätte er sich an diesem Thread gar nicht beteiligen können. 😝

                                        Bis demnächst
                                        Matthias

                                        --
                                        Rosen sind rot.
                                      2. Hej Gunnar,

                                        @@marctrix

                                        Gerade auf Neulinge im Forum dürfte das abschreckend wirken…

                                        Die begegnen sich doch gar nicht.

                                        Neulinge lesen gewöhnlich nur above the fold; @at gewöhnlich nur darunter.

                                        Im Nachhinein scheint es mir auch zu viel Wind um die Sache — besonders das mit dem Troll tut mir natürlich leid!

                                        Das war eine Fehleinschätzung aufgrund mangelnder Recherche… 😟

                                        Marc