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という考え方変えていきませんか？

・古いブラウザ対応に工数かけず、　新しいブラウザの可能性を見出していきましょう！