Welche hover-Effekte sind responsive mehr oder weniger ungünstig?

[Martinus33]

Hallo,
wenn die Site auch responsive für Mobil-Geräte gut sein soll, scheint u.a. hover noch immer für viele Mobil-Geräte ein Problem zu sein.

Ich kenne eigentlich nur die Sache mit Dropdown-Menüs, die nicht per Klick, sondern per hover ausklappen sollen. Natürlich blöd, wenn das mobil nicht klappt und der User nicht auf die Unterseiten navigieren kann.

Ansonsten wird hover meist zum Ändern des Aussehens von Links im Text oder der Navigation benutzt.

Bei all den gängigen Einsatzmöglichkeiten für hover und all den denkbaren Mobil-Geräten: Welche hover-Funktionen machen auffallende, verbreitete Probleme und sollte auf jeden Fall vermieden werden?

 

[benneq]

Wenn du drüber nachdenkst, sollte dir klar werden, dass _keine_ Hover-Funktion auf 'nem Tablet oder Smartphone funktionieren wird. Und selbst wenn es irgendwie funktionieren sollte, benutzt es niemand.

Im Grunde heißt das: Bau so viel Hover-Kram ein wie du magst, solang das die Funktionalität auf Mobilgeräten nicht beeinträchtigt. In Bezug auf dein Dropdown Menü bedeutet das also, dass es sowohl per Hover (PC) als auch per Klick (PC / Mobil) funktionieren sollte.

Mit JavaScript kannst du ja den Browser auslesen und die entsprechenden CSS Funktionen deaktivieren. Dafür gibt's bestimmt auch schon die ein oder andere Library. Per CSS Media Query wird es heutzutage wohl schwer ein Smartphone oder Tablet (die ja schon mehr als FullHD bieten können) zu erkennen.

EDIT: Das hier klingt ganz nach deinem Problem: http://www.philipp-kuehn.com/2013/ios-und-der-hover-effekt/

 

[Daaron]

Nicht jedes Touch-Gerät ist mobil. Ich hatte mal einen ARbeitsplatz mit nem 24" Multitouch Monitor. Sehr geil...
Nicht jedes Mobilgerät ist Touch. Ich denk da nur an Netbooks, oder Convertibles. Jetzt wird es als Touch-Tablet verwendet, jetzt als Laptop mit Maus,...

1.) Schnapp dir ne JS-Bibliothek wie Modernizr, um Touch-Fähigkeiten auszuloten. Media Queries können das (noch?) nicht. Handle danach entsprechend.
2.) MANCHE Touch-Devices interpretieren den ersten Tap auf ein :hover als Hover und erst den zweiten Tap als Klick. MANCHE. Und selbst die nicht zuverlässig....
3.) Scroll-Gesten sind ein Tap -> lösen teilweise :hover aus -> sorgen für idiotisches Verhalten oder gar für heftige Ruckler

Und deshalb predige ich dir ja auch schon ewig: Mobile First! Mobile First! Mobile First!
Wenn es nachweislich auf nem x-beliebigen Smartphone gut aussieht und bedienbar ist, dann kannst du dich den Feinheiten von Laser-Maus und 24" FullHD stellen.

 

[Martinus33]

@benneque:
Ich weiß nicht, ob der auf iOS abzielende Artikel auf andere Mobil-Geräte übertragbar ist, aber hover-Links scheinen ganz gut handelbar zu sein für den User.
Das war eben meine Hoffnung: Speziell hover-Links sollten von den Geräten als solche erkannt und irgendwie vernünftig berücksichtigt werden. Habe nicht erwartet, dass das genauso sein würde wie desktop, aber hover-Links sind sinnvoll und verbreitet, also warum sollten die mobile-Geräte nicht versuchen, das "irgendwie" umzusetzen?

Dropdown wird bei mir dann nur per Klick aufgeklappt. Damit sollte das auch erledigt sein.

@Daaron:
Ja, ich weiß, aber es ist wie bei den meisten "Predigern" : Sie sind so sehr mit predigen beschäftigt, dass Sie das Zuhören vergessen. Ich glaube, es gibt mittlerweile 5 oder 6 Threads in kurzer Zeit, in denen ich nur kurz "Wordpress" erwähne und du jedes Mal dessen Grundsatz-Nachteile wie Plugins/Sicherheit monierst. Ich sage dann jedes Mal: WP steht fest bla bla, aber beim nächsten Thread dann wieder... .

Das Gleiche mit mobile first. Ich bin kein Hobby- oder Profi-Designer, sondern nur technischer Laie und versuche mit einem recht fähigen Theme, das weitgehend ohne Coding auskommt, das Beste herauszuholen. Dieses Theme bietet keinen konsequenten mobile-first-Ansatz, sondern fängt desktop an, bietet dann aber durchaus Möglichkeiten wie z.B. responsive mit breakpoints und Ausblenden einzelner Elemente ect.

 

[Midnight Sun]

Ob er nicht zuhört oder nicht, steht wohl auf einem anderen Blatt

