Responsive web design資源分享

RWD歷史
標題:Responsive Web Design
網址:http://www.alistapart.com/articles/responsive-web-design/
介紹:Responsive Web Design起源於2012/5月由國外的網頁設計師發表的一篇網頁設計理念文章。


RWD簡介
標題:自適應網頁設計
網址:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
介紹:該文針對Responsive Web Design進行詳細的簡介與介紹

標題:Hot Topics of Spring – Responsive Web Design, HTML5 and CSS3
網址:http://ppt.cc/TiOA
介紹:文章內容循序漸進導出RWD歷史,以及建置RWD版型須具備的技術等等

RWD線上檢測工具
標題:Responsive Web Design Testing Tool
網址:http://mattkersley.com/responsive/
介紹:可直接同步瀏覽常見解析度畫面。

標題:Screenfly
網址:http://quirktools.com/screenfly/
介紹:提供的載具與瀏覽器版本頗豐富,也值得收錄。

標題:The Responsinator
網址:http://www.responsinator.com/
介紹:輸入測試網址後,便可直接瀏覽各載具呈現出來的畫面,相當便利。


RWD 網站分享
標題:Responsive Web Design: 50 Examples and Best Practices
網址:http://designmodo.com/responsive-design-examples/
介紹:50款Responsive Web Design的網站版型,

標題:Media Queries
網址:http://mediaqueri.es/
介紹:大量的Responsive Web Design網站內容。


RWD 語法相容
標題:Respond.js
網址:https://github.com/scottjehl/Respond
介紹:只要在網頁內容載入js檔,便可相容Media Queries的CSS3語法,且向下相容到IE6-8。

標題:TinyNav.Js
網址:http://tinynav.viljamis.com/
介紹:輕量的javascript,當螢幕解析度變小時,ul li選單會轉換成小型下拉選單,可到該網站將螢幕解析度用到320才瀏覽他當前的效果。


RWD 前端框架
標題:Bootstrap
網址:http://twitter.github.com/bootstrap/
介紹:一款提供HTML、CSS、Javascript的前端框架,同時也支援Responsive Web Design的版型設計。


RWD Jquery套件
標題:30 JQUERY RESPONSIVE LAYOUT PLUGINS
網址:http://ppt.cc/3D3O
介紹:針對Responsive Web Design的客製化jquery,資源相當豐富。

標題:10 Best Responsive jQuery Slider Plugins
網址:http://ppt.cc/1Jw5
介紹:針對Responsive Web Design的客製化jquery圖片輪播,資源相當豐富。

標題:Blueberry
網址:http://marktyrrell.com/labs/blueberry/
介紹:支援Responsive Web Design的圖片輪播套件。

標題:Elastislide
網址:http://tympanus.net/Development/Elastislide/
介紹旋轉木馬的圖片套件。

標題:responsiveslides.js
網址:http://responsive-slides.viljamis.com/
介紹輕量型的圖片輪播套件

標題:Responsive Tables
網址:http://www.zurb.com/playground/responsive-tables
介紹:改善Table的資料列表瀏覽方式


RWD 免費HTML版型
標題:20 Free Responsive HTML & CSS Templates
網址:http://speckyboy.com/2012/09/03/20-free-responsive-html-css-templates/
介紹:經測試後確定是可進行下載作業,有些則需要在臉書或tweet分享過後才可授權下載。

標題:30 Free and Premium HTML/CSS Responsive Website Templates
網址:http://ginva.com/2012/04/html-css-responsive-website-templates/
介紹:經測試後確定是可進行下載作業,有些則需要在臉書或tweet分享過後才可授權下載。


RWD CSS設計模式
標題:Responsive Menu Concepts
網址:http://css-tricks.com/responsive-menu-concepts/
介紹:提供RWD選單的呈現方式與解決方案。

標題:Responsive Data Tables
網址:http://css-tricks.com/responsive-data-tables/
介紹:提供RWD的table資料列表呈現方式與解決方案。


RWD 國外設計理念教學
標題:Build a responsive site in a week: going further (part 5)
網址:http://ppt.cc/8pAJ
介紹:詳細介紹從part1~5教導如何建構RWD網站,從下方的RELATED ARTICLES可從找到part1的連結

標題:#RWD – Mastering Best Practices: Round-Up of Recent Results
網址:http://ppt.cc/UYkG
介紹:提供RWD教程、設計理念等相關連結


沒有留言:

張貼留言