web-dev-qa-db-ja.com

レスポンシブウェブサイトのヘッダーのベストプラクティス

古いWebサイトをより応答性の高いものに変換する作業をしているときに、Webサイトのヘッダーに問題がありました。クライアントは、デスクトップからモバイルへのヘッダーの大きなグラフィック（2つの個別のエンティティではなく、画像とテキストの両方が1である）を保持したいと考えています。

画像はデスクトップレベルでは読み取り可能ですが、モバイルレベルでは見にくいようです。モバイルレベルで画像をWebフォント（media-queriesを使用している間）に変更することを考えましたが、デスクトップレベルに大きなグラフィックスがあり、テキストのみの場合、ユーザーを混乱させると思いましたモバイルレベル。デバイス間でWebサイトのヘッダーを画像からWebフォントに変更できますか？

クライアントは、ヘッダーの色をデスクトップとタブレットレベルの青からモバイルレベルの緑に変更したいと考えています。色はさまざまなデバイスで同じままにすべきではありませんか？

enter image description here

responsive-designimagestylemedia-queries
7
Courtney Jordan

ヘッダーを2つに分割します

はい、デバイス間でウェブサイトのヘッダーを変更できます。ただし、この例では、背景画像の上にロゴが表示されています。ヘッダーをラスター画像（背景）と ベクター画像 （ロゴ）の両方に分割することを検討してください。これにより、背景がモバイルデバイスに縮小され、ロゴがぼやけずに縮小されて読みやすくなります。

色はデバイスによって異なる場合がありますが、配色は一貫している必要があります。

ユーザーエクスペリエンスを向上させるには一貫性が重要であり、この一貫性を実現するには、全体の配色が色自体よりも重要です。 Nielsen Norman Groupが 一貫性とWeb（デスクトップ）とモバイルデバイス間のユーザーエクスペリエンス について書きました：

「チャネルに関係なく、一貫したユーザーエクスペリエンスは、使用可能なクロスチャネルエクスペリエンスの4つの重要な要素の1つです。チャネル間の一貫性は、顧客との信頼の構築に役立ちます。」

異なる色の要求にもかかわらず、一貫性を保つ方法があるはずです。たとえば、幅が狭くなると色が変わりますが、一貫した配色は保持されます これは1つのレスポンシブサイトです 。

9
Jonathan Strate

ヘッダー画像については、メディアクエリを使用して、必要なブレークポイントで画像を切り替えて、利用可能な画面スペースを最大限に活用できます。

例えば：

.header {
    background-image: /* mobile-friendly version of image by default */;
}
@media (screen and min-width: 480px) { /* arbitrary breakpoint for simplicity */
    .header {
        background-image: /* larger version of image */;
    }
}

これには、ヘッダー画像の2つのバージョンを準備する必要がありますが、適切な画面サイズで見栄えをよくすることが保証されます。

もちろん、画像の代わりにヘッダーにWebフォントを使用して、さまざまな画面サイズに合わせて適切にサイズを変更することもできます。メディアクエリを使用すると、柔軟性が大幅に向上します。小さな画面にはwebfontバージョンを、大きな画面には画像を使用することもできます。

あなたの他の質問ごとに。色を変更する場合も、メディアクエリを使用して行うことができます（上記の例を参照）。ただし、サイトのブランドまたはテーマに一致するように色を一致させることをお勧めします。

3
Grant Palin

デバイス間でWebサイトのヘッダーを画像からWebフォントに変更できますか？

承知しました。レスポンシブなCSSブレークポイントやJSを使用すると、特定のビューごとにほとんど何でもできます。

色はさまざまなデバイスで同じままにすべきではありませんか？

確立された、まとまりのあるビジュアルデザインとブランドデザインがクライアントに設定されている必要があります。通常、それに基づいて、いいえ、ビューポートサイズに基づいて色を変更する必要はありません。あなたは確かに技術的な見地からすることができます。 UX /ユーザビリティの大きな問題ではないでしょう。しかし、それは奇妙なビジュアル/ブランディングデザインリクエストのようです。

1
DA01