FrankMe: Umbruch mit bootstrap

0135

Umbruch mit bootstrap

  1. 1
    1. 3
      1. 0
    2. 0
      1. 2
        1. 0
          1. 0
            1. 0
              1. 1
                1. 5
                  1. 2
                  2. -1
                    1. 0
                    2. 1
                      1. 0
                    3. 0
                      1. 0
                        1. 0
                  3. 1
                2. 0
              2. 0
                1. 1
                2. 1
                  1. 0
                    1. 2
                  2. 1
                    1. 1
                3. -1
                  1. 0
                    1. 0
                    2. 0
                      1. 1
                    3. 1
                      1. 0
                        1. 0
                          1. 0
                      2. 0
              3. 1
                1. 0
            2. 0
    3. 0
      1. 0
        1. 0
          1. 0
            1. 0
              1. 1

                Leere Listen

                1. 0
                2. 0
        2. 0
      2. 0
        1. 0
          1. 0
            1. 0
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                        1. 1
                          1. 0
                            1. 0
                              1. 0
                                1. 1
                                  1. 0
                                2. 2
                                  1. 0
                                    1. 0
                                      1. 0
                                      2. 0
                                  2. 0
                                    1. 0
                                      1. 0
                                        1. 0
                                      2. 0
                                  3. 0
                                    1. 0
                                      1. 0
                          2. 0
                            1. 2
                              1. 0
                                1. 2
                                  1. 1
                                    1. 2
                                      1. 0
                                        1. 0
                                          1. 0
                                            1. 0
                                            2. 0
                                              1. 0
                                                1. 0
                                                  1. 0
                                                    1. 0
                                            3. 0
                                              1. 0
                                                1. 0
                                                  1. 0
                        2. 0
                          1. 0
                            1. 0
                              1. 0
                                1. 0
                                  1. 1
                                    1. 1
                                      1. 0
                                        1. 0
                                        2. 0
                                          1. 0
                                      2. 0
                                        1. 0
                              2. 0
                          2. 0
                            1. 0
                            2. 0
                        3. 0
                      2. 1
                        1. 0
                          1. 0
                            1. 0
                              1. 0
                                1. 0
                              2. 1
                                1. 0
                            2. 1
                        2. 0
                          1. 1
                            1. 0
                              1. 0
                                1. 0
                                  1. 0
                              2. 0
                                1. 0
          2. 0
            1. 0
      3. 1

problematische Seite

Hallo,

ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Unter dem angegebenen Link befinden sich (unterhalb drei Zeilen Text) 14 Icons mit kurzem Untertitel. Je nach Bildschirmbreite werden jeweils 6, 4, 3 oder 2 Icons nebeneinander dargestellt. Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Ich hänge ein paar Screen shots an, um das Verhalten zu zeigen. Das html findest Du unten am Ende des Foreneintrages. Am schönsten wäre es, wenn die letzten Icons linksbündig oder mittig zu sehen wären. Was ist eine gute Lösung, um dieses Verhalten zu umgehen?

Grüße, Frank

oder

oder

oder

