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

を使用しているほとんどのウェブサイト 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デザイナーとして自分自身を主張することが重要です。他のwise さらに別のウェブサイトを作成するリスクがあります憎悪.

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

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

ドラッグアンドドロップのWYSIWYG Webサイトビルダーから発生する問題のXNUMXつは、divが積み重ねられる順序を通常は指定できないことです。これを実行できる非常にまれな例では、ハードワークが毎回元に戻されます最小限の編集を行うと、戻ってソースコードを再度ハックする必要があります。

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

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

CSSを使用してフォントサイズを制御するのは簡単で、特定のサイズのディスプレイに異なるフォントサイズを設定したり、異なるフォントフェース（見栄えが良い場合）を設定することもできます。 CSSメディアクエリで表示サイズを確認してから、フォントサイズまたはフォントフェイスを変更して、ターゲットとするデバイスタイプでコンテンツを最大限に活用できるようにコンテンツを表示します。

8.使用するのが最善です responsive 画像

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

ヘッダー画像提供アルトゥール・マルティノフスキー