Graceful DegradationProgressive Enhancement
tomoyuki kashiro (@Tkashiro)
Cross Browserから
Graceful DegradationProgressive Enhancement
Cross Browserとは?
WikipediaCross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers.
Cross Browserとは?
・すべてのブラウザで 同じ表示(UI)を提供すること
・実は結構古いポリシー
※Regressive Enhancementとも呼ばれる
背景
・ブラウザ・バージョンの乱立 表示差分多発
IE9 IE8 IE7 IE6
背景
・HTML5の実装加速
機能差分 HTML5対応/未対応ブラウザ間で表示の差だけではなく、 機能差分が生じる
問題点
・機能差分まで、すべてブラウザで対応するのは不可能
・クロスブラウザで実装を行うと、HTML5未対応ブラウザ の仕様に合わせざる得ない
・結局、今までと何も変わらないサービスになる
新しいポリシー
今まで ・ Regressive Enhancement (Cross Browser)
これから ・ Graceful Degradation ・ Progressive Enhancement
Graceful Degradationとは?
情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する
■アプローチ
最新のブラウザを基準にし、古いブラウザには機能を 落とす
Progressive Enhancementとは?
情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する
■アプローチ
古いブラウザを基準にし、最新のブラウザ用に機能を 付加する
相違点
Graceful Degradation
・新しいブラウザが基準 ・最新機能を使い倒す
Progressive Enhancement
・古いブラウザが基準 ・最低限の機能を担保しやすい
共通点
・ 新しい機能は取り入れる
・ すべてのブラウザでUIや機能を統一する必要はない
Twitterの例 その1
▼CSS3で角丸デザイン・Chrome
・IE
▼LocalStorageで表示高速化
下記情報をブラウザに保存
・フォローワーのプロフ・リスト・最近のフォローワー・お気にり
Twitterの例 その2
IE6ユーザにはモバイルサイト(ガラケー)にリダイレクト
https://support.twitter.com/articles/20169383-ie6twitter-commobile-twitter-com
結論
・Cross Browserという考え方変えていきませんか?
・古いブラウザ対応に工数かけず、 新しいブラウザの可能性を見出していきましょう!
Top Related