アニメーションGIFは、ブラウザウィンドウを数ピクセル狭めたときにInvidiousで何が起こるかを示しています。
ページ上の要素のレイアウトが完全に変更されます。元の3列のレイアウトが突然1列のレイアウトに変更されます。最初に、左端にあり、まったく重要でない情報が含まれている小さな列の内容が表示されます。
これによく出くわすのは私だけではないと確信しています。個人的には、ブラウザのウィンドウが十分に狭いときに気に入っていますが、過去10年間で、Webページは、モバイルで機能を取り除いたバージョンのページが必要であるかのように、この設定に反応し始めました。ここには大きな問題があり、1つだけではありません。
空間ガスライティング
Macintoshの設計の背後にある基本的な概念の1つは、最初の真にクライアント中心のグラフィカルユーザーインターフェイスであり、コンピューターを操作するときに人間と機械の相互作用を空間的に配置するという考え方 です。ユーザーは、ディスク上にファイルを配置するためにテキストコマンドを記憶する必要がなくなり、ファイルをシャッフルして視覚的に表示し、ここでは洞察を得る機会を提供しました。スペース。ユーザーが覚えている可能性があり 、彼は置く場所のファイルを、そしてファイルがどのようなそれほど重要ではありません と呼ばれています。これは、私たちが財布、鍵、または重要な文書をどこに置いたかを覚えている方法です。
空間的な向きのこのアイデアは、特にユーザーインターフェイスのデザインとウェブデザインの基本です。ユーザーが何度もサイトにアクセスすると、ここですべてがどのように機能するかが徐々にわかります。あなたがあなたのサイトをデザインすることに専念するほど、ユーザーはより効率的にそれを管理することができ、彼らはあなたのサイトをより好きになるでしょう。再設計に関連して、なぜウェブ上にこれほど多くの注目を集めるスキャンダルがあるのか疑問に思ったことはありませんか？これがあなたの答えです。ユーザーは、サイトをマスターするために費やした努力がデザイナーの気まぐれで消されたとき、デザイナーが単に古いサイトに飽きているということを嫌います。
これはまさに私がレスポンシブデザインで抱えている問題です。ほとんどのレスポンシブデザインの実装は、基本的に、ユーザーがウィンドウのサイズを変更するたびにサイトを再設計するようなものです。この種の最もひどい例は、水平メニューバーが垂直メニューバーに変わる場合です。パネル上のリンクの位置についてユーザーが視覚的に覚えていたものはすべて、パイプに飛び込みます！このオプションはここに隠されていると思いましたか？いいえ、彼女はそこにいます！
サイト間の不整合
しかし、ユーザーがレスポンシブデザインを好まなくても、それを回避することはできません。いわゆるレスポンシブデザインの多くの例は、CSSを使用したメディアクエリを使用して実装されています。基本的には、ブラウザのウィンドウ幅が超えているかどうかなど、特定の条件が満たされたときに一連のCSSルールを適用するようにブラウザに指示する条件ステートメントです。指定されたピクセル数を超える..。この場合の正確な数は、Webデザイナーによって選択されます。したがって、2人の異なるWebデザイナーが同じ幅を選択することはほとんどありません。
デスクトップPCでは、ほとんどのWebページを全幅レイアウトで表示することを好むことに誰もが同意すると思います。ページの絞り込みバージョンの方が便利な例外があります 。、しかし、分離されていないとしても、それらはまれです。原則として、全幅のWebページでの作業ははるかに優れていて簡単です。
狭められたバージョンのWebページを処理する必要がないように、ユーザーはブラウザウィンドウの幅を自分で調整して、ページがウィンドウ全体に収まるようにする必要があります。ただし、2人のWebデザイナーがメディアクエリで同じ幅を指定することはほとんどないため、ユーザーが諦めて満足しない限り、ユーザーが任意のWebページのフルバージョンに適合することが保証されているウィンドウ幅に一致させることは不可能です。 。フルスクリーンモードまたは広すぎるウィンドウ。ただし、ユーザーがWebページのフルバージョンにアクセスできるだけでなく、一度に多数のウィンドウをスコープ内に保持することも重要であるため、個々のウィンドウの幅を制限する必要があります。
より広いウィンドウを表示する必要があるWebページにアクセスした場合、ユーザーがウィンドウサイズを調整しないのはなぜかと思われます。結局のところ、これは、レスポンシブデザインが登場する前に、特定の固定幅のWebページを簡単に切り替えることができたときにユーザーが行動しなければならなかった方法です。しかし、現実はそれほど単純ではありません。レスポンシブでないページでは、ページ全体に合わせてウィンドウのサイズを変更する必要があるかどうかは非常に明確です。また、レスポンシブWebページでは、ユーザーに「やあ！ページ全体があなたのようなウィンドウに収まりません。」スクロールバーやコンテンツのクリッピングはありません。せいぜい（または、最悪の場合）、ハンバーガーメニューまたはその他の奇妙な「モバイルのような」インターフェイスがあります。
ユーザーは何をすべきですか？
ブラウザでメディアクエリのサポートを無効にすることで、ユーザーがこの問題を解決できると考えています。こんなに簡単だったら！問題の根本は、メディアクエリに全幅のデザインを割り当て、デフォルトでモバイルバージョンを提供することがWebデザイナーの間で一般的な方法であるということ です 。メディアクエリを無効にすることで、そのようなページではまったく逆の結果が得られます。
どういうわけか、ブラウザにすべてのWebページのスタイルシートとスクリプトに同じユーザー定義可能な幅を与えるように強制する方が合理的です。プライバシー上の理由からのみ、これは望ましいことです。
理想的なソリューションは、ウィンドウ幅の選択に関連する他のすべてのメディアクエリを無効にしながら、サイトの全幅を有効にするメディアクエリ（存在する場合）を識別してアクティブ化する機能を提供することです。これは、スタイルシート内のすべてのメディアクエリを解析し、必要に応じて選択的に削除するJavaScriptを使用したブラウザ拡張機能として実行できる可能性があります。
ウェブデザイナーは何をすべきですか？
このセクションは最も重要なセクションなので、最後に残しました。上記のすべてが私たちに簡単な結論をもたらします： ウェブデザイナーはレスポンシブデザインを実装する方法について長くそして一生懸命考える必要があります。
確かに、より高いレベルでは、レスポンシブデザインの一般的な意味は何であるかという質問をする必要があります。確かに、このデザインは非常に便利です。現代のユーザーは、画面幅の異なるさまざまなデバイスからインターネットにアクセスします。この問題は、レスポンシブデザインの助けを借りて解決されます。しかし、おそらくレスポンシブデザインの問題は、そのようなソリューションの過度の一般化です。考えられるすべての画面サイズをサポートするように設計されていますが、画面は本当にそれほど多様ですか？むしろ、それらは逆に、標準化され、いくつかの簡単に識別できるカテゴリに細分されます。これらのもののように：
- デスクトップPC /ラップトップ
- タブレット
- スマートフォン
これらの画面サイズごとにサイトのデザインを個別に行うと、ユーザーにとってはるかに便利ではないでしょうか。次に、同じタイプのすべてのデバイスで一貫しているように見えるため、ユーザーはサイトインターフェイスの学習に時間を費やすことができます。
私はこれを言っているとは信じられませんが、何らかの形でユーザーエージェントの検出に戻る方が良いかもしれません：
let mobile = navigator.userAgent.match(/Mobi/); let ipad = navigator.userAgent.match(/iPad/); let android = navigator.userAgent.match(/Android/); if (mobile && !ipad) this is a phone else if (ipad || android) this is a tablet
上記のコードは不完全かもしれませんが、多くの基本的なことをカバーしていると思います。すべてのPCブラウザがJavaScriptを一律にサポートしているわけではありませんが、すべてのスマートフォンとタブレットがサポートしているため、サイトのPCバージョンをデフォルトにするようにしてください。
当社の サーバーは、ウェブサイトの開発とホスティングに使用できます。
上記のリンクを使用するか、バナーをクリックして登録すると、任意の構成のサーバーをレンタルした最初の月が10％割引になります。
