MouseOver bei Touchscreens

[Tom]

Hello,

ich daddel jetzt ca. einen Monat mit diesem Tablet rum und habe schon etliche Fragen gesammelt, die ich klären wollte...

Aber eine Frage vervolgt mich von Anfang an und die bekomme ich nicht gelöst:
Wo bleibt der MouseOver-Effekt, oder auch der das Title-Attribute eines Links beim Touchscreen?

Kann man das irgendwie retten?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Mitleser]

Aber eine Frage vervolgt mich von Anfang an und die bekomme ich nicht gelöst:
Wo bleibt der MouseOver-Effekt, oder auch der das Title-Attribute eines Links beim Touchscreen?
Kann man das irgendwie retten?

Ohne TouchOver schwierig.

[1UnitedPower]

Meine Herren!

Kann man das irgendwie retten?

Die Browserhersteller geben sich größte Mühe. :hover-Navigationen funktionieren in der Regel auch auf Touch-Devices. Die Menüs öffnen sich dann bei Berührung. Es ist aber nicht immer und überall möglich eine so sinnvolle Umsetzung für Touch-Geräte zu finden, dafür sind die Eingabegeräte dann doch zu unterschiedlich. Im Idealfall denkt der Webseiten-Entwickler schon daran und benutzt zum Beispiel die abstrakteren Pointer-Events anstatt der spezialisierten Maus-Events.

Für das title-Attribut könntest du dir eine entsprechende Regel in deinem User-Stylesheet anlegen:

content: attr(title);
}

Wenn sie nur auf Bedarf angezeigt werden sollen, könntest du dafür ein Bookmarklet schreiben, der diese CSS-Regel importiert.

Nachteil dieser Methode ist allerdings, dass sie nicht auf "Replaced Elements" funktioniert, zum Beispiel auf <input>-Elementen. Falls das gewünscht ist, muss man den Ansatz erweitern und für solche Elemente echte neue Elemente in das Dokument einfügen. Das kann natürlich zu unerwünschten Nebeneffekten mit der bestehenden Seite führen.

[Tom]

Hello,

Für das title-Attribut könntest du dir eine entsprechende Regel in deinem User-Stylesheet anlegen:

content: attr(title);
}

Wenn sie nur auf Bedarf angezeigt werden sollen, könntest du dafür ein Bookmarklet schreiben, der diese CSS-Regel importiert.

Da komme ich jetzt nicht mit, was das genau bewirken soll.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Gunnar Bittersmann]

@@Tom:

nuqneH

content: attr(title);
}

Da komme ich jetzt nicht mit, was das genau bewirken soll.

Das Anzeigen der Inhalte aller title-Attribute* in jedem Browser. Halte ich für wenig sinnvoll.

Wenn eine Information wichtig ist, sollte sie auch ohne Nutzerinteraktion dargestellt werden. Wenn eine Information unwichtig ist, warum sollte sie bei Hover erscheinen?

Qapla'

* Die Wortwahl („Inhalte“ statt „Werte“) zeigt, wie kaputt das Konzept ist. Inhalte gehören in Elemente, nicht in Attribute.

[1UnitedPower]

Meine Herren!

Für das title-Attribut könntest du dir eine entsprechende Regel in deinem User-Stylesheet anlegen:

content: attr(title);
}

Wenn sie nur auf Bedarf angezeigt werden sollen, könntest du dafür ein Bookmarklet schreiben, der diese CSS-Regel importiert.

Da komme ich jetzt nicht mit, was das genau bewirken soll.

Du wolltest doch den Inhalt des title-Attributs angezeigt haben. Desktop-Browser können das von Haus aus, wenn man mit der Maus drüber fährt. Mobile-Browser haben keine Standard-Darstellung für dieses Attribut. Deshalb habe ich ich zwei potenzielle Lösungen skizziert:

1. Der Inhalt des title-Attributs immer und überall anzeigen: Fiddle

2. Den Inhalt nur bei Bedarf mit einem Bookmarklet einblenden, das Bookmarklet könnte so aussehen:
   javascript:document.styleSheets[0].insertRule('[title]::after{content:attr(title);}',0);

[Tom]

Hello,

Für das title-Attribut könntest du dir eine entsprechende Regel in deinem User-Stylesheet anlegen:

