nicht angemeldet einsiedler
klawischnigg
einsiedler
basti1012
einsiedler
marctrix
marctrix
Auge
klawischnigg
einsiedler
marctrix
marctrix
einsiedler
marctrix
Hallo liebe Forumer,
ich habe für mein Cardlayout einen ausklappbaren (Accordion) Bereich geplant.
Und zwar kann man halt ein wenig mehr Text (weiter)lesen wenn man möchte und anschliessend
den Link (in blau) darunter betätigen wenn man noch mehr Infos und zur Webseite möchte!
So habe ich es geplant.
Ich setze dabei <details> & <summary> ein, als Fallback für den IE und ältere Firefox
ein wenig script bääääh
Es klappt schon sehr gut: Demoseite
Nun habe ich aber ein Paar Fragen:
A)
Wie schafft man so eine Art Weiche mit @media, wenn der Browser <details> & <summary>
versteht? Das DANN eben <details> & <summary> normal angewendet wird.
Als Fallback soll dann eben das java-script aktiv werden, wenn das NICHT der Fall ist.
Wäre es Dann noch sinnvoll wenn java-script deaktiviert ist, dass dann
<details open> aktiv wird? was meint ihr? Oder braucht man das gar nicht?
B)
Wie bekomme ich es hin wenn man auf weiter scrollen klickt das sich dann das
"weiter lesen..." zu "wieder zuklappen..." wandelt.
Dazu benötige ich Pseudoelemente + display:hidden; und ::before & ::after ist das richtig?
Aber wie geht das dann?
UND wie fändet Ihr es wenn beim "aufklappen" der hinzukommende Text ÜBER dem "Link"
"wieder zuklappen..." stände, also die Position getauscht wird, "wieder zuklappen..."
stände ganz am unteren Rand? Wäre das besser?
Vielen Dank für eure Unterstützung!
Grüße der einsiedelnde
Hi there,
Es klappt schon sehr gut: Demoseite
Ich würd' eher sagen, das ist eine mittlere Katastrophe.
1.) Die Seite ist völlig verwirrend - für das Darstellen der einzelnen Artikel in scheinbar beliebig angeordneten frei schwebenden Bereichen resp. "Kästchen" gibt es überhaupt keinen erkennbaren und schon gar keinen zwingenden Grund. Seitenbesucher lieben es, Dinge vorzufinden, die sie gewohnt sind und da gehört wirr floatender Inhalt normalerweise nicht dazu. Stell' Dir einmal ein Buch vor, in dem die Absätze so angeordnet werden wie auf Deiner Webseite.
2.) Links in diesen Kästchen sind als solche nicht erkennbar, wenn ich da ein "weiter lesen..." sehe erwarte ich, daß sich der Cursor auf "anklickbar" ändert, wenn sich dahinter ein Link verbirgt
3.) Dein Akkordeon macht die Sache eigentlich noch schlimmer - wenn man den Link gefunden und angeklickt hat, dann zappelt die ganze Seite, das hat kein User gerne; es gibt nicht viel schlimmeres als eine "unruhige" Webseite, das wirkt unseriös weil es an schlechte Werbung erinnert und lenkt vom Inhalt, um den es Dir ja vermutlich geht, einfach nur ab. Ich würd' das unter allen Umständen weglassen.
4.) Auf "weitere Infos" passiert gar nichts (nehme einfach einmal an, das ist dem Umstand der Unvollendetheit geschuldet😉)
5.) Die Seite lädt elend langsam (ich hab über 30Mbit im Download, aber die Seite versucht nichtsdestotrotz minutenlang irgendwas von "lorempixel..." zu laden.
Vielen Dank für eure Unterstützung!
Naja, ich fürchte, Unterstützung konnte ich Dir nicht viel geben, aber in diesem Forum bekommt man ja des öfteren Antworten auf Fragen, die man nicht gestellt hat. Ich wollte Dir auch nicht zu nahe treten, aber wenn ich so etwas sehe, dann hab ich immer den Eindruck, daß es da jemandem um vieles mehr um die designmäßige Selbstverwirklichung geht als um einen möglichst einfachen Zugang des Besuchers zur angebotenen Information…
Warum ist es mir nicht möglich hierdrauf negativ zu bewerten.
Ich mache es hiermit!
Hallo einsiedler,
Warum ist es mir nicht möglich hierdrauf negativ zu bewerten.
weil du dafür noch nicht ausreichend Punkte gesammelt hast.
LG,
CK
Interesant habe 10 mal <footer> gezählt. Von der Mitte bis zum Ende. Da solltest du auch was dran machen
Ist das nicht die richtige Bezeichnung für soetwas?
Verstehe ich nicht!
Auch hier: negative Bewertung von mir!
Hallo einsiedler,
Ist das nicht die richtige Bezeichnung für soetwas? Verstehe ich nicht!
Natürlich darf jeder article einen footer haben.
Auch hier: negative Bewertung von mir!
Das Beleidigt-Tun hilft dir aber nicht weiter. Insbesondere sollte dir zu denken geben, dass klawischniggs Beitrag zwei mal positiv bewertet wurde.
Bis demnächst
Matthias
Hi,
Auch hier: negative Bewertung von mir!
Das Beleidigt-Tun hilft dir aber nicht weiter.
Im Gegenteil - es hält andere davon ab, Dir (= basti) helfen zu wollen, man will ja keine Negativ-Bewertung abbekommen, nur weil Du nicht zufrieden mit der Hilfe bist.
cu,
Andreas a/k/a MudGuard
Ganz im Gegenteil, keiner braucht deswegen Angst zu haben. Ich empfand nur die Art und Weise gelinde gesagt, arrogant, hochnäsig & einfach unmöglich! Natürlich nehme ich eure Hilfe an, sehr gerne sogar! Also bitte, liebe Leute... :o)
Hej basti1012,
Interesant habe 10 mal <footer> gezählt.
Und?
Da solltest du auch was dran machen
Habe jetzt nicht geschaut, wo das eingesetzt wird. Aber erst mal spricht nichts dagegen, dass jede Sektion einen footer hat.
Der abschließende footer im Body sollte übrigens ein role="contentinfo" bekommen.
Marc
@@marctrix
Der abschließende
footerim Body sollte übrigens einrole="contentinfo"bekommen.
Die hat er doch implizit‽
LLAP 🖖
Hej Gunnar,
@@marctrix
Der abschließende
footerim Body sollte übrigens einrole="contentinfo"bekommen.Die hat er doch implizit‽
Ich lasse mal Steve Faulkner antworten…
Vielleicht ist diese 5 Jahre alte Antwort überholt? — Ich mache es noch so wie oben von mir beschrieben…
Marc
Hej klawischnigg,
Es klappt schon sehr gut: Demoseite
Ich würd' eher sagen, das ist eine mittlere Katastrophe.
Ich habe gedacht, das ist einfach noch nicht fertig? Das "klappen" scheint hatte ich nur auf das Auf- und Zuklappen bezogen…
2.) Links in diesen Kästchen sind als solche nicht erkennbar, wenn ich da ein "weiter lesen..." sehe erwarte ich, daß sich der Cursor auf "anklickbar" ändert, wenn sich dahinter ein Link verbirgt
Ist aber kein Link, sondern ein summary. Dennoch sollte man da den Cursor anpassen:
Matthias Apsel
MudGuard
Gunnar Bittersmannsummary {
cursor: pointer;
}
3.) Dein Akkordeon macht die Sache eigentlich noch schlimmer - wenn man den Link gefunden und angeklickt hat, dann zappelt die ganze Seite,
Wenn die Boxen erst mal ordentlich angeordnet sind, beispielsweise in einem Grid, wird es schon sehr viel besser sein…
Dass aufklappbare Elemente die Höhe ändern, wenn sie auf- oder zugeklappt werden ist ja erst mal für Nutzer ncihts ungewohntes, sondern eher im Gegenteil das erwartete Verhalten…
4.) Auf "weitere Infos" passiert gar nichts (nehme einfach einmal an, das ist dem Umstand der Unvollendetheit geschuldet😉)
Vermutlich. Aber so wohl dieser Text, als auch „weiter lesen“ geben keine intellektuell verwertbaren Informationen über das, was einen nach einem Klick erwartet. Hier auf jeden Fall die Texte nachbessern!
5.) Die Seite lädt elend langsam (ich hab über 30Mbit im Download, aber die Seite versucht nichtsdestotrotz minutenlang irgendwas von "lorempixel..." zu laden.
Wie gesagt: nicht fertig. Ob lorempixel die beste Lösung ist, sei mal dahingestellt. Jedenfalls ziehe ich Beispieltext Blindtexten vor. Blindtexte verleiten dazu einfach leere Flächen mit Gewusel zu füllen, anstatt mal die geplante Struktur auf Sinnhaftigkeit anhand von Beispielen durchzuspielen…
Vielen Dank für eure Unterstützung!
Keine Ursache, ich hoffe es hilft.
Ein Polyfill musst du dir übrigens nicht selber schreiben. Für Details/summary und anderes findest du fertige auf http://html5please.com
Marc
Hallo
Ein Polyfill musst du dir übrigens nicht selber schreiben. Für Details/summary und anderes findest du fertige auf http://html5please.com
Oh, danke für den Link. Vor Jahren hatte wurde die Seite hier schon mal verlinkt, ich hab' mir den damals aber leider nicht gespeichert. Ist jetzt in meiner Lesezeichensammlung gelandet.
Tschö, Auge
Hej Auge,
Ein Polyfill musst du dir übrigens nicht selber schreiben. Für Details/summary und anderes findest du fertige auf http://html5please.com
Oh, danke für den Link. Vor Jahren hatte wurde die Seite hier schon mal verlinkt, ich hab' mir den damals aber leider nicht gespeichert. Ist jetzt in meiner Lesezeichensammlung gelandet.
Freut mich!
Ich verlinke die eigentlich regelmäßig… — musst öfter meine Beiträge lesen. 😉
Marc
Hallo
Für Details/summary und anderes findest du fertige [Polyfills] auf http://html5please.com
Oh, danke für den Link.
Ich verlinke die eigentlich regelmäßig… — musst öfter meine Beiträge lesen. 😉
Abseits aller Meinungsverschiedenheiten lese ich hier fast alle deiner Beiträge. Vielleicht waren die Links sonst nicht so prominent im Text platziert, vielleicht habe ich sie auch einfach übersehen.
Tschö, Auge
Hi there,
Dass aufklappbare Elemente die Höhe ändern, wenn sie auf- oder zugeklappt werden ist ja erst mal für Nutzer ncihts ungewohntes, sondern eher im Gegenteil das erwartete Verhalten…
Arrogant wie ich bin sag ich, daß mich das total nervt, wenn die ganze Seite herumspringt, wenn man auf ein Summary klickt. Und ja, die Nutzer sind es gewohnt, daß der Content nach unten fährt, wenn irgendetwas aufgeht, aber bei der Konstruktion des Originalposters kriegt gleich die ganze Seite einen Tremor beim Aufklappen…
Negative Bewertung von mir!
Hej klawischnigg,
Dass aufklappbare Elemente die Höhe ändern, wenn sie auf- oder zugeklappt werden ist ja erst mal für Nutzer ncihts ungewohntes, sondern eher im Gegenteil das erwartete Verhalten…
Arrogant wie ich bin sag ich, daß mich das total nervt, wenn die ganze Seite herumspringt, wenn man auf ein Summary klickt. Und ja, die Nutzer sind es gewohnt, daß der Content nach unten fährt, wenn irgendetwas aufgeht, aber bei der Konstruktion des Originalposters kriegt gleich die ganze Seite einen Tremor beim Aufklappen…
Hat nichts mit Arroganz zu tun. Was gefällt ist weitgehend subjektiv. Ich mag versteckte Inhalte nicht, mag es aber Inhalte verbergen zu können (würde also den details erst mal das open-Attribtut mitgeben wollen).
Elemente auf- und zuklappen zu können hat gerade auf Smartphones mit wenig Bildschirmplatz schon mitunter seinen Charme und seine Berechtigung.
Marc
@@marctrix
Ich mag versteckte Inhalte nicht, mag es aber Inhalte verbergen zu können (würde also den
detailserst mal dasopen-Attribtut mitgeben wollen).
Ich nicht unbedingt.
Elemente auf- und zuklappen zu können hat gerade auf Smartphones mit wenig Bildschirmplatz schon mitunter seinen Charme und seine Berechtigung.
Auch auf großen Bildschirmen, auf denen man das UI auch nicht mit für die Hauptaufgabe unwichtigen Dingen überfrachten möchte.
Eventuell möchten manche Nutzer zusätzlichliche Informationen haben. Anstatt diese auf einer neuen Seite bereitzustellen (Request, Latenz, … gähn), kann man diese gleich auf der bestehenden Seite präsentieren, dann sind sie – schwupps – bei Interaktion schon da.
Aufklappen ist für zusätzlichliche Informationen eine alternative Darstellungsform zu Tooltips – womöglich die bessere.
LLAP 🖖
Hej Gunnar,
@@marctrix
Ich mag versteckte Inhalte nicht, mag es aber Inhalte verbergen zu können (würde also den
detailserst mal dasopen-Attribtut mitgeben wollen).Ich nicht unbedingt.
Ist wie gesagt rein subjektiv. Das meiste, was wir anbieten, basiert auf Annahmen, die wiederum von unseren Vorlieben ausgehen oder von Annahmen anderer, die wir schätzen und auf deren Urteil wir vertrauen.
So kann man sich dem Mehrheitswunsch annähern, aber nie eine Seite machen, die allen gefällt. Da kommt man zwar eh nicht hin, zeigt aber, warum ich mit Formulierungen wie "am besten macht man blablabla" sehr vorsichtig bin. Praktisch jede Technik und Empfehlung ist nur unter einer ganzen Reihe von Bedingungen die am besten geeignete (oft nur weil noch bessere Methoden schlicht nicht zur Verfügung stehen).
Manchmal kann eine Empfehlung, die ich ausspreche auch vom Mehrheitswunsch abweichen, weil das, was für die Mehrheit ein mehr oder weniger unwichtiges nice-to-have ist, andere Nutzergruppen vollkommen ausschließt (ist ein seltenes Extrem, zugegeben, veranschaulicht aber, was ich meine)
Man kann natürlich anpassbare Seiten anbieten, aber will man jede Website anpassen (müssen)?
Natürlich kann man letzte Einstellungen speichern wie YouTube, wo davon ausgegangen wird, dass man beim nächsten Besuch dieselbe Lautstärke gut findet, wie beim letzten Seitenbesuch. Das kann am Morgen nach der Party im wahrsten Sinne des Wortes zu Kopfschmerzen führen!
Darum: es gibt keine allgemeingültig beste Lösungen. Jede hat ihre Vor- und Nachteile.
Von dieser Aussage nehme ich ausdrücklich Design-Prinzipien aus, die da heißen mobile-first, progressive enhancement oder inclusive design…
Marc
Hi there,
Hat nichts mit Arroganz zu tun.
Eh net, aber der OP hat mich als arrogant bezeichnet, also tue ich ihm den Gefallen.
Elemente auf- und zuklappen zu können hat gerade auf Smartphones mit wenig Bildschirmplatz schon mitunter seinen Charme und seine Berechtigung.
Da stimme ich ja zu. Aber wenn durch das Aufklappen konstruktionsbedingt jedesmal die darunterliegenden Elemente neu gruppiert werden und die Seite dadurch immer wieder anders aussieht, dann bringt das eine Unruhe in die Darstellung, die mich (und sicher nicht nur mich) massiv stört und vor allem vom Inhalt ablenkt. Das habe ich mir erlaubt zu kritisieren…
Negative Bewertung von mir! Schade nur das bisher auf meine Fragestellung NICHT eingegangen wurde, sondern NUR so ein belangloses laber BLABLUPP entstanden ist!
Hallo einsiedler,
Schade nur das bisher auf meine Fragestellung NICHT eingegangen wurde, sondern NUR so ein belangloses laber BLABLUPP entstanden ist!
Klawischniggs Beitrag ist in meinen Augen weder belanglos noch laber noch Blablupp. Auch der Austausch zwischen Marc und Gunnar enthält wichtige Dinge.
Nimm klawischniggs Hinweise als gute Ratschläge an. Dein ständiges
Negative Bewertung von mir!
hilft dir nicht weiter, im Gegenteil du machst dich lächerlich.
Bis demnächst
Matthias
Hej einsiedler,
Nun habe ich aber ein Paar Fragen: A)
Wie schafft man so eine Art Weiche mit @media, wenn der Browser <details> & <summary>
versteht? Das DANN eben <details> & <summary> normal angewendet wird. Als Fallback soll dann eben das java-script aktiv werden, wenn das NICHT der Fall ist. Wäre es Dann noch sinnvoll wenn java-script deaktiviert ist, dass dann <details open> aktiv wird? was meint ihr? Oder braucht man das gar nicht?
Gibt es wie gesagt als fertige Lösung auf html5please.com
B)
Wie bekomme ich es hin wenn man auf weiter scrollen klickt das sich dann das
"weiter lesen..." zu "wieder zuklappen..." wandelt. Dazu benötige ich Pseudoelemente + display:hidden; und ::before & ::after ist das richtig? Aber wie geht das dann?
Du reagierst auf das Vorhandensein oder Fehlen von open…
[open]::before {
content: 'Dein Text';
}
Aber genau das gehört da eigentlich nicht rein - höchstens zusätzlich. summary ist eine Zusammenfassung, wie der Name schon sagt. Darf laut Spec auch ein Überschriften-Element enthalten.
Marc
Ja gut, aber wie "beeinflusst" man dann "summery", das wäre mir lieber und ist dann wohl auch "richtiger" !
LG der einsiedelnde
Hej einsiedler,
Ja gut, aber wie "beeinflusst" man dann "summery", das wäre mir lieber und ist dann wohl auch "richtiger" !
Ich verstehe die Frage nicht... 😨
In summary gehört eine Zusammenfassung des dann folgenden. Also was willst du da beeinflussen?
Da Icons normalerweise beschriftet gehören, spricht nichts dagegen dem optischen Hinweis (Dreieck zeigt nach rechts oder nach unten) per CSS-generiertem Content eine lesbare alternative hinzuzufügen (ich rate sogar dazu).
Wie das geht steht in meinem letzten Post…
Marc
Achnein, entschudige Marc, habe mich mißverständlich ausgedrückt:
Das dort ein Pfeil erscheint,
erst in seitlicher Richtung zeigend dann beim "anklicken" zeigt der Pfeil nach unten,
DAS ist auch gut so!
Auch der pointer der Sichtbar macht wo es "anzuklicken" gilt. Wenn Du mir zu einer Überschift (<summery>) rätst, das ist auch gut.
Nein, ich meinte wenn also mit dem pointer die <summery> "angeklickt"
wurde, der Text scrollt runter, aber dann steht ja immernoch meine
Überschrift "hier weiter lesen..." dort,
aber der Test der "aufgeklappt" wurde steht ja schon dort.
Dann würde ich lieber dort stehen haben
z.B. "wieder zuklappen..." oder so ähnlich...
Ginge das? Wäre es sinnvoll?
Also wenn beim "aufklappen" der <summery> immer noch hier weiter lesen..."
steht find ich das doppeltgemoppelt ...
Vielen Dank für Deine Unterstützung, find ich gut, jedenfalls hilfreicher
als dieses zerredende BLABLUPP (obwohl stimmt, das daraus entstandene
"Zwiegespräch" hat doch
einige wertvolle verwertbare Infos erbracht...
Gruß der einsiedelnde
Hej einsiedler,
Auch der pointer der Sichtbar macht wo es "anzuklicken" gilt. Wenn Du mir zu einer Überschift (<summery>) rätst, das ist auch gut.
Nein, habe ich nicht. 😉
Ich habe nur gesagt, dass die Spec an dieser Stelle eine erlaubt. Ob du eine verwenden solltest, hängt vom drum rum ab - da Deine Texte kleine Artikel sind, solltest (sieht mir jedenfalls danach aus), solltest vermutlich welche benutzen.
Nein, ich meinte wenn also mit dem pointer die <summery> "angeklickt"
wurde, der Text scrollt runter, aber dann steht ja immernoch meine
Überschrift "hier weiter lesen..." dort,
„hier weiter lesen“ ist aber eine saudämliche Zusammenfassung! 😉
summary = Zusammenfassung (oder halt eine Überschrift).
„hier weiter lesen“ bitte höchstens zusätzlich verwenden als Kenntlichmachung.
Ginge das?
Ja, abhängig davon, ob das Attribut open vorhanden ist.
Wäre es sinnvoll?
Ja. (Für Sehende, Blinde bekommen das von ihrem Screenreader eh gesagt).
Vielen Dank für Deine Unterstützung, find ich gut, jedenfalls hilfreicher als dieses zerredende BLABLUPP (obwohl stimmt, das daraus entstandene "Zwiegespräch" hat doch einige wertvolle verwertbare Infos erbracht…
Wärst du mal mit deinen Plussen so großzügig, wie mit deinen Minussen… 😉
Marc
@@marctrix
aber der Test der "aufgeklappt" wurde steht ja schon dort. Dann würde ich lieber dort stehen haben
z.B. "wieder zuklappen..." oder so ähnlich...
Ginge das? Wäre es sinnvoll?Ja. (Für Sehende, Blinde bekommen das von ihrem Screenreader eh gesagt).
Inwiefern wäre für Sehende ein Hinweistext sinnvoll, der für ein Ding, was darunter zu sehen ist oder eben nicht, angibt, ob es zu sehen ist oder eben nicht?
Bei Screenreadern rennt man schnell in das Problem, was Heydon in „Toggle Buttons“ unter Changing labels beschreibt.
LLAP 🖖
Hej Gunnar,
@@marctrix
aber der Test der "aufgeklappt" wurde steht ja schon dort. Dann würde ich lieber dort stehen haben
z.B. "wieder zuklappen..." oder so ähnlich...
Ginge das? Wäre es sinnvoll?Ja. (Für Sehende, Blinde bekommen das von ihrem Screenreader eh gesagt).
Inwiefern wäre für Sehende ein Hinweistext sinnvoll, der für Ding, was darunter zu sehen ist oder eben nicht, angibt, ob es zu sehen ist oder eben nicht?
In meinen Kursen stelle ich immer wieder fest, dass Menschen bestimmte „Dinge“ nicht erkennen.
Akkordeons gibt es zwar, sie sind aber nicht so weit verbreitet, dass sie von jedem gelegentlichen Webnutzer auf Anhieb als solche erkannt werden (und ich rede nicht von Menschen mit Behinderungen).
Ein geschlossenes summary wird nicht von jedem allein aufgrund des Pfeiles als interaktives Element erkannt.
Darum schreiben die WCAG auch vor, dass Icons beschriftet gehören.
Bei Screenreadern rennt man schnell in das Problem, was Heydon in „Toggle Buttons“ unter Changing labels beschreibt.
Ist das so? Kommt drauf an, wie der Browser sich verhält. Zum Beispiel könnte der Fokus nach dem Öffnen der Details ja hinter summary stehen — so wie der Fokus beim Aktivieren eines Links nicht beim Link bleibt, sondern an dessen Ziel springt.
Ich bin kein SR-Experte, würde aber dieses Verhalten erwarten. Dann bekommen SR-Nutzer beim zurückkehren zu summary dasselbe vorgelesen, wie das was Sehenden angeboten wird.
Im Beispiel von Heydon bleibt der Fokus ja auf dem Play/Pause-Button. Das sollte hier nicht passieren…
Wie ist es denn in der Praxis? — Kannst ja mal in die Runde fragen 😉
Marc