Bernd: Moderne HTML Umsetzung

Hallo,

wie würdet ihr dieses Design (nur BLogartikel) umsetzten?

http://x7info.com/html/maroon-preview/maroon/blog.html#home

Die Größe der Bilder habe ich selber in der Hand, der Titel kann man ein mal zwei Zeilig sein. Das Datum un die Tags sind immer einzeilig. Der Text kann man ein wenig mehr, mal ein wenig weniger sein. Der Weiterlesen Link sollte immer ganz unten stehen, wenn möglich immer auf eine Höhe egal wie viel Text darüber geschrieben wurde.

Geht da etwas mit Flexbox? Responsive wäre natürlich nicht schlecht.

  1. Hallo

    Ich würde das mit Flexbox umsetzen. CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung. Responsive gehört heutzutage einfach dazu.

    Gruss

    MrMurphy

    1. Hi there,

      [...] CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung.

      Voll Deiner Meinung. Ich war auch immer der Ansicht, daß dieses CSS-Zeugs was Grindiges ist…

    2. Hallo,

      Ich würde das mit Flexbox umsetzen. CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung. Responsive gehört heutzutage einfach dazu.

      Flexbox werde ich auch nutzen, alles andere ist noch Zukunft und wird noch nicht von jedem Browser unterstützt. Ich muss mal schauen wie ich dieses mit Flexbox hinbekomme.

      1. @@Bernd

        Flexbox werde ich auch nutzen, alles andere ist noch Zukunft und wird noch nicht von jedem Browser unterstützt.

        Nein, das ist Unsinn. Aus mehreren Gründen:

        1. Grid ist nicht Zukunft, sondern Gegenwart. Es wird von allen aktuellen relevanten Browsern unterstützt.

        2. Mit Flexbox ist folgende Anforderung gar nicht umsetzbar: Die zur Verfügung stehende Breite soll vollständig genutzt werden und gleichmäßig in möglichst viele Spalten aufgeteilt werden, die mindestens x breit sein sollen. Die Items füllen die Spalten in Leserichtung (von links nach rechts; von oben nach unten).

          (Das wäre mit etlichem Aufwand umsetzbar für eine gewisse maximale Anzahl n von Spalten. Man müsste sich n − 1 Breakpoints berechenen und für diese jeweils Regeln angeben. Den Aufwand will man nicht betreiben, zumal er nicht zu einer allgemeinen Lösung führt.)

        3. Für alte IEs u.a. Browser, die Grid nicht unterstützen, wird ein Fallback vorgesehen. Das kann Flexbox sein. Es gibt aber keinen Grund, für fähige Browser nicht das bessere Grid-Layout zu implementieren.

        LLAP 🖖

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

    Geht da etwas mit Flexbox?

    Im Prinzip schon: flexible grid with media queries.

    Nur dass es mit Grid noch viel besser geht: flexible grid without media queries.

    Responsive wäre natürlich nicht schlecht.

    Ich würde responsive nicht als „wäre nicht schlecht“-Zusatz bezeichnen, sondern als unabdingbar fordern.

    LLAP 🖖

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

      Geht da etwas mit Flexbox?

      Im Prinzip schon: flexible grid with media queries.

      Oops, das hatte ich ja gar nicht mit Flexbox implementiert.

      Eagleson’s Law: “Any code of your own that you haven’t looked at for six or more months might as well have been written by someone else.”

      Das ginge aber mit dem Aufwand der vielen media queries auch mit Flexbox.

      Aber wie gesagt:

      Nur dass es mit Grid noch viel besser geht: flexible grid without media queries.

      LLAP 🖖

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

    wie würdet ihr dieses Design (nur BLogartikel) umsetzten?

    Wenn du das Menü meinst: so nicht!

    Es ist unbrauchbar, weil man bei Tastaturbedienung nicht erkennt, wo man sich befindet. Das sollte dir nicht neu sein.

    LLAP 🖖

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

      Wenn du das Menü meinst: so nicht!

      nein, es geht nur um die Artikel, nicht um die Navigation bzw. den Header.

  4. @@Bernd

    http://x7info.com/html/maroon-preview/maroon/blog.html#home

    Die Größe der Bilder habe ich selber in der Hand, der Titel kann man ein mal zwei Zeilig sein.

    Oder dreizeilig …

    Das Datum un die Tags sind immer einzeilig.

    Nein, garantiert nicht. Nicht garantiert. Das ist nichts, was du in der Hand hast. Finde dich damit ab, dass Datum und Kategorie auch untereinander stehen können.

    Der Text kann man ein wenig mehr, mal ein wenig weniger sein. Der Weiterlesen Link sollte immer ganz unten stehen, wenn möglich immer auf eine Höhe egal wie viel Text darüber geschrieben wurde.

    Geht da etwas mit Flexbox?

    Ja. Die Boxen sind Grid-Items (wie gesagt) und Flexboxen, damit die Weiterlesen-Links (ohne Deppenleerzeichen) auf einer Höhe stehen.

    LLAP 🖖

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

      Oder dreizeilig …

      nein, das habe ich selber in der Hand, da ich die Beiträge schreiben. Außer einer vergrößert die Seite, dann ja, aber das ist mir dann egal

      Nein, garantiert nicht. Nicht garantiert. Das ist nichts, was du in der Hand hast. Finde dich damit ab, dass Datum und Kategorie auch untereinander stehen können.

      Nein, damit finde ich mich nicht ab. Warum denn auch? Es gibt immer ein Datum, da weiß ich wie groß es ist. Und es gibt immer nur EINE Kategorie, auch dieses habe ich in der Hand.

      Ja. Die Boxen sind Grid-Items (wie gesagt) und Flexboxen, damit die Weiterlesen-Links (ohne Deppenleerzeichen) auf einer Höhe stehen.

      Was sind Deppenleerzeichen?

      1. @@Bernd

        Nein, damit finde ich mich nicht ab. Warum denn auch?

        Du musst dich damit abfinden. Weil es das Web ist.

        Es gibt immer ein Datum, da weiß ich wie groß es ist. Und es gibt immer nur EINE Kategorie, auch dieses habe ich in der Hand.

        Du hast nicht in der Hand, welche Schriftart beim Nutzer letztendlich verwendet wird, wie breit die läuft … also nicht, ob Datum und Kategorie wirklich immer nebeneinander passen.

        Was aber nicht schlimm ist. Bedenke einfach, wie es aussehen soll, wenn beides nicht nebeneinander passt, und erfreue dich daran, dass der Fall nicht allzu häufig eintreten wird. Aber ignoriere ihn nicht.

        Was sind Deppenleerzeichen?

        Was-sind-…-Fragen sind gute Fragen, um sie der Wikipedia zu stellen. „Wikipedia, was sind Deppenleerzeichen?“

        LLAP 🖖

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

    passt dieser Aufbau für ein Blog-Artikel?

    <article class="card">
    
    	<figure>
    		<img src="" alt="">
    	</figure>
    	<header>
    		<h2></h2>
    		<span class="date"></span>
    		<span class="categorie"></span>
    	</header>
    	<div class="content">
    		<p></p>
    	</div>
    	
    </article>	
    
    1. Hallo,

      hier ein Online-Beispiel: http://example-website.bplaced.net/ Warum passen sich meine Artikel nicht der Breite an?

      .blog {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
      }
      
      .card {
          flex: 0 1 33%
      }
      
      1. @@Bernd

        hier ein Online-Beispiel: http://example-website.bplaced.net/ Warum passen sich meine Artikel nicht der Breite an?

        Doch, das tun sie. Sie passen sich der Breite des Inhalts an, nämlich der Bilder.

        Du möchtest den Bildern 100% Breite geben.

        LLAP 🖖

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

          Du möchtest den Bildern 100% Breite geben.

          danke dir. Hat funktioniert: http://example-website.bplaced.net/

          Jetzt habe ich noch eine Frage zum Weiterlesen Link bzw. zum <footer> wie erreiche ich, dass dieser immer unten angezeigt wird?

          1. Mir ist noch etwas aufgefallen: http://example-website.bplaced.net/ Warum stehen die beiden in der zweiten Reihe nicht nebeneinander? Ist es möglich dieses nebeneinander zu platzieren?

          2. Das Problem konnte ich beheben:
            http://example-website.bplaced.net/

            .card {
                flex: 0 1 calc(33% - 1em);
                border: 1px solid #efefef;
                margin-bottom: 2em;
                font-family: 'Open Sans', sans-serif;
                display: flex;
                flex-wrap: wrap;
            }
            

            Jetzt bleibt nur noch das Problem, warum sich die letzten nicht nebeneinander anordnen.

            EDIT: Nein, es hat wohl doch nicht geklappt.

            1. @@Bernd

              Jetzt bleibt nur noch das Problem, warum sich die letzten nicht nebeneinander anordnen.

              Warum sich die letzten nicht nebeneinander anordnen, ist schnell gesagt: Weil du genau das mit justify-content: space-between gesagt hast.
              Du möchtest für div.wrapper.blog Grid verwenden.

              Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:

              LLAP 🖖

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

                Du möchtest für div.wrapper.blog Grid verwenden.

                Grid versteht noch nicht jeder Browser. Außerdem habe ich damit noch überhaupt keine Erfahrung wie ich dieses umsetzten könnte. Ist es denn schwer für diesen Bereich ein Grid zu nutzen? Und was passiert wenn ein Brwoser das nicht versteht?

                Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:

                Davon war auch noch nie die Rede.

                EDI: OK, ich nutze jetzt Grid: http://example-website.bplaced.net/

                Passt das so?

                .blog {
                    display: grid;
                    grid-template-columns: 33% 33% 33%;
                }
                
                1. @@Bernd

                  Grid versteht noch nicht jeder Browser.

                  Jeder relevante aktuelle Browser versteht Grid. Für die anderen: na und? Progressive enhancement.

                  Ist es denn schwer für diesen Bereich ein Grid zu nutzen?

                  Nein, im Gegenteil.

                  Und was passiert wenn ein Brwoser das nicht versteht?

                  Die Boxen sind untereinander.

                  Oder das, was du ansonsten angibst. Das kann ein Fallback auf display: inline-block sein (Beispiel) oder auch einer auf Flexbox.

                  Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:

                  Davon war auch noch nie die Rede.

                  Doch, das war es: „Responsive wäre natürlich nicht schlecht.“ Deine Worte.

                  LLAP 🖖

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

                    Ist es denn schwer für diesen Bereich ein Grid zu nutzen? Nein, im Gegenteil.

                    hab ich eingebaut, hab es mir schwer vorgestellt bzw. in den Videos die ich mir bis jetzt angesehen habe war immer viel mehr Code zu sehen.

                    Davon war auch noch nie die Rede. Doch, das war es: „Responsive wäre natürlich nicht schlecht.“ Deine Worte.

                    Hab es eingebaut, sieht jetzt besser aus (nur auf die Boxen bezogen)
                    http://example-website.bplaced.net/

          3. @@Bernd

            Jetzt habe ich noch eine Frage zum Weiterlesen Link bzw. zum <footer> wie erreiche ich, dass dieser immer unten angezeigt wird?

            So nicht: .card { display: flex; flex-wrap: wrap }.

            Du möchtest dich aus der Horizontalen erheben und dich in die Vertikale begeben:
            .card { display: flex; flex-direction: column }.

            Das div.content soll sich ausdehnen: .card > .content { flex: 1 }.

            LLAP 🖖

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

              danke auch dieses mal für deine Hilfe, sieht schon sehr viel besser aus:
              http://example-website.bplaced.net/

              Und dieses ist richtig, dass man mehreren Sachen ein display:flex geben kann / muss?

              .blog {
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
              }
              
              .card {
                  flex: 0 1 calc(33% - 1em);
                  border: 1px solid #efefef;
                  margin-bottom: 2em;
                  font-family: 'Open Sans', sans-serif;
                  display: flex; 
                  flex-direction: column 
              }
              
              1. @@Bernd

                Und dieses ist richtig, dass man mehreren Sachen ein display:flex geben kann / muss?

                Ein Flexitem kann selbst wieder Flexbox für seine Kinder sein.

                Dass ein Griditem das auch kann, sagte ich schon.

                LLAP 🖖

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

      passt dieser Aufbau für ein Blog-Artikel?

      Nicht so richtig.

      <article class="card">
      

      Wenn bei der Artkelübersicht nur Anreißer zu sehen sind, ist das kein eigenständiger Artikel, also kein article-Element.

      Auf einer Artikelseite ist der Artikel der Hauptinhalt, also auch kein article-Element.

      	<figure>
      		<img src="" alt="">
      	</figure>
      

      Die Ausschmückung eines Artikels ist kein eigenständiger Bereich, also kein figure-Element.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  6. Hallo! Mir gefällt dein Design und es ist doch responsive. Ich würde aber die Links immer unterstreichen, damit die für Users cklickable waren;)