Responsive Web

TonyQ

響應式網頁

也稱為自適應網頁

WHY?

不同解析度

= 不同裝置

=瀏覽情境不同

 

解決方案

桌機/手機版網站  + 伺服器決定導向 (不同網址)

桌機/手機 (同一網址)

解析度

  • 手機
  • 平版
  • 電腦

(reference: open signal )

(reference: open signal )

一句話說完 RWD

「同一頁在不同解析度

呈現不同樣子」

聽起來很完美

但沒那麼容易

舉例:網頁遊戲

這一頁是 flash

可以直接宣告放棄治療

要 RWD 是要有條件的

先拆解問題

視覺設計

一般「視覺設計」需注意

  • 針對特定解析度設計多版頁面
  • 能夠因應解析度變窄或變寬的設計
  • 大多數是前兩者混用

聽起來很抽象

簡單的例子2

Bootstrap patterns 

RWD 不友善的設計

到目前為止

我們都在強調設計

因為設計

會決定 RWD的成敗

設計
要有不同解析度的想像

再來是技術上

到底怎麼呈現不同畫面

接下來的體驗細節

  • 使用百分比
  • media query
  • Grid System
  • Touch friendly

隨著大小改變

用百分比決定寬度 % 

 

ex. 100% width 

sample 

 

百分比的優點

因為是比例
所以容易隨著螢幕寬度填滿畫面

百分比的缺點

必須都要能用比例表現,有時會有點困難

ex. 會員頭像,寬度通常都是固定的。

sample

使用百分比

必須要有基準點

一般是以寬度 960 作為基準點

判斷解析度

  • JavaScript
    • window width/height
  • Css(主要)
    • media query

media Query

sample

就做畫面而言

這也太麻煩了!

Grid System

什麼是 Grid system

bootstrap document

Bootstrap ?

只是用來作為示範用

一個對 RWD 支援比較好的 css framework。

link

Grid system 應用

應用

Grid System 就夠嗎?

不盡然,只是個開始。

以 bootstrap 為例

上方選單 (navbar)  處理

touch friendly

簡單來講,手指很肥...

touch friendly

觸碰螢幕沒有「滑鼠指到上面」(hover) 這回事

touch friendly

很容易不小心點錯東西

其他技術細節

快!

  • 網路
  • 流量
  • 運算

因為網路通常很慢

所以需要一些「加速」方式

圖片需要這麼大張嗎?

srcset

 

要注意瀏覽器支援問題:caniuse

網路能不能再快一點?

SPDY (未來的 http2)

不過要 SSL 網站才能用!

在手機上取消特效

more

RWD

是呈現畫面的一種概念跟文化

但不是一個萬靈丹

需要根據不同條件做出取捨跟配合

Q & A