灰色地帶

  引用自http://nowills.blogspot.tw/2011/08/adobecss3html5.html

 

一直以來都以發展Flash技術聞名的Adobe，自從被Apple重重的一拳打在臉上後也開始認真的發展CSS3與HTML5技術相關軟體與應用，而在今年的八月初，Adobe推出了Beta網站—the expressive web，這個網站是基於HTML5環境，運用CSS3的搭配，製作出一些新穎的網頁效果，換句話說，the expressive web是Adobe為了展示HTML5與CSS3的效果所製作的展示網站，你可以隨著左下方的箭頭一格一格觀看，相信每點一格都會讓你發現一些驚奇。

為什麼這個網站是Beta?原因很簡單，因為並不是所有的瀏覽器都可以看到完整的畫面，而且也不是所有的瀏覽器都可以支援HTML5新增的全部功能(更何況HTML5還沒有正式訂定完成)，只能說普遍上都可以運作而已，至於哪些瀏覽器不能支援？想當然爾，如果你的瀏覽器不是最新版本，那支援機率當然就會比較低，而每個展示畫面下方都會列出哪項新功能在哪些瀏覽器有支援，而這些有支援的瀏覽器又佔整體使用者多少百分比，原則上都在40~50%之間，相信有數據的搭配呈現會讓整體更有說服力。


透過the expressive web網站的建立，Adobe展示小組也公佈了本次過程中所學到的經驗，以下將用我個人的理解加上自己的解說將Adobe小組的經驗做一個簡短的呈現：

儘早決定是否支援舊版瀏覽器－支援舊版瀏覽器可以提高網站完整性卻會消耗過多的維護時程。

只使用HTML5與CSS3在你的網站—避免使用其他版本以減少頁面上語言與瀏覽器的衝突。

隨著HTML5的制定網站應隨之維護的更佳完善—徹底執行HTML5規範來制作網站。

瀏覽器支援的性能不在僅限於Javascript—隨著CSS3的誕生，部分的動態效果也可以轉由CSS3來執行。

不要動太多東西—這個道理很簡單，太多動態會消耗電腦效能，一般頁面上常見會同時使用動態的部分就有主選單、次選單、主視覺banner等，需要考慮過多的動態效果會讓電腦效能吃緊，效能吃緊會大大影響頁面呈現的效果。

要準備備案—一定要替那些看不到最新的HTML5或CSS3效果的使用者思考，否則你的網站將會殘破不堪。

要記得設計也要符合智慧型手機的使用者—目前智慧型手機的使用者已經大幅增加，日後肯定只會越來越多，絕對不可以忽視頁面在智慧型手機上畫面的呈現有多重要！

使用Modernizr—Modernizr一個Open Source 的Javascript 資源庫，可以幫助你建構HTML5與CSS3。

好的工具—Adobe Edge Preview是Adobe最近推出的新軟體，可以幫助你預覽與建立HTML5與CSS3網站，最重要的是還是可以使用Flash製作動畫嵌入HTML5的Video Tag中。


最後，在the expressive web上也有資源庫頁面，可以讓你查看the expressive web上使用的HTML5與CSS3有哪些之外，也整理了一些HTML5與CSS3的資源網站供大家查看，相信大家看完這個網站，對於HTML5與CSS3會有更明確的視覺感受！


原也網頁設計、網站規劃、網站行銷。