content: attr(title);
}

Wenn sie nur auf Bedarf angezeigt werden sollen, könntest du dafür ein Bookmarklet schreiben, der diese CSS-Regel importiert.

Da komme ich jetzt nicht mit, was das genau bewirken soll.

Du wolltest doch den Inhalt des title-Attributs angezeigt haben. Desktop-Browser können das von Haus aus, wenn man mit der Maus drüber fährt. Mobile-Browser haben keine Standard-Darstellung für dieses Attribut. Deshalb habe ich ich zwei potenzielle Lösungen skizziert:

1. Der Inhalt des title-Attributs immer und überall anzeigen: Fiddle

2. Den Inhalt nur bei Bedarf mit einem Bookmarklet einblenden, das Bookmarklet könnte so aussehen:
   javascript:document.styleSheets[0].insertRule('[title]::after{content:attr(title);}',0);

Ja und nein.
Ich weiß jetzt auch gar nicht, was ich hier als Vorrede löschen sollte. Es ist alles wichtig.
Ich wollte ja nicht alle Informationen dauerhaft einblenden, auch wenn Gunnar das scheinbar am besten fände.

Mir ging es darum, ob man die vielen Seiten mit "Title-Attributen" aus der "Generation Maus" retten kann für die Benutzer der Generation "Touch".
Früher haben wir ja immer gelernt, "You can look, but not touch!", aber das gilt ja nun nicht mehr. Ok, Maus ist auch eine Einschränkung, aber ohne Arme auch kein Touch.

Die hinterlegten Zusatzinformationen, speziell bei Links, sind so nicht für Toucher zugänglich. Das ist ein Designfehler. Man kann mMn nach über 30 Jahren bewährter Technik (Mausbedienung) die nicht einfach verleugnen.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[M.]

Mahlzeit,

Mir ging es darum, ob man die vielen Seiten mit "Title-Attributen" aus der "Generation Maus" retten kann für die Benutzer der Generation "Touch".

Die Frage ist doch eher, welche Seiten auf Touch-Plattformen ohne Änderungen laufen und ob diese eine Berechtigung haben, gerettet zu werden.

Und wenn es eh (meist nötige) Anpassungen gibt, ist es ja kein Problem, das title-Konzept ebenfalls anzupassen.

[Tom]

Hello,

Mir ging es darum, ob man die vielen Seiten mit "Title-Attributen" aus der "Generation Maus" retten kann für die Benutzer der Generation "Touch".

Die Frage ist doch eher, welche Seiten auf Touch-Plattformen ohne Änderungen laufen und ob diese eine Berechtigung haben, gerettet zu werden.

Das liegt erst einmal im Entscheidungsbereich des Betreibers.

Wenn es sich um Autos, Motoren und Benzin handeln würde, gingen die Stürme schon los. Da sagt auch keiner, der Autohersteller ist schuld, wenn es für über 70% des Bestandes kein passendes Benzin mehr geben würde.

Und wenn es eh (meist nötige) Anpassungen gibt, ist es ja kein Problem, das title-Konzept ebenfalls anzupassen.

Deshalb frage ich ja, wie man das lösen könnte. Es hat mich schon immer gestört, dass keine Bedienung per Tastatur möglich war. Aber man hat sich eben an die Maus gewöhnt, die sich ja auch immer wieder durchsetzt durch alternative Konzepte, wie Touchpad, Joystick ( der kleine rote Nippel in der Tastatur), Trackball, u.v.m.

Ich kenne kaum einen Notebook/Laptop-Benutzer, der mit dem Teil tatsächlich arbeitet und keine Maus dazu hat. Dann aber heute meistens kabellos.

Eine Alternative wäre die "Blicklupe". Das Touchpad bemerkt aufgrund seiner Kameras, wohin Du gerade blickst und wenn Du dann einen titulierten Breich mit fragendem Gesichtsausdruck länger betrachtest, kommt ein kleiner "Button" zum Vorschein. Wenn Du den dann auch noch länger anschaust, kommt der "Tooltip".

Ist natürlich schon wieder diskriminierend für Blinde, aber die können mit der Touchpad-Technologie sowieso noch nichts anfangen, solange es keine "Braille-Pads" gibt. Für Normal-PCs gibt es die ja schließlich auch.

