Web Design

Responsive Web Design (RWD) 和 Adaptive Web Design (AWD)

Date: 22 Aug 2013
Author: Kelvin
*/ 共同點:

RWD和AWD的出現都是由於移動上網設備日益普及,針對不同設備(尤其考慮不同屏幕尺寸)及其使用條件(通常有比較低的頻寬,流量和性能等) 對網頁作出優化,以帶來更好的用戶體驗。

RWD: 起源:

Ethan Marcotte 在他的 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。

概念:

Wikipedia的定義:「自適應網頁設計(英語:Responsive web design,通常縮寫為RWD)是一種網頁設計的技術做法,該設計可使網站在多種瀏覽裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上閱讀和導航,同時減少縮放、平移和捲動。」
具體來說RWD是在客戶端偵測屏幕尺寸和尺寸的改變(比如手機從垂直顯示變成橫向)來改變頁面佈局和外觀,配合如流體佈局和可以自適應的圖片/視頻等技術,使頁面只需同一套程式碼,就能夠適應不同屏幕尺寸的技術。

特性:

選擇性加載CSS和流體佈局
流體佈局是多年前已經流行的技術,指頁面佈局會隨著瀏覽器尺寸改變而變化,例如兩欄彈性佈局,一邊是固定寬度的邊欄,另一邊是彈性寬度,隨著瀏覽器尺寸改變而填充空間。
CSS3的新功能Media Queries,原理是制定不同斷點(Break point),當屏幕尺寸符合某2個斷點之間的範圍,就使用特定的CSS來改變佈局,通常還會配合流體佈局使用,例如使用百分比定義元素寬度而不是固定寬度,...

Web Design Case Study: Xenyo.com

Date: 03 Sep 2012
Author: Brendan

Getting to a website design that caters to the target audience as well as the client's brand requires a considerable time and effort spent on planning and collaboration. I wanted to go through with you the course of Xenyo’s website revamp where we’ll touch up on how our design process ultimately lead to our final product. Some parts will get a bit technical but I hope that this post will help our clients understand a little more of how we work.

The Challenge

Each project begins with identifying the challenges.  For Xenyo there were 2 unique challenges. The first challenge was to incorporate mobile usability. To integrate mobile usability we could either build a mobile site...

Responsive Web Design - What is it & Why use it?

Date: 11 Aug 2012
Author: Brendan

As the new web designer of Xenyo, one of my first tasks was to re-design the company website. Our main concern was to make the site mobile friendly, so I looked into a concept called Responsive Design.


What is Responsive Design?
From Wikipedia:
"Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single...