105年鐵路特考高員三級資訊系統與分析
|
一、有關企業對其網路門面「企業網站」採響應式網頁設計 (Responsive Web Design)：（每小題5分，共25分） (一)請說明它是什麼觀念？ (二)它的核心技術是什麼？ (三)從企業角度，它有那些優點？ (四)從使用者角度，它的好處是什麼？ (五)它有何缺點？ |
答：
(一)響應式網頁設計是什麼觀念？
響應式網頁設計 (Responsive Web Design, RWD)，又稱為自適應、回應式網頁設計，起先是由ETHAN MARCOTTE於2010年所提出，是設計網站時採用CSS3+JQueay網頁技術，讓網頁依據不同解析度的裝置去套用不同的CSS，當使用者以手機、平板、電腦等不同裝置瀏覽同一個網站時，網頁程式會根據使用者的裝置來提供符合其螢幕大小的網頁版本，例如：
1.螢幕解析度的寬度在1024像素以上時，傳回的網頁會顯示網站最完整的資訊。
2.螢幕解析度的寬度在700像素以下時，banner會自動縮排，橫式導覽列改成下拉式選單。
3.螢幕解析度的寬度在400像素以下時，版型會顯示全為直條狀，便於手機向下捲動閱讀。
同一個網站就有各種不同的版面呈現，顯示的字級大小也不同，讓使用者易於瀏覽，同時也減少其在行動裝置上閱讀時的縮放、移動動作。由於這種技術是以各種不同大小的版面去呈現同樣的內容來源，響應式網站在設計編排時須經過適當的資訊取捨，這需要由經驗豐富的專業人員來規劃設計，才能在不同版本下都呈現最理想的內容，以提供最佳閱讀體驗。
※參考資料：http://rwd.gtut.com.tw/html/rwd-2.html
(二)響應式網頁設計的核心技術是什麼？
主要核心技術是 CSS3 Media queries，它讓不同解析度去套用不同的 CSS 設定。Media Query 的使用方式有兩種：
1.在 .CSS 檔案中，用 @media 來判斷使用者螢幕寬度，選擇載入哪一段 CSS。
@media screen and (max-device-width:400px){ }
在螢幕小於 400px 時，套用此 CSS
2.在 HTML 的載入的地方，用 media 屬性判斷使用者裝置寬度，選擇載入哪一個 CSS 檔案。
<head>
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
</head>
在螢幕小於 400px 時，套用 tinyScreen.css。
※參考資料：
1.http://ouorange.com/product-pages.php?id=1
2.http://www.w3schools.com/tags/att_link_rel.asp
(三)從企業角度，響應式網頁設計有那些優點？
1.接觸到行動用戶：
越來越多行動裝置使用者 (如手機、平板、智慧電視 ...)，當他們看到老舊網頁的顯示不符合新裝置時，就會立即關閉頁面走人。響應式網頁設計的最大目的，就是讓不同裝置的用戶，都能得到最佳的顯示效果，自然就能夠抓住行動用戶的目光。
2.有利網路行銷：
所有的網路行銷都需要網站作為連結對象 (如關鍵字廣告、部落客分享文、FaceBook、Line、App 訊息推播等)，有了響應式網站就能增加行動用戶訂單的機會。
3.增加下單機率：
響應式網站讓使用者在用手機瀏覽網站時，不用一直忙著縮小放大拖曳，方便使用者瀏覽就會增加使用者停留時間，也增加下單機率。
4.節省網站開發成本：
只要做一個網站的費用，就可以跨平台使用，解決多種裝置的瀏覽的問題；而且只要管理維護一個網站的內容，管理成本也同步節省。
5.有利搜尋排名：
Google宣布提升有行動優化的網站在搜尋引擎上的排名，未提供行動版的網站，排名將逐漸下滑。
※參考資料：
1.http://www.ibest.tw/p07.php?na=%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E7%AB%99%E7%9A%844%E5%80%8B%E5%84%AA%E9%BB%9E
2.http://www.iware.com.tw/web_view-id-534.html
(四)從使用者角度，響應式網頁設計的好處是什麼？
1.支援任何裝置：
不論網站是透過寬螢幕桌上型電腦來觀看，或者是用智慧型手機、平板電腦來瀏覽，響應式網頁設計已經把所有的網站內容自動重新編排過，所以使用者不會再看到密密麻麻的字，更不需要用手指來把畫面放大，就能輕鬆順暢的瀏覽網站內容。
2.隱藏不需要呈現的內容：
透過響應式網頁設計的智慧型編排技術，還可以隱藏不需要在手機上呈現的內容，只把最重要的資訊呈現給使用者。
※參考資料：http://www.piece2ec.com.tw/news.asp?ID=2097
(五)響應式網頁設計有何缺點？
1.IE7以下不支援：Gmail、Youtube、Facebook ... 等大網站也不支援 IE7。
2.小螢幕尺寸不適合複雜的功能或介面：
如果要用很複雜的功能 (如拍照、定時喚醒、購物...等)，只能砸錢開發 APP。如果電腦版必須維持很複雜的介面，手機版則必須大量縮減內容，兩個版本架構不同且差異相當大的話，另外做手機版網站是比較適合的。
3.載入速度問題：會置入多種解析度與語法內容，載入時間較久。
4.開發時間較傳統網頁設計需較多時間。
5.需針對手機使用者習慣調整：
手機使用者與電腦使用者的網頁瀏覽習慣是完全不同的，要能符合兩邊的使用習慣，必須下很大的功夫規劃瀏覽動線。
※參考資料：
1.http://www.ibest.tw/page03.php?na=%E5%9B%9E%E6%87%89%E5%BC%8F%E7%B6%B2%E7%AB%99%E5%84%AA%E7%BC%BA%E5%88%86%E6%9E%90
2.http://www.wr.com.tw/modules/answer/question/40
留言列表
國考資訊處理解答 (7)
