Frage zum Wiki-Artikel Responsive Bilder / resolution switching

[Rolf B]

Hallo curtis,

ich war eine ganze Zeit anderweit beschäftigt und konnte mir deine Seite gerade erst von innen anschauen.

Ob sich dein Bildproblem nicht anders lösen lässt, kann ich jetzt nicht mehr nachstellen. Wenn es als Hintergrundbild funktioniert - ok.

Ich hätte aber ein paar Hinweise.

Seitennavigation

Deine Navigation gehört nicht in ein aside. „The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content“. Richtig wäre, die ganze Navigation als ein <nav> auszuzeichnen und dieses nav an den linken Rand zu setzen. Vor allem ist es falsch, den nav Elementen die gleiche ID zu geben, IDs müssen auf der Seite eindeutig sein.

<nav id="hauptnavigation">
<h2>CF Info Base</h2>
<ul>...</ul>
<h2>Analysen</h2>
<ul>...</ul>
<h2>News</h2>
<ul>...</ul>
<h2>Soziale Netzwerke</h2>   <!-- h2, nicht h3! -->
<a href...>...</a>
<a href...>...</a>
<a href...>...</a>
</nav>

Deine h3-Überschrift für Soziale Netzwerke sollte eine h2 sein, weil sie logisch gleichrangig zu den anderen Navigationsüberschriften ist. Als h3 wäre sie den News untergeordnet. Wenn Du sie anders formatieren willst, gib ihr eine Klasse - aber das tust Du ja nicht. Ob die Social Links ebenfalls eine Liste sein sollten (die LI kann man per Flexbox nebeneinander setzen), weiß ich jetzt nicht recht, es würde aber zum Rest der Navigation passen. Würde ich dann so machen:

<nav id="hauptnavigation">
...
<h2>Soziale Netzwerke</h2>
<ul class="social-links">
<li><a href="..."><img ...></a></li>
<li><a href="..."><img ...></a></li>
<li><a href="..."><img ...></a></li>
</ul>
</nav>

#hauptnavigation .social-links {
   display: flex;
}

Microdata

Dein Gebrauch von Microdata ist fehlerhaft. Die Attribute itemscope und itemtype definieren ein Element als Item. Die Propertys des Items müssen sich aber auf Elementen befinden, im im DOM unterhalb des itemscope-Elements liegen. Bei Dir liegen sie teilweise nebeneinander (z.B. Book/author oder CreativeWork/character) und teils liegen itemprop Elemente außerhalb eines itemscope.

footer

Die footer-Navigation sollte ebenfalls nur ein nav sein.

<footer>
  <nav id="footerMenu">
    <section>
      <h2>Sonstiges</h2>
      <ul>...</ul>
    </section>
    <section>
      <h2>Seite &amp; Navigation</h2>
      <ul>...</ul>
    </section>
    <section>...</section>
    <section>...</section>
  </nav>
</footer>

Eine ID ist eigentlich nicht nötig, höchstens um vergleichbare Spezifitäten für die CSS Regeln zu erzeugen. Die nav Elemente im Footer kannst Du jedenfalls im CSS auch mit dem Selektor footer nav ansprechen (du hast ja nur einen Footer auf der Seite). Falls Du in Untersektionen noch Zusatzfooter hast, sprich den Hauptfooter mit body > footer nav an. Überreichlich Infos zu CSS Selektoren findest Du im Wiki. Jedenfalls gilt auch hier: 4 gleiche IDs sind nicht zulässig.

Breadcrumb

Eine Breadcrumbnavigation brauchst Du dann, wenn du eine Website mit mehrstufigen Menüs hast. Die hast Du, beispielsweise findet man die Hauptcharaktere der Pulps nur, wenn man den Link auf der Seite Original-Erzählungen klickt. Der Sinn der Breadcrumb ist es, auf solchen Unter-Unterseiten den Pfad darzustellen, auf dem man dorthin gelangt ist (was kompliziert sein kann, wenn eine solche Unter-Unterseite von mehr als einer Unterseite verlinkt ist). Zumindest sollte dort stehen, zu welcher Unterseite die Unter-Unterseite laut Sitemap gehört.

Auf der "Hauptcharaktere der Pulps"-Seite sollte die Breadcrumb also zweistufig sein – analog zu unserem Wiki: einfacher Selektor ist auf der 4. logischen Ebene, darum stehen in der Breadcrumb die 3 übergeordneten Seiten. Die Seite selbst (dein "Sie sind hier") ist kein Link. Du kannst das so darstellen:

Sie sind hier: Die Original-Erzählungen / Die Charaktere aus den Pulps

Ohne diese Mehrstufigkeit kannst Du auf die Breadcrumb verzichten. Es ist auch ok, den Linktext in der Breadcrumb kürzer zu fassen als die Überschrift der Seiten, auf die er verweist.

Seitenlayout

Eventuell solltest Du auch überlegen, das gesamte Seitenlayout per grid zu steuern. Durch das Links-Floaten der Seitennavigation und das Rechts-Floaten von Breadcrumb und Main-Artikel passt die Darstellung zwar, aber float ist für diesen Zweck früher lediglich zweckentfremdet worden. Heute erzeugt man sowas per Grid - guck mal in unser Wiki: Einführung ins Grid-Layout.

Du kannst mit Mediaabfragen das Grid-Template einfach umschalten und die ganze Seite passt sich an. Vorteil des Grid-Template ist auch, dass Du die komplette Festlegung, welches Element sich wo befindet, an einer Stelle hast.

Die Hauptnavigation solltest Du dann aus dem main Element herausziehen.

Rolf