Webデザイン・制作におけるデザイナーのフレームワークについて

「フレームワーク」は、最近の Web 開発におけるかなりの流行語です。例えば、JavaScript フレームワークである YUI、JQuery、Prototype が広く注目を集めており、Web アプリケーション フレームワークである Rails や Dojo はさらに注目を集めており、誰もが何らかのフレームワークを使用して Web サイトを開発しているようです。しかし、フレームワークとは正確には何でしょうか? フレームワークはプログラマのみに役立つのでしょうか?

フレームワークとは何ですか?

コミュニケーションを促進するために、（少なくともこの記事では）「フレームワーク」の統一された定義を示します。これは、共通のタスクを抽象化し、デザイナーが再利用できるようにする一連のツール、関数ライブラリ、規約、および一般的なモジュールです。開発者はタスク プロジェクトに特有の側面に焦点を当て、開発の重複を避けます。一般的に、フレームワークとは、上記の JavaScript フレームワークと Web アプリケーション フレームワークのことです。

構築、パッケージ化、配布について話す必要はなく、フレームワークはあなたまたはあなたのチームだけが使用できることを強調することが重要です。

CSSフレームワーク

場合によっては、抽象的で類似した CSS コードの利点を味わうこともあります。これは、複数の類似した Web サイトを同時にデザインするデザイナーの間で最も顕著です。さらに、チームのデザイナーはフレームワークのアプローチから多くの恩恵を受けました。たとえば、私は新聞社で働いていますが、ニュース Web サイトの特性に基づくと、20 以上の Web サイトには多くの共通点があり、異なるものよりも類似している傾向があります。しかし、表面的には大きく異なるプロジェクトに取り組んでいる 1 人のデザイナーでも、CSS フレームワークの共通の小さな部分を抽象化することができます。

私が働いている Lawrence Journal-World では、最近 CSS フレームワークを構築しましたが、それが効率を大幅に向上させることがわかりました。確かに、CSS フレームワークを自分たちで作成するには数日かかりましたが、フレームワークが完成すると、高品質の Web ページを非常に速く開発できるようになりました。さらに、チーム内のすべてのデザイナーがこのフレームワークを使用するようになったため、デザイナーが他のチーム メンバーの Web ページを変更するときに、他の人の構築アイデアを理解するために 20 分を費やす必要がなくなり、すぐに作業を開始できるようになりました。

無視できるものはありますか？

非常に総合的な CSS フレームワークに投資する場合、探したいのは、すべてのプロジェクトで何度も繰り返される共通のコードです。その目標は、これらのコードの中核的な位置を強化し、「同じことを繰り返さない」ことを守ることです。 tRepeat Yourself)」エンコード方式。これにより、メンテナンスがはるかに簡単になり、訪問者の帯域幅コストが節約されます。

私が取り組んでいるほぼすべてのプロジェクトで、宣言しなければならない CSS の問題がいくつかあります。

ブラウザのデフォルト スタイルの「大幅なリセット」。たとえば、すべての要素のマージンとパディングを 0 に設定し、フレームセットと画像の境界線を削除します。

ベースラインに合わせます。これには、段落、ヘッダー、リストなどのブロック レベルの要素のマージンを同じ (または複数の) ベースラインの高さに設定するなどが含まれます。

フォームの基本スタイルを作成します。

よく使用される CSS クラスをいくつか作成します。たとえば、 .hide (表示を none に設定、つまり要素を非表示に設定)、.mute (より小さいフォントとより明るい色に設定) です。

さらに面白いのは、多くの Web サイト デザイナーが同じ基本構造を何度も再利用していることに気づいているため、非常に柔軟で複数の Web サイト間で使用できる方法で独自の構造を作成してみてはいかがでしょうか。Yahoo はこれを実行しました。ゆい。 Lawrence Journal-World Web サイトの CSS フレームワークを構築していたとき、私は Yahoo がどのようにそれを行ったかを調べることから始めました。それが私たちが望んでいることではないことは確かですが、これは良い例として役立ち、独自のフレームワークを構築する方法について考えるべき多くのアイデアを与えてくれます。私たちは、たとえ各サイトが隣のサイトと多少異なっていたとしても、すべてのサイトで機能するのに十分な柔軟性を備えた 16 セルの問題に落ち着きました。さらに、ほとんどの Web サイトは、ドロップダウン メニュー、ナビゲーション メニュー、ボタンなどのウィジェットを共有します。これらは、抽象化する必要がある主なオブジェクトでもあります。さらに、画像リストのサムネイルなど、共通のコンテンツ名を使用することもできます。サムネイルを表示するすべてのサムネイルでこの CSS クラスが使用されるように、CSS の名前付けを標準化できます。

