Webデザインの "Graceful Degradation"とは何ですか?

Webデザイン業界は常に変化しています。これは、Webブラウザやデバイスが常に変化していることもあります。 私たちがWebデザイナーや開発者として行う仕事は、ある種のWebブラウザーを通じて行われるため、私たちの仕事は常にそのソフトウェアとの共生関係になります。

ウェブサイトの設計者や開発者が常に対処しなければならなかった課題の1つは、ウェブブラウザへの変更だけでなく、ウェブサイトへのアクセスに使用される様々なウェブブラウザの範囲でもあります。 サイトにアクセスしたすべての訪問者が最新かつ最高のソフトウェアを使用していることを確信していれば、それは一度もありませんでした。 あなたのサイトへの訪問者の一部は、非常に古く、最新のブラウザの機能が欠けているブラウザでWebページを表示します。 例えば、古いバージョンのMicrosoftのInternet Explorerブラウザは、多くのWeb専門家の味方で長い間苦しんできました。 同社が最古のブラウザの一部をサポートしなくなったにもかかわらず、そこにいる人たちがいます。それらの人たちは、あなたがビジネスをしたい人と通信したい人たちです。

現実には、これらの陳腐化したWebブラウザを使用している人は、古いソフトウェアを持っていることや、ソフトウェアの選択のためにWebブラウジングの経験が損なわれていることさえ知らないことさえある。 彼らにとって、旧式のブラウザは、単にウェブサイトにアクセスするのに長い間使われてきたものです。 Web開発者の観点からは、 今日利用できる最新の機能豊富なブラウザやデバイスでうまく機能するWebサイトを作成すると同時に、これらの顧客に有用な体験を提供できるようにしたいと考えています 。 「グレースフル・デグラデーション」は、古いものと新しいものの両方のさまざまな異なるブラウザ用のWebページ設計を処理する戦略です。

最新のブラウザから始める

近代的なブラウザを念頭に置いて、優雅に劣化させるように設計されたウェブサイトのデザインが最初に設計されています。 そのサイトは、最新のWebブラウザの機能を利用するために作成されています。その多くは、人々が常に最新のバージョンを使用していることを確認するための「自動更新」です。 正常に機能低下しているWebサイトも、古いブラウザでは効果的です。 機能が豊富ではない、古いブラウザではサイトが表示されても機能は低下しますが、機能や表示ビジュアルが異なる可能性があります。 あまり機能的でないか、または見栄えの良いサイトを提供するこのコンセプトはあなたを奇妙に襲ってくるかもしれませんが、真実は人々が彼らが行方不明であることを知らないことさえあるということです。 彼らは見ているサイトと「より良いバージョン」を比較しないので、サイトが必要なもののために機能し、機能的にも視覚的にも壊れていないように見える限り、あなたは良い形になります。

プログレッシブ・エンハンスメント

優雅な劣化のコンセプトは、多くの点で、あなたが耳にしたかもしれない別のウェブデザインのコンセプト、すなわち進歩的な改善に似ています。 優雅な劣化対策と漸進的改善の主な違いは、設計を開始する場所です。 最低限の分母で始めて、あなたのウェブページに最新のブラウザ用の機能を追加する場合は、プログレッシブエンハンスメントを使用しています。 最も近代的で最先端の機能から始めて、スケールバックすると、優雅な劣化が起こります。 最終的に、結果として得られるWebサイトは、漸進的な拡張や優雅な劣化を使用している場合でも、同じ経験を提供する可能性があります。 現実的には、いずれのアプローチのポイントも、古いWebブラウザやそれらを使い続けている顧客にとって使い慣れた体験を提供しながら、最新のブラウザに適したサイトを作成することです。

Graceful Degradationは読者に知らせることを意味しません。"最新のブラウザをダウンロード"

多くの現代のデザイナーが優雅な分解手法を好まない理由の1つは、読者が最新のブラウザをダウンロードしてページを動作させるという要求に頻繁に変わるからです。 これは優雅な劣化ではありません 。 「この機能を動作させるためにブラウザXをダウンロードする」と書いてみたいと思えば、あなたは優雅な劣化の領域を去り、ブラウザ中心の設計に移行しました。 はい、ウェブサイトの訪問者をより良いブラウザにアップグレードするのは間違いありませんが、多くの場合、新しいブラウザをダウンロードすることについては理解していないことを覚えておいてください。彼らは離れている)。 あなたが本当に自分のビジネスを望むなら、より良いソフトウェアをダウンロードするためにサイトを離れるように指示することは、それを行う方法とは考えにくいでしょう。 サイトに特定のブラウザのバージョン以上を必要とする重要な機能がない限り、ダウンロードを強制することはユーザーエクスペリエンスの問題になることが多いため、避けるべきです。

経験則として、漸進的な強化の場合と同じように、優雅な劣化のために同じルールを実行することです。

  1. 有効な標準準拠のHTMLを書く
  2. デザインとレイアウトに外部スタイルシートを使用する
  3. 対話性のために外部リンクされたスクリプトを使用する
  4. CSSやJavaScriptを使用しない低レベルのブラウザでもコンテンツにアクセスできることを確認する

このプロセスを念頭に置いて、あなたは外出してできる最先端のデザインを構築することができます! それでも機能していないブラウザーでも機能していることを確認してください。

どのくらい遠くに行く必要がありますか?

多くのWeb開発者が持っている1つの質問は、ブラウザのバージョンをどの程度サポートするべきかです。 この質問には断然と答えがありません。 サイト自体によって異なります。 ウェブサイトのトラフィック分析を確認すると、そのサイトを訪問するブラウザが表示されます。 特定の古いブラウザを使用しているユーザーの割合が著しい場合は、そのブラウザをサポートしたり、そのビジネスを失う危険があります。 アナリティクスを見て、誰も古いブラウザのバージョンを使用していないことを確認したら、古くなったブラウザを完全にサポートしてテストすることを心配しないでください。 あなたのサイトがどれくらいの距離をサポートする必要があるかという疑問に対する本当の答えは、「あなたの分析があなたの顧客が使っていることをはるかに裏づけています。

Jennifer Kryninのオリジナル記事。 Jeremy Girardによって8/9/17に編集されました。