Dann bleibt es aber in erster Linie ein Problem des Wiedergabegerätes und seines Browsers und am Quellcode müsste man (nichts | nicht sofort etwas) ändern.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Matthias Apsel]

Om nah hoo pez nyeetz, Tom!

Und wenn es eh (meist nötige) Anpassungen gibt, ist es ja kein Problem, das title-Konzept ebenfalls anzupassen.

Deshalb frage ich ja, wie man das lösen könnte. Es hat mich schon immer gestört, dass keine Bedienung per Tastatur möglich war.

War. Du sagst es. :focus existiert und content: attr() funktioniert.

[…] Joystick ( der kleine rote Nippel in der Tastatur)

offizielle Bezeichnung ist Trackpoint

Matthias

[Tom]

Hello,

Deshalb frage ich ja, wie man das lösen könnte. Es hat mich schon immer gestört, dass keine Bedienung per Tastatur möglich war.

War. Du sagst es. :focus existiert und content: attr() funktioniert.

Aber wie will ich den Focus bekommen ohne Tastatur und Maus?
Wenn der Link gleich mit aktiviert wird, ist es ja zu spät.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Matthias Apsel]

Om nah hoo pez nyeetz, Tom!

Deshalb frage ich ja, wie man das lösen könnte. Es hat mich schon immer gestört, dass keine Bedienung per Tastatur möglich war.

War. Du sagst es. :focus existiert und content: attr() funktioniert.

Aber wie will ich den Focus bekommen ohne Tastatur und Maus?
Wenn der Link gleich mit aktiviert wird, ist es ja zu spät.

Dein

Es hat mich schon immer gestört, dass keine Bedienung per Tastatur möglich war.

habe ich nicht auf tablets und  Co. bezogen.

Matthias

[M.]

Mahlzeit,

Aber wie will ich den Focus bekommen ohne Tastatur und Maus?
Wenn der Link gleich mit aktiviert wird, ist es ja zu spät.

Du stellst IMO die falsche Frage. Die richtige wäre, wieso ist ein Focus nötig?

Ich hatte noch nie einen Anwendungsfall, bei dem zur Bedienung einer Webseite zwingend ein title
nötig gewesen wäre.

Also stell ich dir auch die Frage, wieso benötigt dein Seitenkonzept einen Fokus ohne Klick? Ich würde eher das Konzept ändern, als eine Notwendigkeit zu konstruieren, die in der realen Welt nicht existiert.

[Tom]

Hello,

Aber wie will ich den Focus bekommen ohne Tastatur und Maus?
Wenn der Link gleich mit aktiviert wird, ist es ja zu spät.

Du stellst IMO die falsche Frage. Die richtige wäre, wieso ist ein Focus nötig?

Ich hatte noch nie einen Anwendungsfall, bei dem zur Bedienung einer Webseite zwingend ein title
nötig gewesen wäre.

Also stell ich dir auch die Frage, wieso benötigt dein Seitenkonzept einen Fokus ohne Klick? Ich würde eher das Konzept ändern, als eine Notwendigkeit zu konstruieren, die in der realen Welt nicht existiert.

Ganz einfach: Es sind nicht meine Seitenkonzepte.

Im Übrigen stimme ich mit Gunnar soweit überein, dass ich das ganze Konzept HTML für zusammengestoppelte Kinderkacke halte. Aber das kann man nach teilweise 24 Jahren nur schwer reparieren.

Ich repariere auch nur Seitenkonzepte, schließe Sicherheitslücken, mache dafür relevante Seiten druckfähig, usw., soweit es meine bescheidenen Kenntnisse und die Gutwilligkeit des Forums zulassen :-)

Den Betreibern der jeweiligen Webseite ist es selten wirklich Geld wert, etwas grundlegend Neues, möglichst unter Beibehaltung der Suchergebnisse in den Suchmaschinen (da fängt die Verfolgungsjagd schon wieder an) planen und aufbauen zu lassen.

Dabei übersehen sie oft, wieviel Geld sie früher für Prospekte, Verteilung, Katalogeinträge, Telefonbücher, Zeitungswerbung, usw. bezahlt haben und dass sich das größtenteils nur verlagert hat - und dass man im Internet mehr Platz hat, als in einer Zeitungsanzeige, mit der passenden Tour durch die Seiten quasi unbegrenzt.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[M.]

