Webデザインハックの殿堂

公開: 2020-07-13

私たちウェブデザイナーは常に狡猾な集団でした。 達成する必要のある特定の外観や機能がある場合は、通常、ソリューションを組み合わせることができます。 それは、私たちを導くための特定の標準やツールがない場合でも当てはまります。 ここで、Webデザインハックの概念が役立ちます。

ハックは創造的であり、多くの場合、Webサイトを特定の方法で表示または機能させるための迂回方法です。 時々、彼らは否定的な意味合いを持っています。 たとえば、HTMLテーブルベースのレイアウトは、スクリーンリーダーにアクセスできないとして正当に非難されました。 しかし、すべてのハックが悪いわけではありません。

確かに、それらは可能なことの限界を押し上げる必要性から展開されます。 Webには常に制限があり、デザイナーはハックを使用してそれらを回避しようとしてきました。

それでは、仲間のデザイナーとのTwitterの議論に触発されて、何年も前から最も有用で普及しているWebデザインハックのいくつかを見てみましょう。 彼らは必ずしも私たちが今日持っている基準にろうそくを持っているわけではありませんが、彼らは彼ら自身の時代には名声の殿堂でした。

レイアウト：HTMLテーブルとCSSフロート

私たちの最初の選択は、一緒にこの仮想の殿堂に入ります。 それぞれのピーク使用量は数年離れていましたが、基本的に同じこと、つまり複数列のレイアウトを実現するために使用されていました。

HTMLテーブル

CSSが登場する前は、初期のWebページは1列の問題でした。 パディングやマージンはなく、コンテンツを水平列に配置する標準的な方法もありませんでした。 つまり、ある進取的な魂がこの目的のためにテーブルを使用することを決定するまで。

もちろん、HTMLテーブルは、ページレイアウトではなく、表形式のデータを保持することを目的としていました。 しかし、実際には、CSSが登場するまで、それらは仕事を成し遂げるための効果的な方法でした。

CSSフロート

テーブルには多くの欠点がありました–前述のアクセシビリティの問題が含まれていました。 また、ブラウザでのレンダリングも遅かった。 そのため、CSSフロートが導入されたとき、それはWebデザイナーにとってゲームチェンジャーと見なされていました。

フロートはHTMLマークアップではなかったため、よりアクセスしやすく、パフォーマンスを向上させることができました。 突然の複数列のレイアウトはすべてCSSを介して可能になり、画面サイズなどにうまく適応できるようになりました。

しかし、山車は約束の地まで私たちを連れて行ってくれませんでした。 列の高さを同じにしたい場合は、追加のclearfixハックを実装する必要がありました。

これらの各アイテムは、本来意図された目的で使用された場合でも、今日でも非常に役立ちます。 しかし、レイアウトについては、彼らの日々はありがたいことに行われています。

ウェブサイトのUIのスケッチ。

要素の間隔：改行しないスペース（   ）およびSpacer.gif

詳細志向のWebデザイナーは、要素を正確なピクセルまで配置する方法をよく探してきました。 繰り返しになりますが、これは当時はそれほど簡単ではありませんでした。 したがって、スペースをより細かく制御するために、改行なしスペース（＆nbsp;）とspacer.gifが使用されました。

ノーブレークスペース（   ）

要素を水平方向にぶつけたいが、中央に配置したり、右揃えにしたりしたくないですか？ いくつかの改行しないスペースを追加すると、うまくいきます。

しかし、それはそれほど正確な科学ではありませんでした。 各スペースの実際のサイズは、フォントファミリとフォントサイズによって異なります。 そして、これらの違いを考慮しても、このハックは、訪問者が使用しているブラウザとOSによって異なって見える可能性があります。

Spacer.gif

このより正確な間隔のハックは、透明な.GIF画像（多くの場合spacer.gifという名前）を作成してページに配置することで実現しました。 優れた点は、透明な画像であるため、設計者は外観やパフォーマンスに悪影響を与えることなく、高さと幅を任意のピクセル量に設定できることでした。

CSSは、これらのハックの両方を廃止しました。 しかし、WordPress Gutenbergエディターにほぼ同じことを行うスペーサーブロックがあることをご存知ですか？ それは、必要性がまだそこにあることを示しているだけです。

矢印のサイズ変更。

タイポグラフィ：画像ベースのテキスト

これの必要性は非常に単純でした。 初期のWebは、基本的にユーザーのシステムにインストールされているフォントに限定されていました。 もちろん、デザイナーは、Times New Roman、Georgia、Arial、Helveticaなどの基本的なものを除いて、ユーザーがアクセスできるすべてのフォントを知る方法がありませんでした。

