Version 2 mit Flex

[LiveAndSmile]

Hallo,

<div class="wrapper"> Das div ist überflüssig; es sind bereits genügend Containerelemente da.

Habe ich ersteinmal entfernt.

<header class="site-header"> Wozu die Klasse? Aus der Stellung im DOM geht bereits hervor, dass das der Site-Header ist.

Auch dieses Klasse habe ich entfernt. Ich dachte umso mehr Klassen umso "robuster" ist das Design.

<a href=""><img src="http://lorempixel.com/250/90/food/5" alt="Logo"></a> Hier könnte der Alternativtext auch angeben, wohin der Link führt.

Habe ich gemacht. Jetzt steht "Zurück zur Startseite"

<main class="site-main"> Wozu die Klasse? Da es nur ein main-Element gibt (laut W3C-Spec nur geben kann), ist klar, dass dies der Hauptinhalt ist.

Auch dieses Klasse habe ich wieder entfernt.

<article class="preface"> Ohne Inhalt lässt sich nicht sagen, ob das article-Element hier richtig ist.

Naja so recht kann ich es selber noch nicht sagen. Ich denke es wird eine Art "Einleitungstext" sein, wo ich mich kurz vorstelle. Dieser Platz könnte aber auch für Sonderaktionen genutzt werden.

<figure class="blog-picture"> Nicht jedes Bild gehört in ein figure-Element. Und wozu die Klasse?

Soll ich nur ein <img> nehmen?

<aside class="site-aside"> Ohne Inhalt lässt sich nicht sagen, ob das aside-Element hier richtig ist. Wozu die Klasse?

Naja aside darf es ja mehrere auf einer Seite geben? Dieser Platz möchte ich später für ein Bild oder für Boxen nehmen z.B. für Kontakt oder Besondere Hinweise.

Bei schmalem Viewport verschwindet die Navigation nach rechts aus dem Viewport raus. Du solltest dafür sorgen, dass sie im Viewport (unter dem Logo?) bleibt.

An der Navigation habe ich noch gar nichts gemacht. Ich möchte später dass die Navigation hinter einem Icon verschwindet wenn sie nicht mehr genügen Platz hat. Wird heute Abend oder morgen erledigt.

Die Änderungen habe ich auch auf http://codepen.io/anon/pen/mONJem aktualisiert.