Mahlzeit,

Ich repariere auch nur Seitenkonzepte,

Na aber da hast du es doch ;)
Genau da gehören solche Probleme rein, wie wenn die Benutzung von title und alt anhängig ist.

Den Betreibern der jeweiligen Webseite ist es selten wirklich Geld wert, etwas grundlegend Neues, möglichst unter Beibehaltung der Suchergebnisse in den Suchmaschinen (da fängt die Verfolgungsjagd schon wieder an) planen und aufbauen zu lassen.

Kenn ich. Dann bleiben nur Umberatung oder der Kunde akzeptiert, dass es auf nem Tablet einfach nicht funktioniert.
Wenn er es probiert und immer noch nicht will, dass es geändert wird, würde ich ihm empfehlen, er soll sich nen 5-Klässler holen, der macht genau den Murks, den er will für weniger Geld.
Und ja, ich weiss, dass die meisten keine Aufträge ablehnen können.

Dabei übersehen sie oft, wieviel Geld sie früher für Prospekte, Verteilung, Katalogeinträge, Telefonbücher, Zeitungswerbung, usw. bezahlt haben und dass sich das größtenteils nur verlagert hat - und dass man im Internet mehr Platz hat, als in einer Zeitungsanzeige, mit der passenden Tour durch die Seiten quasi unbegrenzt.

Wenn du ihnen das aber nicht klar machen kann (mit Zahlen kann man das eindeutig belegen) machst du was falsch. Aber, ohne dir zu nahem treten zu wollen, bei einigen deiner Beiträge hier bezweifel ich ernsthaft, dass du in der Lage bist, einen Kunden davon zu überzeugen, was gut für ihn ist und was ihm auf dauer Geld spart.

Kann sein, dass ich dich falsch einschätze, ich lese dich nur im Forum, kenne deine Homepage (beim letzten Besuch hatte die einige tote Links), weiss aber nichts persönlich von dir.

[Tom]

Hello,

Kann sein, dass ich dich falsch einschätze, ich lese dich nur im Forum, kenne deine Homepage (beim letzten Besuch hatte die einige tote Links), weiss aber nichts persönlich von dir.

Kann sein. Kann aber auch sein, dass ich einfach nicht so schlau bin, wie Du :-P
Ich bin ja auch nicht mehr der Jüngste. Da hat man manchmal verschrobene Ansichten vom Spiel "Frage und Antwort". Und meine Webseite ist wirklich vernachlässigt. Das stimmt. Da würde ich mal eine umfangreiche Design- und Marketingberatung gebrauchen können.

Wo ist eigentlich der Link zu deiner Webseite?
Wäre doch jetzt langsam mal Zeit, dass Du - bei all der Kritik - ein bisschen 'was von Dir zeigst :-)

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[M.]

Mahlzeit,

Wo ist eigentlich der Link zu deiner Webseite?

Welche davon ? ;)

Wäre doch jetzt langsam mal Zeit, dass Du - bei all der Kritik - ein bisschen 'was von Dir zeigst :-)

Könnte ich, dann müsste ich mir aber anhören, wie schlecht das Design ist, wie alt der Code usw. :D
Bei meinen eigenen Projekte ist es leider so, dass ich nicht dazu komme, viel dran zu machen. Als gutes Beispiel werden die nicht dienen. Und Kundenseiten darf ich nicht veröffentlichen, die wollen fast alle nichtmal in eine Referenzliste aufgenommen werden, deshalb führe ich sowas gar nicht.

Achja.... responsive bzw. Tablet-Freundlich ist aktuell keine meiner Seiten. Daran arbeite ich, wird aber noch einiges an Zeit in Anspruch nehmen. Bin halt kein Designer sondern Programmierer ;)

[Tom]

Hello,

Wo ist eigentlich der Link zu deiner Webseite?

Welche davon ? ;)

Wäre doch jetzt langsam mal Zeit, dass Du - bei all der Kritik - ein bisschen 'was von Dir zeigst :-)

