Graceful degradation progressive_enhancement

15
Graceful Degradation Progressive Enhancement tomoyuki kashiro (@Tkashiro )

description

 

Transcript of Graceful degradation progressive_enhancement

Page 1: Graceful degradation progressive_enhancement

Graceful DegradationProgressive Enhancement

tomoyuki kashiro (@Tkashiro)

Page 2: Graceful degradation progressive_enhancement

Cross Browserから

Graceful DegradationProgressive Enhancement

Page 3: Graceful degradation progressive_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.

Page 4: Graceful degradation progressive_enhancement

Cross Browserとは?

・すべてのブラウザで 同じ表示(UI)を提供すること

・実は結構古いポリシー

※Regressive Enhancementとも呼ばれる

Page 5: Graceful degradation progressive_enhancement

背景

・ブラウザ・バージョンの乱立 表示差分多発

IE9 IE8 IE7 IE6

Page 6: Graceful degradation progressive_enhancement

背景

・HTML5の実装加速

 機能差分  HTML5対応/未対応ブラウザ間で表示の差だけではなく、  機能差分が生じる

Page 7: Graceful degradation progressive_enhancement

問題点

・機能差分まで、すべてブラウザで対応するのは不可能

・クロスブラウザで実装を行うと、HTML5未対応ブラウザ の仕様に合わせざる得ない

・結局、今までと何も変わらないサービスになる

Page 8: Graceful degradation progressive_enhancement

新しいポリシー

今まで ・ Regressive Enhancement (Cross Browser)

これから ・ Graceful Degradation ・ Progressive Enhancement

Page 9: Graceful degradation progressive_enhancement

Graceful Degradationとは?

情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する

■アプローチ

 最新のブラウザを基準にし、古いブラウザには機能を 落とす

Page 10: Graceful degradation progressive_enhancement

Progressive Enhancementとは?

情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する

■アプローチ

 古いブラウザを基準にし、最新のブラウザ用に機能を 付加する

Page 11: Graceful degradation progressive_enhancement

相違点

Graceful Degradation

 ・新しいブラウザが基準 ・最新機能を使い倒す

Progressive Enhancement

 ・古いブラウザが基準 ・最低限の機能を担保しやすい

Page 12: Graceful degradation progressive_enhancement

共通点

・ 新しい機能は取り入れる

・ すべてのブラウザでUIや機能を統一する必要はない

Page 13: Graceful degradation progressive_enhancement

Twitterの例 その1

▼CSS3で角丸デザイン・Chrome

・IE

▼LocalStorageで表示高速化

下記情報をブラウザに保存

・フォローワーのプロフ・リスト・最近のフォローワー・お気にり

Page 14: Graceful degradation progressive_enhancement

Twitterの例 その2

IE6ユーザにはモバイルサイト(ガラケー)にリダイレクト

https://support.twitter.com/articles/20169383-ie6twitter-commobile-twitter-com

Page 15: Graceful degradation progressive_enhancement

結論

・Cross Browserという考え方変えていきませんか?

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