修正に関する包括的なガイド Responsive 2023 年のデザインの問題

このページのリンクからサービスに加入すると、Reeves and SonsLimitedがコミッションを獲得する場合があります。 私たちを参照してください 倫理声明.

を使用しているほとんどのウェブサイト responsive デザインが誤って使用しているため、問題が発生します。 への一般的なアプローチ responsive デザインは怠惰なものです、そしてあなたがそのアプローチを取るならば、あなたのいくつかは responsive サイトはまったく問題なく動作しますが、多くのサイトはそうではありません。 完璧に機能する人にとっては、おそらく運の問題になるでしょう.

の概念 responsive デザインはシンプルですが、そのシンプルさゆえに人々は間違いを犯しやすくなります。 長年の経験を持つデザイナーは、 desktopに基づいて設計を計画します desktop レイアウト。

Desktop レイアウトがタブレット レイアウトやモバイル レイアウトと異なるのは、通常は複数列であり、通常は膨大な量の空白が含まれており、すべてが単に「大きい」ためです。 もしも responsive 設計手法が使用され、この複数列のレイアウトは単一の列に分割されることになっています。

それがすべてあなたの場合 responsive 実際にモバイル デバイスで表示すると、デザインが正しく表示されないため、問題が発生する可能性があります。 どの程度問題になるかはあなたの態度次第ですが、優れたデザイナーは優れた UX に関心を持っています。 彼らは悪い UX をさらに気にします。 サイトの UX が悪く、優れたデザイナーになりたい場合は、それを修正する必要があります。

複数列のレイアウトを XNUMX つの列に折りたたむことに関するこの問題は、それが比例的に機能しないことです。 何かを水平方向に縮小する必要があり、他に何も変更しない場合、明らかに垂直方向に拡大されます。

背の低い太いグラスから背の高い細いグラスに水を注ぐと、水は背の高い細いグラスの形になりますが、水の量はまったく同じです。 デザイナーが理解しなければならないことは、ウェブサイトでは、ボリュームを変える必要があるということです。 通常、形状を変更してコンテンツを保持することはお勧めできません。 正確に 同じ。 何かを与えなければなりません。

デザイナーの称号を実際に獲得した人なら、これは解決すべき問題であり、デザイナーが実際に行っているのは問題の解決策を見つけることだと理解するでしょう。 したがって、ユーザー エクスペリエンスをストレスのたまるスクロールに変えずに、サイトのコア コンテンツを提供する最善の方法を見つけるのは、あなたにとって完璧な仕事です。 を分解する際に考慮する価値のある事柄のいくつかを次に示します。 desktop デザインをモバイル デザインに:

1.「モバイルファースト」はモロニックです

申し訳ありませんが、そうです。 誰もがこれをオウム返しにしていますが、コンセプトとしてはあまり役に立ちません。なぜなら、本当に「モバイル ファースト」で設計している場合、それを元にスケールアップしようとすると悪夢のようになるからです。 desktop 純粋に XNUMX 列のレイアウトにずっと固執している場合を除き、デザインを変更する必要はありません。

最良のアプローチは、少なくとも11つ(最大XNUMX)の異なるレイアウトを物理的に設計することです。 検討できる最小のものは次のとおりです。

  • Desktop
  • ランドスケープモバイル
  • ポートレートモバイル

もう少し詳しく知りたい場合は、次のことも検討してください。

  • 横型タブレット
  • ポートレートタブレット

完全なリストにしたい場合は、次のようになります。

  • 巨大な Desktop
  • 普通の Desktop
  • ラージランドスケープタブレット
  • ラージポートレートタブレット
  • スモールランドスケープタブレット
  • 小さな縦型タブレット
  • ラージランドスケープモバイル
  • ラージポートレートモバイル
  • スモールランドスケープモバイル
  • スモールポートレートモバイル
  • タイニー/ウェアラブル

非常に多くの異なる可能性があるため、怠惰な「万能型」アプローチが魅力的な理由は明らかですが、それを台無しにする方法が非常に多い理由も明らかです。

2.広大なページフッターを飼いならす

  desktop デザインには、大量の内部リンクを含む巨大な分厚いページ フッターの XNUMX つが含まれていますか? すばらしい、それはおそらく非常に便利です desktop. モバイルではばかげているように見え、タッチするだけで煩わしいだけではありません。 デバイス ブレーク ポイントごとに、まったく異なるページ フッターを設計できます。 これらのフッター リンクをモーダル ダイアログで利用できるようにするだけで、誰もが勝ちます。

3.あいまいなデバイスでいくつかのマイナーな癖を受け入れる

特定のデバイスが一般的ではない場合、そのデバイスで表示するときにのみ表示されるデザインにいくつかの癖があっても、それほど悪くはありません. デバイスが普及すればするほど、デバイスに表示される癖を取り除く作業が必要になります。

