Blog-Darstellung

[Bernd]

Hallo,

ich habe meine neue Blog-Darstellung mit display: grid umgesetzt:
https://codepen.io/anon/pen/VEdwMM

Gibt es daran etwas auszusetzen? Das ganze ist auch bereits responsive. Kann man dieses so lassen? Und jetzt die Frage, was passiert wenn ein Browser display: grid nicht kann?

Also ich muss sagen, display: grid gefällt mir immer besser, auch wenn ich noch immer Angst habe dass die Seite dann in alten Browsern einfach scheiße ausschaut.

[beatovich]

hallo

Hallo,

ich habe meine neue Blog-Darstellung mit display: grid umgesetzt:
https://codepen.io/anon/pen/VEdwMM

Gibt es daran etwas auszusetzen?

em Einheiten in @media-Regeln sind besser.

Das ganze ist auch bereits responsive. Kann man dieses so lassen? Und jetzt die Frage, was passiert wenn ein Browser display: grid nicht kann?

Schreibe überall wo display:grid steht, display:block, und du hast die Antwort.

Also ich muss sagen, display: grid gefällt mir immer besser, auch wenn ich noch immer Angst habe dass die Seite dann in alten Browsern einfach scheiße ausschaut.

Zumindest für ältere Mobiles kannst du dir die Aufgabe leicht machen.

In den anderen Fällen bietet sich eventuell ein display:flex als Vorgängerregel an.

[Bernd]

Hallo,

ok, hier eine Version komplett in em Angaben:
https://codepen.io/anon/pen/oaygoQ

[Bernd]

Hallo,

ich hätte noch eine Frage, gibt es mit CSS eine Möglichkeit die Bilder standardmäßig in S/W darzustellen und wenn ich mit der Maus darüber fahre diese wieder in Farbe angezeigt werden?

[Gunnar Bittersmann]

@@Bernd

gibt es mit CSS eine Möglichkeit die Bilder standardmäßig in S/W darzustellen und wenn ich mit der Maus darüber fahre diese wieder in Farbe angezeigt werden?

MDN: Filter

LLAP 🖖

[Bernd]

Danke, hat funktioniert:
https://codepen.io/anon/pen/LgrVaG

[beatovich]

hallo

Hallo,

ich hätte noch eine Frage, gibt es mit CSS eine Möglichkeit die Bilder standardmäßig in S/W darzustellen und wenn ich mit der Maus darüber fahre diese wieder in Farbe angezeigt werden?

in https://codepen.io/chriscoyier/pen/aBIAc

das CSS wie folgt ändern

.bg-blend {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg);
  background-color: black;
  background-blend-mode: luminosity;
}

[Gunnar Bittersmann]

@@beatovich

em Einheiten in @media-Regeln sind besser.

Ja!1elf Noch besser sind allerdings gar keine Media-Queries.

LLAP 🖖

[Gunnar Bittersmann]

@@Bernd

ich habe meine neue Blog-Darstellung mit display: grid umgesetzt:
https://codepen.io/anon/pen/VEdwMM

Gibt es daran etwas auszusetzen?

Zunächst einmal ist 6× derselbe Inhalt wenig geeignet, das Verhalten der Blöcke zu testen. Verwende besser Texte mit unterschiedlich langem Inhalt! Bei Grid solltest du keine bösen Überraschungen erleben. Das kann bei einem Fallback auf Floats aber anders aussehen.

Wozu die media queries? Wozu machst du dir die Arbeit, selbst zu bestimmen, wieviele Spalten das Grid haben soll? Das kann der Browser doch alleine. Einfach die minimale Breite der Zellen im Grid angeben — fertig. Look Ma, no media queries!

Kann man dieses so lassen?

Eine Sache solltest du noch ändern: nicht den gesamten Inhalt in a-Elemente packen, sondern nur den Teil, der als Linktitel sinnvoll ist. (Ob das bei dir „19.10.2018 - Social Media Marketing“ oder „Ich bin ein Titel in einer H2 Überschrift“ ist, musst du wissen.) Screenreader-Nutzern fallen ja sonst vor lauter Text die Ohren ab!

Die ganze Fläche bekommst du trotzdem verlinkt: entweder mit einem absolut positioniertem Pseudoelement (mit der kleinen Unschönheit, dass der Text dann nicht mehr kopiert werden kann) oder mit JavaScript. (Heydon Pickering, Inclusive Components: Cards)

LLAP 🖖

[Bernd]

Hallo,

Wozu die media queries? Wozu machst du dir die Arbeit, selbst zu bestimmen, wieviele Spalten das Grid haben soll? Das kann der Browser doch alleine. Einfach die minimale Breite der Zellen im Grid angeben — fertig. Look Ma, no media queries!

ok, diese nutze ich jetzt nur noch für den Abstand (werden später auf der realen Seite wahrscheinlich auch nochmals geändert):
https://codepen.io/anon/pen/LgrVaG?editors=1100

[Bernd]

Ok, die Verlinkung habe ich nun auch angepasst. Ich habe mich für die <h2> entschieden:
https://codepen.io/anon/pen/LgrVaG

[’sup]

Hi,

zum CSS wurde bereits etwas gesagt. Also gebe ich meinen Senf zum Markup ab 😉

Datum und Autor sollten nach der Überschrift im Quelltext stehen. So wie es jetzt ist, gehören Datum und Autor des dritten Eintrags zur Überschrift des zweiten Eintrags. Über display: flex; und flex-direction: column-reverse; oder order: n; kannst du Autor und Datum optisch vor der Überschrift anzeigen.

Ich würde die Einträge in einer Liste (<ul> oder <ol>) gruppieren. Die einzelnen Einträge dann als <article> darin verschachtelt:

