レスポンシブヘッダーとロゴ - ヒントと落とし穴

レスポンシブWebデザインの概念はWebに浸透しており、フロントエンド開発者にとっては定番となっています。現代の世界ではレスポンシブデザインの価値を否定することはできませんが、レスポンシブレイアウトを適切にデザインする方法を完全に理解することは困難です。.

ウェブサイトには非常に多くのユニークな分野がありますが、個々の要素に焦点を当てることで、ユーザーの目標、およびレスポンシブデザインを使用してそれらの目標を達成する方法を理解しやすくなります。.

カバーしたい ヘッダー、ロゴのデザインのヒント, そして ナビゲーションメニュー, レスポンシブデザインに関するものです。これらはあなた自身の仕事に当てはまるものであり、ユーザーの行動を念頭に置いてインターフェイスを設計するようにしてください。.

シンナーナバーズ

大画面では、大きなヘッダーがあるのが普通です。おそらく、マルチレベルのリンク層を持つ特大サイズのヘッダーさえあります。しかし、小さい画面は同じスペースを持っていないので、必要に応じて制限する必要があります。.

ネイティブのモバイルアプリは通常 固定ヘッダ, これはレスポンシブデザインでも一般的な方法です。固定ヘッダ また縮小する必要があります 小型デバイスの場合：これにより、コンテンツ用のスペースがより広くなりますが、それでも読者はヘッダーとナビゲーションに直接アクセスできます。.

たとえば、フルサイズのモニターやモバイルデバイスでのCartoon Brewのレイアウトを考えてみましょう。.

600pxのブレークポイントでは、ナビゲーションはページ上の高さのほぼ半分に縮小されます。これにより、ロゴとクリック可能なナビゲーションメニューの両方が小さくなりますが、 もっと比例 相対画面スペースへ.

また、Cartoon Brewにはモバイル画面のレスポンシブメニューとしてドロップダウンボックスがあることを検討してください。これはそれを意味します コンテンツをオーバーレイする 開いたときにページに表示されるので、このために十分なスペースを空けることが重要です。.

同様の例がJacksonville Art WalkのWebサイトにあります。スクロールしている間上部のナビゲーションバーは固定されたままですが 小型デバイスでは縮小. 細いナビゲーションバーがあるため、これはレスポンシブデザインに適しています。 コンテンツのためのより多くの余地を残す 小さな携帯画面で.

ナビゲーションバーの各リンクには、テキストリンクに関連付けられた関連アイコンがあります。これはワイドスクリーンモニタでは見栄えがしますが、小さいスクリーンでは詳細すぎます。.

アートウォークのナビゲーションが、770pxブレークポイント周辺の固定リンクを含むドロップダウンメニューに変わります。アイコンが小さすぎて小型のデバイスでは狭すぎるため、ドロップダウンメニューにアイコンは表示されません。.

レスポンシブヘッダを設計するときは常に考慮してください 全画面スペース ナビゲーションバーのスタイリング中ヘッダを固定したままにしたくない場合は、それで問題ありませんが、それでもまだ必要な場合があります。 少し縮める ページ上部のスペースを節約する.

ロゴのアイコン化

ほとんどのロゴには、ブランドを表すためのテキストとアイコンまたはグラフィックが組み込まれています。これはあなたがいつでもできることを意味します iconify （はい、それは本当の言葉です）この種のロゴ シンボルまで そのフルバージョンの.

完全なロゴを入れるのに十分なスペースが常にあるわけではないので、これはレスポンシブヘッダーの強力なテクニックです。あなたはフルサイズのロゴの輝きと魅力をいくらか失いますが、それはあなたがきれいなレスポンシブレイアウトのために払わなければならないかもしれない価格です.

Web Designer Newsのロゴをチェックして、ブラウザのサイズを変更したときのロゴの変化を確認してください。.

最初にサイトにアクセスしたときに、誰もがそのアイコンを認識できるとは限りませんが、 パターン認識 これは大きな問題ではありません.

人々は、ページの左上隅が通常ロゴのために予約されていることを知るのに十分長い時間インターネット上にいました。この小さなピンクのアイコンはfaviconでも使用されているので、サイトに深く入り込むことなく簡単に結論を出すことができます。.