4. 核となるメッセージに貢献しないコンテンツを非表示にできる

サイトの最も重要な部分は、コアメッセージです。 はい、一部のサイトでは、最も重要な部分は広告であり、それらはその広告を配信するためにのみ存在しますが、コアメッセージを表示するか、広告を表示するかを選択する必要がある場合は、メッセージを選択します。 Googleはあなたを ペルソナノングラータ コア コンテンツを非表示にしてから、大量の広告を配信する場合。 そのコア コンテンツは、Google がインデックスに基づいて作成したものであり、そのコンテンツが表示されない場合、Google はそれを欺瞞的と見なすためです。

さらに、純粋に装飾的または美的であるが、核となるメッセージに大きく貢献していない画像などは、削減または完全に非表示にする候補です.

コンテンツを非表示にすることはモバイル ユーザーを「罰する」ことだと主張する人もいますが、これは少しばかげた考えです。 現実には、コンテンツを隠しているのは、コンテンツを強化するためにあるからです。 desktop 経験はあるが、サイトの核となるメッセージに必要なほど十分に貢献していない

5.別の背景を使用できます

最近、私はサイトの所有者が特定の背景にお金を払い、その背景に合うようにすべてのコンテンツを調整したいというとんでもない割り当てを与えられました。 箇条書きの項目は文字数が非常に正確でなければならず、行の総数も正確でなければなりませんでした。

これは、Webデザインでは間違いなく悪い習慣です。 決して レイアウトに合わせてコンテンツをデザインします。 レイアウトは 常に コンテンツを保持するように設計されている。 何らかの理由でレイアウトがコンテンツを保持できない場合は、コンテンツではなくレイアウトを再設計する必要があります。 デバイスごとに異なる背景を使用することは十分に可能です。 あなたはデザイナーです。 想像力を使って。

コンテンツはWebサイトの生命線であり、レイアウトの制約に基づいてそれを変更または制限することは、サイト所有者側の素人性の明らかな兆候であり、レイアウトが最初に不十分に設計されていた兆候です場所。 あなたが同意した場合、そのクライアントはトラブルになるので、あなたの原則を支持してください。

顧客が Web デザインのクライアントである場合を除いて、顧客は常に正しいのです。 クライアントが自分にとって何が最善かを知っていることはめったになく、クライアントに適切な結果を提供する方法を知っている Web デザイナーであると主張することが重要です。 他のwise さらに別のウェブサイトを作成するリスクがあります 憎悪.

6.折りたたみ順序を手動で制御する(またはコンテンツ内の空間参照を回避する)

これは複雑な問題です。 サイトの折りたたみ順序は、div が積み重ねられている順序によって異なります。 正しい順序で折りたたまれるように、div を正しい順序でスタックする必要があります。

ドラッグ アンド ドロップの WYSIWYG Web サイト ビルダーに起因する問題の XNUMX つは、通常、div をスタックする順序を指定できないことです。非常にまれに、それが可能な場合でも、ハードワークが毎回元に戻されます。最小の編集を行うと、元に戻ってソース コードを再度ハックする必要があります。

折りたたむ順序を制御しないと、 この画像 何がうまくいかないかを明確に説明します。 また、モバイルでは左または右にあるものが上または下にシフトされる可能性があるため、空間参照(「左の列」など)を作成しないようにする必要があります。 さらに 読むためにスクロールすることが重要だと読者に思わせると、読者は再びスクロールして戻る必要があり、それはクールではありません。

7.レイアウトごとに異なるフォントサイズが必要になる場合があります

CSS を使用してフォント サイズを制御するのは簡単で、特定のサイズのディスプレイに合わせて、さまざまなフォント サイズやさまざまなフォント フェイス (見栄えが良い場合) を設定することもできます。 CSS メディア クエリを使用して表示サイズを確認できます。次に、フォント サイズまたはフォント フェイスを変更して、ターゲットとするデバイス タイプでコンテンツを最大限に表示する値にします。

8.使うのが一番 responsive 画像

すべての画像は responsive いつでも可能なとき。 これにより、画像を縮小しすぎると、画像の細部が失われることがあります。 この問題の解決策は、画像をクリック可能にして、ユーザーがコンテンツとは別に拡大されたバージョンの画像を表示できるようにすることです。 これを行う通常の方法は、モーダルダイアログボックスを使用することです。

ヘッダー画像提供

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。

コメント 1レスポンス

  1. Mp 言います:

    モバイル ファーストとは、コード ベースでは、「デフォルト」の CSS がモバイル用であり、より広い範囲の変更をビルドすることを意味します。 formatそこからです。 私はあなたの最初のポイントを本当に理解していません

コメントを残す

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

評価 *

このサイトでは、スパムを減らすためにAkismetを使用しています。 コメント処理方法.