Servus! > Nabend, > weiter gehts: Noch mal sorry wegen gestern. > > Ich habe alles ersteinmal stark vereinfacht zu meinem besseren Verständnis: > > TEST 1: [TEST 1 auf Bplaced.net - misanthrop](http://misanthrop.bplaced.net/test/open-public__july24/slidemenue2_18-03-25.html) > > Habe ein zweispaltiges GRID konstruiert, Vereinfacht ist gut; Grid ist gut und vielfältig! Du bist auf dem richtigen Weg. > rechts soll das Hauptmenü hin: Ich persönlich würde deine Webseite in 3 Teile auftrennen Kopf (*header*), Inhalt und Seitenfuß (*footer*).[^1] Die Navigation würde ich in den header packen. Dass sie ausgefahren kurzfristig Teile des Inhalts überdeckt, wäre für mich erwartetes Verhalten. [^1]: header und footer wären auf jeder Seite identisch - du müsstest nur die aktuelle Seite mit `aria-current="page"` kennzeichnen. > Frage 1: Wäre es möglich das die blau umrandete Box mit seiner rechten Seite an der rechten Seite der gestrichelt orangenen Box anklebt (siehe den Pfeil!)? Antwort: **Ja!** Das ist so eine nicht-Frage, die deine Posts aufbläht. Besser wäre es ein **Ziel** zu definieren: Die blaue Box soll rechtsbündig an der orangen Box kleben. **Wie kann ich das erreichen?** > > Nicht wie jetzt, das er am linken orangenen Rand angepinnt ist. irgendwie möchte mir das nicht gelingen. > > Problem dabei: Die blau umrandete Box ist position absolute. Du wolltest doch grid verwenden? Lass mal das `position:absolute` weg und beobachte, was passiert! > > Ich möchte etwas ausprobieren, dazu brauche ich diese Info. Klar! Sonst hättest du nicht gefragt. > > b) Wie bekomme ich den Inhalt der blauen Box übereinander und auch getrennt? und hier steige ich schon wieder aus, denn ich weiß nicht, was du vorhast. HTML und Webseiten sind eben nicht blaue Boxen und rote Kreise, sondern Inhalt und Bedienelemente. Der Inhalt des details-Elements wird untereinander angezeigt. Was möchtest du mit **über**einander ausdrücken? Und was mit getrennt? > > > TEST 2: [TEST 2 auf Bplaced.net - misanthrop\]](http://misanthrop.bplaced.net/test/open-public__july24/slidemenue3_19-03-25.html) > > Hier habe ich nun versucht das Hauptmenü mit popover einzusetzen: > > > Das wirkt schonmal ganz gut... was mir immer noch nicht gefällt und zwar nur bei Firefox ist, das wenn man das Menü schließt es einfach verschwindet und NICHT wie bei den anderen Browsern es langsam zurückslidert. Auch wenn ich den script-link zum Polyfill eingesetzt habe. Was stimmt da immer noch nicht. Dass Popover noch neu ist und Firefox kein Geld hat, weil es (weltweit) nicht mehr so viele Nutzer gibt. Irgendwann rüsten sie diese Funktionaliät nach. Das war auch bei details so, wofür es jetzt [::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content)(MDN) gibt, aber eben noch nicht für alle Browser. > > Zum TAB-Skip > > ~~~ HTML > <nav id="tabskip" aria-label="Schnellnavigation"> > <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> > <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> > <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> > <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> > <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> > </nav> > ~~~ > > Das habe ich nun direkt nach *body* eingefügt. Wow; Das ist sehr umfassend (= viel zu komplex!) Ich gehe auf eine Seite und habe 2 Möglichkeiten: 1. Die Seite von oben nach unten zu lesen und dabei viele nutzlose Infos überfliegen zu müssen, bis ich zur gewünschten Info komme. 2. Falls die Navigation zu umfangreich ist, möchte ich direkt zum Inhalt springen. Oder falls - wie früher mal üblich - die Navigation am Ende ist, möchte ich den Inhalt überspringen. Du bietest mir 5 Möglichkeiten, was mich schon wieder verwirrt.[^3] [^3]: Für den Link zum "Rechtlichem" hast du die Navigation und den Footer; den brauchst du im „TabSkip“ nicht. Du tätest dir selbst einen Gefallen, wenn du deinen neuen Ansatz konsequent verfolgtest: >> Ich habe alles ersteinmal stark vereinfacht … [Wie fange ich an?/Von der Idee zum Projekt](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Von_der_Idee_zum_Projekt#Usability-Tests)[^2] [^2]: Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen. Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Servus! > Nabend, > weiter gehts: Noch mal sorry wegen gestern. > > Ich habe alles ersteinmal stark vereinfacht zu meinem besseren Verständnis: > > TEST 1: [TEST 1 auf Bplaced.net - misanthrop](http://misanthrop.bplaced.net/test/open-public__july24/slidemenue2_18-03-25.html) > > Habe ein zweispaltiges GRID konstruiert, Vereinfacht ist gut; Grid ist gut und vielfältig! Du bist auf dem richtigen Weg. > rechts soll das Hauptmenü hin: Ich persönlich würde deine Webseite in 3 Teile auftrennen Kopf (*header*), Inhalt und Seitenfuß (*footer*).[^1] Die Navigation würde ich in den header packen. Dass sie ausgefahren kurzfristig Teile des Inhalts überdeckt, wäre für mich erwartetes Verhalten. [^1]: header und footer wären auf jeder Seite identisch - du müsstest nur die aktuelle Seite mit `aria-current="page"` kennzeichnen. > Frage 1: Wäre es möglich das die blau umrandete Box mit seiner rechten Seite an der rechten Seite der gestrichelt orangenen Box anklebt (siehe den Pfeil!)? Antwort: **Ja!** Das ist so eine nicht-Frage, die deine Posts aufbläht. Besser wäre es ein **Ziel** zu definieren: Die blaue Box soll rechtsbündig an der orangen Box kleben. **Wie kann ich das erreichen?** > > Nicht wie jetzt, das er am linken orangenen Rand angepinnt ist. irgendwie möchte mir das nicht gelingen. > > Problem dabei: Die blau umrandete Box ist position absolute. Du wolltest doch grid verwenden? Lass mal das `position:absolute` weg und beobachte, was passiert! > > Ich möchte etwas ausprobieren, dazu brauche ich diese Info. Klar! sonst hättest du nicht gefragt. > > b) Wie bekomme ich den Inhalt der blauen Box übereinander und auch getrennt? und hier steige ich schon wieder aus, denn ich weiß nicht, was du vorhast. HTML und Webseiten sind eben nicht blaue Boxen und rote Kreise, sondern Inhalt und Bedienelemente. Der Inhalt des details-Elements wird untereinander angezeigt. Was möchtest du mit **über**einander ausdrücken? Und was mit getrennt? > > > TEST 2: [TEST 2 auf Bplaced.net - misanthrop\]](http://misanthrop.bplaced.net/test/open-public__july24/slidemenue3_19-03-25.html) > > Hier habe ich nun versucht das Hauptmenü mit popover einzusetzen: > > > Das wirkt schonmal ganz gut... was mir immer noch nicht gefällt und zwar nur bei Firefox ist, das wenn man das Menü schließt es einfach verschwindet und NICHT wie bei den anderen Browsern es langsam zurückslidert. Auch wenn ich den script-link zum Polyfill eingesetzt habe. Was stimmt da immer noch nicht. Dass Popover noch neu ist und Firefox kein Geld hat, weil es (weltweit) nicht mehr so viele Nutzer gibt. Irgendwann rüsten sie diese Funktionaliät nach. Das war auch bei details so, wofür es jetzt [::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content)(MDN) gibt, aber eben noch nicht für alle Browser. > > Zum TAB-Skip > > ~~~ HTML > <nav id="tabskip" aria-label="Schnellnavigation"> > <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> > <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> > <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> > <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> > <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> > </nav> > ~~~ > > Das habe ich nun direkt nach *body* eingefügt. Wow; Das ist sehr umfassend (= viel zu komplex!) Ich gehe auf eine Seite und habe 2 Möglichkeiten: 1. Die Seite von oben nach unten zu lesen und dabei viele nutzlose Infos überfliegen zu müssen, bis ich zur gewünschten Info komme. 2. Falls die Navigation zu umfangreich ist, möchte ich direkt zum Inhalt springen. Oder falls - wie früher mal üblich - die Navigation am Ende ist, möchte ich den Inhalt überspringen. Du bietest mir 5 Möglichkeiten, was mich schon wieder verwirrt.[^3] [^3]: Für den Link zum "Rechtlichem" hast du die Navigation und den Footer; den brauchst du im „TabSkip“ nicht. Du tätest dir selbst einen Gefallen, wenn du deinen neuen Ansatz konsequent verfolgtest: >> Ich habe alles ersteinmal stark vereinfacht … [Wie fange ich an?/Von der Idee zum Projekt](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Von_der_Idee_zum_Projekt#Usability-Tests)[^2] [^2]: Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen. Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Servus! > Nabend, > weiter gehts: Noch mal sorry wegen gestern. > > Ich habe alles ersteinmal stark vereinfacht zu meinem besseren Verständnis: > > TEST 1: [TEST 1 auf Bplaced.net - misanthrop](http://misanthrop.bplaced.net/test/open-public__july24/slidemenue2_18-03-25.html) > > Habe ein zweispaltiges GRID konstruiert, Vereinfacht ist gut; Grid ist gut und vielfältig! Du bist auf dem richtigen Weg. > rechts soll das Hauptmenü hin: Ich persönlich würde deine Webseite in 3 Teile auftrennen Kopf (*header*), Inhalt und Seitenfuß (*footer*).[^1] Die Navigation würde ich in den header packen. Dass sie ausgefahren kurzfristig Teile des Inhalts überdeckt, wäre für mich erwartetes Verhalten. [^1]: header und footer wären auf jeder Seite identisch - du müsstest nur die aktuelle Seite mit `aria-current="page"` kennzeichnen. > Frage 1: Wäre es möglich das die blau umrandete Box mit seiner rechten Seite an der rechten Seite der gestrichelt orangenen Box anklebt (siehe den Pfeil!)? Antwort: **Ja!** Das ist so eine nicht-Frage, die deine Posts aufbläht. Besser wäre es ein **Ziel** zu definieren: Die blaue Box soll rechtsbündig an der orangen Box kleben. **Wie kann ich das erreichen?** > > Nicht wie jetzt, das er am linken orangenen Rand angepinnt ist. irgendwie möchte mir das nicht gelingen. > > Problem dabei: Die blau umrandete Box ist position absolute. Du wolltest doch grid verwenden? Lass mal das `position:absolute` weg und beobachte, was passiert! > > Ich möchte etwas ausprobieren, dazu brauche ich diese Info. Klar! sonst hättest du nicht gefragt. > > b) Wie bekomme ich den Inhalt der blauen Box übereinander und auch getrennt? und hier steige ich schon wieder aus, denn ich weiß nicht, was du vorhast. HTML und Webseiten sind eben nicht blaue Boxen und rote Kreise, sondern Inhalt und Bedienelemente. Der Inhalt des details-Elements wird untereinander angezeigt. Was möchtest du mit **über**einander ausdrücken? Und was mit getrennt? > > > TEST 2: [TEST 2 auf Bplaced.net - misanthrop\]](http://misanthrop.bplaced.net/test/open-public__july24/slidemenue3_19-03-25.html) > > Hier habe ich nun versucht das Hauptmenü mit popover einzusetzen: > > > Das wirkt schonmal ganz gut... was mir immer noch nicht gefällt und zwar nur bei Firefox ist, das wenn man das Menü schließt es einfach verschwindet und NICHT wie bei den anderen Browsern es langsam zurückslidert. Auch wenn ich den script-link zum Polyfill eingesetzt habe. Was stimmt da immer noch nicht. Dass Popover noch neu ist und Firefox kein Geld hat, weil es (weltweit) nicht mehr so viele Nutzer gibt. Irgendwann rüsten sie diese Funktionaliät nach. Das war auch bei details so, wofür es jetzt [::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content)(MDN) gibt, aber eben noch nicht für alle Browser. > > Zum TAB-Skip > > ~~~ HTML > <nav id="tabskip" aria-label="Schnellnavigation"> > <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> > <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> > <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> > <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> > <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> > </nav> > ~~~ > > Das habe ich nun direkt nach *body* eingefügt. Wow; Das ist sehr umfassend (= viel zu komplex!) Ich gehe auf eine Seite und habe 2 Möglichkeiten: 1. Die Seite von oben nach unten zu lesen 2. Falls die Navigation zu umfangreich ist, möchte ich direkt zum Inhalt springen. Oder falls - wie früher mal üblich - die Navigation am Ende ist, möchte ich den Inhalt überspringen. Du bietest mir 5 Möglichkeiten, was mich schon wieder verwirrt. Du tätest dir selbst einen Gefallen, wenn du deinen neuen Ansatz konsequent verfolgtest: >> Ich habe alles ersteinmal stark vereinfacht … [Wie fange ich an?/Von der Idee zum Projekt](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Von_der_Idee_zum_Projekt#Usability-Tests)[^2] [^2]: Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen. Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)