2013 年 08 月 28 日

Responsive Web Design的實用性?

(7) 回應 / in 網頁設計師

Responsive Web Design的實用性?

Responsive Web Design的實用性?

自2010年來,Responsive Web Design這個玩意出現,也有三年的光陰。雖然responsive web 的理論很吸引人,我們的團隊也為客戶成功執行。但今天要討論的,不是概念也不是執行方式,而是他到底實不實用?

※responsive web的概念跟執行方式,已經很多版主有很精闢跟完整的解釋,文末的連結是我覺得不錯的文章,有興趣的可以把文章拉到後面看看wink

 

不實用原因如下:

1. 允許網頁寬度自動調整,不使用絕對寬度
這就是個大問題,自動調整只適合簡潔的頁面,無法配合所有客戶對視覺設計的要求,最後的解決方法,就是寫三個截然不同的css做切換,且字型圖片都有不同設定,花費時間與成本。

2. 跨瀏覽器兼容性問題
主流瀏覽器包括IE9都有支持responsive web。但是,不支援的也不少(大汗) 。光是要讓全佈景設計(css+js)兼容少許js動畫效果這兩樣,大概就讓人想上吊個10回。

※ IE6,7,8據稱可用css3-mediaqueries .js解決,請自己google “css3-mediaqueries .js”看看會出現啥??

3.不能切換成桌上型頁面
曾經遇過做好responsive web後,客戶要求要在ipad上可以看桌機的頁面,只能捶心肝給他看。

 

其實,我還是很喜歡Responsive Web Design,拉大拉小很好玩的(拇指)。但是以公司接案的成本考量,他的實用性就值得商確了。最後,順便放上小女子現有的Responsive Web Design作品,給大家做參考

創意細胞官網 http://www.creatcell.net

合樂健康美學 http://www.holove.com.tw/

 

 

最後,再跟大家分享,目前收集到覺得還不錯的文章

第一階段:概念

自適應網頁設計(Responsive Web Design)
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

設計行動裝置網頁(Mobile-Web)的10個要素
http://www.inside.com.tw/2011/03/28/10-mobile-web-design

Responsive Web設計參考(英文)
http://mediaqueri.es/

 

第二階段執行

Responsive Design (Media Queries)頁面設計範例
http://www.mrmu.com.tw/demo/liquidlayout/

有了Adobe Dreamweaver CS6 我也會寫APP!
http://www.ettoday.net/news/20120704/69839.htm

 

第三階段測試

Responsive Design (RWD) 響應式網頁設計測試要點
http://blog.evendesign.tw/post/48853824439/rwd-test

Responsive Design頁面測試
http://www.responsive8.com/

 

留言列表 (7)

  • Steven
  • 1

留言列表 (7)

  • Steven
  • 1

留言列表 (7)

  • Steven
  • 1

留言列表 (7)

  • Steven
  • 1

留言列表 (7)

  • Steven
  • 1

留言列表 (7)

  • Steven
  • 1

留言列表 (7)

  • Steven
  • 1

歡迎留言

其他選項