解讀響應式設計

rwd01

數位時代來臨,在建置一個網站時,除了參考以往大多數設計網頁時會考量到的1024×768標準解析度,現在也因為手持裝置的興盛,有了其他選擇。EHTAN MARCOTTE提出了響應式網頁設計概念,簡而言之,就是整個網頁頁面會對應不同的解新度,而有不同的呈現方式,讓裝置成為一個介質,使用者才是真正的主角!

 

為何響應式設計如此重要?

RWD-01

1. 有2.1億移動寬帶用戶。

2. 87%的美國成年人擁有一部手機。

3. 45%的美國成年人擁有智手機,90%的人使用智慧型的手機上網。

這些信息雖然只有美國用戶,但是在我們亞洲也已經有不少人甚至更多人在使用手機和平板上網!

 

解剖響應式設計網站

RWD-02

1. Fluid Grids (流體網格) – 一個基於百分比的設計,能夠適應不同屏幕尺寸。

2. Flexible Images (靈活的圖像) – 根據屏幕分辨率自動改變或自適應尺寸的圖像。

3. Media Queries (媒體查詢) -CSS3的新技術,可以實現跨設備跨瀏覽器的響應式Web設計方案。如果對這不了解的,可以        搜索CSS3Media Query,網絡上已經有很多這樣的文章了。

 

五個關鍵設計確保電子商務網站的最佳用戶體驗

RWD-03

該信息圖從五個關鍵設計點確保電子商務網站的最佳用戶體驗,分別有網頁頭部、圖像畫廊、產品描述、輔助信息、頁腳來逐一分析講解。詳細請瀏覽http://www.whoishostingthis.com/blog/2013/06/26/responsive-design-infographic/

 

 

 

 

 

 

 

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s