這一兩年中最夯的網頁設計不外乎就是 Responsive Web Design 了，中文譯名為「自適應網頁設計」（不過這個名稱仍然不太好），就字面上意思來說就是當一個網頁在不同的解析度下，會呈現不同的介面，也就是在不同的介面上適應。會這麼熱門的原因是，這幾年來隨著 Smart Phone、Tablet 等行動裝置開始興起之後，有許多人都開始使用行動裝置來閱讀網頁。而傳統的網頁只有為傳統PC 做設計的動作，在行動裝置上並不能呈現最好的效果，所以就有了 Responsive Web Design 這個網頁設計新名詞。
什麼是 Responsive Web Design？
簡單來說，就是讓一個網頁在 PC、Mobile 上都可以有好的瀏覽效果，而這個我們就稱為 Responsive Web Design。
如以下的例子，我們用 Smashing Magazine 的網站來做示範：
傳統 PC 瀏覽器顯示
如下圖，如果是解析度較大如 1920*1080 的解析度，會有 4 欄來豐富網頁版面，增強效果。
Mobile 手機上顯示
因為手機的解析度比起傳統 PC 小很多，所以顯示的方式只有顯示主要內容區了。
上面兩個顯示不同，但是卻是同一份 HTML 網頁，使用 CSS Media Query 做調整，就是 Responsive Web Design。
如果這個網站沒有做 Responsive Web Design，那他的顯示方法會和傳統 PC 一樣，造成 User 還要把網頁拉大才能閱讀。
為什麼要做 Responsive Web Design？
Responsive Web Design 在目前算是很新的一項設計，在台灣知道的人並不算太多，學校也沒有教。而做 Responsive Web Design 最大的目的是：
- 因為越來越多人要用手機、平板來瀏覽網頁。
是的，Responsive Web Design 就是因為這樣而生的，為了要讓 手機、平板 的 User 有更好的體驗。
Responsive Web Design 的優缺點
優點：
- 開發成本比 Native App 低因為 Responsive Web Design 通常可以直接用 Media Query 直接寫搭配行動裝置的 CSS ，與 Native App 的成本比較下來較低。
- 不需要重寫 HTMLResponsive Web Design 不需要再重寫另一份 HTML ，直接使用 CSS 屬性來對不同裝置做調整即可。
- 可以同時針對許多不同裝置分別調整通常做 都是利用 CSS3 的 Media Queries 方法來實現，而你可以使用這項 CSS 來對許多裝置做設計，不論是螢幕小到不行的入門款 Smart Phone、螢幕大的 Galaxy Note、解析度超高的 iPad、輕巧的 Google Nexus 7 都可以做 Responsive Web Design 。
缺點：
- 載入速度的問題
因為是使用同一份的 HTML & CSS ，所以不管 User 在手機上或者在 PC 上，要瀏覽的網頁都是同一份網頁，當然速度也是會一樣。但是手機上做 Responsive Web Design 會把頁面做到非常簡單，但也只是把元素隱藏，事實上載入速度並不會變快。 - 在 Mobile 上，要再花心思做設計
很顯然的在手機上 User 的瀏覽是與在傳統 PC 上是完全不一樣的，所以如果要有一個好的 Mobile User Experience 的話，你就必須針對 Mobile 這塊去下功夫看怎樣的動線閱讀流程才是最好的。
為了讓傳統 PC 的 1280*768 ~ 1920*768 和 Mobile 的 480*320 都有最好的顯示效果，Responsive Web Design 是個很好的解決方案。通常，Responsive Web Design 有這三項重點必須注意：
- 有彈性、可適應不同裝置的網頁版面
- 有彈性、可適應不同裝置的圖片、多媒體尺寸
- 使用 CSS3 Media Queries
Responsive Web Design 的實作方式
由於 Responsive Web Design 實作的方式有幾種，所以這篇文章我們先來整理一下，往後的文章再詳細介紹使用方法。
CSS Grid System 與 CSS Fluid Grid System 網頁版面
Grid 這個字有「格」的意思，沒錯，Gird System 就是把網頁變成有規則性大小的格子，我們以 Bootstrap 的 Grid System 來看，總共有 12 種欄寬，從大到小都有。我們就可以直接使用 Grid 網格系統，能讓開發過程變得很快。
至於 Fluid Grid System 就是把原本用像素去定義的寬度變成使用比例（百分比）的方式去呈現。比如說原本一個 Sidebar 要 width : 240px ，現在就可以改寫成 width : 20% 。這點，可以讓 Responsive Web Design 比較方便。
CSS Image max-width （Flexible image）調整圖片
這個很常用。在傳統 PC 上，我們的圖片像素通常都遠大於在 Mobile 上的最大解析度，所以如果沒有做任何調整，在看圖片上的體驗會比較差，簡單來說就是圖片會爆出瀏覽區域。而 CSS 中的 max-width 提供了解決方案，這個屬性能夠讓原本一個假設 700px 的圖片，在手機中顯示剛剛好占滿手機的寬度，而高度就隨著寬度做等比例縮小。
img {
height: auto;
max-width: 100%;
}
如果你想看加上這段的效果，你可以在閱讀本站文章的時候，把瀏覽器的寬度縮小（縮到寬度比圖片小），你就會發現圖片會變得越來越小。而沒有加上這句的話，則不會一起變小，而是超出瀏覽器。
由於圖片 Load 還是使用同一張圖片，所以會有效能差的問題，雖然的問題在國外有人提出解決方案，不過這個比較複雜就不提了，可自行搜尋。
CSS3 Media Queries
再來就是 CSS3 Media Query 的部分了，Media Queries算是在 Responsive Web Design 中最容易被提起也最重要的一個部分。使用 Media Queries ，能夠讓某塊區域在 PC 上是顯示的，而在 Mobile 中是隱藏的。而這個判斷機制通常我們是使用瀏覽的寬度來做判斷，像 Mobile 的寬度大約 3、400左右，而傳統 PC 的寬度解析大概都是 1366 以上，利用這個差異就可以寫出符合不同寬度的 Media Queries 來。
我的 Media Queries 教學文章：CSS3 Media Queries 詳細介紹與使用方法，Responsive Web Design 必備技術
// 在 PC 上的顯示
.box {
width: 500px;
}
// Media Query ，也就是當寬度 < 767 px 時將載入下面這段 CSS :
@media (max-width: 767px) {
.box {
width: 100%;
}
}
小結
Responsive Web Design 是一個不難的一項技能，事實上這個只要多練習，你就可以發現 Responsive Web Design 其實是一個很有趣的東西，他可以隨著寬度而有不同的顯示方式。如果你也是一個 html & css Designer ，我想學習 Responsive Web Design 是非常划算又容易的，因為它具有能跨不同裝置的一個很大的優點。
Media Queries 教學文章：CSS3 Media Queries 詳細介紹與使用方法，Responsive Web Design 必備技術
沒有留言:
張貼留言