ホバーは、アクションをトリガーすることなく訪問者に情報のスニペットを提供する方法として、長年にわたってWebサイトで使用されてきました。 スマートフォンやタブレットが徐々にインターネットを引き継いでいるので、ウェブサイトを設計する際には、それらに注目を集める必要があります。 タッチスクリーンではホバーを処理できないため、ホバー効果の代替手段を検討する必要があります。 独自のWebサイトを設定している場合、またはプロのWebデザイナーを雇用するためのリソースがない場合は、このチュートリアルが役立ちます。
タッチスクリーンでホバー効果を管理できますが、少し厄介な場合があります。 それらを完全に設計し、他の何かを完全に使用する方が良いかもしれません。 デスクトップサイトでそれらを使用するように設定されている場合、通常、モバイルWebサイトでホバー効果に3つの代替手段があります。
- それらをすべて削除し、プライマリアクションに置き換えます。
- セカンダリメニューを追加します。このメニューでは、ホバーエフェクトを1回タップし、プライマリアクションを1回タップできます。
- ホバー情報を独自のページに配置します。
すべてはタッチスクリーンとデスクトップでうまく機能しますが、既存のデザイン内に実装するにはいくつかのデザイン調整が必要になります。 JavaScriptまたは巧妙なjQueryコードを使用して回避することもできますが、スキルをすべて身に付けようとしている場合は、コードよりも設計の代替手段を使用した方がよい場合があります。 ホバーエフェクトの代替コードを検討する場合は、このページにアクセスしてください。
デザインからホバー効果を削除する
フリーランスのWebデザイナーを雇って助けてくれない限り、ホバー効果を完全に削除したほうがいいかもしれません。 確かにきれいに見え、有用な補足情報を提供できますが、同じ効果を達成する他の方法が常にあります。
メインアクションとしてメニューアクションを保持し、ページの別の場所に補足情報を含めることができます。 ブレイクアウトボックス、ポップアップを使用して、作成しようとしているポイントなどの記述子の内容を増やすことができます。 jQueryを実装するスキルがない場合、これがおそらく最も簡単なオプションです。
セカンダリメニューを追加する
二次メニューには、ホバー効果をシミュレートする最初のタップが含まれます。 メニューに情報を含めて、同じ要素内に2番目のメニューを表示できます。 この2番目のメニューは、デスクトップで行われる実際の選択として機能します。 1回目のプレスはマウスのホバーをシミュレートし、2回目のプレスはユーザーが主要なアクションを実行することをシミュレートします。
これは、ホバー効果の適切な代替手段ですが、画面サイズによって制約され、効果に追加できる情報の量が制限されます。 ホバー効果はその性質によって制限されますが、モバイルでは、扱う画面の領域によって制限されます。 非標準的な方法で補足データを本当に含めたい場合、これがその可能性があります。
ホバー情報を独自のページに配置する
おそらく、より簡単なオプションは、テキストリンクを含む独自のページ内にホバー情報を含めることです。 これにより、メニューが簡素化され、ナビゲーションが簡単になります。 ハイパーリンクはデバイス間で機能し、サイトサイズとSEOの追加ページを取得します。 欠点は、補足コンテンツを少なくとも300ワード程度増やす必要があることです。
よく読み、読者に価値を与えるように情報を十分に注意深く埋めることができる限り、私はこれが最良の選択肢だと個人的に思います。 補足データへのリンクをどこに配置するかはあなた次第であり、設計次第ですが、追加のページでは、行動を促すフレーズを追加したり、電話番号、メールアドレス、使用可能な追加情報を追加したりできます販売する。
ホバーでの滞在
メインのWebサイトで何らかのホバー効果を使用する場合は、モバイルサイト、または少なくともモバイルバージョンでそれを使用する必要があります。 トグルメニューの代替またはJavaScriptソリューションがありますが、実装するには専門家が必要です。 このページでは、さらに検討したい場合の代替案について説明します。
自分で始めたり、最初のWebサイトを構築したりするときに陥りやすい最も簡単な落とし穴の1つは、視聴者ではなく自分でデザインすることです。 確かに自分の好きなものを設計する必要がありますが、使いやすさを考慮するときは、視聴者を優先する必要があります。 また、彼らが使用するデバイスと、彼らがあなたのウェブサイトに最適に関与する可能性が最も高い方法を考慮する必要があります。
視聴者が若い場合は、モバイルを使用します。 モバイルを使用する場合、ホバー効果やその他のデザインオプションは最適なオプションではありません。