Könnte ich, dann müsste ich mir aber anhören, wie schlecht das Design ist, wie alt der Code usw. :D
Bei meinen eigenen Projekte ist es leider so, dass ich nicht dazu komme, viel dran zu machen. Als gutes Beispiel werden die nicht dienen. Und Kundenseiten darf ich nicht veröffentlichen, die wollen fast alle nichtmal in eine Referenzliste aufgenommen werden, deshalb führe ich sowas gar nicht.

Achja.... responsive bzw. Tablet-Freundlich ist aktuell keine meiner Seiten. Daran arbeite ich, wird aber noch einiges an Zeit in Anspruch nehmen. Bin halt kein Designer sondern Programmierer ;)

Nur Mut!

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Gunnar Bittersmann]

@@Tom:

nuqneH

Ich weiß jetzt auch gar nicht, was ich hier als Vorrede löschen sollte. Es ist alles wichtig.
Ich wollte ja nicht alle Informationen dauerhaft einblenden, auch wenn Gunnar das scheinbar am besten fände.

Nicht alle, sondern wichtige. Unwichtige weglassen.

Und wenn du meinst, alles sei wichtig, hast du vielleicht ein Content-Strategy-Problem.

Mir ging es darum, ob man die vielen Seiten mit "Title-Attributen" aus der "Generation Maus" retten kann für die Benutzer der Generation "Touch".

Die erste Frage ist nicht, ob man das kann, sondern ob man das sollte. Oder ob mystic meat nicht schon für die Generation Maus suboptimal war.

Früher haben wir ja immer gelernt, "You can look, but not touch!", aber das gilt ja nun nicht mehr.

Nicht? ;-)

Die hinterlegten Zusatzinformationen, speziell bei Links,

Welche sollten das sein? Linktitel (d.h. die Elementinhalte der a-Elemente) sollten sprechend sein und (in ihrem jeweiligen Kontext)  dem Nutzer genügend Anhaltspunkte über die damit referenzierten Inhalte geben.

Qapla'

[dedlfix]

Tach!

Wo bleibt der MouseOver-Effekt, oder auch der das Title-Attribute eines Links beim Touchscreen?

Tablets und Smartphones mit auf Wacom-Technik basierenden Stiften erkennen selbigen beim drüberschweben und können das machen, was sonst bei MouseOver passiert.

dedlfix.

[molily]

Wo bleibt der MouseOver-Effekt, oder auch der das Title-Attribute eines Links beim Touchscreen?

Kann man das irgendwie retten?

Kann man nicht. Sollte man m.E. nicht.

Touch-Bedienung gehört die Zukunft. Was nicht heißt, dass es Zeigen/Hover nicht mehr geben wird, aber es kann nicht mehr selbstverständlich vorausgesetzt werden. Das konnte es eigentlich noch nie, weil andere Bedienarten ebenfalls existierten.

Am einfachsten ist es, nicht mehr auf :hover für wichtige Interaktionen zu vertrauen. Was nicht heißt, dass es keine Hover-Effekte geben sollte. Aber man sollte den Status einer UI-Control nicht grundlegend durch Hover ändern (z.B. Aufklappen eines Menüs, Anzeigen von Zusatzinfos). Was übergreifend funktioniert, ist lediglich Control-Aktivierung (Klicks/Taps/Tastendruck/…).

Nun mag es sinnvoll sein, manche Menüs beim Hover zu öffnen oder zusätzliche Inhalte anzuzeigen. Das ist auch weiterhin möglich, weil Touch-Browser JavaScript-Mausevents emulieren. Hat ein Element einen mouseover-/mouseenter- und einen click-Handler, wird beim ersten Tappen der mouseover- und beim zweiten Tappen der click-Event ausgelöst. Zumindest in einigen Browsern, rechnen kann man damit nicht.

Es lässt sich darüber streiten, ob dieses doppelte Tapping benutzerfreundlich und intuitiv ist. Ich würde es vermeiden und Interfaces so bauen, dass Menüs per Aktivierung geöffnet werden und Zusatzinfos entweder immer angezeigt werden oder durch einen vielseitig aktivierbaren Link/Button.

Touch-fähige Browser emulieren auch :hover bei einem Tap, aber die meisten :hover-Ziele sind Links und Buttons, insofern fallen :hover und Aktivierung beim Tap zusammen. Das macht die Unterscheidung zwischen Hover (führt zu Highlight, Tooltip…) und Klick (führt zu Aktion, Navigation…) nichtig.

Mathias