隨著手持裝置的逐漸流行，現在的網頁設計師除了要照顧不同瀏覽器之外，還要面對各式類型的手持裝置及大大小小不同螢幕尺寸的需求，而且這類的需求愈來愈強烈：依據Gartner的估計，2013年的時候，搭配可上網功能的手持裝置出貨量已超越一般傳統桌機，而預估在2014年，這類可上網設備的網路流量便會超過桌機，成為一般民眾主要的上網工具；另外，依據2013的統計，超過20%的Google搜尋是在手持裝置進行的、有25%的美國人只會使用手持裝置上網、61%的人對於提供手機版本網站的品牌好感度會增加、25.85%的email是在智慧型手機開啟，另外10.16%是在平版被開啟。
針對這種情勢的變化，其實大部份的企業都已有體認，並針對相關網頁作了一些處理；傳統網頁主要都是針對桌機使用者的習慣及尺寸而設計，若為了要適應不同種類的上網裝置，最常見的處理作法是針對不同大小的尺寸製作一個專屬的頁面版本，再利用Javascript偵測使用者的瀏覽器種類和螢幕尺寸後，導向或者套用相對應的網頁版本，這種方式在初期裝置和螢幕尺寸種類不多的時候還不成問題，但隨著各式大大小小專為連網而生的手持裝置雨後春筍般的竄起，一般人的上網習慣也逐漸由桌機走向各類不同的設備，因此網頁設計師已不可能再採用以往針對不同裝置設計專屬頁面的方式，而必須有一個更適當的作法，讓不同的裝置皆能擁有相同的用戶體驗。
Responsive Web
為了解決不同螢幕解析的問題，在2010的時候，Ethan Marcotte提出了「Responsive Web」(自適應網頁)的方法，這個概念是他經由「Responsive Architectural Design」建築設計而觸發得來的，認為只要設計好一個版本，理應讓網頁可自動針對不同的裝置及螢幕來呈現，而不是先作好不同尺寸的網頁，再讓裝置來適應它們；他把這種設計方式稱之為「Responsive Web Design」，簡稱為RWD，國內則翻譯為「自適應」或「響應式」網頁設計。（有興趣者可參考Ethan Marcotte於2010/5/25所提出的'Responsive Web Design'一文: http://alistapart.com/article/responsive-web-design）
自從提出了「Responsive Web」的設計概念後，Ethan Marcotte成了全球最知名的網頁設計師，不過他在大學主修的是文學而非相關的藝術或設計領域，後來卻因緣際會對一幅朋友轉寄的Photoshop圖檔感到興趣而跨入了網頁設計領域；剛開始時只是基於個人興趣，後來慢慢接手一些案子來作，畢業後，則乾脆專職投入網頁設計工作；那麼，後來他是如何想到「Responsive Web」這個對當今網站影響深遠的概念呢？在上個月(2014/4/1)紐約的一個網路雜誌主辦的會議上，他提到曾經讀過一本對他影響很大的書：John Allsopp著的「A Dao of Web Design」
“John Allsopp在書中這句話「針對事情的潮起潮落來設計」影響我很大（原文：「designing 'for the ebb and flow of things'」），讓我興起了跳脫固定版面思維的設計，換句話說，我們應該用網頁本身的出發點來思考，停止將他們定義在固定模式的輸出，雖然業界普遍認為這種模式套用在各種不同環境下是最安全的，但是John Allsopp的文章提醒了我們，凡事要回歸物件的本質來思考。”
「Responsive Web」有兩個最重要的方法：Fluid Grids和Media Queries，我們接下來瞭解一下並實際試作看看。
Fluid Grids 流動格線
Fluid Grids是「Responsive Web Design」背後的第一個主要思維，長期以來網頁佈局的方式，無論是直接給值或比例，一直都是用固定的數值，讓頁面物件在網頁上呈現固定的大小，而擴展至整個網頁寬度的排列方式則不那麼受到歡迎；然而，到了螢幕尺寸可大可小的今天，我們會發現，當畫面變小的時候，有些東西會移動或改變大小、有些東西則會消失，或是這些東西重新排列，因此，為了要保持畫面在每種尺寸的裝置上能維持可讀性與美觀，擴展擴展佈局的特點就愈來愈被重視了。
不像傳統佈局特別注意像素或寬度百分比的值，Fluid Grids在意的是與所在容器相對應的比例；例如，如果您的設計要求是960 pixels，那麼這個就是原始容器的的寬度，當我們要在該容器內放置一個寬度為300 pixels的方形，您應該給它的寬度是31.25%(300/960)，而不是300px，這麼一來，當您用任何尺寸的螢幕來觀看同一張網頁，它們的比例永遠會是一樣的，而不會失真或者亂掉。
「Fluid Grids」是建立自適應網頁相當重要的一個想法，但只有它還是不夠的，當螢幕的尺寸非常小，或者您把瀏覽器寬度調到很窄，您會發現，網頁的佈局還是亂掉了，尤其是在處理較複雜的三欄式網頁。
實作Fluid Grids
我們有一份傳統的網頁如下：
HTML
<div class="container">
<section>...</section>
<aside>...</aside>
</div>
|
CSS
.container {
width: 660px;
}
section {
float: left;
margin: 10px;
width: 420px;
}
aside {
float: right;
margin: 10px;
width: 200px;
}
|
它顯示的格式是固定尺寸的：
100%的螢幕寬度
50%的螢幕寬度(一個區塊被擠到下面了)
現在我們將此網頁改成Fluid Grids的方式，需修改CSS將值更改為相對比例的值：
修改後的CSS
.container {
max-width: 660px;
}
section {
float: left;
margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
width: 63.63636363%; /* 420px ÷ 660px = .63636363 */
}
aside {
float: right;
margin: 1.51515151%; /* 10px ÷ 660px = .01515151 */
width: 30.30303030%; /* 200px ÷ 660px = .30303030 */
}
|
結果：
100%的螢幕寬度
75%的螢幕寬度
50%的螢幕寬度(依然正常)
您會發現，當我們隨意調整瀏覽器的寬度時，網頁整體的樣式還是不會改變，這是應用了Fluid Grids的好處，但如果我們寬度或螢幕尺寸過小，依等比例處理的結果，還是會讓網頁的顯示讓人無法接受，這時候，我們需要透過Media Queries來解決這個問題。
Media Queries
Media Queries在CSS(Modularization of Cascading Style Sheets)中的功能是針對不同的裝置給予不同的樣式設定，目前最新版本為CSS3；它支援包含handheld、print、screen等不同裝置的偵測，而這些功能原本需要透過撰寫複雜的JavaScript控制才能做到，現在已經整合在CSS了，我們只要在同一份檔案中定義好不同尺寸或裝置的CSS設定值，我們就可以讓同一份網頁，在不同的裝置或螢幕尺寸上依照我們的定義重新排列，且不影響使用性和可讀性。
例如在上圖中，透過Media Queries，讓相同的網頁在不同尺寸的螢幕下，能夠自動地呈現不同的佈局排列，而且不會破壞網頁原始的美感，讓不同裝置的使用者皆能擁有最佳的用戶體驗。
實作Media Queries
- 語法：一個最基本的Media Queries格式如下：
@media screen and (max-width: 1200px) {
css here
}
|
上面的screen指的就是”media type”，隨後接著我們稱為所謂”query”的參數，值是” max-width: 1200px”， ”query”是一對對的方式，可傳入不止一組。您有沒有發現”media type”和”query”兩者是用”and”相連，這代表我們可以利用這兩個值的組合來對應不冋的裝置特性； 可選擇的Media type種類如下：
Media Type
|
Description
|
all
|
Used for all media type devices
|
aural
|
Used for speech and sound synthesizers
|
braille
|
Used for braille tactile feedback devices
|
embossed
|
Used for paged braille printers
|
handheld
|
Used for small or handheld devices
|
print
|
Used for printers
|
projection
|
Used for projected presentations, like slides
|
screen
|
Used for computer screens
|
tty
|
Used for media using a fixed-pitch character grid, like teletypes and terminals
|
tv
|
Used for television-type devices
|
可使用的Query設定如下：
Feature
|
Value
|
Accepts min/max prefix
|
width
|
length
|
Yes
|
height
|
length
|
Yes
|
device-width
|
length
|
Yes
|
device-height
|
length
|
Yes
|
orientation
|
"portrait" or "landscape"
|
no
|
aspect-ratio
|
ratio
|
yes
|
device-aspect-ratio
|
ratio
|
yes
|
color
|
integer
|
yes
|
color-index
|
integer
|
yes
|
monochrome
|
integer
|
yes
|
resolution
|
resolution
|
yes
|
scan
|
"progressive" or "interlace"
|
no
|
grid
|
1 or 0
|
no
|
下方是另一個稍複雜一點的例子，除了裝置的長邊最少為480px，螢幕解析度必須是163dpi才能套用shetland.css
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
href="shetland.css" />
|
- 引入方式：Media Queries 的引入方式有三種：
- 定義在 .CSS 檔案中(一個CSS檔對應多個裝置)：
ex: @media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
裝置最長邊小於480px時，則套用大括弧內定義的css
- 在CSS檔案中判斷引入(多個CSS檔對應多個裝置)：
ex: @import url("shetland.css") screen and (max-device-width: 480px);
裝置最長邊小於480px時，則引入shetland.css
- 在 HTML 的標頭區載入(多個CSS檔對應多個裝置)：
ex: <link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
裝置最長邊小於480px時套用shetland.css否則便忽略此行。
企業導入時需考慮的問題
- 採用「自適應」可能會降低網頁開發的效率及增加開發成本：
要建置一個完美的「自適應」網站需要花上傳統的網站更多的時間；以往針對桌機的時代，開發人員的問題在於處理不同瀏覽器之間的相容性問題，現在則加入了各式各樣的裝置及不同尺寸的螢幕這個問題要解決，而且這個挑戰比起瀏覽器的相容問題更為麻煩；外國曾經作過一個問卷，詢問網頁開發要需要花多少額外時間來建置「自適應」功能，開發者們回覆的時間比例多在30%以上，也就是，如果花了10天在製作網站，那麼，會有3天是花在針對不同裝置/螢幕的coding上，而且這還不包含進行實機測試的時間，這對於一些跟時間賽跑的專案來說，是不能忽視的成本項目之一。
- 「自適應」功能並不是必須的，沒有這個功能，網頁還是能夠正常運作，是否要導入，我們應先問自已下列的問題：
- 是那些人需要「自適應」網頁？
我們導入的目的是要讓那些人來使用？他們會使用什麼裝置來瀏覽我們的網頁？
- 網頁上的內容適合放在不同的裝置上嗎？
網頁內容是是公開還是有權限限制的？若有權限限制，是否有需要允許使用者透過手持裝置來瀏覽？
- 網頁的目的為何？
透過不同裝置與桌機來使用，對於最後的工作結果是否有差異？讓使用者透過手持裝置來執行，會帶來什麼好處？
沒有留言:
張貼留言