<div id="software" class="container-fluid text-center bg-white" style="text-align:center;"> <h2>Software - Entwicklung</h2> <!-- drei Sätze --> <h2>Software - Technologien</h2> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> <h4>Java</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/cs.png" width="64" height="64" alt="C# / C sharp" /> <h4>C#</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/wpf.png" width="64" height="64" alt="WPF"/> <h4>WPF</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/html5.png" width="64" height="64" alt="HTML"> <h4>html5</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/php1.png" width="64" height="64" alt="PHP"> <h4>PHP</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/js.png" width="64" height="64" alt="JavaScript"> <h4>Java Script</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/sql.png" width="64" height="64" alt="SQL, MySQL"> <h4>Datenbanken</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/vs.png" width="64" height="64" alt="Visual Studio"> <h4>Visual Studio</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/eclipse.jpg" width="64" height="64" alt="Eclipse"> <h4>Eclipse</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/boostrap.png" width="64" height="64" alt="Bootstrap Framework"> <h4>Bootstrap Framework</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/subversion.png" width="64" height="64" alt="Apache Subversion"> <h4>Apache Subversion</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/css.png" width="64" height="64" alt="Cascading Style Sheets"> <h4>CSS</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/tfs.png" width="64" height="64" alt="Team Foundation Server"> <h4>TFS</h4> </div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/github-512.png" width="64" height="64" alt="Git"> <h4>Git</h4> </div> </div>
  1. problematische Seite

    @@FrankMe

    ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern.

    Als erstes wäre das Markup zu verbessern:

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> <h4>Java</h4> </div>

    Das sind keine Überschriften; die Auszeichnung als h4 ist falsch. Ersetze <h4> durch <p>, <div>, <span> oder auch gar nichts. End-Tags entsprechend.

    Bootstrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste:

    <h2>Software - Technologien</h2> <ul class="row"> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li></ul>

    Bullets bekommst du mit list-style: none weg; Abstände mit margin und padding.

    Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist alt="" zu setzen.

    Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun.

    Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht.

    Was ist eine gute Lösung, um dieses Verhalten zu umgehen?

    Die Bootstrap-Lösung wäre wohl:

    • nach jedem 2. div ein <div class="clearfix visible-xs-block"></div> einfügen,
    • nach jedem 3. div ein <div class="clearfix visible-sm-block"></div> einfügen,
    • nach jedem 4. div ein <div class="clearfix visible-md-block"></div> einfügen,
    • nach jedem 6. div ein <div class="clearfix visible-lg-block"></div> einfügen.

    😱

    bzw. als li in der Liste.

    Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat:

    <ul class="row"> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-xs-block visible-sm-block visible-lg-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li></ul>

    Aber du hattest ja nach einer guten Lösung gefragt.

    Und die ist: keine Floats verwenden. Also kein Bootstrap.

    Sondern zur Not (und als Fallback) display: inline-block sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine media queries erforderlich).

    LLAP 🖖

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

    Folgende Nachrichten verweisen auf diesen Beitrag:

    1. problematische Seite

      @@Gunnar Bittersmann

      Bullets bekommst du mit list-style: none weg; Abstände mit margin und padding.

      Letzteres musst du wohl nicht extra angeben, weil Bootcrap das für col-*-Elemente schon tut.

      Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun.

      Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht.

      flexible grid, Bootcrap 3 😱

      Die Bootstrap-Lösung wäre wohl: […] 😱

      flexible grid, Bootcrap 3, with column reset elements 😱

      Und die ist: keine Floats verwenden. Also kein Bootstrap.

      Kein Bootcrap 3, um genau zu sein. Bootcrap 4 verwendet Flexbox (gegenwärtig im Alpha-Stadium; ich weiß nicht, ob man das schon produktiv verwenden sollte).

      flexible grid, Bootcrap 4 😰

      Aber auch kein Bootcrap 4. Mit CSS Grid hat man bereits ein Grid-System; man braucht dafür kein anderes Framework mehr. Mit CSS Grid geht’s einfacher und besser.

      flexible grid, no Bootcrap 😀

      LLAP 🖖

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

      Folgende Nachrichten verweisen auf diesen Beitrag:

      1. problematische Seite

        @@Gunnar Bittersmann

        Bootcrap 4 verwendet Flexbox (gegenwärtig im Alpha-Stadium; ich weiß nicht, ob man das schon produktiv verwenden sollte).

        Jetzt beta.

        LLAP 🖖

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

      @@Gunnar Bittersmann

      Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist alt="" zu setzen.

      Und wenn man gut ist

      bzw. als li in der Liste.

      Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat:

      Und ein aria-hidden="true"-Attribut, was diese der visuellen Darstellung wegen einfügten Elemente vor Screenreadern versteckt:

      <ul class="row"> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-xs-block" aria-hidden="true"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-sm-block" aria-hidden="true"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-xs-block visible-md-block" aria-hidden="true"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li> <li class="clearfix visible-xs-block visible-sm-block visible-lg-block" aria-hidden="true"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"></li></ul>

      LLAP 🖖

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

        Hej Gunnar,

        @@Gunnar Bittersmann

        Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist alt="" zu setzen.

        Und wenn man gut ist

        Bilder haben ja einen accessible Name, der durch viele verschiedene Dinge beeinflusst wird. aria-labelledby oder der Alternativ-Text sind nur zwei davon. figcaption, aria-describedby und das altbekannte title-Attribut weitere…

        Ob ein accessible Name überhaupt nötig ist, ergibt sich aus dem Kontext. Wie gesagt bevorzuge ich die Methode das wesentlich sichtbare im Bild noch mal in eigenen Worten im Fließtext widerzugeben. Dann kann sich der accessible Name beispielsweise in einer Copyright-Angabe erschöpfen (auch wenn ich die meist langweiligen rechtlichen Hinweise sowohl Sehenden, als auch Blinden ersparen möchte - vielleicht sucht ja jemand gerade nach dem Autor eines Bildes)…

        bzw. als li in der Liste.

        Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat:

        Und ein aria-hidden="true"-Attribut, was diese der visuellen Darstellung wegen einfügten Elemente vor Screenreadern versteckt:

        Falsche Elemente vor Sehenden und/oder Blinden zu verstecken, ist zwar nett gemeint. Aber spätestens bei abgeschaltetem CSS (auch dann sollte eine Seite noch verständlich sein) funktionieren viele dieser Maßnahmen nicht mehr. Außerdem ist so was wie aria-hidden für meinen Geschmack schon fast wieder presentational Markup - man braucht es halt ab und zu, möglichst sollte aber das HTML so durchdacht sein, dass diese Krücken nicht nötig sein.

        Mit Bootstrap ein aussichtsloses Unterfangen…

        Marc

        1. problematische Seite

          @@marctrix

          Und ein aria-hidden="true"-Attribut, was diese der visuellen Darstellung wegen einfügten Elemente vor Screenreadern versteckt:

          Falsche Elemente vor Sehenden und/oder Blinden zu verstecken, ist zwar nett gemeint. Aber spätestens bei abgeschaltetem CSS (auch dann sollte eine Seite noch verständlich sein) funktionieren viele dieser Maßnahmen nicht mehr.

          OK, ein Screenreader mag Listitems mit aria-hidden="true" nicht mitzählen, also bei

          <ul> <li>foo</li> <li aria-hidden="true"></li> <li>bar</li> <ul>

          sowas wie „1 von 2: foo, 2 von 2: bar“ vorlesen; auf dem Schirm sind aber ohne CSS 3 Bullets:

          • foo
          • bar

          Also gut, nicht aria-hidden="true", sondern für alle weg: mit dem hidden-Attribut. Ohne CSS hat man dann wie es sein soll

          • foo
          • bar

          auf dem Schirm; und das Grid sieht immer noch so aus wie es soll, da Bootcrap die jeweils nötigen Clearfix-Elemente auf display: block !important setzt.

          (Im Codepen ergänzt.)

          Außerdem ist so was wie aria-hidden für meinen Geschmack schon fast wieder presentational Markup

          Die Clearfix-Elemente sind presentational markup – mit oder ohne aria-hidden.

          Mit Bootstrap ein aussichtsloses Unterfangen…

          Mit Bootstrap hat man immer presentational markup – dis ganzen Klassen sind schließlich nichts anderes als inline styles.

          LLAP 🖖

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

            Hej Gunnar,

            @@marctrix

            Mit Bootstrap hat man immer presentational markup – dis ganzen Klassen sind schließlich nichts anderes als inline styles.

            Ja und das mag ich nicht. Außerdem hast du sehr gut gezeigt, was für ein Aufwand betrieben werden muss, um mit Bootstrap einigermaßen vernünftiges HTML zu erzeugen. Ob das der Sinn von Bootstrap ist (nein ich kenne die Bestimmung von Bootstrap immer noch nicht,) 😉

            Marc

            1. problematische Seite

              Hallo marctrix,

              Mit Bootstrap hat man immer presentational markup – dis ganzen Klassen sind schließlich nichts anderes als inline styles.

              Ja und das mag ich nicht.

              Inline-Styles haben den Nachteil, aufgrund ihrer hohen Spezifität nicht durch andere CSS-Selektoren überschrieben werden zu können. Den kann ich bei der Verwendung von Klassen nicht erkennen.

              Außerdem hast du sehr gut gezeigt, was für ein Aufwand betrieben werden muss, um mit Bootstrap einigermaßen vernünftiges HTML zu erzeugen.

              Nein, das hat er nicht. Er hat versucht, ein überflüssiges und semantisch falsch angewandtes Element ins HTML zu schreiben, um es mittels CSS wieder auszublenden, statt das Darstellungsproblem gleich mittels CSS zu lösen. Und er hat die einfache und sinnvolle CSS-basierte Lösung damit abgetan, das widerspräche der Philosophie von Bootstrap – was auch immer das sein mag.

              MfG, at

              1. problematische Seite

                @@at

                Nein, das hat er nicht. Er hat versucht, ein überflüssiges und semantisch falsch angewandtes Element ins HTML zu schreiben,

                „Überflüssig und semantisch falsch angewandt“ im Sinne von HTML, ja. Nicht im Sinne von Bootcrap. Da sind diese Clearfix-Elemente eben notwendig und genau so angewandt wie von Bootcrap vorgesehen.

                um es mittels CSS wieder auszublenden,

                Äh, nein, das wäre ja unsinnig. Diese Clearfix-Elemente sind ja eben genau dazu da, um mittels CSS gestylt zu werden (clear).

                statt das Darstellungsproblem gleich mittels CSS zu lösen.

                Ich habe das Darstellungsproblem mittels CSS gelöst. Dann allerdings ohne Bootcrap.

                Entweder man verwendet ein Framework oder man verwendet es nicht. Ein Mischmasch oder gar gegen das Framework zu arbeiten führt regelmäßig ins Verderben.

                Und er hat die einfache und sinnvolle CSS-basierte Lösung damit abgetan, das widerspräche der Philosophie von Bootstrap – was auch immer das sein mag.

                Für die Dinge, für die man Bootcrap verwendet, kein CSS zu schreiben, sondern Klassen im HTML zu setzen.

                LLAP 🖖

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

                Folgende Nachrichten verweisen auf diesen Beitrag:

                1. problematische Seite

                  Tach!

                  Bootcrap ... Bootcrap ... Bootcrap ... Bootcrap

                  Design ist kein Furnier? Die Art und Weise, wie man kommuniziert, ist auch kein unnötiger Schnickschnack. Die Verunstaltung von Wörtern und damit die Diskreditierung von als hilfreich empfundenen Werkzeugen führt zumindest bei mir nicht dazu, dass ich deinen Argumenten mit dem notwendigen Ernst folgen kann. Die ständige Wiederholung macht es nicht besser. In der Tat hab ich mich angewidert abgewendet und den Inhalt keines Blickes gewürdigt.

                  Kommunikation, ohne den Adressaten und seine Sorgen zu berücksichtigen ist ähnlich sinnvoll wie Design zu erstellen, ohne die Anwender zu berücksichtigen. Wen willst du mit dem Posting ansprechen, die Bootstrap-Hasser oder diejenigen, die es als Segen empfinden?

                  dedlfix.

                  Folgende Nachrichten verweisen auf diesen Beitrag:

                  1. problematische Seite

                    Hallo dedlfix,

                    In der Tat hab ich mich angewidert abgewendet und den Inhalt keines Blickes gewürdigt.

                    Ja, das ging mir auch so. Das ist es u.a., was ich mit „die Leute nicht vor den Kopf stoßen“ meinte.

                    LG,
                    CK

                    -- https://wwwtech.de/about
                  2. problematische Seite

                    @@dedlfix

                    Bootcrap ... Bootcrap ... Bootcrap ... Bootcrap

                    Bootstrap. In meiner Antwort an den Theo. Worin es mitnichten darum ging, das von ihm als hilfreich empfundenes Werkzeug zu diskreditieren.

                    Die Verunstaltung von Wörtern hab ich erst in den Untiefen dieses Threads begangen. Das mag einem nicht gefallen, aber die Reaktion, deswegen den Inhalt keines Blickes zu würdigen, finde ich doch etwas übertrieben.

                    LLAP 🖖

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

                      Hej Gunnar,

                      @@dedlfix

                      Bootcrap ... Bootcrap ... Bootcrap ... Bootcrap

                      Die Verunstaltung von Wörtern hab ich erst in den Untiefen dieses Threads begangen. Das mag einem nicht gefallen, aber die Reaktion, deswegen den Inhalt keines Blickes zu würdigen, finde ich doch etwas übertrieben.

                      Es ist aber, was Menschen tun. - Bootcrap ist einfach unsachlich, ja beleidigend. Obwohl ich noch nicht überzeugt davon bin, dass Bootstrap sinnvoll ist, empfinde sogar ich das als unschön. Aber nun, da es gesagt ist, wirst du es vermutlich hier im Forum unterlassen.

                      Gut, dass es angesprochen wurde.

                      Marc

                    2. problematische Seite

                      Tach!

                      Bootcrap ... Bootcrap ... Bootcrap ... Bootcrap

                      Bootstrap. In meiner Antwort an den Theo.

                      Bereits da hast du das Wort verunstaltet. Ich habe mir nur erlaubt, das zu korrigieren (siehe Versionen), habe aber im weiteren Verlauf des Threads davon abgesehen, weil es einfach zu viele waren.

                      Die Verunstaltung von Wörtern hab ich erst in den Untiefen dieses Threads begangen. Das mag einem nicht gefallen, aber die Reaktion, deswegen den Inhalt keines Blickes zu würdigen, finde ich doch etwas übertrieben.

                      Das sei dir unbenommen. Ich fand ja auch, dass du übertreibst, wenn du das bei fast jeder Verwendung so abwertend schreibst. Jeder empfindet da anders. Es kann auch gut sein, dass da Emotionen im Spiel sind, die sich über Zeit aufstauen und irgendwann entladen, was dann vielleicht übertrieben aussieht.

                      Natürlich habe ich nichts dagegen, wenn du deine Argumente gegen bestimmte Dinge sachlich anführst. Die Verunstaltung von Namen verlässt aber in meinen Augen diese sachliche Ebene.

                      dedlfix.

                      1. problematische Seite

                        @@dedlfix

                        Bootstrap. In meiner Antwort an den Theo.

                        Bereits da hast du das Wort verunstaltet. Ich habe mir nur erlaubt, das zu korrigieren (siehe Versionen)

                        Oh, das war mir entfallen/entgangen.

                        Wie dem auch sei, der Theo hat es vermutlich überlesen oder nicht für bedeutsam erachtet. Zumal ich ihn nicht dazu bringen wollte, generell auf Bootstrap zu verzichten. Ich habe mir nur erlaubt aufzuzeigen, wie man ein Grid ohne Bootstrap besser und einfacher hinbekommt.

                        LLAP 🖖

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

                      Hallo,

                      Bootstrap. In meiner Antwort an den Theo.

                      Bist du echt so verbohrt bei diesem Thema, dass du nicht mal mehr mitkriegst, dass du eben doch die Verhunzung benutzt hattest, aber dedlfix das gefixt hatte?

                      Gruß
                      Kalk

                      1. problematische Seite

                        @@Tabellenkalk

                        Deine Frage hatte ich beantwortet lange bevor du sie gestellt hattest. Sie war also überflüssig.

                        LLAP 🖖

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

                          Hallo,

                          Deine Frage hatte ich beantwortet lange bevor du sie gestellt hattest.

                          Ein Zeitreisender.

                          Sie war also überflüssig.

                          Wenn du denn tatsächlich meine Frage beantwortet hast.

                          Gruß
                          Kalk

                  3. problematische Seite

                    Hallo dedlfix,

                    es gibt auch – ganz abgesehen von konkreten Fall – einen sachlichen Grund, der gegen solche Entstellungen spricht: Suchmaschinen müssten die gleiche Transferleistung erbringen wie der Leser. Das mag in bestimmten Einzelfällen funktionieren, in anderen sicher nicht.

                    Im konkreten Fall würde mich das aber nicht stören.

                    MfG, at

                2. problematische Seite

                  Hallo Gunnar.

                  Entweder man verwendet ein Framework oder man verwendet es nicht.

                  Schon der Begriff Framework legt nah, das dem nicht so ist.

                  MfG, at

              2. problematische Seite

                Hej at,

                Mit Bootstrap hat man immer presentational markup – dis ganzen Klassen sind schließlich nichts anderes als inline styles.

                Ja und das mag ich nicht.

                Inline-Styles haben den Nachteil, aufgrund ihrer hohen Spezifität nicht durch andere CSS-Selektoren überschrieben werden zu können. Den kann ich bei der Verwendung von Klassen nicht erkennen.

                Ich denke, es ging ihm darum, dass man bei späteren Änderungen eines Teils der Elemente, die dieselbe Klasse haben, diese händisch herausfinden muss, was zeitaufwändig und fehleranfällig ist. So wie es bei Design in HTML vor der Einführung von CSS nötig war.

                Außerdem hast du sehr gut gezeigt, was für ein Aufwand betrieben werden muss, um mit Bootstrap einigermaßen vernünftiges HTML zu erzeugen.

                Nein, das hat er nicht.

                Diese Ansicht kann ich nicht teilen. Offenbar gibt es mehrere Lösungen, die Bootstrap bereit stellt. @Gunnar Bittersmann ist nun bekanntermaßen kein Freund von Bootstrap, scheint sich aber doch schon ein wenig damit beschäftigt zu haben. Obwohl alles andere als ein Dummkopf ist, kommt er dennoch nicht auf die von Dir genannte Möglichkeit. Mir scheint, es ist ein nicht unerheblicher Schulung- und Lernaufwand zu betreiben, bis Bootstrap so genutzt werden kann, dass damit sauberes, semantisch korrektes HTML erstellt werden kann. Mit den presentational classes muss man dennoch leben und logische Klassen, wenn man die möchte, auch noch zusätzlich hineinschreiben.

                Zwar habe ich mich noch weniger mit Bootstrap (drei vier kleine Angebote habe ich zum Ausprobieren gemacht, ging auch schnell, aber die hier beschriebenen Dinge taten schon echt weh) beschäftigt als Gunnar, aber immer wenn mir einer erklärt, was alles mit Bootstrap geht und wie, dann frage ich mich: wozu? Wenn ich das alles lernen soll, dann kann ich doch gleich HTML und CSS lernen und selber verstehen, was Bootstrap da eigentlich macht.

                Zumal ich auch schon auf schöne Lösungen gestoßen bin für Dinge, die Bootstrap mitbringt, wenn ich nach denen gesucht habe.

                Marc

                1. problematische Seite

                  @@marctrix

                  kommt er dennoch nicht auf die von Dir genannte Möglichkeit

                  Nicht etwa, dass ich diese Möglichkeit nicht gefunden hätte; ich habe sie bewusst nicht gesucht.

                  Wenn man Bootstrap als Grid-System einsetzt, dann ist jegliches eigenes CSS fürs Grid das, was ich „gegen das Framework arbeiten“ nenne.

                  LLAP 🖖

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

                  Hallo marctrix.

                  @Gunnar Bittersmann ist nun bekanntermaßen kein Freund von Bootstrap, scheint sich aber doch schon ein wenig damit beschäftigt zu haben. Obwohl alles andere als ein Dummkopf ist, kommt er dennoch nicht auf die von Dir genannte Möglichkeit.

                  Weil er grundsätzlich Bootstrap mit keinen eigenen Lösungen kombinieren möchte – ein Ansatz, den ich für falsch halte.

                  Mir scheint, es ist ein nicht unerheblicher Schulung- und Lernaufwand zu betreiben, bis Bootstrap so genutzt werden kann, dass damit sauberes, semantisch korrektes HTML erstellt werden kann.

                  Eine Schulung schadet da sicher nicht. Aber eigentlich muss man dafür im Wesentlichen die Doku lesen – und zumindest in den dafür wesentlichen Punkten verstehen.

                  wozu? Wenn ich das alles lernen soll, dann kann ich doch gleich HTML und CSS lernen und selber verstehen, was Bootstrap da eigentlich macht.

                  In aller Bescheidenheit würde ich von mir behaupten, ganz gut mit HTML und CSS umgehen zu können. Und ich bringe das auch nicht ausschließlich hier anderen Menschen bei. Wenn ich aber mit anderen an einem Projekt arbeite, hat Bootstrap den Vorteil einer bereits bestehenden Dokumentation, die meine Kollegen nachvollziehen lässt, wie der Code grundsätzlich funktioniert und wie man ihn sinnvoll anwendet.

                  Das mag in deinem Team keine Rolle spielen, in anderen tut es dass. In meiner letzten Bootstrap-Schulung saßen zwei Tage lang acht Entwickler und Designer eines Teams, denen es darum ging, eine gemeinsame Grundlage für ihr Projekt zu haben. Und die kannten sich vorher bereits unter anderem mit HTML und CSS aus.

                  Zumal ich auch schon auf schöne Lösungen gestoßen bin für Dinge, die Bootstrap mitbringt, wenn ich nach denen gesucht habe.

                  Natürlich kann man alles, was Bootstrap kann, auch so ähnlich oder anders selbst schreiben. Hat man ja vor Bootstrap und ähnlichen Frameworks auch gemacht. Aber wäre das ein hinreichendes Argument, erfreuten sich Bootstrap und ähnliche Frameworks nicht einer so großen Beliebtheit.

                  MfG, at

                  1. problematische Seite

                    Hej at,

                    @Gunnar Bittersmann ist nun bekanntermaßen kein Freund von Bootstrap, scheint sich aber doch schon ein wenig damit beschäftigt zu haben. Obwohl alles andere als ein Dummkopf ist, kommt er dennoch nicht auf die von Dir genannte Möglichkeit.

                    Weil er grundsätzlich Bootstrap mit keinen eigenen Lösungen kombinieren möchte – ein Ansatz, den ich für falsch halte.

                    Vermutlich geht er davon aus, dass Bootstrap dann eigenes css-wissen unnötig machen sollte.

                    Aber das müsste er selber beantworten.

                    Ich fände es durchaus konsequent, denn es scheint mir, als würden jquery bootstrap und andere Frameworks verhindern, dass Menschen css js oder anderes lernen.

                    Jetzt könnte man trefflich darüber streiten, ob dass die Schuld von Bootsrap ist, das halte ich aber für unsinnig. 😉

                    Mir scheint, es ist ein nicht unerheblicher Schulung- und Lernaufwand zu betreiben, bis Bootstrap so genutzt werden kann, dass damit sauberes, semantisch korrektes HTML erstellt werden kann.

                    Eine Schulung schadet da sicher nicht. Aber eigentlich muss man dafür im Wesentlichen die Doku lesen – und zumindest in den dafür wesentlichen Punkten verstehen.

                    Wenn man deinen Ansatz weiter verfolgt, bootstrap mit eigenem css zu kombinieren, sind darüber hinaus relativ gute css-Kenntnisse nötig.

                    Mir scheint, viele vergessen, wie viel sie tatsächlich mitbringen und an Vorwissen nutzen, während sie arbeiten und bemerken es gar nicht. Je besser man css beherrscht, desto weniger Vorteile hat bootstrap in Bezug auf die Entwicklungsgeschwindigkeit.

                    Aber du nennst ja im folgenden noch einen wichtigen Vorteil: für die Zusammenarbeit kann die Doku wichtig sein.

                    Ich bin ja unser gesamtes Frontend-Team, daher benötige ich das nicht. 😉

                    Eine meiner Erfahrungen mit bootstrap war allerdings in einer Agentur, wo ich als Freelancer arbeiten wollte. Das ist unter anderem daran gescheitert, dass ich über die Vielzahl der verwendeten Tools, die unter anderem der Zusammenarbeit dienten, zu wenig wusste.

                    Nicht nur dass dort gulp, git, sass, json, haml, bootstrap usw verwendet wurden, sondern die Stärke dieser Techniken liegt ja in einer bestimmten (abgesprochenen) Art der Nutzung. Sass-Regeln kann ich lesen und schreiben, aber wo Variablen definiert sind, welche coding-Guidelines existieren (oft nur in mündlicher Überlieferung😉) usw, das ist schon eine Menge Holz.

                    Außerdem haben die schon bootstrap 4 eingesetzt, allerdings „nur die Teile, die wir davon brauchen können“ — und dann hilft die bootstrap Doku auch nur, wenn man erst mal weiß, was davon überhaupt noch relevant ist.

                    Zusätzlich wurden dann bestimmte Tools und guis für diese Techniken eingesetzt, wie jira, sourcetree, patternlab, Webserver für die lokale Entwicklung auf dem eigenen device — die ich auch nicht alle kannte. Und nicht zuletzt wurde mit z.B. bekannten Techniken und Programmen wie TYPO3 ganz anders gearbeitet, als ich das kannte. Insofern stand dann die Einarbeitungszeit für mich als freelancer in keinem vernünftigen Verhältnis zum erwartbaren Verdienst.

                    Obwohl ich gerne noch mehr dort gelernt hätte und das Team sehr nett war. Ach ja, warum erzähle ich das eigentlich alles? Ach ja, wegen der Doku.

                    Was ich sagen wollte: wie das dann im jeweiligen Haus eingesetzt wird, ist dann noch mal was ganz anderes und dafür muss es dann eigentl. auch wieder eine zweite hausinterne Doku geben. Es ist mit der Bootstrap-Doku allein nicht getan. So mein Fazit aus der einzigen Erfahrung als Außenstehender mit einem Team dass eine eigentlich gut dokumentierte Technik einsetzt... 😉

                    [Doku] Das mag in deinem Team keine Rolle spielen

                    Stimmt, das liegt daran, dass ich das komplette Team bin 😉

                    Dennoch habe ich früher viel dokumentiert. Inzwischen kaum noch. Weil beispielsweise logische, sprechende Klassen sich selbst erklären.

                    Zumal ich auch schon auf schöne Lösungen gestoßen bin für Dinge, die Bootstrap mitbringt, wenn ich nach denen gesucht habe.

                    Natürlich kann man alles, was Bootstrap kann, auch so ähnlich oder anders selbst schreiben. Hat man ja vor Bootstrap und ähnlichen Frameworks auch gemacht.

                    Bevor wir aneinander vorbeireden. Selber machen ist interessant, macht Freude und man lernt etwas dabei. Es ist aber ineffizient und die Ergebnisse sind meist schlechter als frei verfügbare Lösungen, in die andere bereits viel Zeit investiert haben und für die es eine aktive Community gibt. Insofern bin ich immer dafür vorhandene Lösungen zu nutzen. Zum Beispiel für responsive Tabellen, für Menüs, für Media Player und was man sonst so benötigt.

                    Solche Lösungen bieten dann oft mehr als die in der eierlegenden Wollmilchsau integrierten.

                    Dafür muss man sie selber integrieren (also beispielsweise an das look and feel der Anwendung anpassen und im cms einbinden usw)

                    Aber wäre das ein hinreichendes Argument, erfreuten sich Bootstrap und ähnliche Frameworks nicht einer so großen Beliebtheit.

                    Selten ist die beste Lösung die beliebteste. Meistens ist es die bequemste…

                    Oft ist die bequemste auch die billigste.

                    Wenn das sich als Philosophie etabliert, braucht man allerdings mit Barrierefreiheit nicht mehr zu kommen.

                    Ja, man kann mit bootstrap Barrierefreiheit erreichen. Aber wer macht das?

                    Nicht barrierefrei zu arbeiten erfreut sich auch einer großen Beliebtheit...

                    Marc

                    1. problematische Seite

                      @@marctrix

                      Ja, man kann mit bootstrap Barrierefreiheit erreichen. Aber wer macht das?

                      Ich glaube, ich hatte das vor einigen Wochen schon mal geschrieben: Wenn man Bootstrap-Widgets von der Stange verwendet, ist mehr für Barrierefreiheit getan als wenn man sich selbst daran versucht, aber wenig Ahnung davon hat und mit falsch gesetzten role- und ARIA-Attributen eher Schaden als Nutzen anrichtet.

                      LLAP 🖖

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

                    @@at

                    hat Bootstrap den Vorteil einer bereits bestehenden Dokumentation […]

                    Natürlich kann man alles, was Bootstrap kann, auch so ähnlich oder anders selbst schreiben.

                    Das Gute an CSS Grid ist, dass man ein Grid damit besser und einfacher als mit Bootstrap schreiben kann. Und es ist bereits gut dokumentiert.

                    LLAP 🖖

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

                      Hallo Gunnar,

                      hat Bootstrap den Vorteil einer bereits bestehenden Dokumentation […]

                      Natürlich kann man alles, was Bootstrap kann, auch so ähnlich oder anders selbst schreiben.

                      Das Gute an CSS Grid ist, dass man ein Grid damit besser und einfacher als mit Bootstrap schreiben kann. Und es ist bereits gut dokumentiert.

                      Das Gute an Bootstrap ist, dass es viel mehr ist als Grid, und damit meine ich noch nicht einmal nur die Komponenten.

                      MfG, at

                3. problematische Seite

                  @@marctrix

                  Gunnar Bittersmann ist nun bekanntermaßen kein Freund von Bootstrap

                  Bootstrap ist ein Frontend-Framework für Nicht-Frontendentwickler.

                  Es liegt in der Natur der Sache, dass ich dafür wenig Sympathien hege.

                  LLAP 🖖

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

                    @@Gunnar Bittersmann

                    Bootstrap ist ein Frontend-Framework für Nicht-Frontendentwickler.

                    Es liegt in der Natur der Sache, dass ich dafür wenig Sympathien hege.

                    Hier würde mich jetzt aber mal interessieren, was es an dem Posting negativ zu bewerten gab. Außer der Tatsache, dass es von mir stammt.

                    LLAP 🖖

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

                    Folgende Nachrichten verweisen auf diesen Beitrag:

                    1. problematische Seite

                      Hej Gunnar,

                      @@Gunnar Bittersmann

                      Hier würde mich jetzt aber mal interessieren, was es an dem Posting negativ zu bewerten gab. Außer der Tatsache, dass es von mir stammt.

                      Reicht das nicht 😂

                      SCNR

                      Marc

                    2. problematische Seite

                      Hallo Gunnar,

                      Hier würde mich jetzt aber mal interessieren, was es an dem Posting negativ zu bewerten gab. Außer der Tatsache, dass es von mir stammt.

                      Da ich zwar Bewertungen vergebe, sie aber ausgeblendet habe, glaube ich dir jetzt einfach mal, dass es eine solche gibt oder gab. Ich habe sie nicht vorgenommen, finde deinen Beitrag aber auch wenig hilfreich.

                      Man erfährt zwar, wie du über einen Sachverhalt denkst, aber die geäußerte Haltung widerspricht meines Erachtens dem Gedanken von SelfHTML, sich an alle zu richten, die sich für die Thematik Webentwicklung interessieren. Insofern stößt deine Aussage meiner Meinung nach Menschen unnötig vor den Kopf, die beispielsweise vom Backend ausgehend erste Schritte in Richtung Frontend machen und für die $tool eine flache Lernkurve gewährleistet.

                      MfG, at

                      1. problematische Seite

                        @@at

                        Man erfährt zwar, wie du über einen Sachverhalt denkst, aber die geäußerte Haltung widerspricht meines Erachtens dem Gedanken von SelfHTML, sich an alle zu richten, die sich für die Thematik Webentwicklung interessieren. Insofern stößt deine Aussage meiner Meinung nach Menschen unnötig vor den Kopf, die beispielsweise vom Backend ausgehend erste Schritte in Richtung Frontend machen und für die $tool eine flache Lernkurve gewährleistet.

                        Inwiefern widersprechen sich jetzt „Bootstrap ist ein Framework für Nicht-Frontentwickler“ und „Bootstrap gewährleistet eine flache Lernkurve für Menschen, die erste Schritte in Richtung Frontend machen; also für Nicht-Frontentwickler“?

                        LLAP 🖖

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

                      Hallo Gunnar Bittersmann,

                      Bootstrap ist ein Frontend-Framework für Nicht-Frontendentwickler.

                      Es liegt in der Natur der Sache, dass ich dafür wenig Sympathien hege.

                      Hier würde mich jetzt aber mal interessieren, was es an dem Posting negativ zu bewerten gab.

                      Ich wars nicht. Aber es ließe sich auch dieses interpretieren:

                      Bootstrap (btw: Könnte mir mal jemand den tatsächlichen oder vermeintlichen Witz hinter bootstrap vs. bootcrap erklären) ist ein Hilfsmittel. Du diskreditierst diejenigen, die es verwenden, als lernunwillig oder minderbemittelt oder bestenfalls als wenig durchsetzungsfähig gegenüber Arbeitgeber oder Kunden.

                      Bis demnächst
                      Matthias

                      -- Rosen sind rot.
                      1. problematische Seite

                        Hallo Matthias,

                        Bootstrap (btw: Könnte mir mal jemand den tatsächlichen oder vermeintlichen Witz hinter bootstrap vs. bootcrap erklären)

                        „crap“ heisst „Scheisse.“

                        LG,
                        CK

                        -- https://wwwtech.de/about
                        1. problematische Seite

                          Hallo Christian Kruse,

                          „crap“ heisst „Scheisse.“

                          Danke. Ich hab immer „crab“ verstanden und das mit Krebs assoziiert, wegen der vielen Klassen.

                          Bis demnächst
                          Matthias

                          -- Rosen sind rot.
                          1. problematische Seite

                            Hallo Matthias,

                            Danke. Ich hab immer „crab“ verstanden und das mit Krebs assoziiert

                            Gibt es auch, ist aber selten.

                            MfG, at

                      2. problematische Seite

                        @@Matthias Apsel

                        Bootstrap ist ein Frontend-Framework für Nicht-Frontendentwickler.

                        Aber es ließe sich auch dieses interpretieren:

                        Bootstrap (btw: Könnte mir mal jemand den tatsächlichen oder vermeintlichen Witz hinter bootstrap vs. bootcrap erklären) ist ein Hilfsmittel. Du diskreditierst diejenigen, die es verwenden, als lernunwillig oder minderbemittelt oder bestenfalls als wenig durchsetzungsfähig gegenüber Arbeitgeber oder Kunden.

                        Nicht „ließe sich interpretieren“, sondern „ließe sich fehlinterpretieren“. Mit anderen Worten: an den Haaren herbeiziehen. Und da gehört schon böser Wille zu.

                        Ich diskreditiere da niemanden, wenn ich sage, dass Bootstrap ein Frontend-Framework ist, das eingesetzt wird, wenn man keinen Frontendentwickler parat hat.

                        Und falls man einen Frontendentwickler parat hat und dieser gezwungen wird, Bootstrap zu verwenden, dann ist der es, der hier diskreditiert wird.

                        LLAP 🖖

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

                @@at

                Inline-Styles haben den Nachteil, aufgrund ihrer hohen Spezifität nicht durch andere CSS-Selektoren überschrieben werden zu können. Den kann ich bei der Verwendung von Klassen nicht erkennen.

                Inline-Styles (egal ob mit style-Attributen oder präsentationsbezogenen Klassen) haben noch ganz andere Nachteile:

                Beispiel class="col-xs-12 col-sm-6 col-md-4 col-lg-3". Jetzt stellt sich heraus, dass die Boxen zu schmal sind; das muss in class="col-xs-12 col-sm-12 col-md-6 col-lg-4" geändert werden. Und zwar bei jedem verdammten Element. Auf jeder verdammten Seite.

                Viel einfacher ist es doch, im Stylesheet den Breakpoint in Media-Queries zu ändern. Noch einfacher ist es, bei Grid den einen Wert in der einen Zeile grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)) zu ändern. Oder bei Flexboxen den Wert für flex-basis. Bzw. den für min-width.

                Hinzu kommt noch der generelle Mehraufwand, der entsteht, wenn man einige Darstellungsangaben im Markup pflegen muss, andere wiederum im Stylesheet.

                Präsentationsbezogenes Markup ist wartungsaufwändig.

                LLAP 🖖

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

                  Hallo Gunnar,

                  Präsentationsbezogenes Markup ist wartungsaufwändig.

                  Im HTML – Kulturtechniken wie Suchen und Ersetzen mal außen vor gelassen. Nicht präsentationsbezogenes Markup ist aber wartungsaufwändig im CSS. Und damit wären wir wieder beim CMS.

                  Auch auf die Gefahr hin, mich zu wiederholen: Was mache ich denn, wenn der Redakteur ein semantisch neues Inhaltselement produziert? Was mache ich denn, wenn ein semantisch neues Inhaltselement ein bestehendes ersetzen soll? Was mache ich denn, wenn ein Layout nur auf einer Seite geändert werden soll?

                  Das CMS passt das HTML natürlich an, dafür sind Templates ja da. Aber das CSS? Dafür müsste es ja die Semantik kennen und einer bestehenden Regel zuordnen oder eine neue kreieren. Das wäre ein enormer Aufwand.

                  MfG, at

            2. problematische Seite

              @@marctrix

              Mit Bootstrap hat man immer presentational markup – dis ganzen Klassen sind schließlich nichts anderes als inline styles.

              Ja und das mag ich nicht. Außerdem hast du sehr gut gezeigt, was für ein Aufwand betrieben werden muss, um mit Bootstrap einigermaßen vernünftiges HTML zu erzeugen.

              Presentational markup ist wohl nicht das, was man „einigermaßen vernünftiges HTML“ nennen würde.

              Davon abgesehen kann man aber auch bei Verwendung von Bootstrap vernünftige HTML-Elemente ansatt div-Suppe verwenden, weil sich Bootstrap nicht um Elementtypen schert, sondern sämtliches Styling über präsentationsbezogene Klassen regelt.

              So kann man, wie gezeigt, eine Liste als solche auszeichnen. Und, wie gezeigt, braucht man auch für class="container"- und class="row"-Elemente keine zusätzlichen div-Elemente. Mit html, body und main sind bereits genügend Elemente vorhanden, denen man diese Klassen mitgeben kann.

              ich kenne die Bestimmung von Bootstrap immer noch nicht

              Bootstrap in a nutshell

              LLAP 🖖

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

      Hallo Gunnar,

      Die Bootstrap-Lösung wäre wohl:

      • nach jedem 2. div ein <div class="clearfix visible-xs-block"></div> einfügen,
      • nach jedem 3. div ein <div class="clearfix visible-sm-block"></div> einfügen,
      • nach jedem 4. div ein <div class="clearfix visible-md-block"></div> einfügen,
      • nach jedem 6. div ein <div class="clearfix visible-lg-block"></div> einfügen.

      Wer Bootstrap 3 und LESS/SASS verwendet, setzt die für den clearfix nötigen Eigenschaften in ein passendes Pseudoelement, das mittels Media-Queries und :nth-child zugewiesen wird. Das diese Funktionalität nicht zum Standardumfang von Bootstrap gehört, verwundert allerdings.

      bzw. als li in der Liste.

      Leere Listeneinträge sind semantisch ebenso fragwürdig wie Listen mit nur einem Eintrag.

      MfG, at

      1. problematische Seite

        @@at

        Wer Bootstrap 3 und LESS/SASS verwendet, setzt die für den clearfix nötigen Eigenschaften in ein passendes Pseudoelement, das mittels Media-Queries und :nth-child zugewiesen wird.

        Nein.

        Wer Bootstrap verwendet, der verwendet keine Pseudoelemente, Media-Queries und :nth-child. Das widerspricht der Philosophie von Bootstrap.

        Wer Pseudoelemente, Media-Queries und :nth-child verwendet, der verwendet kein Bootstrap.

        Leere Listeneinträge sind semantisch ebenso fragwürdig wie Listen mit nur einem Eintrag.

        Nein, wieso?

        Wenn in einer Liste die aktuell verfügbaren Optionen aufgelistet sind, dann kann die Liste nur ein Element haben, wenn eben aktuell nur eine Option verfügbar ist. Oder auch leer sein, wenn aktuell keine Option verfügbar ist.

        Auch „keine Option“ ist eine Information; das ul-Element also semantisch sinnvoll.

        Programmatisch ist es das allemal. Warum sollte man ein ul-Element aus dem DOM nehmen, wenn aktuell keine Option verfügbar ist, und mühsam wieder eins einfügen, wenn wieder eine Option verfügbar ist?

        LLAP 🖖

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

          Hej Gunnar,

          Auch „keine Option“ ist eine Information; das ul-Element also semantisch sinnvoll.

          Nicht jede Information ist eine Liste.

          Wenn es nichts aufzuzählen gibt, gibt es auch keine Aufzählung. wenn auch möglicherweise einen Hinweis darauf, dass es nichts aufzuzählen gibt, sinnvoll sein kann - aber dann bitte als Text.

          Ich weiß jetzt nicht, was ein Screenreader mit einer leeren Liste macht. Aber eine Liste ohne Listeneinträge ist weder sinnvoll, noch valide und wird auch gar nicht angezeigt. Für Sehende ist die Information, dass es eigentlich Optionen geben sollte, derzeit aber keine bereit stehen, also nicht zugänglich. Sehende werden bei Überlegungen zur Barrierefreiheit gerne mal vergessen… 😉

          Marc

          1. problematische Seite

            @@marctrix

            Wenn es nichts aufzuzählen gibt, gibt es auch keine Aufzählung. wenn auch möglicherweise einen Hinweis darauf, dass es nichts aufzuzählen gibt, sinnvoll sein kann - aber dann bitte als Text.

            Nehmen wir als Beispiel ein Sprachmenü <ul id="language-menu">, so eins wie hier schon gezeigt. Wenn die Seite nur in einer weiteren Spreche vefügbar ist, dann ist eben nur 1 Item in der Liste. Dennoch ist das eine Liste der weiteren verfügbaren Sprachen.

            Wenn es gar keine Übersetzung gibt, dann ist die Liste eben leer. Dennoch ist das eine Liste der weiteren verfügbaren Sprachen.

            Das Sprachmenü möchte man ganz sicher nicht händisch auf jeder Seite pflegen, sondern programmatisch einbauen. (Das war Gesprächsstoff in einem anderen Thread.)

            Ich sehe keinen Grund dafür, das <ul id="language-menu">-Element nicht immer im Markup zu haben, auch wenn es nur mit einem oder gar keinem Item gefüllt wird.

            Aber eine Liste ohne Listeneinträge ist weder sinnvoll

            Sie ist nicht sinnlos.

            noch valide

            Natürlich ist eine leere Liste <ul></ul> valide.

            “Content model: Zero or more li and script-supporting elements.” [HTML §4.4.7] (Hervorhebung von mir.)

            Für Sehende ist die Information, dass es eigentlich Optionen geben sollte, derzeit aber keine bereit stehen, also nicht zugänglich.

            Das ist auch gut so. Warum sollte man das UI mit Dingen vollmüllen, die es nicht gibt? Wenn es keine Übersetzungen der Seite gibt, gibt es kein sichtbares Sprachmenü.

            LLAP 🖖

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

              Hej Gunnar,

              @@marctrix

              Wenn es nichts aufzuzählen gibt, gibt es auch keine Aufzählung. wenn auch möglicherweise einen Hinweis darauf, dass es nichts aufzuzählen gibt, sinnvoll sein kann - aber dann bitte als Text.

              Nehmen wir als Beispiel ein Sprachmenü <ul id="language-menu">, so eins wie hier schon gezeigt. Wenn die Seite nur in einer weiteren Spreche vefügbar ist, dann ist eben nur 1 Item in der Liste. Dennoch ist das eine Liste der weiteren verfügbaren Sprachen.

              Einerseits schreibe ich mir in meine Einkaufsliste auch manchmal nur ein Lebensmittel. Andererseits empfinde ich das Nennen eines einzelnen Artikels aber nicht als ein Aufzählen.

              Gut, eine Empfindung ist nicht geeignet für eine Spezifikation oder gar Definition…

              Das Problem ist (auch wenn ich Dein Verständnis von leeren Listen und solchen mit nur einem Eintrag nachvollziehen kann): wir kämpfen stets darum, dass Listen auch entsprechend ausgezeichnet werden sollen. So was für Konstrukte zu verlangen, bei denen ich selber den Einsatz einer Liste nicht mehr als sinnvoll empfinde, kostet Überwindung.

              Muss ich mal sacken lassen.

              Das Sprachmenü möchte man ganz sicher nicht händisch auf jeder Seite pflegen, sondern programmatisch einbauen. (Das war Gesprächsstoff in einem anderen Thread.)

              Ich sehe keinen Grund dafür, das <ul id="language-menu">-Element nicht immer im Markup zu haben, auch wenn es nur mit einem oder gar keinem Item gefüllt wird.

              Die Antwort hast du dir indirekt doch selber gegeben:

              Für Sehende ist die Information, dass es eigentlich Optionen geben sollte, derzeit aber keine bereit stehen, also nicht zugänglich.

              Das ist auch gut so. Warum sollte man das UI mit Dingen vollmüllen, die es nicht gibt? Wenn es keine Übersetzungen der Seite gibt, gibt es kein sichtbares Sprachmenü.

              Warum ein Sprachmenü im HTML mitschleppen, wenn es leer ist? — Ist doch eine simple Fallunterscheidung (ich gebe zu, den anderen verlinkten Thread noch nicht gelesen zu haben — *EDIT:** scheint die Programmierung zu vereinfachen, eventuell auch http-Requests zu sparen durch Verwendung des template-Elementes?!?).

              Aber eine Liste ohne Listeneinträge ist weder sinnvoll

              Sie ist nicht sinnlos.

              Tut mir leid, aber ich kann damit nichts sinnvolles anfangen.

              noch valide

              Natürlich ist eine leere Liste <ul></ul> valide.

              Ja, hatte es zwischenzeitlich nachgelesen.

              Marc

              1. Hallo marctrix,

                Warum ein Sprachmenü im HTML mitschleppen, wenn es leer ist? — Ist doch eine simple Fallunterscheidung

                Nimm ein Wiki(pedia) - einen Artikel gibt es 42 Sprachen, einen anderen in 2, einen dritten nur in einer.

                Die Information, dass es keine weitere Sprache gibt, ist auch eine Information. Sie manifestiert sich in einer leeren Liste. Das nav- oder div-Element enthält immer die Überschrift und immer die Liste der weiteren Sprachen. In der Wikipedia wird es iirc genau so gehandhabt. Ich kanns leider am Handy nicht überprüfen.

                Bis demnächst
                Matthias

                -- Rosen sind rot.
                1. Hallo Matthias Apsel,

                  In der Wikipedia wird es iirc genau so gehandhabt.

                  Ja. https://de.wikipedia.org/wiki/Umsatzsteuer_(Deutschland)

                  Bis demnächst
                  Matthias

                  -- Rosen sind rot.
                2. Hej Matthias,

                  Nimm ein Wiki(pedia)

                  Schönes Beispiel, danke @Matthias Apsel!

                  Marc

        2. problematische Seite

          Hallo Gunnar.

          Wer Pseudoelemente, Media-Queries und :nth-child verwendet, der verwendet kein Bootstrap.

          Wir machen das genau so und sind schon wegen meiner Schulungen nicht die einzigen. Ich wüsste auch nicht, was dagegen spräche.

          Wenn in einer Liste die aktuell verfügbaren Optionen aufgelistet sind, dann kann die Liste nur ein Element haben, wenn eben aktuell nur eine Option verfügbar ist. Oder auch leer sein, wenn aktuell keine Option verfügbar ist.

          Das stimmt natürlich, zumindest unter den folgenden Bedingungen:

          Programmatisch ist es das allemal. Warum sollte man ein ul-Element aus dem DOM nehmen, wenn aktuell keine Option verfügbar ist, und mühsam wieder eins einfügen, wenn wieder eine Option verfügbar ist?

          Das entschuldigt den Unsinn nicht.

          MfG, at

      2. problematische Seite

        Hej at,

        bzw. als li in der Liste.

        Leere Listeneinträge sind semantisch ebenso fragwürdig wie Listen mit nur einem Eintrag.

        Allerdings. Andererseits ist es keine Option, eine Liste nicht als Liste auszuzeichnen. Ein schönes Beispiel, wie Bootstrap es einem unmöglich macht, HTML bestimmungsgemäß zu verwenden…

        Marc

        1. problematische Seite

          Hallo marctrix.

          Andererseits ist es keine Option, eine Liste nicht als Liste auszuzeichnen. Ein schönes Beispiel, wie Bootstrap es einem unmöglich macht, HTML bestimmungsgemäß zu verwenden…

          Du kennst die Bestimmung von Bootstrap? Magst du sie mit uns teilen?

          MfG, at

          1. problematische Seite

            Hej at,

            Du kennst die Bestimmung von Bootstrap? Magst du sie mit uns teilen?

            Nein. Davon habe ich aber auch nicht gesprochen, sondern vom bestimmungsgemäßen Gebrauch von HTML. 😉

            Marc

            Folgende Nachrichten verweisen auf diesen Beitrag:

            1. problematische Seite

              Hallo marctrix.

              Nein. Davon habe ich aber auch nicht gesprochen, sondern vom bestimmungsgemäßen Gebrauch von HTML. 😉

              Dann hab dich zunächst falsch verstanden und verstehe dich jetzt gar nicht. HTML hat eine technisch definierte Syntax und eine inhärente Semantik. Die Semantik würde ich als Bestimmung bezeichnen, und die ändert Bootstrap doch nicht.

              Das man Bootstrap aus anderen Gründen doof finden kann, ändert daran ja nichts.

              MfG, at

              1. problematische Seite

                Hej at,

                Nein. Davon habe ich aber auch nicht gesprochen, sondern vom bestimmungsgemäßen Gebrauch von HTML. 😉

                HTML hat eine technisch definierte Syntax und eine inhärente Semantik. Die Semantik würde ich als Bestimmung bezeichnen,

                Ich auch.

                und die ändert Bootstrap doch nicht.

                Nein. Wenn es aber stimmt, was @Gunnar Bittersmann sagt (dass die leeren li-Elemente nötig sind), dann führt das dazu, dass HTML-Elemente für nicht semantische Zwecke verwendet werden. Und das wäre eine nicht bestimmungsgemäße Verwendung.

                Zumal die Darstellung ohne css unverständlich wäre — vielleicht würde das hidden-Attribut helfen, vielleicht macht das auch gewünschten Effekt zunichte. Wenn nicht jetzt, so ist es doch schwer, das für kommende Browserversionen vorherzusagen.

                Das man Bootstrap aus anderen Gründen doof finden kann, ändert daran ja nichts.

                Ja, aber ehrlich gesagt ist presentational markup mein wichtigster Kritikpunkt — die meisten Probleme resultieren daraus.

                Marc

                1. problematische Seite

                  Hallo marctrix.

                  Wenn es aber stimmt, was @Gunnar Bittersmann sagt (dass die leeren li-Elemente nötig sind), dann führt das dazu, dass HTML-Elemente für nicht semantische Zwecke verwendet werden.

                  Sie sind nicht nötig. Gunnar meint offenbar nur, wer Bootstrap einsetzt, könne generell nicht genug von CSS verstehen, um die von mir vorgeschlagene und auch in der Praxis bewährte Lösung umzusetzen. Übersehen wird dabei gern, dass Bootstrap häufig bei Projekten in einem Team eingesetzt wird. Aufgabenteilung und Spezialisierung führen dann dazu, dass dort jemand durchaus zu Lösungen wie der vorgestellten in der Lage ist, während andere froh sind, sich die nötigen Klassenbezeichnungen merken zu können.

                  MfG, at

                  1. problematische Seite

                    @@at

                    während andere froh sind, sich die nötigen Klassenbezeichnungen merken zu können

                    Die gute Nachricht ist: Alle können froh sein, sich die nötigen Klassenbezeichnungen nicht mehr merken zu müssen. Weil’s mit CSS einfacher geht. Und auch besser. Zumindest für ein Grid-System haben Bootcrap u.ä. ausgedient.

                    LLAP 🖖

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

                      Hallo Gunnar,

                      Die gute Nachricht ist: Alle können froh sein, sich die nötigen Klassenbezeichnungen nicht mehr merken zu müssen. Weil’s mit CSS einfacher geht. Und auch besser. Zumindest für ein Grid-System haben Bootcrap u.ä. ausgedient.

                      Dann erkläre mir doch kurz – oder lang, wenn du die Zeit erübrigen kannst –, wie das in der Praxis aussehen wird, insbesondere mit Bezug auf die Selektoren. Oder genauer: Wie funktioniert das Zusammenspiel zwischen inhaltlich flexiblen Templates und Design im Backend des CMS für den Redakteur? Muss man dann schon beim Erstellen des Templates die Semantik jedes Inhaltselementes vorwegnehmen? Oder soll der Redakteur für jedes semantisch neue Inhaltselement den Entwickler und den Designer rufen, damit die das Template erweitern?

                      Dass Bootstrap jetzt Flexbox und in Zukunft womöglich Grid einsetzt, lasse ich dabei bewusst ebenso außen vor wie den Umstand, dass es hier um einen Ersatz für etwas geht, was dem Designer, dem Entwickler und dem Redakteur bislang die Arbeit vereinfacht und dem Nutzer keinerlei Nachteil gebracht hat. Und mir geht es nicht um eine Website mit fünf einzeln künstlerisch-kreativ gestalteten Seiten, sondern um eine CMS-basierte mit deutlich unterschiedlichen Inhalten in einem durch den Redakteur zu nutzenden Raster.

                      MfG, at

                      1. problematische Seite

                        Hej at,

                        Dann erkläre mir doch kurz – oder lang, wenn du die Zeit erübrigen kannst –, wie das in der Praxis aussehen wird, insbesondere mit Bezug auf die Selektoren. Oder genauer: Wie funktioniert das Zusammenspiel zwischen inhaltlich flexiblen Templates und Design im Backend des CMS für den Redakteur? Muss man dann schon beim Erstellen des Templates die Semantik jedes Inhaltselementes vorwegnehmen?

                        Das macht in der Praxis erstaunlich oft keine Probleme — oder wir meinen wieder etwas anderes.

                        Oder soll der Redakteur für jedes semantisch neue Inhaltselement den Entwickler und den Designer rufen, damit die das Template erweitern?

                        Wieso sollte das nötig sein? Klassen nutzt man doch auch in handgeschriebenem CSS/SASS/LESS…

                        Dass Bootstrap jetzt Flexbox und in Zukunft womöglich Grid einsetzt, lasse ich dabei bewusst ebenso außen vor wie den Umstand, dass es hier um einen Ersatz für etwas geht, was dem Designer, dem Entwickler und dem Redakteur bislang die Arbeit vereinfacht und dem Nutzer keinerlei Nachteil gebracht hat.

                        Nur um von meiner Seite weiteren Missverständnissen vorzubeugen. Danke für die Andeutungen zur Leistungsfähigkeit von Bootstrap.

                        Wenn man sich lange genug damit beschäftigt, scheint Bootstrap anständige Ergebnisse liefern zu können (meistens werden diese Möglichkeiten unverständlicherweise aber nicht genutzt - so sind selbst in den auf Bootstrap prominent platzierten Vorzeigeprojekten wie der deutschen Vogue weder main oder nav zu finden. divs wohin das Auge blickt).

                        Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).

                        Hast du eigentlich mal mit Bootstrap Studio gearbeitet?

                        Marc

                        1. problematische Seite

                          Hallo marctrix,

                          Wenn man sich lange genug damit beschäftigt, scheint Bootstrap anständige Ergebnisse liefern zu können

                          Tatsächlich ist die Verwendung semantischer Elemente durchaus vorgesehen bei Bootstrap und wir in Beispielen auch so propagiert.

                          (meistens werden diese Möglichkeiten unverständlicherweise aber nicht genutzt - so sind selbst in den auf Bootstrap prominent platzierten Vorzeigeprojekten wie der deutschen Vogue weder main oder nav zu finden. divs wohin das Auge blickt).

                          Ja. Ich weiß. Keine Ahnung, warum.

                          Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).

                          Das typische Publikum hat vor allem kein Auge für die visuelle Aufbereitung von Webseiten und -applikationen. Und das nimmt einem Bootstrap wunderbar ab. Ich kann durchaus HTML und CSS, aber in der Firma verwende ich Bootstrap. Ansonsten müsste mein Chef einen Designer bezahlen, und das Geld haben wir nicht, da würde die Software dann halt nicht geschrieben.

                          LG,
                          CK

                          -- https://wwwtech.de/about
                          1. problematische Seite

                            Hej Christian,

                            Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).

                            Das typische Publikum hat vor allem kein Auge für die visuelle Aufbereitung von Webseiten und -applikationen. Und das nimmt einem Bootstrap wunderbar ab. Ich kann durchaus HTML und CSS, aber in der Firma verwende ich Bootstrap. Ansonsten müsste mein Chef einen Designer bezahlen, und das Geld haben wir nicht, da würde die Software dann halt nicht geschrieben.

                            Das kann ich gut verstehen - ich verwende WP und fertige Themes, die ich anpasse, weil ich kein Design kann — das HTML ist auch nicht immer so, wie ich es mir wünsche.

                            Real life halt 😉

                            Hier in den Diskussionen geht es ja oft darum, wie man etwas am besten macht, wenn man etwas selbst mit der Hand erstellt.

                            Aber für WP gibt es mehr und mehr WCAG ready-Themes. Da ist dann immerhin ein Bemühen auf Barrierefreiheit erkennbar. Ein richtiger Weg und insgesamt finde ich, wenn man Webseiten von der Stange anbietet, ist der Weg mit fertigen Themes dann auch der konsequentere und noch günstigere. Was nicht heißen soll, dass WP immer das geeignete CMS ist oder gar Individual-Programmierungen ersten kann.

                            Marc

                            1. problematische Seite

                              Hallo marctrix,

                              Real life halt 😉

                              So ist es.

                              Aber für WP gibt es mehr und mehr WCAG ready-Themes. Da ist dann immerhin ein Bemühen auf Barrierefreiheit erkennbar.

                              Auch hier wird IMHO Bootstrap oft schlechter gemacht, als es ist. Bootstrap kümmert sich um Zugänglichkeit seit mindestens Version 3; vielleicht nicht immer so, wie man es heute tun würde, aber es ist ja auch schon ein paar Jahre alt. Und in V4 ist da auch wirklich viel passiert. Dass Zugänglichkeit häufig kaum beachtet wird, dürfte eher an den Leuten liegen, die Bootstrap verwenden.

                              Was nicht heißen soll, dass WP immer das geeignete CMS ist oder gar Individual-Programmierungen ersten kann.

                              Das hätte ich dir als Aussage jetzt auch nicht unterstellt 😂

                              LG,
                              CK

                              -- https://wwwtech.de/about
                              1. problematische Seite

                                Hej Christian,

                                Aber für WP gibt es mehr und mehr WCAG ready-Themes. Da ist dann immerhin ein Bemühen auf Barrierefreiheit erkennbar.

                                Auch hier wird IMHO Bootstrap oft schlechter gemacht, als es ist.

                                Meine Aussage oben war jetzt nicht als Gegensatz zu Bootstrap gemeint. Kann auch nicht. Selbst ein möglicherweise barrierefreies WP-Theme, kann durch Anpassungen von Nutzern komplett verhunzt werden. Das lässt sich nicht verhindern. Bei Bootstrap kommt noch dazu, dass man damit ja sein Theme Ers zusammen baut. Wenn man von a11y nichts versteht, kann das nicht zugänglich werden.

                                Solche Tools müssen mit Verstand angewendet werden. Dem steht das Versprechen von Bootstrap entgegen, alles schneller, leichter und billiger zu machen. Mit so einem Tool will man sich nicht so gern beschäftigen, das soll einfach "funktionieren".

                                Setzt es man längere Zeit ein, findet man sicher die Möglichkeiten, die Bootstrap für so etwas mitbringt.

                                Ich persönlich habe einfach immer noch nicht verstanden, wo genau mit Bootstrap Zeit zu sparen ist - und wie viel das ist.

                                Um nur ein Beispiel zu nennen. Bootstrap bringt ja einen hübschen Iconsatz mit, der simpel in der Anwendung ist und funktioniert. Leider haben wir unsere eigenen Icons. - Müsste man sich mal mit beschäftigen, wie man die eingebunden bekommt. Oder macht es einfach selber mittels Atomen und Molekülen, die man wiederverwenden kann in Folgeprojekten. So hat man dann bald ein individuelles „Framework“ (eher einen Haufen einzelner Komponenten, die sich miteinander beliebig kombinieren lassen).

                                Wenn man etwas neues braucht, entwickelt man diese eine Komponente neu - und gut ist.

                                Wenn mich so was viel Zeit kosten würde, dann würde ich Bootstrap ja eine Chance geben. Aber bisher hatte ich nie den Bedarf.

                                Was nicht heißen soll, dass WP immer das geeignete CMS ist oder gar Individual-Programmierungen ersten kann.

                                Das hätte ich dir als Aussage jetzt auch nicht unterstellt 😂

                                Ich habe es mal ausdrücklich geschrieben, bevor irgendjemand auf die Idee kommt, meine meist sorgfältig gewählten Worte misszuverstehen... 😉

                                Marc

                                1. problematische Seite

                                  @@marctrix

                                  Um nur ein Beispiel zu nennen. Bootstrap bringt ja einen hübschen Iconsatz mit,

                                  Und zwar als Iconfont. Also meh.

                                  LLAP 🖖

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

                                    Hej Gunnar,

                                    @@marctrix

                                    Um nur ein Beispiel zu nennen. Bootstrap bringt ja einen hübschen Iconsatz mit,

                                    Und zwar als Iconfont. Also meh.

                                    Ja? Aber nicht mehr die neue Version, oder?

                                    Marc

                                2. problematische Seite

                                  Hallo marctrix.

                                  Wenn man von a11y nichts versteht, kann das nicht zugänglich werden.

                                  Wenn man den Begriff “a11y” verwendet, kann das nicht zugänglich werden.

                                  MfG, at

                                  1. problematische Seite

                                    Hej at,

                                    Wenn man von a11y nichts versteht, kann das nicht zugänglich werden.

                                    Wenn man den Begriff “a11y” verwendet, kann das nicht zugänglich werden.

                                    Sehr gutes Argument. Ich versuche so was zu vermeiden, in Einzelfällen rutscht mir dann doch so was raus. Danke für den Hinweis!

                                    Es ist übrigens eine Freude mit dir zu diskutieren, wenn du dir für ganze Sätze und sogar Absätze Zeit nimmst!

                                    Marc

                                    1. problematische Seite

                                      Hallo marctrix.

                                      Sehr gutes Argument. Ich versuche so was zu vermeiden, in Einzelfällen rutscht mir dann doch so was raus. Danke für den Hinweis!

                                      Sehr gern. Übrigens findet Google bei Eingabe von “a11y” auch “Accessibility” und hebt den Begriff sogar als Fundstelle hervor. Aber Verständlichkeit für Laien und verständliche vorlesende Assistenzsysteme sind ja ebenso wichtig. Und dann ist da noch diese gewisse Ironie.

                                      Es ist übrigens eine Freude mit dir zu diskutieren, wenn du dir für ganze Sätze und sogar Absätze Zeit nimmst!

                                      Vielen Dank! Aber das Zuspitzen gehört manchmal eben auch dazu. Dass man diese Zuspitzung besser einordnen kann, wenn man den Autor bereits kennt oder zumindest mal ein paar längere Antworten von ihm gelesen hat, muss ich mir aber immer mal wieder vor Augen führen (lassen).

                                      MfG, at

                                      1. problematische Seite

                                        @@at

                                        Vielen Dank! Aber das Zuspitzen gehört manchmal eben auch dazu. Dass man diese Zuspitzung besser einordnen kann, wenn man den Autor bereits kennt oder zumindest mal ein paar längere Antworten von ihm gelesen hat, muss ich mir aber immer mal wieder vor Augen führen (lassen).

                                        Das geht den Menschen wie den Leuten. 😉

                                        LLAP 🖖

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

                                        Hej at,

                                        das Zuspitzen gehört manchmal eben auch dazu. Dass man diese Zuspitzung besser einordnen kann, wenn man den Autor bereits kennt oder zumindest mal ein paar längere Antworten von ihm gelesen hat, muss ich mir aber immer mal wieder vor Augen führen (lassen).

                                        Wir alle sind nur Menschen und in einem Forum wird auch mal schnell was hingeschrieben. Es sind ja keine druckreifen Werke hier.

                                        Manchmal wird man freundlich auf ein Missverständnis hingewiesen, manchmal unfreundlich. Hauptsache am Ende klärt sich die Angelegenheit und man akzeptiert den Balken im eigenen Auge ebenso, wie den Splitter im Auge des Gegenübers…

                                        Wenn ich frei von Fehlern wäre, hätte ich kein Verständnis für die Fehlbarkeit meiner Diskussionspartner. Und ich will auch mal flapsig sein und wenn ich mich Ärger will ich auch mal zurück ärgern - peinlich, wenn man dann nicht mal recht hat. Aber auch das kommt vor!

                                        😉

                                        Mein Wörtchen zum Sonntag 🙄

                                        Marc

                                  2. problematische Seite

                                    @@at

                                    Wenn man von a11y nichts versteht, kann das nicht zugänglich werden.

                                    Wenn man den Begriff “a11y” verwendet, kann das nicht zugänglich werden.

                                    Wenn wir hier beim Nietenzählen sind:

                                    R T F M

                                    Wenn man derartige Linktitel verwendet, wird das auch nichts mit der Zugänglichkeit.

                                    Und das nicht nur der Linktitel wegen, sondern auch wegen deren Winzigkeit und dem mangelnden Abstand dazwischen.

                                    LLAP 🖖

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

                                      Tach!

                                      Wenn wir hier beim Nietenzählen sind:

                                      Ach übrigens, Niete sind keine Nieten.

                                      dedlfix.

                                      1. problematische Seite

                                        @@dedlfix

                                        Wenn wir hier beim Nietenzählen sind:

                                        Ach übrigens, Niete sind keine Nieten.

                                        Ich bin zwar nicht aus Österreich oder der Schweiz, aber auch nicht vom Fach. Da sollte „Nieten“ als „der weiß es halt nicht besser“ durchgehen.

                                        LLAP 🖖

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

                                          @@Gunnar Bittersmann

                                          Nieten

                                          Bei dem Bild im Artikel dachte ich: hm, sieht ja aus wie Bahnhof Friedrichstraße. Dann die Bildunterschrift gelesen …

                                          War mir nie aufgefallen, dass da geschweißte und genietete Träger direkt nebeneinander sind. Muss ich beim demnächst mal genauer hinsehen.

                                          LLAP 🖖

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

                                        Hallo dedlfix,

                                        Ach übrigens, Niete sind keine Nieten.

                                        Stimmt.

                                        Bis demnächst
                                        Matthias

                                        -- Rosen sind rot.
                                  3. problematische Seite

                                    @@at

                                    Wenn man von a11y nichts versteht, kann das nicht zugänglich werden.

                                    Wenn man den Begriff “a11y” verwendet, kann das nicht zugänglich werden.

                                    Is the term "a11y" a barrier of inclusion and understanding?

                                    LLAP 🖖

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

                                      Hallo Gunnar,

                                      Wenn man von a11y nichts versteht, kann das nicht zugänglich werden.

                                      Wenn man den Begriff “a11y” verwendet, kann das nicht zugänglich werden.

                                      Is the term "a11y" a barrier of inclusion and understanding?

                                      Heute mal ohne lang-Attribut? Schade, da greift meine CSS-Regel natürlich nicht.

                                      MfG, at

                                      1. problematische Seite

                                        @@at

                                        Heute mal ohne lang-Attribut?

                                        Huch, wie konnte ich nur? Jetzt nachgeholt. Das hreflang-Attribut gleich mit.

                                        LLAP 🖖

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

                            @@Christian Kruse

                            Das typische Publikum hat vor allem kein Auge für die visuelle Aufbereitung von Webseiten und -applikationen. Und das nimmt einem Bootstrap wunderbar ab.

                            Nein. “There are no ‘quick design fixes’. Design is not veneer. —Aral Balkan

                            LLAP 🖖

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

                              Hallo Gunnar,

                              Das typische Publikum hat vor allem kein Auge für die visuelle Aufbereitung von Webseiten und -applikationen. Und das nimmt einem Bootstrap wunderbar ab.

                              Nein. “There are no ‘quick design fixes’. Design is not veneer. —Aral Balkan

                              Plattitüden helfen dir hier nicht weiter und deine Unterstellungen empfinde ich als arrogant und überheblich.

                              LG,
                              CK

                              -- https://wwwtech.de/about
                              1. problematische Seite

                                @@Christian Kruse

                                Nein. “There are no ‘quick design fixes’. Design is not veneer. —Aral Balkan

                                Plattitüden helfen dir hier nicht weiter

                                Ohne die Verlinkung wäre es vielleicht eine Plattitüde gewesen.

                                Mit Verlinkung ist es ein Hinweis, den Artikel zu lesen.

                                Dem kannst du nachkommen oder auch nicht. Im zweiten Fall fehlt die Grundlage für eine weitere Diskussion.

                                LLAP 🖖

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

                                  Hallo Gunnar,

                                  mal im Ernst. Du hast einen Teilsatz meines Postings rausgegriffen und aus dem Zusammenhang gezogen, mir implizit unterstellt ich hätte keine Ahnung von dem, was ich geschrieben habe und mir eine deiner beliebten Plattitüden um die Ohren gehauen und dabei sogar noch den gleichen Fehler gemacht, den du mir unterstellt hast.

                                  Das nennst du Diskussion? Ich nenne das einfach nur unmöglich.

                                  LG,
                                  CK

                                  -- https://wwwtech.de/about
                                  1. problematische Seite

                                    @@Christian Kruse

                                    mal im Ernst. Du hast einen Teilsatz meines Postings rausgegriffen und aus dem Zusammenhang gezogen

                                    Nein, keinen Teilsatz, sondern zwei Sätze. Und nicht aus dem Zusammenhang gezogen, sondern das war ein vollständiger Gedanke von dir, nämlich als Antwort auf „Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).“

                                    Über diesen Punkt lohnt es sich durchaus mal nachzudenken und sich Fragen zu stellen wie:

                                    • Warum ist Design heutzutage nichts mehr wert?
                                    • Warum bevorzugen viele Lösungen von der Stange anstatt für sie maßgeschneiderte?
                                    • Warum legen Unternehemn Wert auf guten Backend-Code (mit allen denkbaren automatischen Tests dafür), aber keinen Wert auf vernünftigen Frontend-Code?
                                    • Warum legen Unternehmen keinen Wert auf Frontend-Entwickler (womit nicht JavaScript-Programmierer gemeint sind)?

                                    LLAP 🖖

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

                                      Hallo Gunnar,

                                      mal im Ernst. Du hast einen Teilsatz meines Postings rausgegriffen und aus dem Zusammenhang gezogen

                                      Nein, keinen Teilsatz, sondern zwei Sätze.

                                      Teilsatz ist hier ein Euphemismus für eine unzulässige Verkürzung.

                                      Und nicht aus dem Zusammenhang gezogen, sondern das war ein vollständiger Gedanke von dir, nämlich als Antwort auf „Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).“

                                      Das gesamte Posting war ein einziger Gedanke nur zu diesem Aspekt. Du hast dir einen Teil davon rausgepickt, so dass er nicht mehr das aussagt, was ich beabsichtigt habe. Du hast unzulässig verkürzt.

                                      Über diesen Punkt lohnt es sich durchaus mal nachzudenken und sich Fragen zu stellen wie: […]

                                      Tja, hättest du das getan wäre sicherlich eine interessante Diskussion daraus geworden. Aber durch die Wahl deiner Kommunikation hast du mich deutlich vor den Kopf gestoßen und jegliche Diskussion im Keim erstickt. 👍 Vielleicht solltest du, wie ich schon wirklich oft versucht habe dir nahe zu bringen, daran arbeiten weniger aggressiv zu kommunizieren. Zumindest die Leute nicht vor den Kopf zu stoßen wäre schonmal ein guter Anfang.

                                      Ich will aber mal über meinen Schatten springen und den Ärger, den du in mir erzeugt hast, herunter schlucken und auf deine Punkte eingehen.

                                      • Warum ist Design heutzutage nichts mehr wert?

                                      Design ist heutzutage sogar soviel wert, dass unser Unternehmen nicht ausreichend finanzielle Mittel hat, um sich ein individuelles Design zu leisten.

                                      • Warum bevorzugen viele Lösungen von der Stange anstatt für sie maßgeschneiderte?

                                      Das ist nicht erst seit heute so, sondern ein Grundpfeiler unserer industrialisierten Welt, Stichwort Massenproduktion. Maßgeschneiderte Lösungen sind teuer. Der Nutzen muss die Kosten überwiegen, damit es sich lohnt. Das ist oft nicht der Fall.

                                      • Warum legen Unternehemn Wert auf guten Backend-Code (mit allen denkbaren automatischen Tests dafür), aber keinen Wert auf vernünftigen Frontend-Code?

                                      Ich halte das für eine irrige Annahme. Meiner Erfahrung nach haben die meisten Unternehmen gar keine Tests und der Backend-Code ist ein genau so beschissener Misthaufen wie der Frontend-Code.

                                      • Warum legen Unternehmen keinen Wert auf Frontend-Entwickler (womit nicht JavaScript-Programmierer gemeint sind)?

                                      Meiner Erfahrung nach wissen die meisten Unternehmen nicht einmal, dass es da einen Unterschied gibt; und wenn sie es wissen, haben sie nicht genug Geld, um sich beides zu leisten.

                                      LG,
                                      CK

                                      -- https://wwwtech.de/about
                                      1. problematische Seite

                                        Hej Christian,

                                        • Warum ist Design heutzutage nichts mehr wert?

                                        Design ist heutzutage sogar soviel wert, dass unser Unternehmen nicht ausreichend finanzielle Mittel hat, um sich ein individuelles Design zu leisten.

                                        Glaube ich nicht so recht. Viele Agenturen bieten in erster Linie Design an. Es ist (fast) immer das hübsche Gesicht der Website, das verkauft wird.

                                        Oft scheinen Designer (und nicht Entwickler) das Frontend dann "zusammenzustellen" - oder der unvermeidliche Backender muss es mitmachen.

                                        • Warum legen Unternehmen keinen Wert auf Frontend-Entwickler (womit nicht JavaScript-Programmierer gemeint sind)?

                                        Meiner Erfahrung nach wissen die meisten Unternehmen nicht einmal, dass es da einen Unterschied gibt; und wenn sie es wissen, haben sie nicht genug Geld, um sich beides zu leisten.

                                        Meiner Meinung nach käme es günstiger, 1 Frontender, 3 Designer und 2 Backender einzustellen (oder so ähnlich, Zahlen sind nur Beispiele), statt 3 Designer und 3 Backender.

                                        Jemand, der sich auf etwas spezialisiert arbeitet seinen Kram immer schneller ab, als jemand, der etwas, was er so halb kann nebenher mitmachen muss. - Käme mindestens mal auf einen Versuch an.

                                        Bei uns arbeiten allerdings etwa 15 Backender, eine Designerin und ein Frontender. - Scheint mir ein gesundes Verhältnis, weil die Designerin und ich für alle Anwendung, die hausintern genutzt werden sollen, nur ein Design entwickeln muss. Die HTML-Templates können dann beliebig weiterverwendet werden - die TYPO3ler, PHPler, Java-Menschen können die dann an beliebigen Stellen auseinanderschnippeln und wieder zusammensetzen und in die dafür vorgesehenen Container ihre DB-Ausgaben reinlaufen lassen - sie müssen also nicht einmal mein "Framework" oder die Klassen kennen/lernen.

                                        Sie schmeißen ihre Inhalte einfach in die vorhandenen Elemente und wenn ich alles richtig gemacht habe, funktioniert es wie gewünscht. Wenn nicht, mache ich meine Bugfixes - meist ohne dass ein Backender dann noch mal ran muss (gut er muss die neue CSS-Dateiversion aus dem Repository ziehen - lässt sich aber auch automatisieren).

                                        Marc

                                        1. problematische Seite

                                          Hallo marctrix,

                                          • Warum ist Design heutzutage nichts mehr wert?

                                          Design ist heutzutage sogar soviel wert, dass unser Unternehmen nicht ausreichend finanzielle Mittel hat, um sich ein individuelles Design zu leisten.

                                          Glaube ich nicht so recht. Viele Agenturen bieten in erster Linie Design an. Es ist (fast) immer das hübsche Gesicht der Website, das verkauft wird.

                                          Ich weiß. Und handelte es sich nur um das Layout einer Website, wäre das durchaus auch bezahlbar. Das ist aber nicht das, was wir bräuchten. Was wir bräuchten wäre ein vollständiges Design, dass in Komponenten gegliedert ist - eben sowas wie Bootstrap. Angefangen beim visuellen Layout, weiter über Komponenten wie Formulare, Buttons, usw, pp, welche Komponenten machen in welcher Kombination Sinn, …, halt ein komplettes Design-Konzept. Und das würde uns nach letztem Angebot zwischen 15000 und 25000 € kosten. Das ist die Arbeit sicher auch wert, aber das können wir halt nicht zahlen.

                                          Oft scheinen Designer (und nicht Entwickler) das Frontend dann "zusammenzustellen" - oder der unvermeidliche Backender muss es mitmachen.

                                          In den meisten Firmen, die ich kenne, gibt es nur einen Entwickler. Vielleicht zwei, das ist aber eher die Ausnahme.

                                          Keine Ahnung, welche Perspektive du hast, aber ich hatte die ganzen kleinen Firmen im Sinn, bis vielleicht 20-25 Mitarbeiter. Davon sind ein, maximal zwei Angestellte für „die IT“ zuständig, das beinhaltet dann Administration, Entwicklung, Konzeption – eben alles.

                                          • Warum legen Unternehmen keinen Wert auf Frontend-Entwickler (womit nicht JavaScript-Programmierer gemeint sind)?

                                          Meiner Erfahrung nach wissen die meisten Unternehmen nicht einmal, dass es da einen Unterschied gibt; und wenn sie es wissen, haben sie nicht genug Geld, um sich beides zu leisten.

                                          Meiner Meinung nach käme es günstiger, 1 Frontender, 3 Designer und 2 Backender einzustellen (oder so ähnlich, Zahlen sind nur Beispiele), statt 3 Designer und 3 Backender.

                                          Ja, vermutlich hast du da recht. Doof nur, wenn man stattdessen nur ein Mädchen-für-alles hat 😉 da wäre jede denkbare Kombination teurer.

                                          Bei uns arbeiten allerdings etwa 15 Backender, eine Designerin und ein Frontender.

                                          Klingt, als könnte es klappen, auch wenn ich mich frage, wofür ihr so viele Backend-Entwickler benötigt… 😉

                                          LG,
                                          CK

                                          -- https://wwwtech.de/about
                                          1. problematische Seite

                                            Hej Christian,

                                            Und handelte es sich nur um das Layout einer Website, wäre das durchaus auch bezahlbar. Das ist aber nicht das, was wir bräuchten. Was wir bräuchten wäre ein vollständiges Design, dass in Komponenten gegliedert ist - eben sowas wie Bootstrap. Angefangen beim visuellen Layout, weiter über Komponenten wie Formulare, Buttons, usw, pp, welche Komponenten machen in welcher Kombination Sinn, …, halt ein komplettes Design-Konzept. Und das würde uns nach letztem Angebot zwischen 15000 und 25000 € kosten. Das ist die Arbeit sicher auch wert, aber das können wir halt nicht zahlen.

                                            Habe neulich für eine Agentur gearbeitet, bei der ich mal aus Versehen den endpreis für den Kunden gehört habe (sagen die freelancern nicht so gerne). Das war für ein individuelles Atomic Design, (eben jene von dir genannten Komponenten), TYPO3-Integration und alles drum und dran und kostete wohl um die zehntausend.

                                            Aber gut, die Projekte können schon ganz andere sein.

                                            Oft scheinen Designer (und nicht Entwickler) das Frontend dann "zusammenzustellen" - oder der unvermeidliche Backender muss es mitmachen.

                                            In den meisten Firmen, die ich kenne, gibt es nur einen Entwickler. Vielleicht zwei, das ist aber eher die Ausnahme.

                                            Dann sind das aber keine IT-Firmen oder web-Agenturen. Da haben wir aneinander vorbei geredet…

                                            Keine Ahnung, welche Perspektive du hast, aber ich hatte die ganzen kleinen Firmen im Sinn, bis vielleicht 20-25 Mitarbeiter. Davon sind ein, maximal zwei Angestellte für „die IT“ zuständig, das beinhaltet dann Administration, Entwicklung, Konzeption – eben alles.

                                            Ja, das sind echt arme Schweine. Ich glaube, da würde ich lieber putzen gehen, als so einen Job zu haben!

                                            Bei uns arbeiten allerdings etwa 15 Backender, eine Designerin und ein Frontender.

                                            Klingt, als könnte es klappen, auch wenn ich mich frage, wofür ihr so viele Backend-Entwickler benötigt… 😉

                                            Bei 1000 Mitarbeitern insgesamt und Aufgaben für andere Behörden im Geschäftsbereich des Ministeriums (einschließlich dem Ministerium selber), haben die ständig alle Hände voll zu tun... 😉

                                            Die vielen anderen Referate haben immer Ideen, wie die it ihre Aufgaben erleichtern könnte…

                                            Marc

                                            1. problematische Seite

                                              Hallo,

                                              Die vielen anderen Referate haben immer Ideen, wie die it ihre Aufgaben erleichtern könnte…

                                              Das ist ja schließlich die Existenzberechtigung der IT!

                                              Gruß
                                              Kalk

                                            2. problematische Seite

                                              Hallo marctrix.

                                              Habe neulich für eine Agentur gearbeitet, bei der ich mal aus Versehen den endpreis für den Kunden gehört habe (sagen die freelancern nicht so gerne). Das war für ein individuelles Atomic Design, (eben jene von dir genannten Komponenten), TYPO3-Integration und alles drum und dran und kostete wohl um die zehntausend.

                                              Aber gut, die Projekte können schon ganz andere sein.

                                              Einerseits das, andererseits war das vielleicht gar nicht der Endpreis, sondern nur der Angebotspreis. Vom Kunden erst später formulierte Wünsche, oftmals Kleinig- oder sogar Selbstverständlichkeiten, sowie Pflege und Betreuung über einen gewissen Zeitraum können die Endsumme erheblich in die Höhe treiben. Bei anderen ist das inclusive.

                                              In den meisten Firmen, die ich kenne, gibt es nur einen Entwickler. Vielleicht zwei, das ist aber eher die Ausnahme.

                                              Dann sind das aber keine IT-Firmen oder web-Agenturen.

                                              Das würde ich nicht verallgemeinern. Auch beispielsweise Dienstleister für LAN oder VOIP sind IT-Firmen. Und Webagenturen gibt es wie Sand am Meer, darunter sicher auch viele, die wie von Christian beschrieben arbeiten.

                                              Keine Ahnung, welche Perspektive du hast, aber ich hatte die ganzen kleinen Firmen im Sinn, bis vielleicht 20-25 Mitarbeiter. Davon sind ein, maximal zwei Angestellte für „die IT“ zuständig, das beinhaltet dann Administration, Entwicklung, Konzeption – eben alles.

                                              Ja, das sind echt arme Schweine. Ich glaube, da würde ich lieber putzen gehen, als so einen Job zu haben!

                                              Auf dich mag das zutreffen, andere haben Spaß daran. Und sie wissen sich auch häufig zu helfen, beispielsweise indem sie SelfHTML nutzen. Vermutlich kennst du auch einige dieser „armen Schweine“, weil sie gutgelaunt in diesem Forum schreiben.

                                              MfG, at

                                              1. problematische Seite

                                                Hej at,

                                                Ja, das sind echt arme Schweine. Ich glaube, da würde ich lieber putzen gehen, als so einen Job zu haben!

                                                Auf dich mag das zutreffen, andere haben Spaß daran. Und sie wissen sich auch häufig zu helfen, beispielsweise indem sie SelfHTML nutzen. Vermutlich kennst du auch einige dieser „armen Schweine“, weil sie gutgelaunt in diesem Forum schreiben.

                                                Über andere kann ich nur spekulieren. Daher schrieb ich „ich“ 😉

                                                Mich macht es wahnsinnig, wenn ich mich so durchwursteln muss. Ich möchte Dinge möglichst umfassend verstehen, die ich verwende. Mir ist bewusst, dass das eine Schwäche ist. Andererseits kann sich jemand, dem ich (ggfs gegen Bezahlung) meine Hilfe anbiete, genau darauf verlassen.

                                                Auch wenn niemand mehr den gesamten sprachumfang von z.B. CSS im Kopf haben kann: es ist trotzdem möglich so etwas wie CSS zu verstehen

                                                Marc

                                                1. problematische Seite

                                                  Hallo marctrix.

                                                  Über andere kann ich nur spekulieren. Daher schrieb ich „ich“ 😉

                                                  Du schriebst aber auch: „Ja, das sind echt arme Schweine.“ Und das war mir als Behauptung etwas zu pauschal, auch wenn ich es schon wie von dir gemeint verstanden habe.

                                                  MfG, at

                                                  1. problematische Seite

                                                    Hej at,

                                                    Über andere kann ich nur spekulieren. Daher schrieb ich „ich“ 😉

                                                    Du schriebst aber auch: „Ja, das sind echt arme Schweine.“ Und das war mir als Behauptung etwas zu pauschal, auch wenn ich es schon wie von dir gemeint verstanden habe.

                                                    Arme Schweine sind sie nur aus meiner Perspektive. Vielleicht wirken sie von deinem Standpunkt aus wie Helden.

                                                    Marc

                                                    1. problematische Seite

                                                      Hej marctrix,

                                                      Arme Schweine

                                                      Falls das jemandem abwertend klingt: es war als Mitleidsbekundung gemeint.

                                                      Ich würde mit denen nicht tauschen wollen, respektiere aber, was diese Allrounder leisten.

                                                      Marc

                                            3. problematische Seite

                                              Hallo marctrix,

                                              Oft scheinen Designer (und nicht Entwickler) das Frontend dann "zusammenzustellen" - oder der unvermeidliche Backender muss es mitmachen.

                                              In den meisten Firmen, die ich kenne, gibt es nur einen Entwickler. Vielleicht zwei, das ist aber eher die Ausnahme.

                                              Dann sind das aber keine IT-Firmen oder web-Agenturen.

                                              Doch, auch. Ist dir bewusst, wieviele Einzelkämpfer und Zwei-, Drei-Mann-Webbuden es da draussen gibt? 😉 und nicht nur im Web-Umfeld, in der Design-Branche sieht das nicht viel anders aus.

                                              Da haben wir aneinander vorbei geredet…

                                              Möglich, deshalb dachte ich mir, ich stelle das nochmal klar 😝

                                              Keine Ahnung, welche Perspektive du hast, aber ich hatte die ganzen kleinen Firmen im Sinn, bis vielleicht 20-25 Mitarbeiter. Davon sind ein, maximal zwei Angestellte für „die IT“ zuständig, das beinhaltet dann Administration, Entwicklung, Konzeption – eben alles.

                                              Ja, das sind echt arme Schweine. Ich glaube, da würde ich lieber putzen gehen, als so einen Job zu haben!

                                              Hehe, ich bin einer von den „armen Schweinen“ und mir gefällt es (meistens) 😉 auch dein Anspruch alles möglichst umfassend verstehen zu wollen ist kein Widerspruch zu dieser Position: den Anspruch habe ich auch.

                                              Bei uns arbeiten allerdings etwa 15 Backender, eine Designerin und ein Frontender.

                                              Klingt, als könnte es klappen, auch wenn ich mich frage, wofür ihr so viele Backend-Entwickler benötigt… 😉

                                              Bei 1000 Mitarbeitern insgesamt und Aufgaben für andere Behörden im Geschäftsbereich des Ministeriums (einschließlich dem Ministerium selber), haben die ständig alle Hände voll zu tun... 😉

                                              Nachvollziehbar, aber dann halte ich einen Designer und einen Frontend-Entwickler für knapp 🤔

                                              LG,
                                              CK

                                              -- https://wwwtech.de/about
                                              1. problematische Seite

                                                Hej Christian,

                                                Dann sind das aber keine IT-Firmen oder web-Agenturen.

                                                Doch, auch. Ist dir bewusst, wieviele Einzelkämpfer und Zwei-, Drei-Mann-Webbuden es da draussen gibt? 😉 und nicht nur im Web-Umfeld, in der Design-Branche sieht das nicht viel anders aus.

                                                Ähmm - ich bin einer davon 😉

                                                Als Firma oder Agentur bezeichne ich mich aber nicht.

                                                Keine Ahnung, welche Perspektive du hast, aber ich hatte die ganzen kleinen Firmen im Sinn, bis vielleicht 20-25 Mitarbeiter. Davon sind ein, maximal zwei Angestellte für „die IT“ zuständig, das beinhaltet dann Administration, Entwicklung, Konzeption – eben alles.

                                                Ja, das sind echt arme Schweine. Ich glaube, da würde ich lieber putzen gehen, als so einen Job zu haben!

                                                Hehe, ich bin einer von den „armen Schweinen“ und mir gefällt es (meistens) 😉 auch dein Anspruch alles möglichst umfassend verstehen zu wollen ist kein Widerspruch zu dieser Position: den Anspruch habe ich auch.

                                                Habe mir auch nie so recht bewusst gemacht, dass ich auch Techniken einsetze, die ich nicht umfassend verstehe. Bei Word oder so verlässt man sich ja einfach drauf, dass es tut, was man will, ohne zu verstehen wie genau.

                                                Das gilt auch für Wordpress und anderes, was ich so verwende. Den gemanagten Webserver, mein Smartphone - oh Mann ich bin eigentlich auch eine ganz schön arme Sau…

                                                Ich schau mich mal nach einer Stelle als Reinemachefrau um (wobei: muss ich dann verstehen, wie die ganzen Reinigungsmittel- und maschinen arbeiten?)…

                                                Bei 1000 Mitarbeitern insgesamt und Aufgaben für andere Behörden im Geschäftsbereich des Ministeriums (einschließlich dem Ministerium selber), haben die ständig alle Hände voll zu tun... 😉

                                                Nachvollziehbar, aber dann halte ich einen Designer und einen Frontend-Entwickler für knapp 🤔

                                                Wir vergeben auch viele Aufträge. Zum Beispiel unseren eigenen Webauftritt. Das können wir intern nicht (der Prophet im eigenen Land). Der wird dann von Entscheidern und Fachreferaten geplant und abgenommen. Eine schöne div-Wüste gespickt mit Bootstrap-Klassen 😂

                                                Marc

                                                1. problematische Seite

                                                  Hallo marctrix,

                                                  Dann sind das aber keine IT-Firmen oder web-Agenturen.

                                                  Doch, auch. Ist dir bewusst, wieviele Einzelkämpfer und Zwei-, Drei-Mann-Webbuden es da draussen gibt? 😉 und nicht nur im Web-Umfeld, in der Design-Branche sieht das nicht viel anders aus.

                                                  Ähmm - ich bin einer davon 😉

                                                  Hehe, ach! 😂

                                                  Habe mir auch nie so recht bewusst gemacht, dass ich auch Techniken einsetze, die ich nicht umfassend verstehe. Bei Word oder so verlässt man sich ja einfach drauf, dass es tut, was man will, ohne zu verstehen wie genau.

                                                  Das gilt auch für Wordpress und anderes, was ich so verwende. Den gemanagten Webserver, mein Smartphone

                                                  Standing on the shoulders of giants. Ist doch gut so. Ich verstehe auch nicht mehr jedes Detail meines Computers. Auch wenn ich in der Lage wäre, einen Webserver selber zu schreiben und verstehe, wie Nginx und Apache funktionieren sind mir dafür andere Sachen nicht so wichtig, etwa wie im Detail ein Multimedia-Codec funktioniert.

                                                  • oh Mann ich bin eigentlich auch eine ganz schön arme Sau…

                                                  Ich schau mich mal nach einer Stelle als Reinemachefrau um (wobei: muss ich dann verstehen, wie die ganzen Reinigungsmittel- und maschinen arbeiten?)…

                                                  😂

                                                  Eine schöne div-Wüste gespickt mit Bootstrap-Klassen 😂

                                                  rotfl You, Sir, just made my day.

                                                  LG,
                                                  CK

                                                  -- https://wwwtech.de/about
                                                  1. problematische Seite

                                                    Hej Christian,

                                                    Eine schöne div-Wüste gespickt mit Bootstrap-Klassen 😂

                                                    rotfl You, Sir, just made my day.

                                                    Behördenalltag halt - oder wie es im Fernsehen so schön heißt: „Neues aus der Anstalt😉

                                                    Marc

                        2. problematische Seite

                          Hallo marctrix.

                          Dann erkläre mir doch kurz – oder lang, wenn du die Zeit erübrigen kannst –, wie das in der Praxis aussehen wird, insbesondere mit Bezug auf die Selektoren. Oder genauer: Wie funktioniert das Zusammenspiel zwischen inhaltlich flexiblen Templates und Design im Backend des CMS für den Redakteur? Muss man dann schon beim Erstellen des Templates die Semantik jedes Inhaltselementes vorwegnehmen?

                          Das macht in der Praxis erstaunlich oft keine Probleme — oder wir meinen wieder etwas anderes.

                          Dann erkläre mir doch einfach, wie du es Redakteuren ermöglichst, semantisch beliebige Informationen mit den Freiheitsgraden eines Rasters auf Seiten zu verteilen. Der Fokus sollte dabei auf dem Vermeiden von Presentational Markup liegen.

                          Gunnar arbeitet ja offenbar noch an seiner Antwort darauf.

                          Oder soll der Redakteur für jedes semantisch neue Inhaltselement den Entwickler und den Designer rufen, damit die das Template erweitern?

                          Wieso sollte das nötig sein? Klassen nutzt man doch auch in handgeschriebenem CSS/SASS/LESS…

                          Es geht um den Anspruch, semantisch korrekte Klassenbezeichnungen zu verwenden. Die müssten eben mit jedem neu ersonnenen oder abgeleiteten semantischen Inhaltstyp erweitert werden. Das macht aber nicht der Redakteur, sondern der Designer und/oder Entwickler.

                          Wenn man sich lange genug damit beschäftigt, scheint Bootstrap anständige Ergebnisse liefern zu können (meistens werden diese Möglichkeiten unverständlicherweise aber nicht genutzt - so sind selbst in den auf Bootstrap prominent platzierten Vorzeigeprojekten wie der deutschen Vogue weder main oder nav zu finden. divs wohin das Auge blickt).

                          Man sollte eben die Doku kennen: R T F M

                          Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).

                          Das hat Christian schon sehr gut beantwortet. Aber auch heterogene Teams und/oder große Projekte profitieren deutlich von gut dokumentierten Frameworks.

                          Hast du eigentlich mal mit Bootstrap Studio gearbeitet?

                          Bisher und wohl auch in Zukunft nicht. Wenn man bislang mit Dreamweaver gearbeitet hat oder man jede der fünf Seiten einer Website einzeln gestalten möchte, mag das eine Alternative sein. Template-Entwicklung hingegen stelle ich mir damit mühsam vor.

                          MfG, at

                          1. problematische Seite

                            @@at

                            Gunnar arbeitet ja offenbar noch an seiner Antwort darauf.

                            Ist unterwegs. (Der Gunnar, nicht die Antwort.)

                            Wie letztes Jahr.

                            LLAP 🖖

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

                              @@Gunnar Bittersmann

                              Und just in dem Moment wieder genau dort.

                              Wodospad Kamieńczyka

                              Und ihr so?

                              LLAP 🖖

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

                                Hallo Gunnar Bittersmann,

                                Und ihr so?

                                blauer Himmel mit weißen Schäfchenwolken - Blick vom Gerlitzen zum Faaker See

                                Bis demnächst
                                Matthias

                                -- Rosen sind rot.
                                1. problematische Seite

                                  @@Matthias Apsel

                                  Mit der Aussicht kann ich nicht mithalten. Könnte am Wetter liegen.

                                  Knapp unterhalb der Wolken

                                  LLAP 🖖

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

                                    @@Gunnar Bittersmann

                                    Heute: Alles muss klein beginnen.

                                    Elbquelle

                                    Hier fließt schon mehr Wasser die Elbe hinunter:

                                    Elbfall

                                    LLAP 🖖

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

                                    Folgende Nachrichten verweisen auf diesen Beitrag:

                                    1. problematische Seite

                                      Hi,

                                      Hier fließt schon mehr Wasser die Elbe hinunter:

                                      ist doch gar nicht die Elbe, ist doch die Labe 😉

                                      cu,
                                      Andreas a/k/a MudGuard

                                      1. problematische Seite

                                        @@MudGuard

                                        Hier fließt schon mehr Wasser die Elbe hinunter:

                                        ist doch gar nicht die Elbe, ist doch die Labe 😉

                                        Ich labe mich gerade an ihrem Wasser.

                                        LLAP 🖖

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

                                          Tach!

                                          Hier fließt schon mehr Wasser die Elbe hinunter:

                                          ist doch gar nicht die Elbe, ist doch die Labe 😉

                                          Ich labe mich gerade an ihrem Wasser.

                                          Davon hätte ich auch gern ein Mol, dauerhaft konserviert.

                                          dedlfix.

                                        2. problematische Seite

                                          Hi,

                                          Ich labe mich gerade an ihrem Wasser.

                                          ich labe mich gleich an selbsterlegten Pfifferlingen - mit nem kleinen Steak als Beilage 😉

                                          cu,
                                          Andreas a/k/a MudGuard

                                          1. problematische Seite

                                            @@MudGuard

                                            Ich labe mich gerade an ihrem Wasser.

                                            ich labe mich gleich an selbsterlegten Pfifferlingen - mit nem kleinen Steak als Beilage 😉

                                            Hm, da läuft mir das Elbwasser im Munde zusammen.

                                            LLAP 🖖

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

                                        @@MudGuard

                                        Hier fließt schon mehr Wasser die Elbe hinunter:

                                        ist doch gar nicht die Elbe, ist doch die Labe 😉

                                        Tja, wer lesen kann, ist klar im Vorteil.

                                        Elbe mit Schild „Labe“

                                        LLAP 🖖

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

                                          Hallo,

                                          ist doch gar nicht die Elbe, ist doch die Labe 😉

                                          Tja, wer lesen kann, ist klar im Vorteil.

                                          [Elbe mit Schild „Labe“]

                                          Dieses Wasser ist eindeutig gelabe(l)t…

                                          Gruß
                                          Kalk

                              2. problematische Seite

                                Hej Gunnar,

                                @@Gunnar Bittersmann

                                Und ihr so?

                                So:

                                Schwarzer Stuhl im Schatten einer Hecke

                                Marc

                          2. problematische Seite

                            Hej at,

                            Dann erkläre mir doch kurz – oder lang, wenn du die Zeit erübrigen kannst –, wie das in der Praxis aussehen wird, insbesondere mit Bezug auf die Selektoren. Oder genauer: Wie funktioniert das Zusammenspiel zwischen inhaltlich flexiblen Templates und Design im Backend des CMS für den Redakteur? Muss man dann schon beim Erstellen des Templates die Semantik jedes Inhaltselementes vorwegnehmen?

                            Das macht in der Praxis erstaunlich oft keine Probleme — oder wir meinen wieder etwas anderes.

                            Dann erkläre mir doch einfach, wie du es Redakteuren ermöglichst, semantisch beliebige Informationen mit den Freiheitsgraden eines Rasters auf Seiten zu verteilen. Der Fokus sollte dabei auf dem Vermeiden von Presentational Markup liegen.

                            Einerseits: wie Bootstrap: indem ich nur Klassen verwende (allerdings logische).

                            Andererseits kennt man die Anforderungen. Redakteure können in der Regel ziemlich gut erklären, welche Typen von Inhalten sie erstellen und welche neuen sie sich zusätzlich wünschen.

                            Die erstellt man dann. Klar kommt es auch vor, dass sich hinterher noch ein weiterer gewünscht wird. Dann liefert man den halt nach. Solche Fälle lassen sich aber mindestens in dem mir bekannten Behördenumfeld an einer Hand abzählen, es ist also keineswegs nötig da massenweise und dauerhaft nachzuliefern.

                            Oder soll der Redakteur für jedes semantisch neue Inhaltselement den Entwickler und den Designer rufen, damit die das Template erweitern?

                            Wieso sollte das nötig sein? Klassen nutzt man doch auch in handgeschriebenem CSS/SASS/LESS…

                            Es geht um den Anspruch, semantisch korrekte Klassenbezeichnungen zu verwenden. Die müssten eben mit jedem neu ersonnenen oder abgeleiteten semantischen Inhaltstyp erweitert werden. Das macht aber nicht der Redakteur, sondern der Designer und/oder Entwickler.

                            Ja. Da diese Elemente aber mitunter (oft) so oder so ähnlich aussehen sollen, wie bereits vorhandene Container, erschöpft sich der Aufwand darin ein .neue-klasse, in eine CSS-Datei zu schreiben und ein Dropdown in der Redaktionsoberfläche von TYPO3 um einen Eintrag zu ergänzen.

                            Wenn man sich lange genug damit beschäftigt, scheint Bootstrap anständige Ergebnisse liefern zu können (meistens werden diese Möglichkeiten unverständlicherweise aber nicht genutzt - so sind selbst in den auf Bootstrap prominent platzierten Vorzeigeprojekten wie der deutschen Vogue weder main oder nav zu finden. divs wohin das Auge blickt).

                            Man sollte eben die Doku kennen: [R] [T] [F] [M]

                            Warum ich? Ich bin doch nicht der Frontender der Vogue — und weil das Argument (ich glaube von @Christian Kruse kam, für so was wäre kein Geld da. Die Vogue? Echt jetzt? Nagen die am Hungertuch? - Mir scheint, der Auftritt hat viel Geld gekostet…)

                            Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).

                            Das hat Christian schon sehr gut beantwortet.

                            Ja und seine Antwort unterstützt meine These, dass niemand(TM) die Bootstrap-Doku liest und Bootstrap dazu verführt, dass sich niemand mit Frontends beschäftigt.

                            Aber auch heterogene Teams und/oder große Projekte profitieren deutlich von gut dokumentierten Frameworks.

                            Inwiefern, wenn dann so was wie die auf Bootstrap beworbenen Beispiele dabei rauskommt?

                            Da wurde die Doku offenbar nicht gelesen — oder man hat sich die paar Sekunden(!) für das Tippen von nav statt div einfach noch gespart. — Aber auch dann ist die Doku vertane Liebesmüh, wenn sie gelesen aber nicht beherzigt wird.

                            Hast du eigentlich mal mit Bootstrap Studio gearbeitet?

                            Bisher und wohl auch in Zukunft nicht. Wenn man bislang mit Dreamweaver gearbeitet hat oder man jede der fünf Seiten einer Website einzeln gestalten möchte, mag das eine Alternative sein. Template-Entwicklung hingegen stelle ich mir damit mühsam vor.

                            Ja, das kann gut sein, man müsste mal sehen, was das Tool ausspuckt. Vielleicht ist das eine gute Basis für die weitere händische Entwicklung. Kostet ja nicht viel. Werde mir das mal anschauen.

                            Marc

                            1. problematische Seite

                              Hallo marctrix,

                              Warum ich? Ich bin doch nicht der Frontender der Vogue — und weil das Argument (ich glaube von @Christian Kruse kam, für so was wäre kein Geld da. Die Vogue? Echt jetzt? Nagen die am Hungertuch? - Mir scheint, der Auftritt hat viel Geld gekostet…)

                              Mein Argument bezog sich auf kleine bis maximal mittelständische Firmen. Von der Budgetierung bei großen Firmen habe ich keinerlei Ahnung und ich habe schon länger aufgegeben, das verstehen zu wollen…

                              LG,
                              CK

                              -- https://wwwtech.de/about
                            2. problematische Seite

                              Hallo marctrix,

                              Anscheinend lockt das Versprechen, die Arbeit zu erleichtern, nur Entwickler an, die kein CSS und/oder HTML lernen wollen oder können (z.B. weil der Arbeitgeber die dafür nötige Zeit nicht einräumt).

                              Das hat Christian schon sehr gut beantwortet.

                              Ja und seine Antwort unterstützt meine These, dass niemand(TM) die Bootstrap-Doku liest und Bootstrap dazu verführt, dass sich niemand mit Frontends beschäftigt.

                              Naja. Die Situation vor Bootstrap: 90% der Web-Projekte sahen scheisse aus und hatten völlig unbrauchbaren (Frontend-)Code. Die Situation nach Bootstrap: 90% der Web-Projekte sehen OK aus und haben unbrauchbaren Frontend-Code. Bootstrap hat da also nichts geändert, außer, dass es jetzt im allgemeinen besser aussieht. Das Desinteresse (oder vermutlich eher: die Überforderung) war vorher ja auch schon da.

                              LG,
                              CK

                              -- https://wwwtech.de/about
                        3. problematische Seite

                          @@marctrix

                          divs wohin das Auge blickt

                          Das liegt an den Tastaturen, die so etliche Entwickler verwenden. ☞ Folie 2

                          LLAP 🖖

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

                        @@at

                        Die gute Nachricht ist: Alle können froh sein, sich die nötigen Klassenbezeichnungen nicht mehr merken zu müssen. Weil’s mit CSS einfacher geht. Und auch besser. Zumindest für ein Grid-System haben Bootcrap u.ä. ausgedient.

                        Dann erkläre mir doch kurz – oder lang, wenn du die Zeit erübrigen kannst –, wie das in der Praxis aussehen wird, insbesondere mit Bezug auf die Selektoren. Oder genauer: Wie funktioniert das Zusammenspiel zwischen inhaltlich flexiblen Templates und Design im Backend des CMS für den Redakteur? Muss man dann schon beim Erstellen des Templates die Semantik jedes Inhaltselementes vorwegnehmen? Oder soll der Redakteur für jedes semantisch neue Inhaltselement den Entwickler und den Designer rufen, damit die das Template erweitern?

                        Nein. Es dürfte mit CSS Grid für den Redakteur viel einfacher werden. Er muss gar nicht mehr die Position der Inhaltselemente zueinander im Blick haben, sondern kann für jede Box einfach deren Position (beginnt in Spalte, Zeile) und Größe (erstreckt sich über Spalten, Zeilen) im Grid angeben. Er muss nur im Auge haben, dass sich Boxen nicht ungewünscht überlappen.

                        Dazu könnten ihm vier Eingabefelder (vom Typ number) dienen, wobei die beiden für die Größe jeweils mit 1 vorbelegt sind. Das CMS generiert das Element mit den entsprechenden Angaben.

                        Bsp.: Redakteur sagt, er hätte ein Element gern in der 2. Spalte in der 3. Zeile und es soll sich über 2 Spalten, aber nur eine Zeile erstrecken. Das CMS generiert das Element mit style="grid-column: 2 / span 2; grid-row: 3 / span 1".

                        (Das Grid (Anzahl der Spalten/Zeilen, Spaltenbreite, Zeilenhöhe) selbst wird im Stylesheet festgelegt.)

                        LLAP 🖖

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

                          Hej Gunnar,

                          @@at

                          Es dürfte mit CSS Grid für den Redakteur viel einfacher werden. Er muss gar nicht mehr die Position der Inhaltselemente zueinander im Blick haben, sondern kann für jede Box einfach deren Position (beginnt in Spalte, Zeile) und Größe (erstreckt sich über Spalten, Zeilen) im Grid angeben. Er muss nur im Auge haben, dass sich Boxen nicht ungewünscht überlappen.

                          Es sollte einfach sein, dem Redakteuer für so was etwas grafisches bereit zu stellen, so wie zum Erstellen von Tabellen in Word.

                          @at ging es aber wohl um die Erstellung neuer Elemente mit einer bestimmten Semantik Ich kann aber nciht verstehen, wie hier etwas durch das Weglassen einer Technik wie CSS-Grid leichter werden soll. Offenbar habe ich nicht vollkommen verstanden, wo das Problem ist.

                          So oder so würden wir unseren Redakteuren nicht so viele Freiheiten einräumen. Wenn die einen neuen Container benötigen (was aufgrund langer Planungsphasen selten vorkommt), richten wir den ein und stellen dafür einen Button, eine Checkbox, einen Eintrag in einem Dropdownmenü o.ä. zur Verfügung, der sinnvolles, semantisch korrektes HTML einfügt.

                          So weit die Theorie. Aufgrund von Zeitmangel oder aufgrund von nicht auflösbaren Konflikten kommen dann doch mal Dinge zustande, die man eigentlich nicht möchte.

                          Zugänglichkeit ist ein ideal, dem man sich im echten Leben so weit wie möglich annähert.

                          Das schöne, wenn man über Jahre ein System nutzt: es wird immer besser. Mit jedem neuen Angebot erkennt man, welche Teile man immer wieder benötigt und übernimmt diese. So wird man mit der Zeit barrierefreier, nutzerfreundlicher, redakteursfreundlicher, entwicklerfreundlicher… - sogar die Doku wird immer besser.

                          Marc

                          1. problematische Seite

                            Hallo marctrix,

                            @at ging es aber wohl um die Erstellung neuer Elemente mit einer bestimmten Semantik

                            Auch.

                            Ich kann aber nciht verstehen, wie hier etwas durch das Weglassen einer Technik wie CSS-Grid leichter werden soll.

                            Umgekehrt. Ich habe starke Zweifel daran, dass Grids das Problem lösen, das ihr in Presentational Markup seht und das Gunnar mit Inline-Styles lösen möchte.

                            Offenbar habe ich nicht vollkommen verstanden, wo das Problem ist.

                            Möglich. Das Problem liegt darin, entweder wie von Gunnar vorgeschlagen Inline-Styles zu verwenden oder beispielsweise den Redakteur mit dem Benennen von Klassen zu betrauen. Der benutzt aber ein CMS, um sich um diese Ebene nicht kümmern zu müssen. – So weit war ich allerdings auch vor der Diskussion schon. Es ist ja nicht so, dass ich mir über meine Werkzeuge keine Gedanken machen würde.

                            So oder so würden wir unseren Redakteuren nicht so viele Freiheiten einräumen.

                            Das ist auch bei unseren Kunden höchst unterschiedlich.

                            MfG, at

                            1. problematische Seite

                              Hej at,

                              Ich kann aber nciht verstehen, wie hier etwas durch das Weglassen einer Technik wie CSS-Grid leichter werden soll.

                              Umgekehrt. Ich habe starke Zweifel daran, dass Grids das Problem lösen, das ihr in Presentational Markup seht und das Gunnar mit Inline-Styles lösen möchte.

                              Man müsste es einfach probieren, denn alle Probleme lassen sich nicht vorhersehen. So wie du allein mit Bootstrap nicht jedes Problem löst, sondern deine vorhandenen CSS-Kenntnisse noch zusätzlich verwendest, würde man auch beim Verzicht auf Bootstrap Lösungen finden, die hier und da nicht der reinen Lehre von überhaupt gar keinem presentational markup entsprechen.

                              Aber auch das kann ja ein Weg sein. Von @Gunnar Bittersmann gibt es einen schönen Vortrag, wie man mit Sass presentational markup vermeiden kann und trotzdem leicht verständliche Bezeichner wie "großer Button" oder "rot" in seinem Code verwenden kann.

                              Ich habe den nicht gefunden, aber den Webkraut-Beitrag von @molily zu demselben Thema und habe ein Codepen-Beispiel erstellt.

                              Marc

                              1. problematische Seite

                                Hallo marctrix.

                                Man müsste es einfach probieren, denn alle Probleme lassen sich nicht vorhersehen. So wie du allein mit Bootstrap nicht jedes Problem löst, sondern deine vorhandenen CSS-Kenntnisse noch zusätzlich verwendest, würde man auch beim Verzicht auf Bootstrap Lösungen finden, die hier und da nicht der reinen Lehre von überhaupt gar keinem presentational markup entsprechen.

                                Ein echtes Problem sehen ja nur die, die Presentational Markup um seiner selbst willen ablehnen, statt anzuerkennen, dass ihre Argumente eben nicht überzeugen, wenn häufiger semantisch neue Inhaltselemente entstehen als grundlegende Redesigns. Meine HTML-Templates funktionieren, das CSS funktioniert und die Redakteure können ihre Freiheit nutzen. Klar könnte man auch Grids einsetzen, aber das Presentational Markup bliebe auch damit, sei es mit Klassen oder mit Inline-Styles.

                                Nichtsdestotrotz bin ich an Alternativen interessiert und habe mich darüber auch schon mit Kollegen ausgetauscht. Nur gefunden haben wir eben bislang nichts.

                                Aber auch das kann ja ein Weg sein. Von @Gunnar Bittersmann gibt es einen schönen Vortrag, wie man mit Sass presentational markup vermeiden kann und trotzdem leicht verständliche Bezeichner wie "großer Button" oder "rot" in seinem Code verwenden kann.

                                Das verschiebt das Problem meines Erachtens nur um eine Ebene. Irgendwo müssen ja zur Vermeidung von Presentational Markup die semantischen Klassenbezeichnungen herkommen. Und wenn der Designer im CSS, der Entwickler im HTML und der Redakteur im CMS nicht ohne einander dafür sorgen, wird es der CSS-Präprozessor wohl auch nicht von allein schaffen.

                                Ich habe den nicht gefunden, aber den Webkraut-Beitrag von @molily zu demselben Thema und habe ein Codepen-Beispiel erstellt.

                                Ich sehe mir das mal an, vielen Dank!

                                MfG, at

                                1. problematische Seite

                                  Hej at,

                                  Ein echtes Problem sehen ja nur die, die Presentational Markup um seiner selbst willen ablehnen

                                  Das mache ich nicht, sondern weil es mir schon des öfteren Probleme bereitet hat.

                                  Nichtsdestotrotz bin ich an Alternativen interessiert.

                                  Ja, inzwischen habe ich das begriffen 😉

                                  Aber auch das kann ja ein Weg sein. Von @Gunnar Bittersmann gibt es einen schönen Vortrag, wie man mit Sass presentational markup vermeiden kann und trotzdem leicht verständliche Bezeichner wie "großer Button" oder "rot" in seinem Code verwenden kann.

                                  Das verschiebt das Problem meines Erachtens nur um eine Ebene.

                                  Jein - es findet tatsächlich eine Verschiebung um eine Ebene statt. Dabei wird die Darstellung nochmals aufgesplittet.

                                  Man erzeugt Style-Päckchen die immer wieder gemeinsam verwendet werden, z.B. Dunkelgrüner Rahmen und hellgrüner Hintergrund oder roter Rahmen und rosa Hintergrund.

                                  Die nennt man dann box-red und box-green.

                                  Außerdem Kisten über 4 Rasterspalten und Kisten über 8 Rasterspalten.

                                  Jetzt kann man im html Klassen wie info-success oder info-warning und info-fail verwenden.

                                  Abhängig davon ob die breit oder schmal sein sollen (kann beispielsweise von Vorfahren wie main, aside, contact-form aber auch beliebigen anderen Bedingungen abhängen) zieht man sich die diversen (ich nenne die jetzt mal) Templates oder Atome zu Regeln zusammen. Das schöne: sie lassen sich leicht merken (box-red und box-small ergeben zusammen eine kleine rote Box) und man kann seinen Code wiederverwenden.

                                  Fast so ähnlich wie einfache Funktionen in der Programmierung (ich nehme mal an, daher stammt auch die Idee)…

                                  Ich habe den nicht gefunden, aber den Webkraut-Beitrag von @molily zu demselben Thema und habe ein Codepen-Beispiel erstellt.

                                  Ich sehe mir das mal an, vielen Dank!

                                  Gerne, viel Spaß dabei!

                                  Vielleicht mag @Gunnar Bittersmann seinen Vortrag noch verlinken. Die meisten Entwickler lesen zwar lieber, um Texte überfliegen zu können, aber er hat dort prima die Verschiebung um eine Ebene visualisiert - oder er verlinkt die betreffenden Folien…

                                  Marc

                              2. problematische Seite

                                @@marctrix

                                Von @Gunnar Bittersmann gibt es einen schönen Vortrag, wie man mit Sass presentational markup vermeiden kann und trotzdem leicht verständliche Bezeichner wie "großer Button" oder "rot" in seinem Code verwenden kann.

                                Ich habe den nicht gefunden

                                Hm. ☞ bittersmann.deGunnar gives talks at conferencesCSS preprocessors for the best of both worlds – der isses.

                                (Ist vielleicht nicht die beste Idee, die Beschreibungen mittels details zu verstecken?)

                                Folien · Video

                                Muss nicht ganz dumm gewesen sein.

                                LLAP 🖖

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

                                  Hej Gunnar,

                                  @@marctrix

                                  Muss nicht ganz dumm gewesen sein.

                                  Sehe ich genauso. Sonst hätte ich es hier nicht erwähnt. Und gerade das deutlich machen der Verschiebung der Ebenen und den Vorteil darzustellen, hatte ich so deutlich und nachvollziehbar vorher noch nicht benannt gesehen. Hat mir persönlich — der ich SASS und Konsorten ziemlich skeptisch gegenüber stehe — eine tolle Anwendungsmöglichkeit gezeigt!

                                  Das beste aus beiden Welten eben!

                                  Marc

                            2. problematische Seite

                              @@at

                              Möglich. Das Problem liegt darin, entweder wie von Gunnar vorgeschlagen Inline-Styles zu verwenden oder beispielsweise den Redakteur mit dem Benennen von Klassen zu betrauen.

                              Klassen wie grid-column-2, grid-row-3 sind unsinnig.

                              Statt class="grid-column-2 grid-row-3" im Markup zu setzen und .grid-column-2 { grid-column: 2 } .grid-row-3 { grid-row: 3 } im Stylesheet zu haben kann man gleich style="grid-column: 2; grid-row: 3" ins Markup schreiben.

                              LLAP 🖖

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

                              Folgende Nachrichten verweisen auf diesen Beitrag:

                        2. problematische Seite

                          Hallo Gunnar,

                          Es dürfte mit CSS Grid für den Redakteur viel einfacher werden. Er muss gar nicht mehr die Position der Inhaltselemente zueinander im Blick haben […] Er muss nur im Auge haben, dass sich Boxen nicht ungewünscht überlappen.

                          Also muss er die Position der Inhaltselemente untereinander im Blick haben. Hat er ohnehin lieber, denn er verschiebt sie ja in der Regel mittels Klicken-und-Ziehen statt Eingabefeldern.

                          Das CMS generiert das Element mit style="grid-column: 2 / span 2; grid-row: 3 / span 1".

                          Inline-Styles, weshalb ich da nicht selbst drauf gekommen bin⁈ Aber vielen Dank für den Ansatz.

                          MfG, at

                          1. problematische Seite

                            @@at

                            Also muss er die Position der Inhaltselemente untereinander im Blick haben. Hat er ohnehin lieber, denn er verschiebt sie ja in der Regel mittels Klicken-und-Ziehen statt Eingabefeldern.

                            Ja, drag and drop kann man als progressive enhancement obendrauf tun.

                            Das CMS generiert das Element mit style="grid-column: 2 / span 2; grid-row: 3 / span 1".

                            Inline-Styles, weshalb ich da nicht selbst drauf gekommen bin⁈

                            Ich hätte im gleichen Atemzug noch Inline-Styles verteufeln sollen. Ach, hatte ich ja schon.

                            Inline-Styles sind böse, wenn die Angabe der Darstellung im Markup gepflegt wird. Hier liegt der Fall aber anders. Die Angabe der Darstellung wird gar nicht im Code, sondern im GUI des CMS getätigt. Wo das CMS den Code dafür letztendlich hinpackt, ist ziemlich egal.

                            LLAP 🖖

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

                              Hallo Gunnar.

                              Inline-Styles sind böse, wenn die Angabe der Darstellung im Markup gepflegt wird. Hier liegt der Fall aber anders. Die Angabe der Darstellung wird gar nicht im Code, sondern im GUI des CMS getätigt. Wo das CMS den Code dafür letztendlich hinpackt, ist ziemlich egal.

                              Dann kann ich aber analog dazu im GUI des CMS auch präsentationsbezogene Klassenbezeichnungen benutzen, denn das Markup der Templates muss ich damit für das Ändern der Darstellung ja ebenso wenig anfassen wie das Stylesheet. Insofern drehen wir uns im Kreis – was ja auch mal ganz nett sein kann.

                              MfG, at

                              1. problematische Seite

                                @@at

                                Dann kann ich aber analog dazu im GUI des CMS auch präsentationsbezogene Klassenbezeichnungen benutzen

                                Ja, aber warum solltest du?

                                Ein Redakteur möchte ebensowenig Klassenbezeichnungen lernen wie CSS lernen. Der ist mit den genannten Eingabefeldern gut bedient, und mit drag and drop noch besser.

                                Insofern drehen wir uns im Kreis – was ja auch mal ganz nett sein kann.

                                Ja. Wie Stoppok so schön singt:

                                Beweg dein Herz zum Hirn
                                Schick beide auf die Reise
                                Tanz, tanz, tanz, aber dreh dich nicht
                                Dreh dich nicht im Kreise

                                Oh, schlechtes Beispiel. 😉

                                LLAP 🖖

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

                                  Hallo Gunnar,

                                  Ein Redakteur möchte ebensowenig Klassenbezeichnungen lernen wie CSS lernen. Der ist mit den genannten Eingabefeldern gut bedient, und mit drag and drop noch besser.

                                  Deshalb setzt er die Klassen, deren Bezeichnung er gar nicht kennt, ja auch mittels dafür geeigneter GUI-Elemente. Dafür gibt es ja Templates.

                                  MfG, at

                                  1. problematische Seite

                                    @@at

                                    Deshalb setzt er die Klassen

                                    Die Frage „weshalb Klassen (und nicht gleich den Kram in style-Attributen)?“ hast du ignoriert‽

                                    Insofern drehen wir uns im Kreis …

                                    LLAP 🖖

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

                                Hej at,

                                Insofern drehen wir uns im Kreis – was ja auch mal ganz nett sein kann.

                                Vor allem an der schönen blauen Donau - 1-2-3 — 1-2-3 😀

                                Marc

                                1. problematische Seite

                                  @@marctrix

                                  Vor allem an der schönen blauen Donau

                                  An der Elbe, nicht Donau.

                                  LLAP 🖖

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

            Hallo,

            Du kennst die Bestimmung von Bootstrap? Magst du sie mit uns teilen?

            Wie soll er denn die Bestimmung teilen?

            Gruß
            Kalk

            1. problematische Seite

              Hallo Tabellenkalk,

              Du kennst die Bestimmung von Bootstrap? Magst du sie mit uns teilen?

              Wie soll er denn die Bestimmung teilen?

              Das habe ich ihm bewusst überlassen. Aber offenbar hatte er die Aussage anders gemeint.

              MfG, at

      3. problematische Seite

        Tach!

        Leere Listeneinträge sind semantisch ebenso fragwürdig wie Listen mit nur einem Eintrag.

        Jetzt verunsicherst du mich aber.

        Meine ToDo-Liste:

        • Weltherrschaft

        dedlfix.