2011年11月20日 星期日

回應式網頁設計

這個話題最近很火爆，我也一直在關注，回應式網頁設計和移動互聯網密切相關，並因移動終端的豐富和普及而興盛，並且是一個頗具爭議的話題，我今天將和大家探討下。
上周寫了個簡單的ppt在組內大概介紹了下，感興趣的話可以先看下這個PPT。

行動互聯網的現狀和未來

在說到這個話題前，我們先看下網頁設計和前端開發的現狀：
  1. 全球有超過53億手機用戶（包括傳統手機）
  2. 國內3G用戶超過1億
  3. iPhone4手機在2010年出貨量超過3000萬部；
  4. iPhone 4S上市前3天賣掉400萬部；
  5. Android手機每天啟動超過50萬部；
  6. iPad出貨量已經超過2.5億部；
  7. 預計到2015年，移動互聯網的資料流程量將超越桌面端的流量。
  8. 。。。
嗯，大家也許已經開始注意到，自己和身邊的朋友也都越來越多的用上了iPhone或者android手機或平板——一兩年前我們預料的移動互聯網時代即將來臨，現在已然實現了——我們正處在移動互聯網快速發展的時代——已經不再是起步階段了。

那麼，什麼是回應式網頁設計？

回應式網頁設計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念可以說是是為移動互聯網而生的！
或 許大家之前會注意到，有很多知名網站都推出了iPhone或針對智慧手機的專門網站，比如3g.qq.com、m.taobao.com、 ipad.xxx.com等等。。。甚至前端觀察之前也嘗試過用wordpress外掛程式實現m.qianduan.net的移動網站。
那麼問題就來了——我們要為每一個設備做一個單獨的網站嗎？來讓網站在每個設備中得到相應的視覺風格和操作體驗？
這樣勢必就要增加很多的工作量，而且很多還是重複的。
我們在做頁面的時候，一般很強調模組化的概念，我們要求一個合格的模組要能夠“可擴展、無侵染”，它要能夠用在任何地方都能夠正常的顯示。回應式網頁設計與此類似——網站在任何設備中都能夠正常適配，而不用為每個設備單獨做個子網站！
但是，產品經理和設計師可能還是會要求網站在各個流覽器裡面表現要一模一樣，甚至要圖元還原——WTF！不同的流覽器本身的功能、行為和處理方式都不一樣，為什麼要表現完全一樣？！
let the browser flow…

怎麼做？

其實回應式網頁的實現很簡單，都是大家熟悉的技術。

media query(媒體查詢)

因為現在主流的智慧終端機都是基於iOS和Android的，而它們自帶的流覽器都是基於webkit內核，所以我們可以完全使用viewport屬性和media query技術實現網站的回應性：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
後面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味著不能進行縮放。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}

/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}

/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}
當然依靠螢幕寬度來進行適配是最簡單的方法，media query有很多參數可以使用比如orientation、aspect-ratio等，不太瞭解的可以查看這篇詳細的介紹。
其實，media query是回應式網頁設計中被用到最多的技術。

fluid grid(流體網格)

很 多專案都在使用網格技術(或者叫柵格)，前幾年960.gs很流行，但是隨著螢幕解析度的普遍提升，它已經不太適合當前需求了，於是最近幾年 fluid grid開始逐漸多了起來，這種技術其實也很簡單，只是將格柵的單位由px變成%，用百分比來控制頁面每列的寬度，從而實現寬度的自我調整。
使用流體網格的網站能夠根據螢幕寬度自動調整頁面中每列的寬度，從而保證頁面的完整展現和基本功能。這也是一種不錯的方法。

flex box

flex box是css3中的新技術，它很強大，可以實現很多我們之前無法想像的自我調整佈局。
有時我們希望網站能夠以webapp的外觀呈現給手機用戶，flexbox是個不二的選擇。
比如，要實現這樣的簡單結構：
它很像一個app的結構，頭部和底部固定，中間高度自我調整，用flexbox可以簡單實現：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.flex_wrap{
      height:100%;
      display: box;  
      display: -moz-box;  
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
}
.flex_bd{
      box-flex: 1;
      -moz-box-flex: 1; 
      -webkit-box-flex:1;
      background:#E7E7E7;
      overflow-y:auto;
}
.flex_hd{
      background:#16364C;
      height:30px;
      line-height:30px;
      text-align:center;
      color:#FFF;
      font-weight:700;
      font-family:14px;
}
.flex_ft{
      background:green;
      height:30px;
      line-height:30px;
      text-align:right;
}
HTML代碼：
1
2
3
4
5
6
7
8
9
10
11
12
<div>
      <div>高雄網頁設計div>
      <div>
            <p>這裡是主內容區p>
            <p>這裡是主內容區p>
      div>
      <div>
            <a href="http://www.baystars.cc/" title="關於我們">關於我們a>
            <a href="http://www.baystars.cc/" title="版權聲明">版權聲明a>
            <a href="http://www.baystars.cc/" title="網站地圖">網站地圖a>
      div>
