Meowsalot: Frage zur Gestaltung

0116

Frage zur Gestaltung

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

                              Jetzt mit einem realen Beispiel

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

    Passt das jetzt besser?

    1. 1
    2. 0
      1. 0
        1. 0
  5. 0

    Jetzt zufrieden?

    1. 0
      1. 0
        1. 2
          1. 0
            1. 2
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
          2. 0
            1. 1
              1. 1
        2. 0
    2. 0
      1. 2
        1. 0
          1. 1
            1. 0
          2. 0
    3. 2
    4. 1
  6. 0

Hallo,

eine Frage an die CSS Profis, wie würdet ihr folgende umsetzten?

Meine Idee

<section id="about"> <h3>Add Your Heading Text Here</h3> <h2>Vacation</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> </section>

Und dann das CSS

#about { max-width: 48.500em; margin: 0 auto; background-color: #efefef; padding: 2em; height: 15em; } #about h2 { font-size: 4em; margin: -20px 0 0 0; text-transform: uppercase; } #about h3 { font-size: 1em; font-weight: bold; } #about p { margin-left: 13.5em; }

Passt das so? Und wie kann ich erreichen dass der komplette Text innerhalb von #about zentriert wird (von oben nach unten)?

https://codepen.io/anon/pen/WgGBaz

