カテゴリー別アーカイブ: UI/UX

レスポンシブデザインとページサイズとvisibility:hiddenについて

Web制作の現場において、画像やリッチコンテンツのサイズなどは気にされることが多いのですが、ブロードバンドの普及によって、Webページ自体のサイズが気にされることはあまりないかもしれません。

数キロバイトの違いは、もはやあまり気にする必要はないでしょうが、最近ではプラットフォームの多様化からレスポンシブデザインなる同一コンテンツを利用したサイト設計なども顕著になってきました。

ただレスポンシブデザインを採用するにあたってどうしても、気になっていたのが、Webページ単体の文章量やサイズについて。

例えばインラインで画像を読み込んだりしていた場合、レスポンシブデザインではページ容量が変わることを目的としていた場合、例えばvisibility:hiddenなどで非表示にしても、実際のサイズ容量は変わりません。
ちなみにhead内の記述やコメント、css指定も当然加算されます。

ということはどういうことかというと、レスポンシブデザインは非常に手間がかかるわりには、成果に見合いづらい面があるということです。

確かにフラットデザインやグリッドデザインなどの矩形と背景色だけの淡泊なサイトであれば、有効度は高いわけですが、結局、各端末ごとのcssファイルを都度用意する可能性があり、画像をふんだんに使用しているサイトやJQueryを利用したりして、直接imgタグで画像を読み込んでいる場合などは、逆にモバイル端末などに対してよろしくないWebページになっていきます。

なので、レスポンシブデザインを使用する場合は、画像などの重たいサイズのものはすべてCSSで切り替える必要があり、ソースコード上にはインラインでパソコン用サイト向けに記述されたページサイズが大きくなる記述は、極力皆無なソース構造になっていきます。

たしかに、PHPやJavascriptなどでアクセスするプラットフォームによって実行される記述などを制御することで、回避できますが、管理や表示確認作業が複雑化して、静的サイトよりも動的な特性が強くなるため、参照元を同一化するということは理想的ではあるけれども、より簡素なWebサイトのみに適しているのではないだろうか。

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。