position: fixed

[( HAL )]

Hallo Franz

Entschuldige bitte, dass es mit der Antwort so lange gedauert hat, aber ich habe mir deine Seite mal angeschaut, und ich muss sagen, da ist doch der ein oder andere Punkt, der mir, vorsichtig ausgedrückt, etwas verbesserungswürdig erscheint, wobei ich meine Kritik aber nur als gut gemeinte Ratschläge eines Halbwissenden verstanden haben möchte, sprich, was du letztlich daraus machst, bleibt natürlich dir selbst überlassen. ;-)

Also, was hier als erstes ins Auge springt, das sind die grellen, sich beißenden und im Kontext deiner Seite ausgedrückt: etwas unappetitlichen Farben, aber ich nehme an, dass es sich hier nur um eine Testseite handelt und du die Farben absichtlich so - sagen wir, kontrastreich - gewählt hast, um die einzelnen Layoutelemente besser unterscheiden zu können, und es sich dabei nicht um die endgültige Farbpalette handelt, mit der du deine Seite gestalten willst, weshalb ich das nur am Rande erwähnen möchte.

Der zweite und und wesentlich wichtigere Punkt, den ich ansprechen möchte ist, dass deine Seite, so wie sie derzeit aufgebaut ist, praktisch nur auf wirklich großen, um nicht zu sagen riesigen Viewports überhaupt nutzbar ist, da sich deine fixierte Seitennavigation, wenn man die Seite in einem kleineren Fenster anschaut, beim horizontalen Scrollen über deine Rezepte schiebt, so dass diese nicht mehr lesbar sind.

Darüber hinaus hast du für die Abmessungen deiner Elemente keine relativen Werte verwendet, so dass das gesamte Layout starr und unflexibel ist, daher mein Stichwort für die Internetsuche hier: Responsive Design.

Der zugehörige Artikel im Wiki ist leider noch nicht fertig, aber die dort formulierte Empfehlung, dass die Darstellung der Seite nicht an eine bestimmte Viewportgröße gekoppelt sein sondern sich vielmehr an den Inhalten ausrichten sollte, wäre ein Grundsatz, über den ich mir an deiner Stelle vielleicht ein paar Gedanken machen würde:

Ich meine, stell dir vor, ein Besucher deiner Seite möchte eines deiner Rezepte nachkochen. Dann ist kaum davon auszugehen, dass er seinen Desktoprechner inklusive 24-Zoll-Monitor in die Küche verfrachten wird, um das Rezept beim Kochen im Blick zu behalten und sich mit der Beigabe von Knoblauch nicht zu vertun!

Er könnte das Rezept zwar theoretisch ausdrucken, abschreiben oder auswendiglernen, aber wirklich benutzerfreundlich wäre das wohl eher nicht...

Der wahrscheinlichste Usecase dürfte daher in meinen Augen sein, dass deine Rezeptseite mit dem Smartphone oder Tablet genutzt wird, weshalb dein Layout meiner Ansicht nach unbedingt auch auf kleineren Viewports funktionieren sollte.

Wie man das in deinem Fall umsetzen könnte, wäre dann die nächste Frage.

Dazu sei vorweg erstmal nur erwähnt, dass Elemente, die mit position: fixed; auf dem Viewport festbetoniert sind, der natürliche Feind jeder responsiven Darstellung sind - quasi die Atombombe im Arsenal der Gestaltungsmittel - und mithin eine Option, die nur mit äußerstem Bedacht eingesetzt werden sollte.

Aber bevor wir auf Fragen der technischen Umsetzung zu sprechen kommen, sollten wir vielleicht zunächst einmal ein wenig über die grundsätzliche Art der Darstellung deiner Inhalte nachdenken:

Du hast dich dafür entschieden, alle Rezepte, die unter einer bestimmten Kategorie zusammengefasst sind, auf einer Seite darzustellen - eine Entscheidung, für die es gute Gründe gibt.

Denn die Alternative, für jedes Rezept eine eigene Seite einzurichten, wäre freilich mit einem größeren Aufwand verbunden, der im Prinzip nur dann gerechtfertigt wäre, wenn du für die einzelnen Rezepte wesentlich mehr Inhalt bereitstellen würdest, also sprich, ausführlichere Beschreibungen und gegebenenfalls noch ein paar Bilder, die illustrieren wie die Mahlzeit aussehen könnte, wenn man vom Kochen etwas verstehen würde. ;-)

