RWD網站設計-RWD響應式網站設計是什麼？設計原則及台中愛立歐 ...

RWD響應式網站設計是什麼?

響應式網站設計(Responsive Web Design)簡稱RWD，是國外著名網頁設計師Ethan Marcotte 在2010年5月所提出的概念，簡而言之，就是讓一個網站能夠兼具各種不同裝置(桌機、筆電、平版、手機)等瀏覽網站時，可以讓有限的版面中清楚呈現網站資訊給使用者，就像水一樣可以完美的適應在任何容器。
近年來數位資訊飛速成長，幾乎9成的使用者都是透過手機、平板電腦、筆記型電腦、智能手錶等來與外界媒體產生聯繫，因此打造各式各樣裝置提供不同的網頁瀏覽是商業設計中不可或缺的一部分，RWD響應式網站設計已成為常態，更是基本的標配。
RWD響應式網站設計目的是讓在不同的設備裝置及各種螢幕尺寸可以完整的顯示網站資訊，而愛立歐最擅長的是為使用者提供更舒適的介面及更好的使用者體驗。

RWD響應式網站設計的技術介紹

RWD響應式網站設計是2012年後被公認為網頁設計開發技術的主流趨勢，要製作RWD響應式網站可以藉由CSS Media Queries(中文簡稱：媒體查詢)方式進行建置，媒體查詢可以幫助網站在什麼螢幕裝置寬度、高度要套用何種網頁樣式，一般都會預設以寬度為主。
要製作RWD響應式網站有以下簡單步驟可以設定：

1.設定宣告viewport

viewport指的是裝置螢幕所要顯示的網頁內容區域，簡稱檢視區，要製作RWD響應式網站必須要在HTML語法中，Head要設定viewport語法，例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">，
viewport屬性值有：

width=device-width：寬度等於當前使用者裝置的寬度

height=device-height：高度等於當前使用者裝置的高度

initial-scale：初始預設的縮放比例

minimum-scale：允許使用者縮放到的最小網頁比例

maximum-scale：允許使用者縮放到的最大網頁比例

user-scalable：使用者是否可以手動縮放網頁比例

2. 決定RWD響應式網站設計模式

網站內容在不同的viewport下的版面配置，有五種常見的設計模式：

局部流動 (mostly fluid)：隨著螢幕裝置寬度斷點，版面像積木一樣依序往下排列。

欄內容下排 (column drop)：裝置最大寬度時呈現橫向排列，隨著螢幕裝置斷點往下推擠排列。

版面配置位移 (layout shifter)：隨著螢幕裝置寬度斷點，進行版面大幅調整改變。

細微調整 (tiny tweaks)：隨著螢幕寬度，微調整網頁字體大小與按鈕大小。

畫布外空間利用 (off canvas)：以橫向卷軸來操作，在小螢幕裝置時顯示滿版，大螢幕時會排列更多區塊。

3.設定CSS media query

網站版面配置最重要的是透過CSS樣式呈現，所以在RWD響應式網站設計中為了要符合不同螢幕裝置寬度使用不同的CSS樣式語法，其中CSS3提供的media query 語法，若我們要針對螢幕尺寸在900px以下時，改變背景顏色，語法呈現為：
@media (min-width: 900px)
{body
{background: #FFFFFF;

RWD響應式網站設計跟傳統網站設計比較的優勢

以前傳統網站設計因為沒有符合RWD響應式技術，所以當使用者透過手機裝置瀏覽網站時，頁面文字過小、無法清楚閱讀網站資訊，必須要透過手指放大縮小，才能看清楚網站上文字內容;
有符合RWD響應式網站設計，因為可以符合各種不同裝置改變頁面的佈局排版，提供最佳的使用者體驗，這也是愛立歐最擅長使用的網頁技術之一。
RWD響應式網站設計呈現案例介紹 RWD響應式網站設計是如今網站設計最主流的趨勢，也是愛立歐最擅長的網站設計技術，除了考慮多種裝置及多種螢幕尺寸的情況，能夠提升優化網站使用者體驗，從網站表面上來看，可以保持整體視覺一致性，相同的顏色、圖片、文字等，有助於創造使用者熟悉的體驗。 ▲參考案例：寬埕建設－建設開發網站設計

▲參考案例：叶舍空間－室內設計網站設計

▲參考案例：菲仕美－醫美網站設計

手機版網站的三種設計方式介紹、優缺點、判斷方式（RWD、AWD、獨立網址）

RWD響應式網站設計(Responsive Web Design)簡稱RWD

透過使用者裝置螢幕解析度，進行程式碼轉換處理，來為不同使用者裝置來展現不同的版面佈局及資訊呈現
RWD響應式優點：

可以偵測不同的裝置版面靈活度高

網站維護成本低，只要開發一套，能夠快速解決多種裝置瀏覽資訊問題

SEO搜尋引擎優化累積權重會集中在同一個網站

Google、Bing等搜尋引擎喜歡RWD響應式網站，會有較好的評價進而提高搜尋排名

RWD響應式缺點：

不適用於版面資訊、框架配置複雜的內部系統網站

當網站流量大的情況下，主機效能會降低

程式碼過多時，網頁加載時間會加長

AWD自適應網站設計(Adaptive Web Design)簡稱AWD

透過使用者裝置螢幕解析度，透過伺服器來判斷當前來訪的使用者所使用的裝置設備是：桌機、平版、筆電、手機，並從中切換對應不同的網站介面
AWD自適應優點：

圖片框架可控性高

可兼顧使用者在桌機、平版、筆電、手機等各種裝置的操作習慣，

適合功能複雜、使用者網站互動頻率高的網站、電商購物網站，使用者用戶量大的需求，不會造成網站流量限制問題

AWD自適應缺點：

網站維護成本高，必須要同時維護多種裝置對應的網站介面

遇到使用者螢幕裝置解析度低時，網站介面有時候會出現不完全或是文字內容過於擁擠

SEO搜尋引擎優化累積權重會分散，有可能會遇到重複內容需要額外處理

一定的程度上會改變網站原有的版面佈局及框架結構，會易出現使用者混淆的情況

獨立網址(動態網頁)

獨立網址又稱動態網頁，與上述提到的AWD自適應網站設計一樣是設計多種程式檔案，但不同的是在前台使用者是使用同一個的網址，，簡而言之，在後端資料庫做了三套網頁，並依照伺服器對使用者裝置判斷要讀取何種版本的程式檔案。
獨立網址優點：

不同裝置可以分開設計、建置，為不同裝置的使用者設計專屬的版面佈局

相較於AWD自適應網站設計，SEO搜尋引擎優化比較不容易出問題

獨立網址缺點：

網站維護成本高，必須要同時維護多種裝置對應的網站程式架構，有時候可能會誤判裝置

愛立歐的響應式網站設計介紹

愛立歐專攻RWD響應式網站設計服務，每一件專案作品，不只是我們的創作，更是每間企業的品牌詮釋！
我們著重的不只是設計好看，而是以使用者期待及使用者體驗，讓網站產生更深層的對話及互動，累積超過上百件的RWD網站建置服務經驗，提供更多好的設計體驗給使用者！
觀看更多網站設計作品案例