レスポンシブデザインのコンテンツ配置を計画する方法

最近の投稿で、私はどのように議論しました ビジュアルコンテンツ に関し レイアウト設計. しかし、この主題は非常に詳細であり、多くのサブトピックに分かれています。そのうちの1つは、 レスポンシブレイアウトの視覚的編成.

この記事では、レスポンシブコンテンツについてさらに深く掘り下げて、以下についてのベストプラクティスを検討したいと思います。 小さい画面用にコンテンツを並べ替える. UIとUXのデザインでは、すべてのプロジェクトに正しい答えはありませんが、あります。 うまくいく傾向, そしてこれらの傾向からあなたはあなた自身のアイデアを構築することができます.

グリッドをリストに並べ替える

すべてのウェブサイト 表示されているかどうかにかかわらず、ある種のグリッドを使用します。. 強固なグリッド内のコンテンツは、幅の広いモニターでは水平方向にグループ化されることが多くありますが、これは小さいデバイスでは意味がありません。最良の解決策は、小さい画面でこれらのグリッドを細かくすることです。 アイテムをリストに変換する.

例1：ウェリントン市議会

ウェリントン市議会のウェブサイトを見てください。 グリッドスタイルのセクション ホームページ上.

四角いリンクの小さなスライドショーがあります。 減らす ブラウザウィンドウのサイズが変わるとフッターセクションも 小さくなる, そして結局 リンクの垂直リストに変換する.

320px幅の非常に小さな携帯電話では、デバイスサイズに合わせて設計する必要があります。 iPhoneの場合、デバイスは幅よりも背が高いため、コンテンツをそのように配置するのが合理的です。.

例2：Mooyah Burgers

Mooyahのホームページを見て、レイアウトのサイズを変更してみてください。デスクトップ画面に3つの項目を含む小さなスライドショー領域がありますが、これは縮むモバイル上に1つのアイテムのみを表示する（ウィジェットに隠しスライドを追加する）.

Mooyahアプリとメニューを宣伝する2つの宣伝ボックスは、横に並べて固定されたままです。 画面が十分に小さくなるまで 縦に並べ替える.

の “私たちとつながる!” セクションはまた各社会的なポストがあるように内容を整理します できるだけ多くのスペースを確保する. 一般的に言って、ワイドスクリーンモニターが最も広く、スマートフォンのスクリーンが最も高い.

事例3：テーママーケット

グリッドを使用してレイアウトを設計するときは、考慮する必要があります。 ワイドとトールの両方のレイアウトスタイル 単一行のコードを書く前に。こうすれば準備ができている 意味のあるブレークポイントを構築する.

フルグリッドレイアウトのページは 箱のサイズを減らす 改行する前にたとえば、テーママーケットには 固定最大幅 1240、およびグリッドが含まれています 1行に4ブロック.

画面が小さくなるにつれてこれらのブロック 幅を減らす, しかし最終的には壊すに 行ごとに3つのボックスを残す. 最小サイズでは、1行に1つのボックスが表示されます。 たくさんの部屋があります 輝くテキストと画像.

のバランスが常にあります できるだけ多くの情報を視野に入れる する必要性と組み合わせて テキストを読みやすくする. グリッドレイアウトを作成すればするほど、これを見つけやすくなります。 コンテンツ配置のバランス.

列を非表示または削除する

広いモニター そして より多くのブラウザサポート 開発者が非常に複雑なレイアウトを構築できるようにします。私はよくブログを見ます 3列あるいは4列 画面の大部分を占める.

ただし、小型のデバイスには次のようなコンテンツフローが必要です。 垂直に理にかなっている. 私は2つの選択肢を見つけました 過度のサイドバーの取り扱い：

メインコンテンツの下にドロップする
完全に隠す

例1：ストッププレス

Stop PressのWebサイトを見てください。それは持っています 縦4列 デスクトップモニタに.

左側の列は垂直ナビゲーションメニューで、次の列は最近の記事のメインコンテンツ列です。それから、我々はextraであふれている2つの異なるサイドバーコラムを持っています “さておき” コンテンツ.

ブラウザウィンドウのサイズが変更されると、これらの列 ゆっくり縮小する. 最初に行くのはハンバーガーメニューアイコンの後ろに隠れている左のナビゲーションです.

次のブレークポイントは、一番上のソーシャルシェアボタンと一緒に中央の列を非表示にします。それから最終的に最も小さいスクリーンで、一番右側のサイドバーは完全に消えます 一次中央列だけを残す コンテンツの.

メインコンテンツの下にサイドバーの内容は表示されません。それは 完全に見えない, そしてこれは完全に許容できる選択です。 ページロードを減らす スクロールバーの高さをそれなりのサイズに保つため.

一方、多くのブログ サイドバーをメインコンテンツの下に移動します サイドバーに関連記事が掲載されたConcept Art Empireのように コンテンツの下にドロップ.

例2：Wishpondブログ