あなたはいつもこの凝縮されたロゴ技術のためにグラフィックスに頼る必要はありません。 Young And Hungryのヘッダーは、ロゴに明るい緑色のテキストを使用し、最終的にテキスト「Y&H」に凝縮します。.

ブランド化が一文字として認識するのが容易ではない場合、これはすべてのサイトでうまくいかないかもしれません。しかし、それはそのロゴを示すようになります より簡単にすることができます グラフィックスとテキスト、そして両方のバリエーションに スペースを取らない 小さな画面で.

フルスクリーンの背景処理

多くのリンク先ページでは、フルスクリーンの背景を使用して注目を集めています。これは強力なテクニックですが、大規模モニターでは最も効果的です。.

それで、どのようにあなたはより小さいスクリーンでこれを処理しますか？一般に、デザイナーも 背景画像を削除する 特定のブレークポイントを超えるか、画像自体 再調整される ウィンドウに収まるように.

Cap Radio Raffleは彼らのホームページでこのテクニックを使っています。背景イメージ 焦点を視野に入れます 画面のサイズを変更しても、常に.

この種の解決策は通常 CSSの配置が必要 あなたがそれに夢中になるときしかしそれは本当に簡単です。ただ 焦点を視野に入れておく いつも 画像コンテナのサイズを変更する 装置に比例して合うため.

審美的な理由のための大きい背景を越えてあなたはまたページ内容のための大きいイメージを使用するかもしれない。 Mashableのホームページでは、レイアウト全体にわたるトップストーリーにおすすめの画像背景を使用しています.

レスポンシブレイアウト 画像を圧縮します しながら 中心焦点を維持する. ストーリーが変わるとその注目のイメージが変わるので、これを行うのは難しいです。したがって、写真は慎重にキュレーションする必要があります。 Mashableのソリューションは、適切に設計されている場合、ブログや雑誌のレイアウトの全画面写真を処理する優れた方法です。.

ナビゲーションを単純化する

小さいスクリーン用に改造するとき, できるだけ多くのリンクを保持する ナビゲーション内 簡単にアクセスできるようにする. これは、多層ドロップダウンメニューがある場合は、いくつかのリンクを削除する必要があるかもしれないことを意味します。.

あなたは正しい戦略を持っている場合でもそれはすべてのドロップダウンを無傷に保つことはまだ可能です。例えばKidscreenは 小さい矢印のアイコンが付いたフライアウトメニュー レスポンシブメニューにサブリンクを表示する.

多くの人がハンバーガーメニューに反対していますが、私はそれを長いナビゲーションメニューに必要なものとして受け入れるようになりました。それは単に機能し、ほとんどのスマートフォンユーザーによって「メニューボタン」として広く理解されるようになりました.

実際、3バーハンバーガーメニューに頼らないレスポンシブサイトを見つけるのは難しいでしょう。 Cyber​​Chimpsはその好例です 垂直ドロップダウンを使用します スライドインではなく.

Cyber​​Chimpsのナビゲーション構造が、ページの上にスライドするように配置されています。メニューは上から下に落ちます リンク用の大きなブロック要素.

あり クリックするより多くの領域 そして 大きなリンクテキスト, ページをナビゲートするプロセスははるかに簡単になります。レスポンシブヘッダー全体でこの理念に従うことを目指してください。そうすれば、デザインは劇的に向上します。.

あなた自身のものをつくる

これらのヒントを自由に使用できるので、使いやすいレスポンシブヘッダーを作成するのに問題はありません。あなたを助けるためのたくさんのツールがありますが、本当に理解する唯一の方法は練習を通してです.

だからあなたとこれらの技術を取り、ウェブサイトを構築し始めます！また、私はあなたが以下にチェックアウトすることができるレスポンシブヘッダのためのさらなる一握りのリソースをリストしました.

• 基本的なMobile CSSレスポンシブナビゲーションメニューを作成する （teamtreehouse.com）
• レスポンシブWebサイトヘッダーのベストプラクティス （ux.stackexchange.com）
• ヘッダー画像を適切に反応させるにはどうすればよいですか? （stackoverflow.com）