Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 300212

    累積人氣

  • 75

    今日人氣

    0

    訂閱人氣

Responsive Web Design Collections (RWD網站大蒐集)

"Responsive Web Design" (簡稱RWD) 大概是近一年來在 Web Development 這一塊最夯的字眼了吧,起因於 smart phone 和 pad 平板的盛行,網頁設計流行的趨勢不再侷限於固定寬度(960~980 width) 像台灣Yahoo奇摩或是PChome網路家庭這樣;而是根據不同的解析度(以往只考慮 Desktop 1024為基準),像是 iPhone 的 320px 或其他 smart phone 的 480px 寬,來去設計,根據不同的解析度,網頁的內容會跟著變化調整自己的排版,就像變型金剛一樣 XD (好爛的比喻)。

而為了達成這項需求,靠的則是 CSS 的一項屬性 "media query" 詳見此 。但今天這一篇沒有要講技術,這CSS技術入門門檻很低,大概自己研究個半天就可以玩了,比較難的是設計的思維,RWD 在國外網站已經被普遍應用了但台灣網站卻鮮少看到設計優秀的網頁。

接下來就來整理一些設計很酷,值得參考學習,應用 Responsive Web Design 概念的網站吧!

#1 CSS-Tricks 前往

這個站,是很值得收藏的網頁設計資源站,有很多很棒的文章,時常發表一些前衛的前端技術,在上一次站長的大改版,將 RWD 作得很徹底,可以用拉大縮小視窗來看看它呈現的效果。




#2 smashingmagazine.com 前往

和 CSS-TRICKS 同類型的資源站,且樣蒐羅了許多優秀的文章,也出了許多教學書







#3 http://webdesignerwall.com/ 前往

也是不錯的教學資源站之一





#4 Quartz 前往

Quartz 是一個新聞性的網站,它的上方和左側選單設計的頗特別的







#5 2012.newadventuresconf.com 前往






http://createdm.com 前往








#7 http://foodsense.is/ 前往

食譜類的網站,圖片雖然比較大,但是優化的得很不錯,大螢幕和小視窗排版瀏覽起來都很舒服。





#8 http://mdcraftbeerfestival.com 前往

酒吧網站,看起來十分可口;media query 只有設定web/mobile 二種尺寸變化,不過排版都設計的相當協調。





#9 http://oliverrussell.com 前往







#10 http://simplebits.com/ 前往



以上羅列10個覺得還不錯的 Responsive Web Design 網站供參考,目前國外 RWD 已經是很普遍被應用的前端技術,且也都作得不賴;只可惜國內網站似乎還沒有看到這種風氣,一些指標性大站都還沒有見到(App開發倒是很勤)

如果有網友有見到更好的設計,也歡迎留言告訴我:D
美麗(?)的網頁設計真是怎麼看也看不膩。

相簿設定
標籤設定
相簿狀態