<ol class="postings">
  <li>
	  <article>
		  <header>
			  <h2><a href="/">Ich bin ein Titel</a></h2>
				<p>Max Mustermann</p>
				<p><time datetime="2018-01-01">01. Januar 2018</time></p>
        <img src="../pfad/zum/bild.jpg" alt="Alttext nicht vergessen!">
			</header>
			<p>
				Ich bin ein Teaser-Text!
			</p>
		</article>
	</li>
	<!-- weitere Einträge hier einsetzen ... -->
</ol>

Du hast hier eine Liste von Einträgen, von denen jeder für sich selbst Sinn ergibt. Ich finde, das darf man dann auch ruhig so im HTML darstellen. Eventuell lohnt es sich auch, das ganze zusätzlich via schema.org auszuzeichnen. Da kenne ich mich allerdings nicht unbedingt mit aus.

[Bernd]

Hallo,

und warum eine ol oder ul Liste? Macht für mich hier kein Sinn? Und macht die Reihenfolge wirklich so viel aus? Ich meine keiner schaut in den Quelltext?

[Gunnar Bittersmann]

@@Bernd

und warum eine ol oder ul Liste? Macht für mich hier kein Sinn? Und macht die Reihenfolge wirklich so viel aus? Ich meine keiner schaut in den Quelltext?

Du tust es. Und

<div>
	<div>…</div>
	<ul>
		<li>
			<div>…</div>
			<div>…</div>
		</li>
		<li>
			<div>…</div>
			<div>…</div>
		</li>
	</ul>
	<div>…</div>
</div>

ist besser überschaubarer Quelltext als

<div>
	<div>…</div>
	<div>
		<div>
			<div>…</div>
			<div>…</div>
		</div>
		<div>
			<div>…</div>
			<div>…</div>
		</div>
	</div>
	<div>…</div>
</div>

Screenreader sind bei Listen gesprächiger. Statt „Frühling, Sommer, Herbst, Winter“ könnte bspw. vorgelesen werden: „Liste, 4 Objekte – Frühling, 1 von 4 – Sommer, 2 von 4 – Herbst, 3 von 4 – Winter, 4 von 4“, was Nutzern die Orientierung auf der Webseite erleichtert.

LLAP 🖖

[Bernd]

Hallo,

ich habe es so umgesetzt:
https://codepen.io/anon/pen/oayBpw

Allerdings bekomme ich jetzt mit dem Bild und der Darstellung massive Probleme. Ich möchte von meiner ursprünglichen Darstellung nicht abweichen:

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

Das Bild muss aus dem <header> raus?

[Bernd]

Ok, ich habe es jetzt so umgesetzt:
https://codepen.io/anon/pen/oayBpw

Ist zwar umständlich für

.excerpt-post 
.postings article header p

jeweils ein eigenes padding zu vergeben. Dazumal die beiden Werte doch voneinander abweichen. Da frage ich mich warum?

[Gunnar Bittersmann]

@@’sup

Eventuell lohnt es sich auch, das ganze zusätzlich via schema.org auszuzeichnen. Da kenne ich mich allerdings nicht unbedingt mit aus.

Example 4 im Abschnitt 4.3.2. The article element gibt einen ersten Anhaltspunkt.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Eventuell lohnt es sich auch, das ganze zusätzlich via schema.org auszuzeichnen. Da kenne ich mich allerdings nicht unbedingt mit aus.

Example 4 im Abschnitt 4.3.2. The article element gibt einen ersten Anhaltspunkt.

Die Auszeichnung des Autors wie auf Folie 32 meines Vortrags „nuqjatlh cha’DIch – Sekunde mal, wat soll’n dit heißen?“.

LLAP 🖖

[Bernd]

Hallo,

hier kommt noch meine Blogartikel Detailansicht:
https://codepen.io/anon/pen/EdRmqx

Was sagt ihr dazu? Gibt es etwas zu verbessern? Mit der Sidbar im mobilen Bereich bin ich noch überhaupt nicht zufrieden, vielleicht komplett ausblenden?

[Gunnar Bittersmann]

@@Bernd

hier kommt noch meine Blogartikel Detailansicht:
https://codepen.io/anon/pen/EdRmqx

Was sagt ihr dazu? Gibt es etwas zu verbessern?

	<main>
		<section id="blogartikel">
			<article>

ergibt für mich keinen Sinn:

• Wenn der Artikel der alleinige Hauptinhalt der Seite ist, dann ist das article-Element unnütz.
• Wenn es nur einen Abschnitt im main-Element gibt, dann ist das section-Element unnütz.
• Es sei denn, man braucht ein sectioning content element. (Eins, nicht zwei.)

Warum sind die Überschriften h3? Was ist h2 auf der Seite?

„Lari Musterfrau Marketing Manager“ und „Jetzt unseren Newsletter abonnieren!“ sollten keine h4 sein. (Für welchen Abschnitt mit welcher h3 denn?)

Der Alternativtext für das Foto der Autorin ist so auch nicht sinnvoll: „Lari Musterfrau Lari Musterfrau Marketing Manager“? Da kann der Wert des alt-Attributs auch leer sein; das Attribut muss aber vorhanden sein: alt="".

Oder sowas wie

<img src="…" alt="" aria-labelledby="heading-lari"/>
<h3 id="heading-lari">…</h3>

Mit der Sidbar im mobilen Bereich bin ich noch überhaupt nicht zufrieden, vielleicht komplett ausblenden?

Entweder es ist wichtiger Inhalt; dann sollte er auf jedem Gerät ausgegeben werden.

Oder es ist keiner; dann sollte er auf keinem Gerät ausgegeben werden.

Die Zeilenhöhe finde ich mit 1.6 zu hoch bemessen.

LLAP 🖖