Webデザインにおける漸進的強化のためのベストプラクティス

Webサイト構築の技術は、急速に変化する多くの部分で非常に複雑です。 Webデザインコミュニティの目標は、 複雑さを軽減, そして エラーの可能性を減らす 作成プロセスの各段階で.

プログレッシブエンハンスメント Webデザインにおけるそのようなアイデアは、 エラーを減らす そして 一貫したユーザーエクスペリエンスを提供する 全面的に。このコンセプトには独自のウィキペディアのページがあります。 完全にアクセス可能なコンテンツ, ブラウザでサポートされている場合にのみ拡張機能をレンダリングする.

プログレッシブエンハンスメントを理解するのは簡単ですが、設計作業に直接適用するのは容易ではありません。いくつかカバーしたい 現実世界のプロジェクトにおける漸進的強化のためのベストプラクティス に デザイナーが自分のワークフローについてより持続可能に考えるのを助ける.

プログレッシブエンハンスメントについて

プログレッシブエンハンスメントの理論は、 簡単なウェブサイトから始める それはすべてのブラウザで動作します。 すべての訪問者がアクセス可能. それから可能な限り機能を追加する.

これは、デフォルトですべての機能が含まれていて、何かがうまくいかないときには劣化するという、グレースフル劣化の反対です。.

プログレッシブエンハンスメントは、全体的なユーザーエクスペリエンスにとっては優れています。 必要な要素だけをロードする. すべてのWebブラウザはテキスト（および通常は画像）をサポートできます。 CSSがないと、この情報は当たり障りがなく無味味に見えますが、アクセス可能になります。.

この リスト表示 記事は進歩的な強化があると主張します コンテンツ優先 と 後で追加されたスタイルと動的コンポーネント. セマンティックHTMLのコンテンツは、何よりも先に配信する必要があります。.

今日使用している高度なCSSとJavaScriptは広くサポートされていますが、プログレッシブエンハンスメントの原則に従いたいのであれば、それらは贅沢品と考えるべきです。.

プログレッシブエンハンスメントの主な機能の概要は次のとおりです。考慮する必要があります。

セマンティックマークアップ すべてのコンテンツに対して
ユーザーの ブラウザの設定 尊重される必要がある
コンテンツと基本機能は すべてのユーザーが利用可能
控えめなJavaScriptがロードされています それをサポートできる環境で

フロントエンド開発における技術的な制約は、主にブラウザの互換性によって決まります。プログレッシブエンハンスメントはどのようにして考えるかについて考えて基本に戻ります。 裸骨の最も単純なWebページ ように見えるかもしれません。そこから、できます より高度な機能を計画する, CSS3プロパティのように.

しかし、最近のCSS 3をサポートしていないブラウザはどうでしょうか。 Can I Useのようなサイトが登場するのはここです。どの機能を実装する価値があるかを判断し、それに基づいて判断を下す必要があります。 あなたのウェブサイトの対象読者に.

2.スタイルシートの存続

今日のほとんどのブラウザはあなたが必要とするすべての基本的な特性をサポートしています。しかし 高度なCSS3は依然としてレガシーユーザーにとっての問題です, そして進歩的な強化は解決を提供します.

これらの新機能を維持するための代替方法を探す代わりに、まず自分自身に関心を持つ 適切なレイアウト構造.

できるだけ多くのアクティブブラウザで機能するセマンティックHTMLおよびCSSマークアップを作成する（IE5サポートなどの古いブラウザのサポートは不要）.

たとえば、2つのサイドバーを持つフロートを使用するJSFiddleを考えてみましょう（.一定）、および流体含有量領域（.流体）すべてのCSSを削除してコードを再実行すると、すべてが最初の列、次に2番目、最後に最後の列にうまくスタックされていることがわかります。.

何人かの開発者はcontentカラムを好むでしょう（.流体）HTMLの最初に表示されます。これが漸進的な機能強化が効果を発揮するところであり、代替のCSSソリューションが実行可能になる.

HTMLの主な目的は次の2つです。

完全に 意味論的かつ妥当 コード
A 一貫した経験 すべての人のために

これらの目標を達成するための最も簡単な方法は、 何もないところから始める そして ワークアップ, ほとんどの進歩的な強化の支持者がそれを推薦するように.

あなたのコードがCSSを無効にしても有効にしてもよさそうなら、それは誰にとっても合理的な解決策を提供します。.

検討する価値もあります どの時点であなたは何かのためのサポートをやめる. マイクロソフトはすでにIE6のメジャーサポートを終了しているので、そのブラウザを実行しているユーザーはあなたの時間の価値がないかもしれません.

しかし、まだ大きな問題が1つあります。ブラウザが最新のCSSをサポートしていない場合は、どうすればよいですか。?

あなたは単に 動作するコードを書く なしで それ, そして現代のCSSを進歩的な機能強化として考えてみましょう。これがプログレッシブエンハンスメント方法論の美しさです.

フォールバックは必要ありません。 基本的にデフォルトでは何もサポートされていないと仮定.

段階的な拡張方法は、何かがサポートされていない場合でもサイトを使用可能にすることです。.

考慮する必要があります CSSなしで実際にコンテンツがどのように流れるか. たとえば、TransmitのWebサイトでCSSを無効にしても、コンテンツは引き続きページの下に有機的に流れます。.

はい、それは醜いです、そして、はい、私達が20年間の進歩を失ったようにそれは感じます… しかしそれはうまくいきます.

3. JavaScriptの取り扱い

開発プロセス中に発生する可能性があるJavaScriptの各問題は、注意が必要でユニークです。段階的な機能強化を行って新しいプロジェクトを構築するときは、必要なJSベースの機能をすべてリストし、それらがどのように可能であるかを検討する必要があります。 JavaScriptなしで操作する.

これには、有効な解決策を見つけるために多くのオンライン調査が必要になります。 Aaron Gustafsonが、Ajaxをiframe内のコンテンツのメタリフレッシュに置き換えるなど、さまざまな問題の解決策を掲載した素晴らしいブログ記事を執筆しました。.

また、JavaScriptのタブを作成するときには、 実際のID値を持つアンカーリンクを使用する. こうすることで、JavaScriptが無効になっても、タブをアンカー値で表示およびアクセス可能にすることができます。 Aaronは、A List Apartに、これらの問題についてどのように考えるべきかについてのより一般的な概要をカバーする別の記事を書いています。.

これは別の例です。コンテンツを動的にロードするリンクがあるとしましょう。の href preventDefault（）メソッドを使用してすべてJavaScriptから読み込まれるため、値は空です。.

代わりに、設定するのが賢明でしょう。 href プロパティ 別のページを指す コンテンツが自然にロードできる場所 JavaScriptが無効になっている場合、訪問者にはそのページしか表示されません。.

プログレッシブ拡張はJavaScript以上のものですが、Web開発が年々さらに進歩していることから、JavaScriptが重要な役割を果たすことは間違いありません。.

という仮定の下で動作する すべてが無効になっています, そして そこからスケールアップ. これには、あなたのコントロールの及ばない埋め込みウィジェットに関する問題が含まれるかもしれません。