Wishpondブログも サイドバーを完全に削除します 小さいビューポートの画面から。このサイドバー領域には通常、広告、申し込みフォーム、および関連する投稿リンクが含まれています。このコンテンツのどれも重要ではありませんが、それは訪問者に付加価値を与えることができます.

私は従うのが好きです ハイブリッドアプローチ サイドバーをコンテンツの下に移動するだけでなく、特定のブレークポイントを過ぎてサイドバーのいくつかの項目を非表示にします。.

たとえば、フルレイアウトで3つの広告ブロックがある場合、モバイルでそれらの広告スペースのうち2つを非表示にすることができます。この サイドバーのコンテンツにアクセスできるようにします しかし ページを乱雑にしない 内容が多すぎる.

例3：マダムゴーティエ

私はMadame Gautierがどのように彼らを使っているかも好きです “最新ニュース” ホームページのサイドバー。やがて コンテンツの下に落ちます, そして 全景位置を占める ページ上.

ほとんどすべてのWebサイトで、デザインに少なくとも1つのサイドバーがあります。これがサイト全体のサイドバーなのか、ページテンプレートに表示されるだけのものなのか、 並列デザインスタイル それが理由で人気があります より多くのコンテンツにフィット 画面上.

それはあなたの選択です コンテンツの扱い方. サイドバーを下げる、完全に非表示にする、またはこれら2つの方法を組み合わせて使用することができます。しかし、あなたはあなたの選択をするべきです サイドバーの関連性に基づく, そしてその 必要性 ページへ.

余白の調整と圧縮

常にポイントがあります コンテンツを絞ることはできません さらにそれ以上、そして1つのセクションはする必要があります 他より下に落とす.

によって マージン調整 ページのコンテンツを下げる前に、読者に幅広いコンテンツを選択してもらいます。.

例1：一つの世界

One Worldのフッターはその好例です。それは持っています サイト全体のフッターリンクが浮いている 正しい メール登録フォーム 左に.

レイアウトのサイズを変更すると、これらの要素間の余白と余白が縮小されます。リンク列 近づく, と申し込みフォーム 少し小さくなります, も.

ある点を過ぎて、それはただ意味があります 申し込みフォームの下にあるリンクを削除する, そしてフッターをつける 呼吸するための十分な部屋.

はい、それはページを長くします、そして、はい、それはそこまでスクロールダウンするのにより多くの努力を必要とします 垂直方向のデバイス上.

例2：ゴールデンアイル

私が大好きなもう一つの例は、ゴールデンアイルズのホームページです。 ユニークなナビゲーションスタイル. ブラウザウィンドウのサイズを変更すると、ナビゲーションリンクが表示されます 一緒に絞る. やがて彼らは 単一行から中断する 2行に分割し、次に一番小さいサイズの列に分割する.

ページ上の他の項目 同じパターンに従う. この例は、 余白のサイズ変更 レイアウトを完全に並べ替える前.

小さいスクリーン上の垂直流

ページコンテンツは 自然に流れる, そして 垂直方向の配置 モバイルでは意味があります。これは、ページ内コンテンツブロックを考慮する必要があることを意味します。 それに応じてコンテンツスタイルを更新する. これには、段落、ヘッダー、ブロック引用符、番号なしリスト、およびカスタムコンテンツボックスも含まれます。.

例1：BodyBuilding.comシングル投稿

たとえばこのBodyBuildingの投稿を 小さな箱を使う 異なるグルートトレーニングを披露する.

これらの箱は含んでいます 右側のサムネイル 運動を実演する。小さいスクリーンでは、これらのサムネイル 改行する, そして結局 互いの上に積み重ねる.

あなたのレスポンシブCSSはウェブサイトのすべてのページのためにこの小さな特徴を考慮に入れるべきです.

例2：バニティフェア

もっと大きな例として、バニティフェアのホームページをチェックしてください。 特集ストーリースライダーを完全に並べ替える. フルスクリーンのデスクトップでは、ストーリーは見出しを見出し、1つの注目画像が横に表示されます。ブラウザのサイズが小さくなるにつれて、このトップストーリーセクション スライド式カルーセルになります.

インターフェース自体 完全に変わる リスト内の各ストーリーにドットナビゲーション、矢印、および特集画像を追加します。全画面記事のリストはもっと “垂直”, しかし、このレイアウトはモバイル画面で操作するのが面倒なので、スライド式のカルーセルに変更することをお勧めします。.

と思う ユーザーの流れについて あなたのコンテンツの流れよりもむしろ。コンテンツ 常に垂直レイアウトにする必要はありません 小さな画面で。以下のようにコンテンツを整理する方法について考えてください。 垂直ブラウジング体験をサポート.

おわりに

レスポンシブデザインは最近では不可欠であり、すべてのWebデザイナーおよび開発者はそれがどのように機能するかを理解する必要があります。訪問者はすべてのウェブサイトが モバイルフレンドリー. 応答しないWebサイトに出くわすたびに、その水平スクロールバーを見てうねります.

この記事のヒントに従ってください。 コンテンツを再配置するための設計戦略の計画 すべてのデバイスで最高のユーザーエクスペリエンスを実現.