レスポンシブデザイン、2つの大きなナビゲーションメニューを表示する方法
現在、サイトの1つを再設計して応答性を高めています。問題は、サイトが一般的にページごとに2つの大きなメニューシステムを持っていることです。メインナビゲーションとして上部に1つ、次に左側のナビゲーションにそのセクションのすべてのページがあり、これも一般的に非常に大きいです。基本的にこれに対処する最良の方法を理解しようとしています。
Resposnisveでこれを行っている人の例を見つけることができませんでした。 Boston Globeのような多くのコンテンツがあるサイトを見つけましたが、2つの大きなメニューはありません。誰か提案がありますか？
いずれにせよ、コンテンツをモバイルデバイスでより思いやりのあるものにするためにIAを再考することは別として、おそらく、私が過去に行ったフォローアプローチを使用できます。
トップレベルのカテゴリが存在するプライマリメニューがあります。これらは、モバイルサイズになったら標準で上部の「デスクトップ」サイトに表示されますが、メニューボタン（別名「ハンバーガーメニュー」）に戻します。
これはデスクトップサイトのサブメニューとは別のメニューであるため、モバイルでは引き続き別のメニューにする必要があります。これにより、ユーザーは、サイトの到達したい領域のトップレベルにすばやくジャンプできます。
サブメニューについては、これをページの下部に移動し、上部にアンカーリンクを配置して、ユーザーをそのメニューに移動しました。この理由は、サブレベルのナビゲーションではなく、ページ上のコンテンツが重要であることです。
コンテンツの上部にあるサブレベルナビゲーションへの明確なリンクを提供すると、ユーザーは下部に移動し、そのセクション内のすべてのサブページを表示できます。ここでもサブサブレベルを表示する必要がある場合は、これも機能するはずですが、セクションごとにサブレベルページが多いほど、このページのリストが大きくなることに注意してください。ユーザーへのページ、その時点で実際に価値のあるコンテンツはありません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ここでの主なメッセージは、-コンテンツがナビゲーションよりも重要であることです。はい、彼らはナビゲートする必要がありますが、実際のページを読みたいだけの可能性があるときは常にナビゲーションを表示するのではなく、ナビゲーションを見つけやすい場所に置いてください。
（ナビゲーション全体をモバイルのコンテンツの上部に表示した場合、サイトにアクセスした人は誰もそのページの状態の更新を見ることはないでしょう。コンテンツは「スクロールせずに見える範囲」に十分に隠されています）
レスポンシブデザインを作成するときは、コンテンツを制限してモバイルデバイスで読み取れるようにし、ユーザーが探している情報を見つけられるようにします。 Smashing Magazine はレスポンシブレイアウトの優れた例です。画面解像度が高いと、ユーザーはより詳細なコンテンツを表示できますが、モバイルレベルでは、ドロップダウン（上部と上部の両方を保持）でカテゴリを見つけることができます。ナビゲーションのサイドレベル）が上部にあり、他のすべてが失敗した場合は検索オプションがあります。 Smashing Magazineは、サブヘッダー（上=スマッシングカテゴリとサイド=スマッシングセクション）を使用してドロップダウンナビゲーションを整理しました。画面解像度は、画面解像度の違いを示す下に表示されています。
Smashing Magazine Large Resolution
Smashing Magazine Mobile Resolution
Brad Frostレスポンシブレイアウトパターン を調べることもできます。レスポンシブレイアウト（パターン、リソース、ニュース）への取り組みに関する膨大な情報とガイダンスを提供するサイトです。 「リソース」セクションには、レスポンシブナビゲーションの作成に役立つ例がたくさんあります。