Bis bald!
Meowsalot (Bernd)

  1. Hallo Bernd,

    <section> <h3>Add Your Heading Text Here</h3> <h2>Vacation</h2> </section>

    welchen Sinn soll denn semantisch haben?

    Viele Grüße
    Robert

    1. Hallo Robert,

      was meinst du damit genau? Dieser Bereich soll später auf meiner Seite als einzelner Bereich dargestellt werden z.B. für eine Produkt-Vorschau oder auf ein Hinweis auf ein Event.

      Ich habe noch etwas geändert:
      https://codepen.io/anon/pen/WgGBaz

      Bis bald!
      Meowsalot (Bernd)

      1. hallo

        Hallo Robert,

        was meinst du damit genau? Dieser Bereich soll später auf meiner Seite als einzelner Bereich dargestellt werden z.B. für eine Produkt-Vorschau oder auf ein Hinweis auf ein Event.

        Ich habe noch etwas geändert:
        https://codepen.io/anon/pen/WgGBaz

        Bis bald!
        Meowsalot (Bernd)

        h3 sollte eventuell ein button sein?

        #about { display:flex; flex-flow:column; justify-content:center; max-width: 60.500em; margin: 0 auto; background-color: #efefef; padding: 4em 6em; height: 60vh; background: linear-gradient(rgba(30,30,30,0.75), rgba(30,30,30,0.75), rgba(30,30,30,0.75)), url(https://images.unsplash.com/photo-1509635164051-5584296265cd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=14cdb08a207bcc4c4969409a1ce90898&auto=format&fit=crop&w=1052&q=80); background-repeat: no-repeat; background-size: cover; color: #fff; } #about h2 { font-size: 6vw; /* passt auf mobiles*/ margin: -20px 0 0 0; text-transform: uppercase; } #about h3 { font-size: 1em; font-weight: bold; } #about p { margin-left: 13vw; /* passt auf mobiles */ } -- https://beat-stoecklin.ch/pub/index.html

        Folgende Nachrichten verweisen auf diesen Beitrag:

        1. Hallo beatovich,

          warum sollte die <h3> ein Button sein? Verstehe ich nicht.

          Bis bald!
          Meowsalot (Bernd)

          1. Hallo Meowsalot,

            warum sollte die <h3> ein Button sein? Verstehe ich nicht.

            Weil „Add your text here“ eine Aufforderung ist, die eine Interaktion impliziert.

            Bis demnächst
            Matthias

            -- Rosen sind rot.
            1. Hallo Matthias,

              Weil „Add your text here“ eine Aufforderung ist, die eine Interaktion impliziert.

              achso. In diesem Fall wird dieses von Wordpress so empfohlen wenn man mit Sprachdateien arbeitet. Vielleicht muss ich mir eine andere Bezeichnung einfallen lassen.

              Bis bald!
              Meowsalot (Bernd)

          2. hallo

            Hallo beatovich,

            warum sollte die <h3> ein Button sein? Verstehe ich nicht.

            Hast du mein CSS mal getestet?

            -- https://beat-stoecklin.ch/pub/index.html
        2. Hallo beatovich,

          sorry, diesen Beitrag hatte ich total übersehen. Ich habe deinen Code mal hier angewendet:
          https://codepen.io/anon/pen/YOpKOq

          vielen Dank dafür, jetzt ist der Text schön in der Mitte.

          Bis bald!
          Meowsalot (Bernd)

      2. Moin Bernd,

        was meinst du damit genau?

        h3 ist eine Unterunterüberschrift, h2 ist eine Unterüberschrift. Welchen Sinn hat es also eine Unterunterüberschrift direkt vor eine Unterüberschrift zu packen? Das Outline deines Codebeispiels sieht wie folgt aus:

        · Add Your Heading Text Here · Vacation

        Ein normales Outline sieht eher so aus:

        • Vacation
          • Arrival
          • Sunbathing
          • Restaurants & Bars
          • Museums & Exhibitions
          • Departure

        Viele Grüße
        Robert

        1. Hallo Robert,

          dann nehme ich einfach nur für alle drei Zeilen ein <p> dann hat sich das Thema mit den Überschriften erledigt. Für Google spielt es keine Rolle.

          Bis bald!
          Meowsalot (Bernd)

          1. @@Meowsalot

            dann nehme ich einfach nur für alle drei Zeilen ein <p> dann hat sich das Thema mit den Überschriften erledigt. Für Google spielt es keine Rolle.

            Nein. Für eine Überschrift ist ein <p> falsch.

            Und ob eine Textphrase eine Überschrift ist, hat nichts mit Google zu tun, sondern allein mit deinem Inhalt.

            Also nochmal die Frage: Was steht da für Text vor der Überschrift? Warum steht der vor der Überschrift? Möglicherweise gehört der ja im Markup auch nach die Überschrift ist wird visuell vor der Überschrift plaziert …

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              Also nochmal die Frage: Was steht da für Text vor der Überschrift? Warum steht der vor der Überschrift? Möglicherweise gehört der ja im Markup auch nach die Überschrift ist wird visuell vor der Überschrift plaziert …

              z.B. Über uns - Wir stellen uns vor. Dann soll Über uns über Wir stellen uns vor stehen. Ein anderes Beispiel http://themes.elmastudio.de/pukeko/ direkt im Kopf WELCOME TO PUKEKO

              Bis bald!
              Meowsalot (Bernd)

              1. @@Meowsalot

                z.B. Über uns - Wir stellen uns vor. Dann soll Über uns über Wir stellen uns vor stehen. Ein anderes Beispiel http://themes.elmastudio.de/pukeko/ direkt im Kopf WELCOME TO PUKEKO

                Ein völlig anderes Beispiel. Dort ist „Welcome to Pukeko“ die Überschrift h1 und „Be in the flow and create something beautiful“ ist ein Textabschnitt p, der besonders groß dargestellt wird. (Ich hab nicht nachgesehen, ob die es so umgesetzt haben; aber so sollte es sein.)

                Oder doch nicht völlig anders? Ist bei dir vielleicht auch „Über uns“ die Überschrift und „Wir stellen uns vor“ ein Teaser-Text?

                Oder ist gar „Über uns – Wir stellen uns vor“ die Überschrift?

                Das sind inhaltliche Fragen, die nur du beantworten kannst. Und die du beantworten musst, ansonsten kann man dir mit dem HTML nicht helfen.

                Und ohne HTML kann man dir mit dem CSS nicht helfen.

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo Gunnar,

                  es wurde so umgesetzt

                  <div class="hero-content-wrap"> <span class="hero-subtitle">Welcome to Pukeko</span> <h2 class="hero-title">Be in the flow and create something beautiful.</h2> <p class="hero-text">Build your website with a new theme generation for WordPress.</p> </div>

                  dann ist dieses auch nicht richtig. Und nochmals, ich weiß nicht was ein User dort eingibt. Deshalb verzichte ich einfach auf h2 und h3 und mache ich es <p> dann kann dort stehen was will.

                  Bis bald!
                  Meowsalot (Bernd)

                  1. Hej Meowsalot,

                    es wurde so umgesetzt

                    <div class="hero-content-wrap"> <span class="hero-subtitle">Welcome to Pukeko</span> <h2 class="hero-title">Be in the flow and create something beautiful.</h2> <p class="hero-text">Build your website with a new theme generation for WordPress.</p> </div>

                    dann ist dieses auch nicht richtig.

                    Stimmt. Nicht(!) nachmachen.

                    Und nochmals, ich weiß nicht was ein User dort eingibt. Deshalb verzichte ich einfach auf h2 und h3 und mache ich es <p> dann kann dort stehen was will.

                    Auf keinen Fall. Gib etwas vor und kommuniziere, was gemeint ist!

                    Wenn es alles p sind, ist das der Tod für SEO, Screenreader und jede andere Software, die sich der Seite annimmt!

                    Marc

                    1. Hallo marctrix,

                      Auf keinen Fall. Gib etwas vor und kommuniziere, was gemeint ist!

                      ich kann einem User doch nicht vorschreiben was in eine <h2> oder in eine <h3> oder in ein <p> kommt. Wenn er möchte dass "Wir stellen uns vor" eine h3 ist und "unser Team" eine h2 ist, dann ist es nun so. Ein anderer User sagt Wir stellen uns vor ist eine h2 und unser Team ist eine h3. Dieses habe ich doch nicht in der Hand.

                      Bis bald!
                      Meowsalot (Bernd)

                      1. Hallo Bernd,

                        ich kann einem User doch nicht vorschreiben was in eine <h2> oder in eine <h3> oder in ein <p> kommt. Wenn er möchte dass "Wir stellen uns vor" eine h3 ist und "unser Team" eine h2 ist, dann ist es nun so. Ein anderer User sagt Wir stellen uns vor ist eine h2 und unser Team ist eine h3. Dieses habe ich doch nicht in der Hand.

                        Das L in HTML steht für Language und nicht für Layout. Verwende die korrekten Tags im Markup in der logisch richtigen Reihenfolge und style sie mit CSS.

                        Viele Grüße
                        Robert

                      2. Hej Meowsalot,

                        Auf keinen Fall. Gib etwas vor und kommuniziere, was gemeint ist!

                        ich kann einem User doch nicht vorschreiben was in eine <h2> oder in eine <h3> oder in ein <p> kommt. Wenn er möchte dass "Wir stellen uns vor" eine h2 ist und "unser Team" eine h3 ist, dann ist es nun so.

                        wir stellen uns vor

                        chef

                        Foo

                        team

                        Bar

                        astrid

                        Bla

                        peter

                        Blubbern

                        Ein anderer User sagt Wir stellen uns vor ist eine h3 und unser Team ist eine h2.

                        team

                        wir stellen uns vor

                        Text

                        wir zeigen uns

                        Foto

                        wir sind für Sie da

                        Kontaktdaten

                        Dieses habe ich doch nicht in der Hand.

                        Aber du solltest sagen, was Sinn macht. Siehe oben…

                        Marc

                      3. hallo

                        Auf keinen Fall. Gib etwas vor und kommuniziere, was gemeint ist!

                        ich kann einem User doch nicht vorschreiben was in eine <h2> oder in eine <h3> oder in ein <p> kommt. Wenn er möchte dass "Wir stellen uns vor" eine h3 ist und "unser Team" eine h2 ist, dann ist es nun so. Ein anderer User sagt Wir stellen uns vor ist eine h2 und unser Team ist eine h3. Dieses habe ich doch nicht in der Hand.

                        Am besten sollte man bei Templates auch kein definiertes h1-h6 verwenden, sondern den Anwender entscheiden lassen, wo genau im outline das template sitzen wird.

                        Entscheidend ist dann nur noch, dass innerhalb des templates eine innere Konsistenz besteht.

                        btw sag mal was zu meinem CSS Vorschlag https://forum.selfhtml.org/self/2018/aug/29/frage-zur-gestaltung/1730485#m1730485

                        -- https://beat-stoecklin.ch/pub/index.html
                        1. Hej beatovich,

                          Am besten sollte man bei Templates auch kein definiertes h1-h6 verwenden, sondern den Anwender entscheiden lassen, wo genau im outline das template sitzen wird.

                          Okay, aber dann muss der Anwender die Möglichkeit haben eine h2 Für ein Produkt zu vergeben, wenn das im hauptbereich ist, der mit z.B. Autozubehör in einer h1 überschrieben ist.

                          Und wenn er deine Box im Bereich Autozubehör - Folien einsetzen möchte, muss er eine h3 vergeben können.

                          h3 ist nun mal die dritte Ebene einer Hierarchie, die unter anderem von Google ausgewertet wird.

                          Entscheidend ist dann nur noch, dass innerhalb des templates eine innere Konsistenz besteht.

                          Entscheidend ist dann außerdem noch…

                          btw sag mal was zu meinem CSS Vorschlag https://forum.selfhtml.org/self/2018/aug/29/frage-zur-gestaltung/1730485#m1730485

                          Du machst den zweiten Schritt vor dem ersten, man beginnt mit der mobilen Ansicht, das ist einfacher und sinnvoller und das fallback für alles andere (progressive enhancement-Gedanke).

                          Aber das hat ja @Gunnar Bittersmann bereits geschrieben, da dachte ich, das muss nicht nich mal. 😉

                          Außerdem verwende keine viewport-abhängigen Größen für Schriften, sondern eine Basis-schriftgröße in em oder dem und addiere mittels calc einen vw-Wert dazu. Dann stellst du sicher, dass schrift immer ausreichend groß ist.

                          flexbox gibt dir die Möglichkeit, das umzusetzen, was du hier angesprochen hast, ich vermute aber, dass da nich wünsche kommen werden, wofür grid geeigneter wäre.

                          Aber (wurde auch schon gesagt): erst müssen wir wissen, wie das html aussehen soll.

                          Ich habe mich zu all den Punkten nicht geäußert, die bereits gesagt wurden. Ich abe nur an die entsprechenden postings ein Plus gesetzt…

                          Marc

                          1. hallo

                            Du machst den zweiten Schritt vor dem ersten, man beginnt mit der mobilen Ansicht, das ist einfacher und sinnvoller und das fallback für alles andere (progressive enhancement-Gedanke).

                            Nein. Da sind keine @media Regeln. Und codepen ist kein Ort um Viewport-Simulationen zu betreiben.

                            Außerdem verwende keine viewport-abhängigen Größen für Schriften, sondern eine Basis-schriftgröße in em oder dem und addiere mittels calc einen vw-Wert dazu. Dann stellst du sicher, dass schrift immer ausreichend groß ist.

                            Feinheiten sind dem Anwender gegeben. Wer kennt den Kontext, wo dieser Block angewendet wird?

                            -- https://beat-stoecklin.ch/pub/index.html
                            1. Hallo beatovich,

                              hier jetzt mit einem möglichen realen Beispiel:
                              https://codepen.io/anon/pen/YOpKOq

                              Bis bald!
                              Meowsalot (Bernd)

                              1. hallo

                                hier jetzt mit einem möglichen realen Beispiel:
                                https://codepen.io/anon/pen/YOpKOq

                                <span>Donnerstag, 6. September von 18:00 bis 21:00</span>

                                Schau dir mal das <time> Element an.

                                -- https://beat-stoecklin.ch/pub/index.html
                                1. Hallo beatovich,

                                  tut mir leid, ich verliere jetzt dann gleich die Lust und die Geduld mit euch weiter zu diskutieren. Ich habe vorhin mehrfach gesagt ich weiß nicht was der User dort rein schreibt. Jetzt habe ich ein Beispiel gebracht und jetzt kommst du mit <time>. Ob dieses ein <time> oder ein <span> ist, ist für Google egal.

                                  Bis bald!
                                  Meowsalot (Bernd)

                                  1. hallo

                                    tut mir leid, ich verliere jetzt dann gleich die Lust und die Geduld mit euch weiter zu diskutieren. Ich habe vorhin mehrfach gesagt ich weiß nicht was der User dort rein schreibt. Jetzt habe ich ein Beispiel gebracht und jetzt kommst du mit <time>. Ob dieses ein <time> oder ein <span> ist, ist für Google egal.

                                    Ich kenne ja dieses gutenberg nicht.

                                    Aber kannst du dort Optionen anbringen? Also z.B. eine Variante für einen Event, einen für einen Teaser?

                                    -- https://beat-stoecklin.ch/pub/index.html
                                  2. Moin noch einmal,

                                    wenn Google der Maßstab für dich ist, dann schreib doch rein semantisches HTML. Du brauchst dich dabei auch nicht ums Layout zu kümmern 😝

                                    Viele Grüße
                                    Robert

                                2. Hej @Meowsalot ,

                                  hier jetzt mit einem möglichen realen Beispiel:
                                  https://codepen.io/anon/pen/YOpKOq

                                  <span>Donnerstag, 6. September von 18:00 bis 21:00</span>

                                  Schau dir mal das <time> Element an.

                                  Oder dieses unterhaltsame Video über die Bedeutung von Bedeutung: „What does it mean“ 😉

                                  Marc

                                  Folgende Nachrichten verweisen auf diesen Beitrag:

                              2. Hej Meowsalot,

                                hier jetzt mit einem möglichen realen Beispiel:
                                https://codepen.io/anon/pen/YOpKOq

                                Dann muss das Datum unbedingt hinter die Überschrift, sonst wird jede Software dieser Welt behaupten, dass der vorangegangene Event an diesem Datum stattfindet. Und jeder, der sich von Software die Seite ausgeben lässt. @Gunnar Bittersmann beim Frühstück, ich beim Zähneputzen, blinde sowieso, vermutlich die Nutzer der leseansicht im Browser (habe ich nicht getestet, ist aber wahrscheinlich). Und jeder, der kein css hat oder ein eigenes css verwendet oder…

                                Semantik gibt es aus guten Gründen! Eine Website muss auch ohne CSS verständlich sein!

                                Marc

                                1. hallo

                                  Hej Meowsalot,

                                  hier jetzt mit einem möglichen realen Beispiel:
                                  https://codepen.io/anon/pen/YOpKOq

                                  Dann muss das Datum unbedingt hinter die Überschrift, sonst wird jede Software dieser Welt behaupten, dass der vorangegangene Event an diesem Datum stattfindet. Und jeder, der sich von Software die Seite ausgeben lässt. @Gunnar Bittersmann beim Frühstück, ich beim Zähneputzen, blinde sowieso, vermutlich die Nutzer der leseansicht im Browser (habe ich nicht getestet, ist aber wahrscheinlich). Und jeder, der kein css hat oder ein eigenes css verwendet oder…

                                  Da wir eh schon flex einsetzen, können wir in diesem Fall die Eigenschaft order für flex-items verwenden.

                                  -- https://beat-stoecklin.ch/pub/index.html
                                  1. Hej beatovich,

                                    Da wir eh schon flex einsetzen, können wir in diesem Fall die Eigenschaft order für flex-items verwenden.

                                    Wenn man die Grenzen respektiert, aber die hatte ich ja schon vor gut einer Stunde genannt

                                    Marc

                                2. Hallo marctrix,

                                  damit ist die Diskussion für mich jetzt beendet. Man kann es auch übertreiben. Ihr seht nur eure Vorlieben, was ich sagte interessiert euch einen scheiß? Hauptsachen ihr kommt mit euren Vorstellungen durch.

                                  Bis bald!
                                  Meowsalot (Bernd)

                                  1. Hallo Bernd,

                                    damit ist die Diskussion für mich jetzt beendet. Man kann es auch übertreiben.

                                    Mit anderen Worten: Du bekommst deinen Willen nicht.

                                    Ihr seht nur eure Vorlieben, was ich sagte interessiert euch einen scheiß? Hauptsachen ihr kommt mit euren Vorstellungen durch.

                                    Es gibt nun einmal Vorstellungen, die standardisiert sind und einen großen Nutzen haben – auch für deine Kunden. Man designt eine Webseite nicht für sich, sondern für die Leser – und wie ich gelernt habe, heißt Design nicht, wie etwas aussieht, sondern wie etwas funktioniert.

                                    Viele Grüße
                                    Robert

                                    Folgende Nachrichten verweisen auf diesen Beitrag:

                                  2. Hej Meowsalot,

                                    damit ist die Diskussion für mich jetzt beendet.

                                    Okay, scheint ja nichts zu bringen.

                                    Man kann es auch übertreiben. Ihr seht nur eure Vorlieben, was ich sagte interessiert euch einen scheiß?

                                    Doch. Aber dich interessiert nicht, was wir sagen. Das sieht man, wenn man den folgenden Satz liest:

                                    Hauptsachen ihr kommt mit euren Vorstellungen durch.

                                    Das sind nicht unsere Vorstellungen (obwohl selbst dann solltest du mal drüber nachdenken, was wir sagen. Ich entwickle seit knapp 20 Jahren templates für unterschiedlichste CMSe und Individual-Software. Wenigsten mal erwägen, ob nicht das, was alle hier übereinstimmend raten nicht doch den einen oder anderen Gedanken wert wäre).

                                    Wodrpber wir hier sprechen ist die HTML-Spezifikation. Und die hat sich keiner von uns ausgedacht!

                                    Das und nichts anderes (die bestimmungsgemäße Verwendung von HTML) versuchen wir dir hier seit Stunden zu erläutern. Nicht einer von uns hat über seine Vorlieben geredet. Außer du.

                                    Du sagst eigentlich nur: „Ich will kein Konzept machen - vielleicht hält sich der Anwender ja doch nicht dran…“

                                    Wie du siehst: ich habe zugehört. Aber du hast recht. Das interessiert mich einen Scheiß, ob dir das gefällt. Ich möchte, dass dein Template ordentliche Webseiten generiert. Alles andere ist mir egal. 😉

                                    Marc

                                    Folgende Nachrichten verweisen auf diesen Beitrag:

                                  3. Hej Meowsalot,

                                    damit ist die Diskussion für mich jetzt beendet.

                                    Das ist übrigens (erst mal) eine gute Idee. Lass mal sacken, schlaf drüber und wenn du magst gehen wir morgen frisch und ausgeschlafen nich mal an die Sache.

                                    Schau dir (auch morgen) vielleicht doch noch mal den einen oder anderen Link an, den ich gepostet habe. Aus deinen Antworten wird klar, dass du weder das Video geschaut, nich den Artikel oder gar die Originale auf css-Tricks gelesen hast.

                                    Du hast gute Ansätze, wäre schade, wenn du da nicht mehr draus machst!

                                    Marc

                            2. @@beatovich

                              Und codepen ist kein Ort um Viewport-Simulationen zu betreiben.

                              Warum nicht? Ich finde CodePen dafür fürs erste ganz komfortabel. Nicht mit der (IMHO unvorteilhaften) Voreinstellung mit der Quellcode-Box unten, sondern die Quellcode-Box nach links (oder rechts) gepackt (Change View > Editor Layout). Dann kann man duch Hin- und Herschieben des Balkens dazwischen ganz einfach die Viewportbreite ändern, ohne das Browserfenster ändern zu müssen.

                              LLAP 🖖

                              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. Hallo Bernd,

            dann nehme ich einfach nur für alle drei Zeilen ein <p> dann hat sich das Thema mit den Überschriften erledigt. Für Google spielt es keine Rolle.

            Für Google spielen Überschriften eine Rolle – und nicht nur für die. Ich denke, dass auch Screenreader etwas mit dieser Information anfangen können. Eine Überschrift sollte eine Überschrift sein. Ansonsten könntest du dein ganzes Markup auch nur mit div (ein Buchstabe weniger als span und mit display: inline auch handhabbar) gestalten 😝

            Viele Grüße
            Robert

            1. @@Robert B.

              Ansonsten könntest du dein ganzes Markup auch nur mit div (ein Buchstabe weniger als span und mit display: inline auch handhabbar) gestalten 😝

              Du kannst auch a nehmen – das sind nochmal 2 Buchstaben weniger. 😝

              LLAP 🖖

              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. hallo

                @@Robert B.

                Ansonsten könntest du dein ganzes Markup auch nur mit div (ein Buchstabe weniger als span und mit display: inline auch handhabbar) gestalten 😝

                Du kannst auch a nehmen – das sind nochmal 2 Buchstaben weniger. 😝

                Da kann man sich das dann aber auch sparen

                < class="bla"></>

                ist semantisch genug. Semantik erzeugt eh nur Verschachtelungsfehler.

                -- https://beat-stoecklin.ch/pub/index.html
              2. Hallo Gunnar,

                ich habe extra div vorgeschlagen, weil es eine semantische Nichtbedeutung hat. a ist doch ein Anker bzw. Hyperlink – oder hat das die WTFWG auch schon getilgt?

                Viele Grüße
                Robert

                1. @@Robert B.

                  ich habe extra div vorgeschlagen, weil es eine semantische Nichtbedeutung hat. a ist doch ein Anker bzw. Hyperlink – oder hat das die WTFWG auch schon getilgt?

                  Mit href-Attribut ist ein a-Element ein Link. Ohne hat es fast dieselbe semantische Nichtbedeutung wie span.

                  Außerdem ging es doch gerade darum, kein semantisches Markup zu verwenden! 😜

                  LLAP 🖖

                  -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@Meowsalot

    <section id="about"> <h3>Add Your Heading Text Here</h3> <h2>Vacation</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> </section>

    Was ist „Add Your Heading Text Here“? Auf keinen Fall h3.

    Wozu ist das gut? Was steht da wirklich für Text?

     

    Und dann das CSS

    #about { max-width: 48.500em; margin: 0 auto; background-color: #efefef; padding: 2em; height: 15em; }

    Eine feste Höhe zuzuweisen ist so gut wie immer falsch. Der Inhalt braucht u.U. mehr Höhe. Nimm min-height.

     

    Passt das so?

    Mitnichten.

    Screenshot

    Text im Handtuch-Format?

    Und wie geht’s nach „erat,sed“ weiter? Weiß auf weiß ist schlecht zu lesen.

     

    Und wie kann ich erreichen dass der komplette Text innerhalb von #about zentriert wird (von oben nach unten)?

    Mit Flexbox oder Grid.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      Was ist „Add Your Heading Text Here“ Wozu ist das gut? Was steht da wirklich für Text?

      Es sind Boxen, diese können später für viele Bereiche eingesetzt werden. In diesem Fall werden es Wordpress Gutenberg Blocke die genutzt werden können.

      Eine feste Höhe zuzuweisen ist so gut wie immer falsch. Der Inhalt braucht u.U. mehr Höhe. Nimm min-height.

      ok, werde ich ändern.

      Passt das so?

      Mitnichten.

      naja, ich habe nicht gesagt dass diese Bereich für Mobile optimiert ist, oder siehst du im Code irgendwelche Media Queries?

      Text im Handtuch-Format? Und wie geht’s nach „erat,sed“ weiter? Weiß auf weiß ist schlecht zu lesen.

      im Mobilen bereich geht der Text dann über die ganze Breite, da ist eine Einrückung uninteressant.

      Und wie kann ich erreichen dass der komplette Text innerhalb von #about zentriert wird (von oben nach unten)?

      Mit Flexbox oder Grid.

      hatte ich, dann waren aber alle drei Textbereiche nebeneinander.

      Bis bald!
      Meowsalot (Bernd)

      1. @@Meowsalot

        Was ist „Add Your Heading Text Here“ Wozu ist das gut? Was steht da wirklich für Text?

        Es sind Boxen, diese können später für viele Bereiche eingesetzt werden. In diesem Fall werden es Wordpress Gutenberg Blocke die genutzt werden können.

        ?? Inwiefern soll das meine Frage beantworten?

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          gegenfrage, in wie weit ist das jetzt wichtig? Was da drin steht entscheidet der User nicht ich.

          Bis bald!
          Meowsalot (Bernd)

          1. Hej Meowsalot,

            gegenfrage, in wie weit ist das jetzt wichtig? Was da drin steht entscheidet der User nicht ich.

            Nein, du gibst vor, was da rein gehört. Sonst kann der User das theme ja nicht korrekt befüllen!

            Was ist die Artikel-Überschrift, was eine textliche Ergänzung dazu, was ist eine unterüberschrift, was ist zwingend anzugeben, was optional, was davon ist im Header des article, wie sehen zwischenüberschriften für sections im article aus, wie sind die einzugeben usw. wenn du da keine Vorgaben machst und kein Konzept hast, wird es Unsinn.

            Marc

            1. Hallo marctrix,

              hast dich schon einmal mit dem Gutenberg Editor von Wordpress befasst? Wenn ja weißt du bestimmt dass es dort Blöcke gibt, die man ganz individuell füllen kann und ein Designer nicht vorgeben kann was wie wo in welcher Reihenfolge angeordnet wird.

              Deshalb nochmals, ich weiß nicht was ein User dort eingibt.

              Bis bald!
              Meowsalot (Bernd)

              1. Hej Meowsalot,

                hast dich schon einmal mit dem Gutenberg Editor von Wordpress befasst?

                Der ist doch nich work in progress…

                Niemand weiß, was der mal für Features bekommt.

                Deshalb nochmals, ich weiß nicht was ein User dort eingibt.

                Das stimmt, weil man ich weiß, ob sich der User an deine Vorgaben hält. Man sollte ihm aber wenigstens die Chance geben, das theme sinnvoll einzusetzen.

                Marc

                1. Hallo marctrix,

                  in 1-2 Monaten kommt Wordpress 5 da ist dieser Editor Standard. Seit dem letzten Update weißt Wordpress sogar drauf hin.

                  Bis bald!
                  Meowsalot (Bernd)

                  1. Hej Meowsalot,

                    in 1-2 Monaten kommt Wordpress 5 da ist dieser Editor Standard. Seit dem letzten Update weißt Wordpress sogar drauf hin.

                    Ist doch schon Standard, aber in der Version 5 kann man immer noch den zu Ende gedachten nutzen.

                    Außerdem enthebt das dich doch nicht von der Pflicht, Nutzern die Möglichkeit zu geben, Überschriften, Absätze, Bilder, Links, Zitate, Listen usw sinnvoll anzulegen.

                    Und dein Design ist ein Vorschlag, wie ein sinnvoll strukturiertes html aussehen kann.

                    Aber wenn du nur Absätze anbietest, wie willst du denn für ein unterschiedliches aussehen sorgen?

                    Über Klassen?

                    Und wie sollen die dann heißen? große_schrift kleine_schrift bunte_schrift?

                    Marc

                    1. @@marctrix

                      Aber wenn du nur Absätze anbietest, wie willst du denn für ein unterschiedliches aussehen sorgen?

                      Über Klassen?

                      Nein, natürlich nicht. Das entsprechende HTML-Element hält schon passende Attribute parat.

                      Und wie sollen die dann heißen? große_schrift

                      <font size="7">

                      kleine_schrift

                      <font size="3">

                      bunte_schrift?

                      <font color="hotpink">

                      🤪

                      LLAP 🖖

                      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                      Folgende Nachrichten verweisen auf diesen Beitrag:

                      1. Hallo Gunnar,

                        Hauptsache du ziehst alles ins lächerliche. Aber wehe es sagt mal jemand etwas gegen dich, dann läuft du Sturm.

                        Bis bald!
                        Meowsalot (Bernd)

                        1. @@Meowsalot

                          Aber wehe es sagt mal jemand etwas gegen dich, dann läuft du Sturm.

                          Wenn das so wäre, hätte sich der Verein längst ein Windrad zugelegt, würde als Ökostromanbieter tätig sein und das mit der Webentwicklung so nebenbei noch mitlaufen lassen oder ganz einstellen.

                          LLAP 🖖

                          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        2. Hej Meowsalot,

                          Hallo Gunnar,

                          Hauptsache du ziehst alles ins lächerliche. Aber wehe es sagt mal jemand etwas gegen dich, dann läuft du Sturm.

                          Da dieser Beitrag nichts außer einer Beleidugung enthält, werde ich eine Sperrabstimmung initiieren. Er bringt die Diskussion nicht wieter und alles was darauf als Antwort kommen könnte ebenfalls nicht.

                          @Meowsalot Du kannst das, was du sagen möchtest, wenn es denn gesagt werden muss, ja im Meta-Forum und konstruktiver loswerden.

                          Marc

                          1. @@marctrix

                            Hauptsache du ziehst alles ins lächerliche. Aber wehe es sagt mal jemand etwas gegen dich, dann läuft du Sturm.

                            Da dieser Beitrag nichts außer einer Beleidugung enthält

                            ?? Ich gebe mir alle Mühe, jetzt mal beleidigt zu sein. Es gelingt mir nicht.

                            Können wir die Grenzen mal in Richtung „sinnvoll“ verschieben?yours truly

                            werde ich eine Sperrabstimmung initiieren.

                            Dafuq?

                            Er bringt die Diskussion nicht wieter und alles was darauf als Antwort kommen könnte ebenfalls nicht.

                            An der Stelle muss auch nicht weiter diskutiert werden. Das kann man einfach mal so stehenlassen.

                            LLAP 🖖

                            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          2. Hallo marctrix,

                            Da dieser Beitrag nichts außer einer Beleidugung enthält, werde ich eine Sperrabstimmung initiieren. Er bringt die Diskussion nicht wieter und alles was darauf als Antwort kommen könnte ebenfalls nicht.

                            wie bitte? Ich war beleidigend, nur weil ich gesagt habe dass Gunnar Sturm läuft? Alles klar, wenn man nicht mehr mal seine Meinung sagen darf dann gute Nacht.

                            Bis bald!
                            Meowsalot (Bernd)

                            1. Hallo Meowsalot,

                              wie bitte? Ich war beleidigend, nur weil ich gesagt habe dass Gunnar Sturm läuft? Alles klar, wenn man nicht mehr mal seine Meinung sagen darf dann gute Nacht.

                              Marc hat da m.M.n. etwas überreagiert (ist doch sonst nicht dein Art @marctrix, schlechter Tag?).

                              Gruss
                              Henry

                              -- Meine Meinung zu DSGVO & Co:
                              „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
                              1. Hej Henry,

                                wie bitte? Ich war beleidigend, nur weil ich gesagt habe dass Gunnar Sturm läuft? Alles klar, wenn man nicht mehr mal seine Meinung sagen darf dann gute Nacht.

                                Marc hat da m.M.n. etwas überreagiert (ist doch sonst nicht dein Art @marctrix, schlechter Tag?).

                                Ne, mir ist das eher allgemein aufgefallen, dass @Meowsalot hier in der Diskussion ziemlich stur war und zuletzt beleidigt (nicht beleidigend) reagiert hat. Das war wohl der berühmte letzte Tropfen.

                                Keine seiner Äußerungen ist für sich genommen wert gelöscht zu werden. Er hat diese Diskussion einfach in einer zunehmend schlechten Laune betrieben. Das ist irgendwo auch verständlich, wenn man bedenkt, dass er mit einem hübschen Layout aungekommen ist, über das er reden wollte und dann gesagt bekommt, da kann man auf dem vorhandenen HTML nicht aufbauen.

                                Das frustriert, auch wenn es stimmt. Ich habe ja gerade zum Schluss hin auch mit Lob und positiver Unterstützung versucht wieder ein motivierenderes Klima zu schaffen. Genau in diesem Moment kam dann der Post hier.

                                Also von mir aus gerne Schwamm drüber.

                                Marc

                            2. Hej Meowsalot,

                              Da dieser Beitrag nichts außer einer Beleidugung enthält, werde ich eine Sperrabstimmung initiieren. Er bringt die Diskussion nicht wieter und alles was darauf als Antwort kommen könnte ebenfalls nicht.

                              wie bitte? Ich war beleidigend, nur weil ich gesagt habe dass Gunnar Sturm läuft? Alles klar, wenn man nicht mehr mal seine Meinung sagen darf dann gute Nacht.

                              Genau aus diesem Grund mag ich die Abstimmungen: es kann darüber diskutiert werden, ob ich mit meiner einschätzung richtig liege.

                              Meine Wortwahl finde ich auch falsch. Es liegt tatsächlich keine Beleidigung vor. Bleibt nur, dass Dein Beitrag nichts enthält, was die Diskussion weiter führt und dazu ziemlich missgelaunt geschrieben wurde. Er verallgemeinert unzulässig und stellt @Gunnar Bittersmann als überhebliches HB-Männchen dar. Aber gut. er hat genug Humor und selbstbewusstsein, um damit umzugehen. Daher fidne ich im Nachhinein mein Eingreifen als unnötig (nicht unpassend!).

                              Übrigens ein schönes Beispiel dafür, dass ich mit Gunnar längst nicht immer einer Meinung bin. Ich lösche zar nie (zumindest bis jetzt), habe aber schon die eine oder andere dieser Abstimmungen initiiert. Gunnar dagegen würde sehr öfter etwas stehen lassen. Das begründet er immer - mit mir idR sympathischen Argumenten. Einen Sturmlauf sehe ich hier (wie so oft) nicht…

                              Marc

                              1. Hallo marctrix,

                                aber dieser Beitrag ist sinnvoll?
                                https://forum.selfhtml.org/self/2018/aug/29/frage-zur-gestaltung/1730557#m1730557

                                ich habe eher das Gefühl hier wird mit zwei Maßstäben gemessen. Aber wie gesagt wenn du das als Beleidigung oder als Unnötig siehst bitte, es steht dir frei zu machen was du meinst. Ich werde mich zu diesem Thema nicht mehr äußern. Es ist einfach nur Zeitraubend und in meinen Augen eine total unnötige Diskussion.

                                Und eine Diskussion kann nicht immer harmonisch ablaufen. Weder in einem Virtuellen Raum noch in der realen Welt.

                                Hab mich gestern auch nicht über deine unmögliche Rechtschreibung beschwert.

                                Bis bald!
                                Meowsalot (Bernd)

                                1. Hej Meowsalot,

                                  aber dieser Beitrag ist sinnvoll?
                                  https://forum.selfhtml.org/self/2018/aug/29/frage-zur-gestaltung/1730557#m1730557

                                  Das habe ich als an (mehr oder wneigher ausschließlich) an mich gerichteten Scherz aufgefasst. Ich kann mir aber vorstellen, wie das auf dich gewirkt haben kann, wenn du weniger selbstbewusst und humorvoll bist als Gunnar.

                                  Es ist einfach nur Zeitraubend und in meinen Augen eine total unnötige Diskussion.

                                  Nicht wenn du dich drauf einlässt. Wir sind ja noch in der allerersten Phase, wo wir bestehende Problem analysieren. Da kommen wir nicht drüber weg hin zuu Lösungsvorschlägen, weil du nicht wahrhaben willst, dass es Probleme gibt.

                                  du kennst uns sicher gut genug um zu wissen, dass wir mit Lösungen rausrücken.

                                  Und eine Diskussion kann nicht immer harmonisch ablaufen. Weder in einem Virtuellen Raum noch in der realen Welt.

                                  Da hst du absolut recht!

                                  Hab mich gestern auch nicht über deine unmögliche Rechtschreibung beschwert.

                                  Aber Gunnar. 😉

                                  Ist also nicht so, als würde hier nur auf dir rumgehackt, sondern Dige, die angebracht sind, werden angesprochen.

                                  Marc

                                2. @@Meowsalot

                                  aber dieser Beitrag ist sinnvoll?
                                  https://forum.selfhtml.org/self/2018/aug/29/frage-zur-gestaltung/1730557#m1730557

                                  Bei „sinnvoll“ steht immer die Frage: wofür?

                                  War der Beitrag sinnvoll als fachliche Ergänzung? Nein, ganz sicher nicht. Das sollte er auch gar nicht sein.

                                  War der Beitrag sinnvoll als Spaß am Rande? Vielleicht; vielleicht auch nicht. Das sollte er jedenfalls sein.

                                  ich habe eher das Gefühl hier wird mit zwei Maßstäben gemessen.

                                  Ich auch manchmal.

                                  Und eine Diskussion kann nicht immer harmonisch ablaufen. Weder in einem Virtuellen Raum noch in der realen Welt.

                                  Da bin ich bei dir.

                                  LLAP 🖖

                                  -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      2. Hej Gunnar,

                        @@marctrix

                        Aber wenn du nur Absätze anbietest, wie willst du denn für ein unterschiedliches aussehen sorgen?

                        Über Klassen?

                        Nein, natürlich nicht. Das entsprechende HTML-Element hält schon passende Attribute parat.

                        Und wie sollen die dann heißen? große_schrift

                        <font size="7">

                        Was hast du denn geraucht? - Wenn du von meinem Getränk abhaben willst, musst du mir davon abgeben!

                        Bring niemanden auf Ideen!

                        Marc

                        1. @@marctrix

                          <font size="7">

                          Was hast du denn geraucht?

                          Nichts, ich schwelge nur in der Vergangenheit. 🤪

                          LLAP 🖖

                          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. Hej Gunnar,

                            @@marctrix

                            <font size="7">

                            Was hast du denn geraucht?

                            Nichts, ich schwelge nur in der Vergangenheit. 🤪

                            Ja früher war alles besser schlechter anders…

                            Aber Spaß macht, wo man dran gewöhnt ist. So sind wir Menschen halt.

                            Marc

            2. Hej Meowsalot,

              Übrigens was ich an den wengen Möglichkeiten der Standard-themes so mag: man kann über die so erfassten Inhalte jedes andere theme drüber stülpen und es wird immer funktionieren. Wenn du viel anbietest, was twentyxxxxx nicht hat, wird man niemals mehr diese themes mit den Inhalten verwenden können, die mit diesem erfasst wurden.

              Marc

              1. Hallo marctrix,

                wenn die Designs nicht für den Gutenberg Editor vorbereitet sind, wird eh kaum noch etwas richtig funktionieren.

                Bis bald!
                Meowsalot (Bernd)

          2. @@Meowsalot

            gegenfrage, in wie weit ist das jetzt wichtig? Was da drin steht entscheidet der User nicht ich.

            User heißt in dem Falle Redakteur?

            Das heißt, du willst dem Redakteur eine durchgestylte Box zur Verfügung stellen, ohne zu wissen (bzw. dem Redakteur vorzugeben), was überhaupt für Inhalte da rein sollen? Mit Design hat das nichts zu tun.

            Ich weiß nicht, was dabei rauskommen soll. Ich kann mir aber vorstellen, was dabei rauskommen wird: ziemlicher Mist.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              User heißt in dem Falle Redakteur?

              genau

              Das heißt, du willst dem Redakteur eine durchgestylte Box zur Verfügung stellen, ohne zu wissen (bzw. dem Redakteur vorzugeben), was überhaupt für Inhalte da rein sollen? Mit Design hat das nichts zu tun.

              klar hat dieses etwas mit Design zu tun. Eine Box heißt z.B. Events, dann ist klar wie die Box ausschaut, wenn diese Box missbräuchlich für etwas anderes genutzt wird, ist der Redakteur selbst dafür verantwortlich.

              So läuft dieses mit dem neuen Gutenberg Editor.

              Bis bald!
              Meowsalot (Bernd)

              1. @@Meowsalot

                klar hat dieses etwas mit Design zu tun. Eine Box heißt z.B. Events, dann ist klar wie die Box ausschaut,

                Das ist was völlig anderes als du ursprünglich sagtest.

                Hier, Redakteur – eine Box für Events, die hat die Felder Startzeit/Endzeit, Eventname und Kurzbeschreibung und sieht deshalb so und so aus

                ↑ Das ist Design.

                Hier, Redakteur – eine Box für irgendwas, die hat die Felder Zeile klein, Zeile groß und Text eingerückt und sieht einfach mal so so und so aus

                ↑ Das ist kein Design.

                wenn diese Box missbräuchlich für etwas anderes genutzt wird, ist der Redakteur selbst dafür verantwortlich.

                Das ist außerhalb deiner Macht.

                Du solltest als Entwickler dem Redakteur aber die Werkzeuge zur Verfügung stellen, die er braucht, damit er nicht andere Werkzeuge missbräuchlich verwendet. Also doch noch ein bisschen innerhalb deiner Macht.

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              2. Hallo Bernd,

                Das heißt, du willst dem Redakteur eine durchgestylte Box zur Verfügung stellen, ohne zu wissen (bzw. dem Redakteur vorzugeben), was überhaupt für Inhalte da rein sollen? Mit Design hat das nichts zu tun.

                klar hat dieses etwas mit Design zu tun.

                Nein: „Design [heißt] nicht, wie etwas aussieht, sondern wie etwas funktioniert.“

                Eine Box heißt z.B. Events, dann ist klar wie die Box ausschaut, wenn diese Box missbräuchlich für etwas anderes genutzt wird, ist der Redakteur selbst dafür verantwortlich.

                Was ist denn dann eigentlich das Problem, hier die entsprechende Semantik vorzugeben?

                Viele Grüße
                Robert

                1. Hallo Robert,

                  für mich ist Design wie es ausschaut, nicht mehr und nicht weniger. Wenn du anderer Meinung bist bitte. Für mich zählt allein das Design und wie es dem User gefällt. Ein User entscheidet innerhalb von Sekunden ob ihm etwas gefällt oder nicht. Wenn es ihm nicht gefällt verlässt er die Seite sofort, egal wie gut dein Angebot ist.

                  Bis bald!
                  Meowsalot (Bernd)

                  1. @@Meowsalot

                    für mich ist Design wie es ausschaut, nicht mehr und nicht weniger.

                    Ach so. Hauptsache, die Karosserie sieht schick aus. Ob die Türen so blöd geformt sind, dass man beim Einsteigen kaum durchpasst, ist dir egal. Ob unter der Haube ein 30-kW-Motor oder ein 100-kW-Motor seinen Dienst tut, ist dir auch egal. Ob da Scheibenbremsen eingbaut sind oder Trommelbremsen, die das 100-kW-Gefährt kaum zum Stehen kriegen, ist dir auch egal. Hauptsache, die Karosserie sieht schick aus, nicht mehr und nicht weniger.

                    Wenn du anderer Meinung bist bitte.

                    Ich denke, du bist auch anderer Meinung. Du weißt es nur noch nicht.

                    LLAP 🖖

                    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  2. Moin Bernd,

                    für mich ist Design wie es ausschaut, nicht mehr und nicht weniger.

                    Wenn es eine einzige Wahrheit gibt, dann die eigene.

                    Wenn du anderer Meinung bist bitte.

                    Es ist nicht meine Meinung, sondern common sense im Design.

                    Für mich zählt allein das Design und wie es dem User gefällt. Ein User entscheidet innerhalb von Sekunden ob ihm etwas gefällt oder nicht. Wenn es ihm nicht gefällt verlässt er die Seite sofort, egal wie gut dein Angebot ist.

                    Diesen Sätzen kann man uneingeschränkt zustimmen: Wenn die Seite nicht gut aussieht und nicht funktioniert, verlässt er die Seite direkt wieder.

                    Viele Grüße
                    Robert

                  3. Hej Meowsalot,

                    für mich ist Design wie es ausschaut, nicht mehr und nicht weniger.

                    Design ist aber definiert und dabei hat sich keiner nach Deiner Meinung erkundigt. 😉

                    Und willst du uns wirklich sagen, dass facebook, Google, amamzon deswegen so erfolgreich sind, weil ihre Webseiten von anfang an hübscher waren als die der Konkurrenz?

                    Oder ist amazon vielleicht besser bedienbar, hat facebook vielleicht technische design-entscheidungen getroffen, die zu mehr bestellungen führten, als bei den Konkurrenten (zusammen mit anderen Entscheidungen).

                    Hör dir mal einen Vortrag von Mike Monteiro an. Ich bin mir sicher, das weitet Dein Verständnis von Design.

                    Marc

              3. hallo

                klar hat dieses etwas mit Design zu tun. Eine Box heißt z.B. Events, dann ist klar wie die Box ausschaut, wenn diese Box missbräuchlich für etwas anderes genutzt wird, ist der Redakteur selbst dafür verantwortlich.

                Ich habe eine Idee…

                Man kann ein Template auch mit mehr Elementen ausstatten, als am Ende gebraucht werden.

                Im Endergebnis wendet man dann entweder hidden an oder die CSS-Pseudo-Klassen :empty oder :blank {display:none}

                Der Browser hat dann einfach etwas mehr Code im DOM, der aber für niemanden angezeigt wird.

                Du kannst also verschiedene Varianten bereitstellen. Ein Editor wird bewusster mit den Möglichkeiten umgehen.

                -- https://beat-stoecklin.ch/pub/index.html
                1. Hej beatovich,

                  klar hat dieses etwas mit Design zu tun. Eine Box heißt z.B. Events, dann ist klar wie die Box ausschaut, wenn diese Box missbräuchlich für etwas anderes genutzt wird, ist der Redakteur selbst dafür verantwortlich.

                  Ich habe eine Idee…

                  Man kann ein Template auch mit mehr Elementen ausstatten, als am Ende gebraucht werden.

                  Im Endergebnis wendet man dann entweder hidden an oder die CSS-Pseudo-Klassen :empty oder :blank {display:none}

                  Warum überhaupt leere Elemente ausgeben - kann man sich doch schon serverseitig drum kümmern…

                  Marc

      2. @@Meowsalot

        naja, ich habe nicht gesagt dass diese Bereich für Mobile optimiert ist

        Die Grundfunktionaltität ist eine Darstellung auf kleinem Bildschirm. Mehr Platz ist progressive enhancement.

        oder siehst du im Code irgendwelche Media Queries?

        Responsive design braucht nicht unbedingt media queries. Das mag zu Zeiten so gewesen sein, als Ethan Marcotte die Mutter aller Artikel dazu geschrieben hat; heute stehen u.a. mit calc() und Grid und Flexbox ganz andere Werkzeuge zur Verfügung.

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          aber ohne Media Queries kannst du doch keine Schrift verkleinern/vergrößern und irgendwelche Abstände entfernen?

          Bis bald!
          Meowsalot (Bernd)

          1. @@Meowsalot

            aber ohne Media Queries kannst du doch keine Schrift verkleinern/vergrößern und irgendwelche Abstände entfernen?

            Natürlich kann ich das.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              aha!

              Bis bald!
              Meowsalot (Bernd)

          2. Hej Meowsalot,

            aber ohne Media Queries kannst du doch keine Schrift verkleinern/vergrößern

            calc() rechnet auch mit vm, vh, vmin, vmax, %, em, rem…

            und irgendwelche Abstände entfernen?

            Er hat nicht gesagt jehova gesagt!

            Ich kenne, er hat nicht gesagt, dass man alles ohne Media-queries machen kann, er hat nur gesagt, dass dank der vielen neuen Möglichkeiten Media-queries nicht unbedingt nötig sind, wenn man eine responsive Website erstellen will. Kommt auf das Konzept und das Layout an, ob und wie viele Regeln angepasst werden müssen.

            Marc

            1. @@marctrix

              calc() rechnet auch mit vm, vh, vmin, vmax, %, em, rem…

              Sag ich doch – und das seit 2013.

              Er hat nicht gesagt jehova gesagt!

              Das war noch vor 2013.

              Ich kenne, er hat nicht gesagt, dass man alles ohne Media-queries machen kann

              Deine Grammatik holpert aber ganz schön heute Abend. Gibste mir einen Schluck ab?

              er hat nur gesagt, dass dank der vielen neuen Möglichkeiten Media-queries nicht unbedingt nötig sind, wenn man eine responsive Website erstellen will.

              Wonach war doch gleich gefragt? Abstände hin und weg

              Kommt auf das Konzept und das Layout an, ob und wie viele Regeln angepasst werden müssen.

              Mitunter keine einzige.

              Und sorry, die Bilder liegen ebenso lokal auf meinem Rechner wie die Back-to-the-Future-Schrift.

              LLAP 🖖

              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hej Gunnar,

                @@marctrix

                calc() rechnet auch mit vm, vh, vmin, vmax, %, em, rem…

                Sag ich doch – und das seit 2013.

                Wie soll man das denn finden. Aber ja. Das geht schon seit Jahren und ich habe keinen Zweifel, dass dir das bekannt ist. 😂

                Er hat nicht gesagt jehova gesagt!

                Das war noch vor 2013.

                Bisschen.

                Ich kenne, er hat nicht gesagt, dass man alles ohne Media-queries machen kann

                Deine Grammatik holpert aber ganz schön heute Abend. Gibste mir einen Schluck ab?

                War nur müde…

                er hat nur gesagt, dass dank der vielen neuen Möglichkeiten Media-queries nicht unbedingt nötig sind, wenn man eine responsive Website erstellen will.

                Wonach war doch gleich gefragt? Abstände hin und weg

                Netter Versuch. Die werden nur größer oder kleiner, verschwinden aber nicht. 😉

                Kommt auf das Konzept und das Layout an, ob und wie viele Regeln angepasst werden müssen.

                Mitunter keine einzige.

                Darum das „ob“ - sind nur zwei Buchstaben, ich weiß. 😂

                Und sorry, die Bilder liegen ebenso lokal auf meinem Rechner wie die −Back-to-the-Future*{:@en}-Schrift.

                Macht nichts, du hast ja aussagekräftige Text-Alternative.

                Marc

                1. @@marctrix

                  Wonach war doch gleich gefragt? Abstände hin und weg

                  Netter Versuch. Die werden nur größer oder kleiner, verschwinden aber nicht. 😉

                  Sollen sie auc Netter Versuch.

                  Das dürfte an nav li:not(:first-child) { margin-left: 0.5em; } liegen, was ich ganz bewusst eingebaut habe.

                  Und sorry, die Bilder liegen ebenso lokal auf meinem Rechner wie die Back-to-the-Future-Schrift.

                  Macht nichts,

                  Naja, ohne den Font sieht’s schon seltsam aus: erste Zeile in Großbuchstaben (im Font sind diese nach links geneigt); zweite Zeile in Kleinbuchstaben (im Font sind das Großbuchstaben nach rechts geneigt – da wusste wohl jemand nicht, wie man das richtig macht). Und das falsche Ü …

                  So sieht’s bei mir aus:

                  Der Pen war für einen Vortrag von mir gedacht – musste also nur auf meinem Computer gut aussehen.

                  Ich könnte das natürlich in 8 Textgrafiken zerschneiden. Oder in Illustrator SVGs draus machen … Oder das so lassen wie’s ist, weil’s eh kaum jemanden interessiert.

                   

                  du hast ja aussagekräftige Text-Alternative.

                  Du meinst alt=""? 😆

                  LLAP 🖖

                  -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. Hej Gunnar,

                    @@marctrix

                    du hast ja aussagekräftige Text-Alternative.

                    Du meinst alt=""? 😆

                    Ja genau, wobei ich absichtlich Text-Alternativen geschrieben habe.

                    alt="" ist ja zulässig auf barrierefreien Seiten, wenn die Bilder anders genügend beschrieben sind.

                    Nicht für dich, aber für Mitlesende:

                    Wenn ein Redakteur ein Bild in einen Text einfügt möchte ich im normalen Fließtext eine Wendung sehen wie „auf dem Bild sieht man, dass

                    Grund

                    Selbst Menschen ohne Behinderung ziehen aufgrund anderer sozialer, kultureller oder Bildungs-Umfelder mitunter unterschiedliche Schlüsse aus einer Abbildung, setzen andere Schwerpunkte usw.

                    Wenn ein Bild im html steht, muss es eine inhaltliche Relevanz besitzen und die Aussage, auf die es dem Redakteur ankommt, muss er unbedingt im Text noch einmal hervorheben. Sonst kann er sich im weiteren Verlauf seiner Argumentation nicht darauf verlassen, dass diese Aussage auch beim Rezipienten angekommen ist!

                    Wenn das Bild auch noch eine Beschriftung hat (z.B. figcaption) ist ein Befüllen des alt-Attributes oft gar nicht mehr nötig.

                    Man muss Barrierefreiheit nicht komplizierter machen als sie ist.

                    Mit Wiederholungen von bereits gesagtem kann man besonders wichtige Dinge einhämmern. Sie können aber auch ermüden.

                    Marc

  3. Hej Meowsalot,

    Meine Idee

    <section id="about"> <h3>Add Your Heading Text Here</h3> <h2>Vacation</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> </section>

    Wieso section? Wenn das ein Produkt ist, das vollständig beschrieben wird, hast du einen abgeschlossenen text, der für sich genommen Sinn macht. Das ist in html immer ein article.

    Wozu gehört die h3? Für Nutzer von vorlese-software zu der vorigen h2. Das ist sicher nicht beabsichtigt?

    Setze die umgekehrt ins html, mit flexbox oder Grid kannst du die Eigenschaft Order nutzen, um die optisch anders anzuordnen. Im accessibility tree bleiben die aber in der korrekten Reihenfolge. Daher nur umsortieren, wenn die nicht beide Links enthalten, sonst folgt die tab-Reihenfolge nicht der visuellen Darstellung!

    Marc

    Folgende Nachrichten verweisen auf diesen Beitrag:

  4. Hallo Meowsalot,

    https://codepen.io/anon/pen/YOpKOq

    Bis bald!
    Meowsalot (Bernd)

    1. Hej Meowsalot,

      https://codepen.io/anon/pen/YOpKOq

      Der text über der h2 gehört immer noch zu der vorigen Überschrift. Für Google, für blinde, für alle!

      Setz den doch dahinter ins Markup.

      Und dann bilden die h2 und diese Zusammenfassung/Appetizer/Kopfzeile sicher zusammen einen Header für eine section oder einen article. Wenn du allgemeiner bleiben willst, nimm halt die section.

      Der text ist auf großen Bildschirmen zu breit, mehr als 60 Zeichen sollten nicht in eine Zeile.

      Marc

    2. Hej Meowsalot,

      https://codepen.io/anon/pen/YOpKOq

      Ich finde den text auf dem Smartphone zu klein…

      Marc

      1. Hallo marctrix,

        die Schrift ist 16px völlig ausreichen auch für ein Handy.

        Bis bald!
        Meowsalot (Bernd)

        1. Moin Bernd,

          die Schrift ist 16px völlig ausreichen auch für ein Handy.

          bei meinem Handy schnurrt das u.u. auf 10px zusammen und von meinem neuen Notebook brauchen wir gar nicht erst sprechen (2560 px Breite bei einer Diagonale von 13,x Zoll).

          Viele Grüße
          Robert

  5. Hallo,

    https://codepen.io/anon/pen/YOpKOq
    Und damit ist der Block nicht mehr universal einsetzbar. Jetzt muss der User für jeden Scheiß ein eigenen Block auswählen was nicht im Sinne von Benutzerfreundlichkeit ist. Aber Hauptsache ihr habt was ihr wolltet. Was dem User zumutbar ist, ist euch egal.

    Meine Quellen waren:

    <time>
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

    order
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

    Bis bald!
    Meowsalot (Bernd)

    1. Hej Meowsalot,

      Nein, gar nicht zufrieden.

      1. Dein html ist kaum besser geworden. Ein span benötigst du, wenn die ubterzeile Teil der Überschrift ist, um diesen Teil anders zu formatieren.
      2. Wenn der text in einem neuen Absatz steht, ist es ein p.
      3. Dieses p und die Überschrift ergeben zusammen einen header - das solltest du auch so auszeichnen.
      4. wenn es eine Überschrift hat, ist es ein sinnabschnitt, also entweder ein article oder wenigstens eine section (hängt von dem Rahmen ab, in dem deine Boxen eingesetzt werden sollen: sind das eher einschübe und Randnotizen in einem längeren Artikel oder nicht. Im letzteren Fall könnte Artikel sinnvoll sein. Du kannst so etwas aber im User-Interface abfragen (Radio-Buttons oder so).

      https://codepen.io/anon/pen/YOpKOq
      Und damit ist der Block nicht mehr universal einsetzbar. Jetzt muss der User für jeden Scheiß ein eigenen Block auswählen was nicht im Sinne von Benutzerfreundlichkeit ist.

      Wieso? Gib dem Nutzer doch die Möglichkeit seine Texte auszuzeichnen. Geht das mit Gutenberg nicht (habe das unbedienbare Teil nur mal für einen oder Tag ausprobiert und dann wieder den alten genommen).

      Aber Hauptsache ihr habt was ihr wolltet. Was dem User zumutbar ist, ist euch egal.

      Marc

      1. Hallo marctrix,

        lassen wir auch hier die Diskussion die führt zu rein gar nichts.

        Bis bald!
        Meowsalot (Bernd)

        1. Hej Meowsalot,

          lassen wir auch hier die Diskussion die führt zu rein gar nichts.

          Wenn du meinst, dass du von mir nichts lernen kannst, dann schlage meine Vorschläge in den Wind. Da verhältst du sich dann wie einer der nutzer, die ein gut gemachtes Template mit vorbildlicher Dokumentation zu einem Zweck missbrauchen, für den das Template nicht vorgesehen war (es gibt keine universellen Templates, die immer an jede beliebige Stelle in ein HTML-Dokument passen). Muss ich mit leben.

          Aber ich habe versucht, Dir die üblichen Wege aufzuzeigen, frei von eigenen Vorlieben und mich bemüht, Dich in Deinem Anliegen bestmöglich zu unterstützen. Und auch wenn dir meine Antworten nicht gefallen, so habe ich mir doch die Zeit genommen, diese zu schreiben.

          Wäre es da nicht das mindeste, dass du auch meine Fragen beantwortest? Ich habe in keiner meiner ca 30 WP-Installationen noch einen Gutenberg installiert und es wäre sehr nett und anständig gewesen, wenn du meine diesbezüglichen Fragen beantwortet hättest.

          Da das offenbar zu viel erwartet ist, werde ich den Gutenberg zu Testzwecken noch mal installieren. - Danke dafür!!!

          Marc

          1. Hallo marctrix,

            Da das offenbar zu viel erwartet ist, werde ich den Gutenberg zu Testzwecken noch mal installieren. - Danke dafür!!!

            https://de.wordpress.org/gutenberg/ ist genau das gleiche wie wenn du diesen installieren würdest. Ich verstehe gar nicht warum du dich gegen diesen mega geilen Editor so sträubst? Er wird kommen, dieses steht zu 100% fest.

            Bis bald!
            Meowsalot (Bernd)

            1. Hej Meowsalot,

              Da das offenbar zu viel erwartet ist, werde ich den Gutenberg zu Testzwecken noch mal installieren. - Danke dafür!!!

              https://de.wordpress.org/gutenberg/ ist genau das gleiche wie wenn du diesen installieren würdest. Ich verstehe gar nicht warum du dich gegen diesen mega geilen Editor so sträubst? Er wird kommen, dieses steht zu 100% fest.

              Weil der noch cniht rund läuft. Das sehen übrigens viele so. Ich gebe ihm noch etwas Zeit.

              Im Moment gibt es noch sehr viel Kritik an Gutenberg, selbst auf Fanboi-Pages.

              Natürlich wird der Editor kommen, aber es gibt Befürchtungen, dass er den vorhandenen nicht komplett ablösen wird, sondern dass eine beträchtliche Anzahl von Nutzern auf dem alten bleiben wird. Das muss dann bei allen PlugIn-Entwicklungen berücksichtigt werden. Keine rosigen aussichten.

              Man darf nicht vergessen, dass recht viele Blinde auf Wordpress setzen. Für die ist der Gutenberg-Editor vollkommen unbenutzbar. Zudem werden die eine umfangreiche Dokumentation lesen müssen.

              Mit dem Classic-Editor und den dafür vorhandenen PlugIns kann man eh schon extrem viel umsetzen, nicht zu reden von Page Buildern die einem auch heute schon mehr Freiheit beim Gestalten bieten als Gutenberg. In kostenpflichtigen themes wie Avada sind die bereits inklusive.

              Insofern verstehe ich nicht, was du mit "mega geil" meinst. Vermutlich dass er ansatzweise Page Builder-Fähigkeiten bietet?!?

              Angesichts der Tatsache, dass bereits heute andere Editoren verwendet werden können, wird das vielleicht auch erst bei manchem den Blick auf weitere Möglichkeiten öffnen und zu einer weit größeren Zersplitterung als nur "Classic" oder "Gutenberg" führen.

              Übrigens bin ich ein Gegener davon, Redakteuren so viele und weitreichende Eingriffe in die Gestaltung von Webseiten zu geben. Die verstehen oft nicht einmal das Konzept hinter einem Design, geschweige denn, dass sie in der Lage oder gewillt wären, das konsistent zu erweitern. Anwesende ausgenommen und Ausnahmen bestätigen ja die Regel. 😉

              Marc

              1. Hallo marctrix,

                Insofern verstehe ich nicht, was du mit "mega geil" meinst. Vermutlich dass er ansatzweise Page Builder-Fähigkeiten bietet?!?

                ich finde durch den neuen Editor hat man noch mehr Möglichkeiten seinen Beitrag oder seine Seite zu bearbeiten was früher nicht so einfach möglich war wie z.B. ein Bild zwischen einem Absatz über die ganze Bildschirmbreite zu bringen.

                Angesichts der Tatsache, dass bereits heute andere Editoren verwendet werden können, wird das vielleicht auch erst bei manchem den Blick auf weitere Möglichkeiten öffnen und zu einer weit größeren Zersplitterung als nur "Classic" oder "Gutenberg" führen.

                Ich persönlich liebe den Elementor Editor. Allerdings finde ich schade dass im Quelltext überall Elementor steht. Ich mache ungern Werbung für andere wenn ich für ein Produkt bezahle. Elementor ist der beste Page Builder den es derzeit gibt in meinen Augen. Auch was Updates angeht, kommen fast Wöchentlich Neuerungen und mit über 1.000.000 aktiven Installationen zählt er zu den ganz großen.

                Übrigens bin ich ein Gegener davon, Redakteuren so viele und weitreichende Eingriffe in die Gestaltung von Webseiten zu geben. Die verstehen oft nicht einmal das Konzept hinter einem Design, geschweige denn, dass sie in der Lage oder gewillt wären, das konsistent zu erweitern. Anwesende ausgenommen und Ausnahmen bestätigen ja die Regel. 😉

                Deshalb auch die fertigen Blöcke die ich versuche zu erstellen ;) Ein Redakteur klickt auf Teaser, kann seine Daten eintragen und klickt auf abschicken. Schon wird ein Design eingefügt welches zum Design passt.

                Bis bald!
                Meowsalot (Bernd)

                1. Hej Meowsalot,

                  Insofern verstehe ich nicht, was du mit "mega geil" meinst. Vermutlich dass er ansatzweise Page Builder-Fähigkeiten bietet?!?

                  ich finde durch den neuen Editor hat man noch mehr Möglichkeiten seinen Beitrag oder seine Seite zu bearbeiten

                  Wenn du mit „man“ weiße, sehende Männer unter 30 meinst (extra überspitzt), dann hast du sicher recht. 😉

                  Angesichts der Tatsache, dass bereits heute andere Editoren verwendet werden können, wird das vielleicht auch erst bei manchem den Blick auf weitere Möglichkeiten öffnen und zu einer weit größeren Zersplitterung als nur "Classic" oder "Gutenberg" führen.

                  Ich persönlich liebe den Elementor Editor. Allerdings finde ich schade dass im Quelltext überall Elementor steht. Ich mache ungern Werbung für andere wenn ich für ein Produkt bezahle. Elementor ist der beste Page Builder den es derzeit gibt in meinen Augen. Auch was Updates angeht, kommen fast Wöchentlich Neuerungen und mit über 1.000.000 aktiven Installationen zählt er zu den ganz großen.

                  Wie viele nutzen denn CKEdit und TinyMCE (derzeitger Standard-Editor)? — Wenn etwas gut ist, weil es viel verwendet wird, sollte klar sein, wer der beste ist. Muss man nur auf die Anzahl der Installationen schauen.

                  Daher ist Windows auch das beste Betriebssystem für Desktop-Rechner und Android das beste für mobile Geräte. Sicherheit eingeschlossen. Logisch. 😉

                  Nicht gleich böse werden. Ich scherze nur und nicht über dich. Ich will nur sagen, dass häufige Vewrwendung ein Indiz für Qualität sein kann, aber eben nicht.

                  Nicht, dass Wiondwos 10 ein schlechtes OS wäre…

                  Übrigens bin ich ein Gegener davon, Redakteuren so viele und weitreichende Eingriffe in die Gestaltung von Webseiten zu geben. Die verstehen oft nicht einmal das Konzept hinter einem Design, geschweige denn, dass sie in der Lage oder gewillt wären, das konsistent zu erweitern. Anwesende ausgenommen und Ausnahmen bestätigen ja die Regel. 😉

                  Deshalb auch die fertigen Blöcke die ich versuche zu erstellen ;) Ein Redakteur klickt auf Teaser, kann seine Daten eintragen und klickt auf abschicken. Schon wird ein Design eingefügt welches zum Design passt.

                  OK. Da der Block einfach ist, ist auch dei Bedienung einfach. Aber Dein Beispiel ist noch nicht vollständig. Das HTML sollte IMHO so (oder so ähnlich) aussehen:

                  <section class="beat-teaser"> <header> <h2><a href="#">Pre-Sale Event</a></h2> <p class="reason-to-read"><time datetime="2018-09-06">6. September</time> von <time>18:00</time> bis <time>21:00</time></p> </header> <p>Wir laden euch herzlich zu einem exklusiven Pre-Shopping Event ein. Exklusiv wird die erste Taschen Kollektion des Newcomer Labels Craft Hunter präsentiert.</p><p>In Zusammenarbeit mit kolumbianischen Craftsman & Craftswoman entstehen aussergewöhnliche farbenfrohe Taschen in traditioneller Handarbeit.</p> <p><a href="#">Zum artikel Pre-sale-event</a></p> </section>

                  Erläuterung

                  beat-teaser

                  Gibt dir einen Bereich (Namensraum wenn du so willst), den so hoffentlich niemand anders für WP-Themes nutzt.

                  verlinkte Überschrift

                  Als Nutzer erwartet man einfach, dass die sich anklicken lässt. Ebenso wie mögliche Bilder.

                  Wäre doof für Blinde, wenn Sie den Anfang des Artikels wiederfinden müssten, um zum vollständigen text zu gelangen.

                  Fragen

                  Das führt mich zu folgenden Fragen:

                  Wem reicht die Möglichkeiten?

                  Du bietest an eine Überschrift anzugeben, einen Aufmerksamkeitshascher und einen einzigen(?) Absatz für Text.

                  Sonst kann man nichts?

                  Der Nutzer hat es dadurch einfach. Er muss nur zwei Dinge tun: diese Felder ausfüllen (auch eines für den Link-Text und den Link selber) und die korrekte Überschriftenebene angeben (aber wie soll er die rausfinden?

                  Was mich wieder zu der Frage von Jen Simmons führt: welches Problem löst du?

                  Diese Frage muss man sich immer stellen, bevor man die erste Zeile Code schreibt. ebenfalls vor der ersten Zeile Code kommen Überlegungen zum Lösungskonzept: was brauche ich an Bedienelementen für den Redakteur und wie kommt er an die Informationen, die er mir geben muss (wie z.B. die anzugebende Überschrift). Oder lässt sich so etwas automatisch ermitteln (parsen nach der letzten Überschrift im DOM).

                  Und wenn du das fertig hast, überlege noch mal, wie war das Problem, das du lösen wolltest und ist Deine Vorstellung von der Box dazu geeignet, das Problem zu lösen.

                  Wie gesagt: bis jetzt haben wir noch keine Zeile Code. Warum? Weil es u.U. keine Lösung für das Problem gibt oder zumindest wir keine gefunden haben. Z.B. weil universell verwendbar (Teil der Aufgabenstellung) nicht umsetzbar ist.

                  Wenn wir theoretisch wissen, wie wir das Problem lösen können, kann man versuchen, das in die Praxis umzusetzen. Auch dazu ein Konzept erstellen, nicht einfach loshämmern auf der Tastatur:

                  HTML-Aufbau (ergibt sich aus dem Konzept praktisch zwangsläufig), CSS-Aufbau (ergibt sich wiederum daraus meist zwangsläufig).

                  Sonst bist du irgendwann miteendrin und musst wieder ganz von vorne anfangen, weil du in die gebackenen Muffins die Blaubeeren nicht reinkriegst.

                  Ein durchdachtes Konzept erspart unnötige Arbeit. Ich kenne den Gutenberg wie gesgat nciht gut genug um zu wissen, ob sich dem Nutzer überhaupt eine Auswahl für Überschriftenebenen anbieten lässt und bin kein Programmierer, weshalb ich nicht weiß, ob sich die letzte Überschriftenebene im DOM finden lässt.

                  Ich würde an diesem Punkt einen Programmierer ins Team holen, der mir diese Fragen beantworten kann und wenn er die positiv beantwortet ihn mit der Umsetzung der von mir vorgegebenen HTML-Struktur beauftragen.

                  Erst wenn ich alles zusammen habe (Konzept, Team (Designerin nicht vergessen)) schreibe ich den Code.

                  Es sei denn ich spinne mal rum und versuche ein zugängliches JavaScript-freies-armes-Menü zu erstellen. Das ist bis jetzt nciht fertig und wer weiß, ob es irgendwann wie gewünscht funktioniert.

                  Aber das ist Freizeit und Experiment und zum lernen und austesten von Möglichkeiten, also auch Weiterbildung mit Spaß. Man sieht daran auch schön, dass es nicht reicht, eine Idee zu haben und einfach drauf los zu hämmern. Das habe ich nämlich getan und es ist noch immer zu keinem glücklichen Ende gekommen.

                  Insofern liegen meinen Empfehlungen ganz konkrete Erfahrungen zugrunde. Lern ruhig aus meinen Fehlern. Dafür mache ich sie ja öffentlich. 😉

                  Übrigens: könnte das folgende Sinn machen?

                  <details class="beat-teaser"> <summary> <h2>Pre-Sale Event <span class="reason-to-read"><time datetime="2018-09-06">6. September</time> von <time>18:00</time> bis <time>21:00</time> </span> </h2> </summary> <p>Wir laden euch herzlich zu einem exklusiven Pre-Shopping Event ein. Exklusiv wird die erste Taschen Kollektion des Newcomer Labels Craft Hunter präsentiert.</p><p>In Zusammenarbeit mit kolumbianischen Craftsman & Craftswoman entstehen aussergewöhnliche farbenfrohe Taschen in traditioneller Handarbeit.</p> <p><a href="#">Zum artikel Pre-sale-event</a></p> </details>

                  Weiß jetzt zwar, dass Überschriften ohne was anderes im summary sein dürfen, aber nicht, ob die Überschrift Kinder haben darf. Hmm - die Spec sagt nichts über Kindeskinder, müsste also gehen. Wichtig ist, dass die keine interaktiven Elemente enthalten dürfen, daher hier auch kein Link in der Überschrift.

                  Auf einem großen Bildschirm könnten die Boxen auch standardmäßig alle offen sein!

                  Marc

                  1. @@marctrix

                    Wenn du mit „man“ weiße, sehende Männer unter 30 meinst (extra überspitzt), dann hast du sicher recht. 😉

                    Du hast „hetero“ und „cis“ vergessen.

                    Nicht, dass Wiondwos 10 ein schlechtes OS wäre…

                    Deinen Rausch noch nicht ausgeschlafen? 😉

                    Und ja, ich bin schon die ganze Zeit am Überlegen, mir Windows aufs MacBook zu packen.

                    die Spec sagt nichts über Kindeskinder

                    Sagt „Spec“ und verlinkt zur WTFWG.

                    Die Spec geht mir am A… vorbei. Sollte sie dir das nicht auch, wenn du auf a11y Wert legst?

                    LLAP 🖖

                    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Hej Gunnar,

                      @@marctrix

                      Wenn du mit „man“ weiße, sehende Männer unter 30 meinst (extra überspitzt), dann hast du sicher recht. 😉

                      Du hast „hetero“ und „cis“ vergessen.

                      Was ist denn cis?

                      Nicht, dass Wiondwos 10 ein schlechtes OS wäre…

                      Deinen Rausch noch nicht ausgeschlafen? 😉

                      OSX ist nur besser 😉

                      Nein quatsch. Bitte NICHT drauf einsteigen! Jeder mag mit seinem glücklich werden und hat sicher gute Gründe für seine Entscheidung!

                      Und ja, ich bin schon die ganze Zeit am Überlegen, mir Windows aufs MacBook zu packen.

                      Ich bin mit Parallels sehr zufrieden für den gelegentlichen Gebrauch…

                      die Spec sagt nichts über Kindeskinder

                      Sagt „Spec“ und verlinkt zur WTFWG.

                      Ach und ich dachte schon, die hat endlich ein neues Design 😂

                      Die Spec geht mir am A… vorbei. Sollte sie dir das nicht auch, wenn du auf a11y Wert legst?

                      Wenn man die Regeln kennt, darf man sie auch brechen. Man muss nur wissen was man tut und warum man es tut. Die Reihenfolge ist mir wichtig.

                      Marc

                      1. Hallo marctrix,

                        Was ist denn cis?

                        Quelle: https://de.wikipedia.org/wiki/Cisgender

                        Cisgender (lateinisch cis- ‚diesseits' und englisch gender ‚Geschlecht'), teilweise auch Zisgender bezeichnet Personen, deren Geschlechtsidentität mit dem bei der Geburt zugewiesenen Geschlecht übereinstimmt. ... Das Gegenteil wird als Transgender bezeichnet (lateinisch trans- ‚jenseitig', ‚darüber hinaus').

                        Bis bald!
                        Meowsalot (Bernd)

          2. Hallo marctrix,

            also nochmals auf ein neues. Ich habe es jetzt so umgesetzt wie ich es verstanden habe: https://codepen.io/anon/pen/YOpKOq

            Jetzt habe ich mit dem order: ein Problem. Ich bekomme die dachzeile nicht mehr nach oben verschoben.

            Bis bald!
            Meowsalot (Bernd)

            1. Hej Meowsalot,

              also nochmals auf ein neues. Ich habe es jetzt so umgesetzt wie ich es verstanden habe: https://codepen.io/anon/pen/YOpKOq

              Das macht in meinen Augen Sinn!

              Jetzt habe ich mit dem order: ein Problem. Ich bekomme die dachzeile nicht mehr nach oben verschoben.

              Weil Deinem header ein display: flex; oder display: grid; fehlt.

              Man darf die verschachteln. 😉

              Marc

              1. Hej @Meowsalot,

                also nochmals auf ein neues. Ich habe es jetzt so umgesetzt wie ich es verstanden habe: https://codepen.io/anon/pen/YOpKOq

                Das macht in meinen Augen Sinn!

                So, weiter geht es mit dem CSS. Bereit! 😀 Achtung, ich werde dich nciht loben, sondern nur Verbesserungsvoschläge machen!

                Los gehts:

                * { box-sizing: border-box; }

                Hast du nichts vergessen? - Was ist mit CSS-generiertem content wie ::before oder ::after? Möchtest du dafür den standardäßigen content-box-Wert?

                #teaser {

                Du weißt vermutlich, dass eine ID nur einmal pro Dokument vorkommen darf, aber ich habe dich so verstanden, als wolltest du dem Nutzer erlauben beliebig viele Instanzen Deiner Box pro Seite zu verwenden.

                Hier beißt sich also die Umsetzung mit Deinem Konzept.

                display:flex; flex-flow:column; justify-content:center; max-width: 60.500em;

                Wie kommst du denn auf die Dezimalstellen? - ich kann mit geraden Zahlen, insbesondere solchen die sich durch zwei, drei oder vier teilen lassen übliche Anforderungen wie goldener Schnitt oder 50:50 - Layouts viel besser umsetzen, als mit Boxen die 60.555 breit sind (egal welche Einheit ich verwende).

                margin: 0 auto; background-color: #efefef;

                Hast du nciht weiße Schrift? - Vordergrund- und Hintergrundfarbe schreibe ich immer direjt untereinander, damit solche Fragen gar nciht erst aufkommen.

                padding: 4em 6em; min-height: 60vh;

                Wie kommst du auf diesen Wert für die mindest-Höhe?

                background: linear-gradient(rgba(30,30,30,0.75), rgba(30,30,30,0.75), rgba(30,30,30,0.75)),

                Nun eine dunkle Farbe, zu 75% deckend.

                url(https://images.unsplash.com/photo-1509635164051-5584296265cd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=14cdb08a207bcc4c4969409a1ce90898&auto=format&fit=crop&w=1052&q=80);

                Die letzte Farbe wird wiederum durch ein Bild überdeckt. Willst du dem Nutzer überlassen für ausreichend Kontrast zu sorgen? - Ich fürchte, das geht schief. Oder bietest du eine Auswahl an Bildern an, die du so ausgewählt hast, dass der Nutzer nichts falsch machen kann?

                background-repeat: no-repeat; background-size: cover; color: #fff; } #teaser .dachzeile { font-size: 1em; font-weight: bold; display: block; margin-bottom: 0.8em; margin-left: 0; order:1; }

                .dachzeile ist eine Präsentationsbezogene Bezeichnung. Finde eine semantische (z.B. .summary oder .why-to-read-me) was etwas über den Zweck des erwarteten Textes aussagt. Warum? Weil du den Template dann in einem breiteren Einsatzbereich verwenden kannst - auch nach eine Redesign, wenn der hier einzugebende Text an anderer Stelle (z.B. hiochkant am linken rand oder unter der Überschrift) ausgegeben werden soll.

                Im übrigens würde ich persönlich englische Bezeichnungen finden wollen.

                #teaser h2 { font-size: 5vw; /* passt auf mobiles*/ margin: -20px 0 0 0; text-transform: uppercase; order: 2; }

                Warum diese Reihenfolge? Ich schreibe mein CSS immer so, dass es dem DOM folgt.

                Dann findet man sich leichter zurecht.

                Die Eigenschaft order hat einen Standard-Wert. Um ein einzelnes Element (wie hier den aufmerksamkeitshascher) über die Überschrift zu bekommen, genügt es diesem einen Element einen Wert zuzuweisen, der geringer ist. Für die h2 und das p musst du dann ncihts mehr angeben.

                Weißt du was passiert, wenn du allen p denselben Wert für order gibst? - Richtig, genau das was passiert, wenn sie den Standard-Wert haben. Sie werden in der Reihenfolge angezeigt, wie sie im HTML vorkommen. Aber das ist wohl nur Glück gewesen. 😉

                Der Standard-Wert ist übrigens "0" und negative Werte sind erlaubt.

                #teaser p { margin-left: 13vw; /* passt auf mobiles */ margin-bottom:0; order: 3; } @media screen and (max-width: 750px) {

                Wie hier mehrfach erwähnt, machst du dir (und mobilen Geräten) das Leben leichter, wenn du dich an das bewährte Konzept "mobile first" hältst.

                #teaser { max-width: 60.500em; padding: 1.5em; min-height: 43vh; }

                Den krummen Wert mit der max-width hatten wir doch schon mal? − Don't repeat yourself. Du musst nicht in die media-query Dinge aufnehmen, die du schon geschrieben hast. Da 60.5em (was machen da die beiden Nullen hinter der 5) sind übrigens bei den 16px die du behauptest zu haben mehr als 960px - macht keinen Sinn in einer media-query für Bildschirme mit max 750px keinen Sinn. Wie kommst du auf die 43vh - sieht Dein Beispielbild zufällig gut dabei aus? Oder sorgst du mit einer Auswahl an Beispielbildern dafür, dass die in jedem Fall bei dieser Höhe gut aussehen?

                Unter Umständen solltest du mit background-position noch den anzuzeigenden Ausschnitt im Viewport halten.

                #teaser h2 { font-size: 7.5vw; /* passt auf mobiles*/ margin: -10px 0 0 0; text-transform: uppercase; } #teaser .dachzeile { font-size: 0.7em; } #teaser p { margin-left: 0px; font-size: 0.9em; } }

                Lies dir mal das durch, was ich oben geschrieben habe. Mir ist übrigens klar, dass das work in progress ist. Sicher hättest du die eine oder andere Sache noch von selbst geändert.

                Wichtig ist aber gleich von Anfang an sinnvoll vorzugehen was mobile first und progressive enhancement angeht. Sonst macht man sich das Leben nur unnötig selber schwer!

                Marc

        2. Moin Bernd,

          lassen wir auch hier die Diskussion die führt zu rein gar nichts.

          … weil die Kritik anscheinend zu konstruktiv ist.

          Viele Grüße
          Robert

    2. Moin Bernd,

      https://codepen.io/anon/pen/YOpKOq

      Müsste es nicht „Craftsmen und Craftswomen“ heißen? Das ist doch Plural.

      Und damit ist der Block nicht mehr universal einsetzbar.

      Wenn du einen universell einsetzbaren Layout-Block haben möchtest, warum nicht eigentlich SVG? 😉 Es heißt immer noch Hypertext Markup Language und nicht Hi There, Layout Language.

      Jetzt muss der User für jeden Scheiß ein eigenen Block auswählen was nicht im Sinne von Benutzerfreundlichkeit ist.

      Die Frage ist doch immer, welchen Nutzer du meinst. Und im Webkontext ist der Nutzer der Besucher der Seite – „der Kunde ist König“.

      Aber Hauptsache ihr habt was ihr wolltet.

      Es geht immer noch nicht um das, was wir wollen, sondern was Standard ist.

      Viele Grüße
      Robert

      1. hallo

        „der Kunde ist König“.

        Ab auf die Guillotine!

        -- https://beat-stoecklin.ch/pub/index.html
        1. @@beatovich

          „der Kunde ist König“.

          Ab auf die Guillotine!

          Hier sieht es gut aus:

          In der Zitatesammlung nicht:

          Hat der @marctrix da rumgepfuscht und etwas als Code ausgezeichnet, was gar keiner ist?

          Lässt sich das in der Zitatesammlung beheben?

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. @@Gunnar Bittersmann

            Hat der @marctrix da rumgepfuscht und etwas als Code ausgezeichnet, was gar keiner ist?

            Nö, hat er nicht – jedenfalls nicht bewusst, also doch. 😉

            Das > hatte gefehlt, und durch die Einrückung wurde die Phrase aus dem Vorposting von Markdown als Code interpretiert.

            Die Unsitte, irgendwelchen Text als Code auszuzeichnen, beobachte ich aber hin und wieder im Forum.

            Lässt sich das in der Zitatesammlung beheben?

            Ja, lässt sich. [x] done.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

            Folgende Nachrichten verweisen auf diesen Beitrag:

            1. Hej Gunnar,

              @@Gunnar Bittersmann

              Dann hat sich mein Parallel-Post auch erledigt…

              Marc

          2. Hej Gunnar,

            @@beatovich

            „der Kunde ist König“.

            Ab auf die Guillotine!

            Hier sieht es gut aus:

            Geschmakssache! 😉

            In der Zitatesammlung nicht:

            Hat der @marctrix da rumgepfuscht und etwas als Code ausgezeichnet, was gar keiner ist?

            Nö, ich habe nur Copy&Paste gemacht. Es ist aber meine Standardschrift. - Die viel hübscher ist als deine! 😝

            Lässt sich das in der Zitatesammlung beheben?

            Ja bitte. Das sollte für alle so aussehen, wie es mir gefällt! 😂

            Nein, wäre schon gut rauszufinden, warum da verschiedene Fobnts auftauchen…

            Marc

    3. @@Meowsalot

      https://codepen.io/anon/pen/YOpKOq
      Und damit ist der Block nicht mehr universal einsetzbar.

      Was ja nichts Schlechtes sein muss.

      Eine Kombizange mag unversell sein – aber weder zum Nägel rausziehen noch als Seitenschneider wirklich zu gebrauchen.

      Jetzt muss der User für jeden Scheiß ein eigenen Block auswählen was nicht im Sinne von Benutzerfreundlichkeit ist. Aber Hauptsache ihr habt was ihr wolltet. Was dem User zumutbar ist, ist euch egal.

      Eben nicht. User heißt für uns: Nutzer, der Leser der Webseiten.

      Für dich heißt das wohl: Redakteur. Der Redakteur sollte was erstellen, was dem Leser zumutbar ist.

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    4. @@Meowsalot

      <time>

      Ich würde da 2 time-Elemente verwenden, nicht 3. Jeweils eins für Start- und Endzeit:

      <time datetime="2018-09-06T18:00+02:00">6. September von 18:00</time> bis <time datetime="2018-09-06T21:00+02:00">21:00</time>

      Das kann man dann auch mit Schema.org semantisch auszeichnen:

      <article vocab="http://schema.org/" typeof="Event"> <header> <h2 property="name">Pre-Sale Event</h2> <p><time property="startDate" datetime="2018-09-06T18:00+02:00">6. September von 18:00</time> bis <time property="endDate" datetime="2018-09-06T21:00+02:00">21:00</time></p> </header> <div property="description"> <p>Wir laden euch herzlich zu einem exklusiven Pre-Shopping Event ein. Exklusiv wird die erste Taschen Kollektion des Newcomer Labels Craft Hunter präsentiert.</p> <p>In Zusammenarbeit mit kolumbianischen Craftsman & Craftswoman entstehen aussergewöhnliche farbenfrohe Taschen in traditioneller Handarbeit.</p> </div> </article>

      (Die Schreibfehler hab ich so gelassen.)

      Ein Browser(-Plugin) könnte dann anbieten, das Event auf einen Click in den persönlichen Kalender zu übernehmen.

      Marc wies schon aufs Video hinFolien zum Vortrag gibt’s auch.

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  6. Hej Meowsalot,

    gib uns doch bitte noch ein paar Infos zu dem, was du vorhast. Was ich verstanden habe:

    Du möchtest eine Komponente erzeugen, die aus Überschrift, Kurzem text zur Erlangung von Aufmerksamkeit und einem text besteht.

    Was sonst soll möglich sein, was von dem, was du anbieten möchtest, geht bereits mit den Bord Mitteln von WP und was nicht.

    Kurz gefragt: was ist das Problem, das lösen möchtest?

    Marc