feststehende Navigation mit Scrollbalken bei Bedarf

[Oleander]

Wo du weiter unten alte Browser ansprichst: calc() geht im IE erst ab IE 9. Für alte Browser wäre eine andere Lösung vorzusehen, z.B. den Header nicht fix zu positionieren.

Ich teste hin und wieder ganz grob mit dem IE8 und sehe, dass dort alles einigermaßen bedienbar bleibt (auch wenn vielleicht nicht unbedingt alles schön aussieht). Viel Zeit will ich in die Darstellung in alten Browsern nicht investieren. Bei Verwendung von calc erscheint im IE8 kein Scrollbalken, was aber auch keine Verschlechterung ist. Ich würde mal davon ausgehen, dass auf mobilen Geräten (und gerade dort gibt es ja die geringen Bildschirmgrößen) kaum sehr alte Browser im Einsatz sind (und besonders kein IE < 9)

[tabindex]

Auf den Fall muss dem Nutzer, der per Tastatur navigiert, deutlich gemacht werden, welches Element den Fokus hat. Du kannst nicht den blauen Rahmen wegnehmen ohne eine andere Kennzeichnung vorzusehen. Wie hättest du es denn gern?

Ich weiß auch nicht. Mir war nur aufgefallen, dass im Firefox (im Gegensatz zu Chrome) keine Auswirkung in der Darstellung zu sehen war. Wobei mir jetzt auffällt, dass im Firefox sogar schon vor dem Einfügen des tabindex alles auch per Tastatur zu bedienen war.

Drittens sollten das gar keine divs sein; "kopf" auch nicht. Sondern:
<header id="kopf">,
<nav id="navigation" tabindex="0">,
<main id="inhalt" tabindex="0">.

Bei divs gehen Nutzern assistiver Technologien wertvolle Informationen zur Seitenstruktur verloren. Verwende die richtigen HTML-Elemente.

Aber divs sind doch auch nach HTML 5 zulässig (im Gegensatz zu frames). Und was sollte ich machen, wenn ich noch mehr Bereiche benötige, die nicht alle in die vorgegebenen Kategorien fallen?

[Kopf]

Nun schreibst du, dass bei dir nicht umbrochen wird. (Sondern? Abgeschnitten?) Aber auch eine Zeile kann auf verschiedenen Systemen unterschiedlich hoch sein. Der Nutzer könnte eine seinen Vorstellungen entsprechende andere Schriftgröße verwenden. Selbst bei gleicher Schriftgröße kann die Zeilenhöhe auf verschiedenen Systemen unterschiedlich sein (z.B. bedingt durch verschiedene Fonts).

Ich verwende dort "white-space: nowrap". Der Font wird von der eigenen Website geladen (vielleicht auch von Google Fonts). In älteren Browsern, die keine Fonts nachladen können, sieht es dann halt ggf. wieder nicht so schön aus.