div>
雖 然這裡還會有點兒問題，比如主內容區域內容太多會被隱藏掉，因為android webkit和iOS 5之前的mobile safari均不支持overflow:scroll屬性，但是這個問題還是很好解決的，比如在裡面嵌套一個子容器，用js來給定個高度並使用定位來實現 捲軸從而完整展示內容，或者直接使用iscroll等js庫來實現。好消息是，iOS5中safari開始支持overflow:scroll了。

不足之處

如果你關注網站性能之類的話，可能已經發現了一些問題：
  • 載入很多不需要的資源，比如多餘的圖片和樣式內容
  • 頻寬限制
  • 移動終端的記憶體和CPU限制
  • 圖片大小和螢幕大小不匹配
嗯，任何一個方案都不是完美的，但也不會很糟糕。下面我們會提到一些可行的優化方案：

HTML5本機存放區

對於支持HTML5 appcache /manifest特性的流覽器，我們可以將一些不常改動的靜態資源存儲到本地，比如css檔，css中用到的圖片，以及一些js檔等：
1
2
3
4
5
6
7
8
9
10
CACHE MANIFEST
NETWORK:
/*

CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js
然後將檔保存為manifest格式，並在HTML標籤中引入即可：
<html manifest="responsive.manifest">
這樣，用戶在第一次訪問的時候會慢一點兒，但是後續訪問會很快，3G網路中也能為使用者節省頻寬。

移動設備優先

一種新的設計流程是，先為移動設備設計介面，然後將PC端作為一個擴展。
這樣做的好處是顯而易見的，移動終端不會載入多餘的資源，也不會因為PC端的樣式而重繪頁面，同時也不會影響PC端的表現。

流體圖片(fluid image)

頁面中的圖片有時會比手機/平板的螢幕（viewport）寬，這樣會將頁面容器撐開，但是移動流覽器又不能scroll，結果圖片被切掉一部分，然後還會有一部分內容被隱藏掉，使用者看不到。
解決這個問題的方法很簡單，將img的最大寬度設置成100%就可以了：
img{max-width:100%}
嗯，這裡的前提是，沒有給img標籤設置寬度和高度，否則顯示會有問題。另外不建議直接設置width=”100%”，因為會把小圖拉大，模糊顯示。
同理，video標籤和iframe標籤的寬度也可以這樣做，而且最好不要使用iframe，寬度是個問題，性能也是一個方面吧。

CSS3 image

這個方法有些驚豔
我 們都知道可以用::before和::after偽元素+content屬性來動態顯示一些內容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不過content屬性在CSS 2.1中只能用於這兩個偽元素中，而在CSS3中，任何元素都可以使用content屬性了，這個方法就是結合css3 的attr屬性和HTML自訂屬性的功能：
<img src="image.jpg" 
      data-src-600px="image-600px.jpg" 
      data-src-800px="image-800px.jpg" alt="">
然後用media query來動態賦值：
1
2
3
4
5
6
7
8
9
10
@media (min-device-width:600px) { 
      img[data-src-600px] {
            content: attr(data-src-600px, url); 
      }
}
@media (min-device-width:800px) {
      img[data-src-800px] {
            content: attr(data-src-800px, url);
      }
}
當然，這種方法也有不足之處，比如PC端寬螢幕需要載入兩個圖片檔，然後我們也要為此準備多張圖片檔等。

pre標籤

有的網站，比如，像前端觀察這樣的技術博客，會用pre來顯示原始程式碼，而流覽器對pre標籤默認設置white-space:pre，這樣，代碼就不會換行，從而撐開子容器，造成內容被隱藏的問題：
右邊的文字被隱藏掉了。
解決方法很簡單：
pre{
      white-space:pre-wrap
      word-wrap: break-word;
     word-break: break-all;/*如果要相容IE，可以加上這句，連續字母斷行的問題傷不起啊。。。。*/
}
當然，不只是pre標籤，關鍵是white-space和word-break屬性的值。
嗯，主要的技術和技巧其實就這些，大家不會陌生。下面是一些比較有用的工具什麼的：

回應式網頁設計工具與資源

國外在回應式網頁設計上已經走的很遠了，已經有很多工具和資源供我們參考和使用：

CSS 框架

實用工具

爭論和總結

回 應式網頁設計被提出以來，爭論就不斷，其實核心問題只有兩個個：太多的資源請求和有限的終端支援之間的矛盾、回應式的網頁設計和移動終端在使用者體 驗和視覺風格上的差異。前者不能容忍在弱小的手機/平板上通過龜速的3G/2G網路來載入一個笨重的PC端頁面，而後者糾結響應式網站不像手機網站。
我的想法是，具體問題具體分析，比如，強內容的網站，完全可以嘗試回應式網站，而重視覺和功能的網站，則可以嘗試建立一個獨立的移動網站。
另外，顯然，回應式網頁設計的大部分技術，是可以用在WebApp開發中的。
文章來自: BAYSTARS DESIGN網頁設計公司
張貼者： K+U=N&E 於 下午6:52
標籤： , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)