Recht hat er aber! Mobile First! wäre hier der bessere Weg, da du mit einem Minimum anfängst und erst dann anfängst, deine Webseite zu erweitern.

Klar kann man hier und da auch auch bei einem Desktop-Viewport anfangen, macht es so aber nur unnötig kompliziert.

Die Nachteile halten sich bei Mobile First! in Grenzen und von Mal zu Mal optimiert man sein Verhalten, seine Techniken ect.

 

[Daaron]

Martinus, manchmal ist Abreißen/Neu bauen einfach der bessere Weg. Bei dir wäre er es definitiv. Was bringt dir ein vorgegebenes Theme, wenn es deine Anforderungen nicht erfüllt oder die notwendigen Anpassungen am Ende so umfangreich sind wie das gesamte Theme? Da schmeißt man den Mist direkt raus und schreibt ihn SAUBER, KOMPAKT und ERWEITERBAR neu.

Wenn dir das zu viel ist, dann musst du eben mit den Konsequenzen leben. Das heißt, dass du jetzt gucken musst, wo es überall bei Mobile hakt und dort überall Fallbacks und Fixes drauf ballerst. Der Aufwand ist signifikant höher. Ich weiß wovon ich rede, ich hab dasselbe Theater schon durch. Inzwischen habe ich meinem Chef verboten, mir mit eingekauften Themes zu kommen, außer ich hab sie vorher gründlich unter die Lupe nehmen können. Andernfalls verschwendet er nur unsere Zeit und unseren Profit.

@benneque:
Ich weiß nicht, ob der auf iOS abzielende Artikel auf andere Mobil-Geräte übertragbar ist, aber hover-Links scheinen ganz gut handelbar zu sein für den User.

Der Artikel ist, wie du meienm vorigen Post entnehmen kannst, sehr wohl für andere Devices übertragbar. Es kommt am Ende auf OS udn Browser an. Der eine interpretiert es so, der andere so. Es sind schlichtweg keine Vorhersagen möglich.

Und auch a:hover ist eben NICHT so einfach. a:hover löst auch bei Drag/Scroll aus, wie ich schon geschrieben habe. Das kann zu unerwartetem Verhalten führen, von "einfach hässlich" bis hin zu "buggt total".
Spätestens, wenn JS-Events auf dem Ding liegen, wars das endgültig.

Lass :hover für Touch-Devices weg, ist besser.

Das Gleiche mit mobile first. Ich bin kein Hobby- oder Profi-Designer, sondern nur technischer Laie...

Wieso werden hier laufend Laien mit professionellen Aufgaben betraut? Was für vollkommen bescheuerte Arbeitgeber habt ihr?

 

[Martinus33]

Im Hinblick auf die jetzige alte HTML-Site mit fester Breite auf Tabellenbasis und mit Footer-Haupt-Navi, ohne social buttons ect... ist das bereits ein Komplett-Abriss.

Auf hover ganz verzichten ist für mobile besser als das, was die Geräte daraus machen oder in naher Zukunft machen können? Hm...

Arbeitgeber? Es soll auch Selbständige, Freiberufler, Schüler, Studenten, Rentner und Außerirdische geben, deren Website ein CMS braucht und bei der Gelegenheit mobilefriendly sein soll.

Die mein Theme-Anbieter durchaus fleißig ist, könnte sich in puncto mobile außerdem etwas ändern demnächst. Aber darauf kann ich mich nicht verlassen und ewig warten.

 

[Daaron]

Auf hover ganz verzichten ist für mobile besser als das, was die Geräte daraus machen oder in naher Zukunft machen können? Hm...

So siehts aus. Ich hab selbst gesehen, wie ein simples Drag&Scroll auf einem iPhone extremes Ruckeln ausgelöst hat, nur weil eine Bildergalerie auf dem Schirm war und jedes Bild ein :hover hatte, durch das es per transition ein wenig verformt wurde.

Arbeitgeber? Es soll auch Selbständige, Freiberufler, Schüler, Studenten, Rentner und Außerirdische geben, deren Website ein CMS braucht und bei der Gelegenheit mobilefriendly sein soll.

Jo, aber die erstellen die Webseite nicht SELBST, sondern bezahlen dafür Profis, die sich mit dem Scheiß auskennen.

Angenommen, ich wäre Klempner. Ich könnte wunderbar Rohre verlegen, Klos installieren,... Denkst du wirklich, ich würde mir meine EIGENE Webseite schreiben? Die Zeit könnte ich produktiver verwenden, indem ich Klos installiere. Das verdiente Geld geb ich dann einem professionellen Webentwickler, egal ob Agentur oder Freiberufler,...
Wenn ich ein Klo installiert haben will, dann frag ich doch auch nicht in einem Klempnerforum, wie rum ich die Schüssel einsetzen soll. Ich verschwende doch meine Zeit nicht damit, Klempnern zu lernen für EINE Installation. Ich lass es direkt einen Profi machen.