- #UI設計
- #RWD響應式網頁設計
- #HTML5動態網頁設計
最近有許多的客戶常常會詢問什麼是響應式網頁設計呢? 那麼，響應式網頁設計跟一般網站有什麼差異呢？ 響應式網頁設計是一種相對較新的網站設計新技術，可確保用戶無論使用何種類型的裝置都能獲得良好的視覺體驗。隨著越來越多不同規格的行動裝置以及電腦版的尺寸，這在過去幾年也開始重視個裝置的視覺效果了。 是不是常常聽到RWD這個詞呢?其實就是響應式網頁設計簡稱(英語：Responsive web design，通常縮寫為RWD)或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。是一種網頁設計的技術做法，該設計可使網站在不同的裝置 對於網站設計師和前端工程師來說，有別於過去需要針對各種裝置進行不同的設計，使用此種設計方式將更易於維護網頁。 早期開發方式，必須拆開來製作，製作電腦版網站接著再製作手機版。 若是舊式網站的開發，而沒有整個重新製作，就會導致管理者若要更新網頁內容時就必須要更新兩次，尤其是早期網站沒有後台管理系統又委託給不同設計公司作電腦版跟手機版網站時，資料更新就更麻煩了，必須每個版本調整，不小心沒有更新到時，常會引起不必要的客訴，若網站需製作多語系版本，又沒後台，光是想到要改網站內容就會浪費更多不必要的時間。
Responsive Web Design (RWD) 此概念於2010年國外著名網頁設計師Ethan Marcotte所提出。 採用 RWD 設計的網站使用CSS3 Media queries，即一種對 @media 規則的擴充功能，以及串流的基於比例的網格和自適應大小的圖像以適應不同大小的裝置 在2012年後，被推廣為日後網頁設計的趨勢。在網頁中使用CSS，以百分比的方式及彈性的畫面設計去呈現。因此，GOOGLE宣布行動裝置時代的到來（Mobilegeddon）2015年，在其搜索結果算法中通常優先考慮適合移動設備的網站，透過使用響應式設計，讓您的網站針對移動設備進行優化至關重要。 他就像水可以容納在不同容器一樣，在不同的解析度自應下符合各種行動裝置設備寬度，透過百分比自動改變網頁的排版，讓不同的裝置都可以正常瀏覽網頁，提供良好的視覺體驗。 基於以上敘述，許多網站也都開始使用RWD去設計網頁。然而這種設計方式比較複雜，需要較多的時間去撰寫與調整。
先立即進行Google響應式測試，自我檢測看您的網頁是否符合行動裝置。
你有綠燈嗎？很棒，您的網站通過了Google響應式測試。您可能已經知道為什麼響應式設計對您的網站用戶很重要。 看到大紅色的X？開始採取針對在線戰略的步驟，其中包括針對移動用戶的優化體驗。請記住，Google和響應式設計的更改目前不會影響平板電腦，但通過響應式網頁設計，您可以在遊戲時領先於遊戲！
目前台灣使用手機上網人口已到達八成以上，而目前至少有六成以上網友有手機消費經驗，也就是說二個人就會有一個以上在網路上消費的可能性，且不包含看到網站後，直接去實體商點購買的人數，由此可見行動商機是非常龐大的，如果沒有使用RWD網頁設計方式架構您的網站，造成手機瀏覽困難，非常有可能因此放棄消費，因此建議商家使用RWD網頁設計方式建置。
目前市面上各種品牌手機琳瑯滿目，加上平板與筆記型電腦使用率也是逐漸上升，商家各自推出自己的螢幕尺寸，導致目前螢幕尺寸已經無法統一規範，因此傳統網頁設計方式已無法因應目前多螢幕尺寸的需求，因此使用自適應RWD網頁設計方式，可以讓網頁內容隨著螢幕大小，伸縮、變化，隱藏、移動，使用小螢幕的智慧型手機時，也會隨著裝置縮放，而主選單也可透擴隱藏下拉方式展開使用，可適度隱藏較不重要的內容讓瀏覽上可以更簡潔明瞭。
許多商家會選擇使用APP來作為手機曝光方式，RWD響應式網頁設計在製作方面相對較於APP來快速與便宜許多，並且APP曝光方式有限，相較於網頁瀏覽方式，受限幅度較大。
Google在網站管理員的行動版網站指南中做了聲明： GOOGLE官網公布訊息:https://developers.google.com/webmasters/mobile-sites/ 行動裝置相容性測試網址:https://www.google.com/webmasters/tools/mobile-friendly/ 行動裝置是您工作上不可或缺的利器，勢必也是未來趨勢。因此，確保使用者透過行動裝置瀏覽您的網站時獲得良好的使用體驗，才是真正的成功之道！
早期開發響應式網頁都是以手機板為替代方案，必須透過程式判斷螢幕尺寸來轉向一般網站或是手機版，不過主網站與手機板是屬於不同網域，如果同時使用2個，勢必要花二倍時間與金錢管理維護，如果使用RWD自適應網站則可以避免這種困擾。
規劃RWD設計時通常還是會針對手機版而外做規劃，畢竟手機的螢幕寬度有限，比較不適合把所有東西都塞在一個頁面裡呈現。
規劃RWD設計方式是使用目前最新的HTML5 + CSS3 的技術來撰寫網頁，版本太老舊的瀏覽器並沒有完全支援這些技術，所以瀏覽起來會有破格或是無法點擊頁面的情況發生，網路速度與軟硬體規格技術每天都一直在的進步，因此不久將來問題也就變小了。
RWD網頁是在後續維護比較省時間(因為只要更新一份html)，但開發可就不是這麼一回事，在製作過程需要一直比對各載具的相容性(版面、效能)，所以開發時間可不是兩個平台就兩倍時間這麼簡單的事情。
