EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

Responsive Web Design

八月 15 2012 Published by under Design, Engineering

responsive layout

自從上次在 WebDev Party閃光洽分享 responsive web design 的一些技巧,我就對 responsive layout 這個主題蠻有興趣的。剛好上禮拜 EZTABLE 讀書會,主題是 responsive layout. 趁著計憶猶新,把幾個重點整理一下。

不同 mobile Strategy 的比較

如果要提供 mobile user 更好的體驗,通常大家會採取的 strategy 包括:

  • responsive web design主要是透過設計師在 CSS 上面下一些功夫,使用包括 fluid grid, media query, flexible image 等工具,讓同一份 HTML 在不同尺寸的 browser 上面,都有適合瀏覽的介面
  • separate mobile site提供不一樣的網址 (e.g. http://www.facebook.com v.s. http://m.facebook.com) 和 HTML
  • native app直接使用 device 原生的語言 (e.g. Object-C for iPhone) 開發原生的應用程式

Responsive web design 的優點:

  • 開發成本較低

    設計師可以針對既有的網頁 & CSS 做一些調整,很快就可以有一個 for mobile 的 version。當然若要調整到有很好的體驗,還是要花一些功夫,不過比起 native app 的開發成本而言,responsive web design 算是一個相對成本較低的 strategy.

  • maintain 成本較低

    雖然看到的介面不同,但在不同 device 上看到的網頁跟一般 PC desktop 上所看到的網頁,其實都是同一份 HTML. 因為只有一份 HTML,所以在 maintain 上會比有二份 HTML 的 seperate mobiel website,或是使用 device 特定語言 (e.g. Object-C, Java) 的 native app 相對容易一些

  • 可同時針對不同尺寸的 device 做處理

    responsive layout 透過使用 CSS3 media query ,可以針對不同尺寸的 device 做一些調整,不管是超寬的螢幕, tablet, smart phone 都可以 support 。

Responsive web design 的缺點:

  • performance

    因為用的是同一份 HTML,所以若是在 mobile 的情境,還是會 download 一些不需要的 resource (HTML, Image, etc) ,這對於原本網路速度就不快的 mobile device 而言是一個多餘的 overhead.

  • 未針對 mobile device 需要的流程做最佳化

    上面有提到 responsive web design 可以同時針對不同尺寸的 device,但 “可以" 不代表是 “最好" 的策略,因為在 mobile device 需要的 content 與流程可能會跟 desktop device 有所不同.

Separate mobile site v.s. Responsive web design

Google 針對 separate mobile site v.s. responsive design 整理了一張很好的比較表

(image via Mobile Websites vs Responsive Design: What’s the right solution for your business? – Google Analytics

整體而言,雖然 responsive layout 的瀏覽經驗可能會比其他 solution 差一些,就投資報酬率來說, responsive layout 其實算是一個相對投入較低,又可以很快有一個初步成果的策略。
所以這邊沒有哪一個一定比哪一個好,若是網站 mobile 的使用人數較多,或對 mobile 體驗的要求較高,可能 native app 或 separate website 會比較適合,但相對的 mobile 使用的人數並不多或要求並不高, responsive web design 就是一個值得考慮的做法。

Responsive web design 所使用的工具

Fluid grid

fluid grid 的概念主要是在 CSS 裡使用 percentage 去做設比較的設定(e.g. width: 60%;),而不使用絕對的像素 (e.g. width: 600px).
像是下面這一小段節自 twitter bootstrap 的 css

[css]
.row-fluid .span6 {
width: 48.93617020799999%; *width: 48.88297871863829%;
}
[/css]

使用 fluid grid, 可以讓頁面在放大或縮小的時候,頁面會做等比例的調整,而不會出現 scroll bar,像是下面這一張 Kayla Knight 在 smash magazine 上的 respponsive layout 教學文章 的示意圖

flexible grid
(image via Responsive Web Design: What It Is and How To Use It)

Flexible image

頁面使用了 fluid grid 之後,頁面的 layout 已經不會有固定的大小,但網頁上使用的圖片若是太大,還是有可能會讓整個 layout 爆掉。
flexible image 的概念是在 image 外面再包一層 div ,這個 div 本身是使用 percentage 去控制大小,並規定 image 的寬度最多不能超過 parent div

[css]
img { max-width: 100%; }
[/css]

不過這個做法基本上還是使用同一張圖,若 size 很大對 mobile 來說還是要 load 很久。所以網路上也有人使用 javascript 的 solution。使用 flexible image 的效果如下圖:

flexible image
(image via Responsive Web Design: What It Is and How To Use It)

Stop auto scaling

通常在 mobile phone 上面的 browser, 為了讓使用者可以看到網頁的全貌,browser 會假裝自己的螢幕寬度比實際上的寬 (e.g. iPhone 會假裝自己的寬度有 980px,), 並且自動幫網頁做 scaling 到螢幕的寬度。但若你的網頁原本就有幫 mobile 做了調整,那你在 meta 加上一個簡單的設定,告訴手機不要不需要自動做這個 auto scaling 的動作. 例如,如果你針對的是 iPhone:

[html]
<meta name="viewport" content="width=device-width; initial-scale=1.0">
[/html]

更多相關的設定可以參考:iPhone 對 viewport 的說明Android 對 webview 的說明

Media query

media query 算是 responsive web design 裡面的重頭戲。在有支援 media query 的瀏覽器中,browser 可以考慮 device 或可視範圍的 size 來 load 不一樣的 CSS. 如下面這一般摘自 twitter bootstrap 的 CSS,只會在寬度 767 px 以下的環境適用:

[css]
@media (max-width: 767px) {
// Show
.visible-phone { display: inherit !important; } // Use inherit to
restore previous behavior
// Hide
.hidden-phone { display: none !important; } // Hide everything else
.hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; }
}
[/css]

media 除了針對寬度,也可以針對高度,color, aspect-ratio, orientation 去做判斷,詳情可以參考mozilla 的文件

對 media query 有興趣的人,也可以在 mediaqueri.es 這個網站 看到更多 media query 實際 run 起來的 sample.

Reference

Summary

Responsive web design 並不見得適用於所有的網站,但考慮其開發的成本較低、maintain 的成本較低、及適用於不同尺寸 device 的優點,對 mobile 體驗的要求並沒有那麼高的網站而言, responsive layout 仍不失為一個投資報酬率蠻划算的策略。事實上,就算是只有針對 desktop 的網站,因為現在螢幕解析度也有很多不同的 size ,responsive web design 仍然是一個值得一學的技能。

(image via Alvaro Rubioc, CC license)
brooky
EZTABLE Co-Founder & CTO
2012年 08月 14 日

Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響