Hover wird seit Jahren auf Websites verwendet, um Besuchern einen Ausschnitt von Informationen bereitzustellen, ohne eine Aktion auszulösen. Da Smartphones und Tablets nach und nach das Internet übernehmen, müssen wir ihnen bei der Gestaltung einer Website mehr Aufmerksamkeit widmen. Da Touchscreens nicht mit Hover umgehen können, müssen Alternativen zu Hover-Effekten geprüft werden. Wenn Sie eine eigene Website einrichten oder nicht über die Ressourcen verfügen, um einen professionellen Webdesigner zu beschäftigen, ist dieses Tutorial genau das Richtige für Sie.
Sie können Hover-Effekte mit Touchscreens verwalten, dies kann jedoch etwas umständlich sein. Vielleicht ist es besser, sie zusammen zu entwerfen und etwas ganz anderes zu verwenden. Wenn Sie sie auf Ihrer Desktop-Site verwenden möchten, haben Sie im Allgemeinen drei Alternativen, um Schwebeeffekte auf mobilen Websites zu erzielen:
- Entfernen Sie sie vollständig und ersetzen Sie sie durch die primäre Aktion.
- Fügen Sie ein sekundäres Menü hinzu, in dem Sie entweder einmal für den Hover-Effekt und noch einmal für die primäre Aktion tippen können.
- Platzieren Sie die Hover-Informationen auf einer eigenen Seite.
Alle funktionieren gut auf Touchscreens und Desktops, erfordern jedoch einige Designänderungen, um sie in ein vorhandenes Design zu implementieren. Sie können es auch mit JavaScript oder cleverem jQuery-Code umgehen, wenn Sie über die erforderlichen Kenntnisse verfügen. Wenn Sie jedoch versuchen, alles selbst herauszufinden, sollten Sie Designalternativen als Code verwenden. Wenn Sie Codealternativen für Hover-Effekte untersuchen möchten, besuchen Sie diese Seite.
Entfernen Sie Hover-Effekte aus Ihrem Design
Wenn Sie keinen freiberuflichen Webdesigner einstellen können, der Ihnen hilft, ist es möglicherweise besser, Schwebeflugeffekte insgesamt zu entfernen. Sicher, sie sehen ordentlich aus und bieten nützliche Zusatzinformationen, aber es gibt immer andere Möglichkeiten, um den gleichen Effekt zu erzielen.
Sie können die Menüaktion als primäre Aktion beibehalten und die zusätzlichen Informationen an anderer Stelle auf der Seite einfügen. Sie könnten Breakout-Boxen, Popups verwenden, den Deskriptorinhalt für den Punkt erhöhen, den Sie anstreben, oder etwas anderes. Wenn Sie nicht in der Lage sind, jQuery zu implementieren, ist dies wahrscheinlich die einfachste Option.
Fügen Sie ein zweites Menü hinzu
Ein sekundäres Menü enthält das erste Tippen, das einen Schwebeeffekt simulieren würde. Sie können die Informationen in das Menü aufnehmen und ein zweites Menü innerhalb desselben Elements anzeigen. Dieses zweite Menü fungiert als eigentliche Auswahl, wie es auf einem Desktop geschehen würde. Der erste Druck simuliert das Schweben einer Maus und der zweite Druck simuliert den Benutzer, der die primäre Aktion ausführt.
Dies ist eine gute Alternative zu Hover-Effekten, wird jedoch durch die Bildschirmgröße eingeschränkt und schränkt die Informationsmenge ein, die Sie Ihrem Effekt hinzufügen können. Schwebeflugeffekte sind von Natur aus begrenzt, auf Mobilgeräten jedoch durch die Bildschirmimmobilien, mit denen Sie zu tun haben. Wenn Sie wirklich zusätzliche Daten in nicht standardmäßiger Weise aufnehmen möchten, ist dies möglicherweise der Fall.
Platzieren Sie die Hover-Informationen auf einer eigenen Seite
Möglicherweise ist es einfacher, die Hover-Informationen auf einer eigenen Seite mit einem Textlink einzufügen. Dies vereinfacht Ihr Menü und macht die Navigation unkompliziert. Hyperlinks funktionieren geräteübergreifend und Sie erhalten eine zusätzliche Seite für Site-Größe und SEO. Der Nachteil ist, dass Sie den Zusatzinhalt um mindestens 300 Wörter erhöhen müssen, damit er funktioniert.
Solange Sie die Informationen sorgfältig genug auffüllen können, um sie gut zu lesen und dem Leser einen Mehrwert zu bieten, halte ich dies für die beste Alternative. Die Entscheidung, wo diese Links zu den ergänzenden Daten platziert werden, liegt bei Ihnen und hängt von Ihrem Design ab. Zusätzliche Seiten bieten Ihnen jedoch die zusätzliche Möglichkeit, Aktionen auszuführen, Ihre Telefonnummer, E-Mail-Adresse und zusätzliche Informationen hinzuzufügen, die verwendet werden könnten einen Verkauf machen.
Bleiben mit Schwebeflug
Wenn Sie einen Hover-Effekt auf Ihrer Hauptwebsite verwenden möchten, müssen Sie ihn in Ihre mobile Site oder zumindest in die mobile Version integrieren. Es gibt Umschaltmenü-Alternativen oder JavaScript-Lösungen, für deren Implementierung jedoch ein Experte erforderlich ist. Auf dieser Seite werden Ihre Alternativen erläutert, falls Sie sie näher untersuchen möchten.
Eine der einfachsten Fallen, in die Sie geraten können, wenn Sie sich selbstständig machen oder Ihre erste Website erstellen, ist das Entwerfen für sich selbst und nicht für Ihr Publikum. Sie müssen sicherlich etwas entwerfen, das Ihnen gefällt, aber wenn Sie Usability in Betracht ziehen, müssen Sie dem Publikum Priorität einräumen. Sie müssen auch berücksichtigen, welche Geräte sie verwenden und wie sie mit größter Wahrscheinlichkeit am besten mit Ihrer Website interagieren.
Wenn Ihr Publikum jung ist, wird es mobil sein. Wenn sie Mobilgeräte verwenden, sind Hover-Effekte und andere Designoptionen nicht die beste Wahl.
