it-swarm-ja.com

モバイルメニューに切り替えるブレークポイントの幅は?

それは明白で明確な答えを持っているように聞こえますが、私はそれについて多くの言及を見つけることができませんでした:ウェブサイトを構築するとき、どのブレークポイント/幅が水平タブスタイルのナビゲーションメニューから垂直トグルに切り替えるのに最も理想的ですか「ハンバーガー」アイコンの後ろに隠されたモバイルメニュー?

私は主に1200pxのコンテナー幅でWebサイトをデザインしているように見え、それ以下のデスクトップ/ラップトップコンピューターの画面サイズは多くないので、モバイルメニューをその1200px幅以下で起動しています。ワークフローを多少簡略化します。

しかし、それは良い習慣ですか?より低いブレークポイントを好むデバイスユーザーのオーディエンスはいますか?たぶん横向きのiPadユーザーは「通常の」メニューを好むでしょうか?

デスクトップを含め、すべての幅で折りたたみ可能なモバイルスタイルのメニューがあるウェブサイトを見たので、ケースバイケースで目的のUXになると思いますが、予期しない考慮事項を知っておくと役立ちます。

11
simbasounds

モバイルブレークポイントを忘れて、マーケティングの外部にphonetablet sizeはありません。ブレークポイントは、画面サイズではなく、コンテンツに続く必要があります。

簡単な例として、メニューを考えてみましょう:

  Home  |  Products  |  Contacts

mobileメニューを提供する必要があると思いますか?ハンバーガーメニューに3つの要素を入れたいですか?おそらく>=320pxの画面にぴったり収まります。

一方、次のメニューがあります。

 Home  | TVs | Tablets | Notebooks | Printers | Air Conditioners | Routers | Help

より早く調整する必要があります。しかし、同時に、ハンバーガーを<1000pxに表示して、1行に収まらないようにしますか?

Priority + pattern のような他のナビゲーションオプションを探ります。


補足として、これはすべてのサイトパーツに適用されます。 モバイルレイアウトに切り替えるだけではありません。コンテンツが<700pxの状態に完全に適合している場合でも、400pxに到達したからです。 Google Web Fundamentalsには、これに関するページがあります。

特定のデバイス、製品、またはブランドではなく、コンテンツに基づいてブレークポイントを作成します。

From: ブレークポイントの選択方法

9
fregante