それとともに、Photoshopでテキストでいっぱいの画像を作成するというひどい決断が下されました。 これにより、事実上すべてのフォントを使用できるようになりましたが、アクセシビリティが犠牲になりました。 さらに、HTMLの見出しタグの代わりに画像を使用すると、ページのセマンティクスも失われ、SEOに損害を与える可能性があります。

ラップトップコンピューターで入力する人。

スティッキーヘッダーとナビゲーション：フレーム

HTMLフレームは、かつて使用していたタスクの多くがCSSとJavaScriptを介して実行されるようになったため、おそらく時代を先取りしていました。

コンセプトはかなりシンプルでした。 レイアウト内の個々の「フレーム」は、実際には独自のページでした。 これは、ヘッダー、フッター、またはナビゲーションをサイトの他のコンテンツから分離する簡単な方法でした。 たとえば、ナビゲーションに変更を加えるということは、1つのファイルに1つの変更を加えることを意味します。 これは、サーバーサイドインクルードが行ったことと似ていますが、他のいくつかの設計上の利点が含まれています。

その中で最も重要だったのは、「スティッキー」なヘッダーとナビゲーションを作成する機能でした。 ユーザーがコンテンツをスクロールしても、サイト内を簡単に移動できました。

この手法はその目的を果たしましたが、理想からはほど遠いものでした。 さまざまな画面サイズの点であまり適応性がなく、SEOにもあまり適していませんでした。 不正なURLからフレームをロードする可能性についてもセキュリティ上の懸念がありました。

額縁の品揃え。

画像の最適化：スライスされた画像

ブロードバンドが広く利用できるようになる前の数日間、画像の最適化は不可欠でした。 50kbの画像でさえ、遅い接続ではページを圧迫する可能性があります。

ソフトウェアの巨人アドビは興味深いソリューションを提供しました。 ImageReadyソフトウェアを使用すると、デザイナーは1つの画像を任意の数の小さな断片にスライスすることができます。 次に、個々のスライスを最適化して、理論的にはすばやくダウンロードできるようにします。

しかし、それだけではありません。 その後、ソフトウェアはスライスをHTMLテーブルにエクスポートできます。 そこから、そのHTMLをコピーしてページに貼り付けることができます。

この手法の問題は2つありました。 まず、テーブルレイアウトのレンダリングに余分な時間がかかる可能性があり、達成した最適化がすべて無効になる可能性があります。 第二に、維持するのは本当に苦痛かもしれません。 たとえば、大きなヘッダーグラフィックにナビゲーション項目を追加するには、まったく新しいスライスのセットからやり直す必要がある場合があります。したがって、テンプレートを変更する必要があります。

画像の最適化は依然として重要ですが、ブロードバンドはありがたいことに大きなファイルでもう少し余裕を持たせてくれます。 それでも、最新バージョンのPhotoshopは、画像のスライスとHTMLのエクスポートを提供します。

Photoshopでスライスした画像。

Internet Explorerの配置： <!--[if IE]>

今日まで、Webデザイナー（私自身を含む）がInternetExplorerの頑固な存在を呪うのを聞くのは珍しいことではありません。 一部のユーザーは単にそれをあきらめないため、その遺産は存続しています。

そのため、IEの多くの独自の癖や制限を回避しようとしているように見えます。 長年にわたり、これには条件付きコメントを使用してIEユーザーを検出し、代替スタイルを提供することが含まれていました。

IE <!--[if IE]>のすべてのバージョンにスタイルを適用したり、古いバージョン<!--[if lt IE 11]>を使用しているものをターゲットにしたりできるという点で、多少用途が広いです。 また、逆に使用して、特定のリリース以上のバージョンを探すこともできます<!--[if gte IE 10]> 。

Microsoftは、これらの条件付きコメントがIEで機能することを可能にしたので、Webデザイナーにいくらかの共感を持っていたに違いありません。 ありがたいことに、彼らの新しいEdgeブラウザはそのようなナンセンスを必要としません。

画面に表示されるコード。

覚えておくべきWebデザインのハック

確かに、私たちの殿堂でのハッキングだけがWebデザイナーによって使用されたものではありませんでした。 一見不可能と思われることを行うのに役立った回避策は数え切れないほどあります。 しかし、このリストを際立たせているのは、それらの大量の使用と、場合によっては大企業からのサポートです。

そして、おそらく私たちが彼らについて言える最も良いことは、彼らが働いたことです。 目的を達成するための手段としてそれらを使用しました。 確かに、それらはダクトテープをほつすことによって一緒に保持されていたかもしれませんが、その気の利いたデザインをブラウザで実際にレンダリングすることは、本当の成果のように感じました。

さらに良いのは、彼らが今日のWebへの道を開くのに役立ったことです。 このリストのほとんどの項目は、HTMLおよびCSS標準に置き換えられており、すべての人にメリットがあります。