Insofern halte ich diese grundsätzlichen Entscheidung für absolut nachvollziehbar und für eine gute Grundlage, von der ausgehend man weitere Überlegungen anstellen kann, wie man die Inhalte denn nun am besten darstellen könnte, so dass sie für die Benutzer möglichst zugänglich sind.

Nun hast du es im Moment ja so gelöst, dass du die internen Verweise zu den einzelnen Rezepten in einer Liste untergebracht hast, die du mit position: fixed an den linken Rand des Viewports geklebt hast, mit allen Problemen, die sich - wie oben schon beschrieben - daraus ergeben.

Dazu hast du einen unglaublich sperrigen Header, in dem aber lediglich eine Überschrift untergebracht ist, und den du ebenfalls mit position: fixed dem natürlichen Lauf der Dinge entzogen hast.

Wenn wir nun also überlegen, wie man das besser lösen könnte, wäre die erste Frage, die ich mir stellen würde, ob es überhaupt notwendig ist, dass die Seitennavigation - und erst recht der Header mit der Überschrift - immer und jederzeit sichtbar ist, egal wie weit die Seite vertikal gescrollt ist.

Denn entweder der Benutzer sucht ein bestimmtes Rezept - dann wird er, sobald er auf die Seite kommt, den entsprechenden Link in deiner Navigation anklicken um dorthin zu gelangen, oder er möchte nur zum Zwecke der Information deine verschiedenen Rezepte innerhalb dieser Kategorie überfliegen, um zu schauen, ob vielleicht etwas dabei ist, was seinem Geschmack und seinen Kochkünsten entspricht - und in diesem Fall wäre es aus meiner Sicht nicht notwendig, dass die Liste der Rezepte immer im Blickfeld ist, sondern es wäre höchstens ein Komfortfeature.

Das heißt, in meinen Augen könntest du auf fixierte Layoutelemente hier komplett verzichten, zumal du ja ohnehin unter jedem Rezept noch einen Link zum Seitenanfang eingebaut hast!

Aber wenn du unbedingt möchtest, dass die Navigation jederzeit sichtbar ist, dann wäre es natürlich ratsam dies so umzusetzen, dass auch auf kleineren Viewports der eigentliche Inhalt, nämlich deine Rezepte, nicht verdeckt werden.

Dabei stellt sich dann das Problem der verfügbaren Breite, weshalb hier meiner Ansicht nach statt der seitlichen Navigation ein fixed header, in dem du neben der Überschrift auch die Verweise unterbringst, durchaus eine akzeptable Lösung darstellen könnte, allerdings nur unter der Voraussetzung, dass dieser so aufgebaut ist, dass er auf schmaleren Viewports weder horizontal, noch vertikal zuviel Platz einnimmt.

Dieser Anspruch lässt sich aber mit einer klassischen Liste für die Verweise nicht wirklich vereinbaren, weshalb ich in diesem Fall darüber nachdenken würde, die Linkliste in Form eines Dropdown-Menüs zu präsentieren, oder hierfür gegebenfalls ein select Element zweckzuentfremden, so dass letztlich nur die Überschrift, der Zurück-Link und die reduzierte Auswahlliste sichtbar sind.

Eine "ausgeklappte" Liste der Rezepte könnte man dann über Media Queries ab einer entsprechenden Mindestbreite des Viewports am rechten Rand einblenden, sozusagen als zusätzliche Navigationshilfe.

Aber wie gesagt, ich halte solche Verrenkungen in diesem Fall eigentlich für unnötig und denke, ein Layout ohne fixierte Elemente würde seinen Zweck hier absolut erfüllen. Und wenn darüber hinausgehende Funktionalität bereit gestellt werden soll, dann sollte dies im Sinne des Progressive Enhancement geschehen, also optional und aufbauend auf einem soliden Fundament.

Davon abgesehen bleibt schließlich nur die Empfehlung, so wie Matthias es in seinen Beiträgen hier im Thread schon angemerkt hat, sich einmal genauer über die Möglichkeiten der Positionierung und Darstellung von Elementen zu informieren und damit ein wenig herumzuexperimentieren, und zwar auch und vor allem unter Einsatz relativer Werte für Größenangaben und Abstände.

Dann wirst du recht schnell selbst ein Gefühl dafür bekommen, wie du deine Inhalte am besten in Szene setzten kannst!

So, ich hoffe, das war jetzt irgendwie hilfreich. ;-)

Gruß,

HAL