もう 1 つの方法は、ハック (古いブラウザとの互換性など) を抽出し、独自の拡張スタイル モジュールを追加することです。私自身も試してみましたが、このハッキングは独自性がありすぎて一般的なフレームワークに抽出できないことがわかりました。

本当のメリットは何でしょうか?

フレームワークの本当の利点は、新しい (X)HMTL ファイルを作成してフレームワークを導入できることです。パディングやマージンのリセットに取り組む必要がなくなります。有効なウィジェットなどただし、明らかに、明らかに、サイトごとに外観と操作性をカスタマイズする必要があります。これを実現するには、必要に応じてデフォルトのスタイルをオーバーライドして追加するだけです。

明らかに、Web サイトごとに外観をカスタマイズする必要がありますが、これを実現するために必要なのは、デフォルトのスタイルに数行のコードを追加することだけです。たとえば、フレーム内のクラス属性「tabs」を持つすべての UL タグに基本的な水平ナビゲーション スタイルを設定し、灰色の境界線を設定する場合、その外観と操作性をカスタマイズするには、数行の CSS コードのみが必要です。ウェブサイトは準拠しています。

リストは左側にフロートし、リンクはリスト内のブロックの形で配置され、フォントは Web サイト内での迷惑な広告などのタスクを完了するのに役立ちます。デザイン作業は、これまで何百万回も書かれてきた CSS コードを記述するのではなく、Web サイトの特定の興味深い詳細に焦点を当ててください。

CSSフレームワークを構築するにはどうすればよいですか?

フレームワークを構築するにはいくつかの方法がありますが、最も一般的でおそらく最も便利なのは、共通の CSS を、全体の特定の部分のみを含むスタンドアロンのスタイルシート ファイルに抽象化することです。たとえば、1 つのスタイル ハンドル タイポグラフィと別のハンドル 一括リセットを使用できます。この優れた方法を使用すると、必要なスタイルを選択して導入できます。フレームワークには 6 つまたは 7 つの異なるスタイル ファイルが存在する可能性がありますが、インポートされない限り、そのうちの 1 つまたは 2 つは必要ありません。私たちのチームが作成したフレームワークは、5 つのスタイル ファイルで構成されています。

reset.css - リセットを処理します

type.css — タイポグラフィを処理します

Grid.css — レイアウトを処理します

widgets.css — タブ メニュー、ドロップダウン メニュー、「その他」ボタンなどのウィジェットを処理します。

Base.css — 他のすべてのスタイルシート ファイルが含まれているため、CSS フレームワーク全体を使用するには、(X)HTML で Base.css を参照するだけで済みます。その後、すべてのサイトがこのフレームをインポートできるように、フレームワークを別の場所に保存します。もちろん、各 Web サイトには独自のスタイル シートも必要であり、独自のスタイルによってフレームワークに必要な補足が行われます。

アドバイス

この方法は優れていますが、各ページの http リンクの数が増加するという新たな問題も引き起こします。大規模および中規模のトラフィックがある Web サイトの場合、各ページに 5 つを超える HTTP 接続が追加されると、システム管理者は大きな問題に直面する可能性があります。考えられる解決策は 2 つあります。

すべてのスタイルを複数のモジュールに分割するのではなく、1 つのファイルにまとめます。ここでの問題は、特定のファイルのみを含めるというフレームワークの柔軟性が失われ、メンテナンスが煩雑になることです。
複数の単一ファイルを動的に処理して応答を生成するサーバー側プログラムがあります。私はまだこれが行われているのを見たことはありませんが、うまく行けば非常に効率的になるはずです。上記のフレームワークを例にとると、この動的処理プロセスは、type.css、grids.css などがリクエストされたときではなく、base.css がリクエストされたときにトリガーされます。こうすることで、個々のファイルは引き続き使用でき、フレームワーク全体がプラットフォーム バージョンで有効になります。
要約すると、私たちの目標はできるだけ抽象的ではないことに注意することが重要です。その代わりに、これまでに確実に可能となった迅速なスタートとより効率的な設計プロセスを提供することが目標です。抽象的すぎると状況が混乱し、HTTP リンクが多すぎるとサイトのパフォーマンスに影響を与える可能性があります。覚えておいてください。優れたフレームワークとは、物事を難しく複雑にすることではなく、ゼロから始めることです。

要約する

私たち Web デザイナーは、いつも同じことを繰り返す傾向があり、プログラミング界の友人と同じように、ほぼすべてのプロジェクトで、ブラウザーのデフォルトのスタイル、デザイン レイアウト、ナビゲーション メニューを何度も何度もリセットします。少し時間をかけて CSS フレームワークを整理することで、各 Web サイト プロジェクトを迅速に開始し、Web サイトをより簡単に保守できるようになり、チームの他のデザイナーが自分の作業を理解できるようになります。これらの利点は、Web サイトのパフォーマンスに影響を与えることなく得られる必要があることに注意してください。