什麼是RWD響應式網站？｜優點、報價、常見問題全整理
根據數據統計，在瀏覽網站時，有將近 60% 的人們是使用手機。
與網站數據為舞的的行銷人也分享，多數網站的手機瀏覽至少會佔 50% 以上。
在行動裝置人手一支的時代，有些人家中甚至沒有電腦，只有平板和手機，因此 RWD 響應式網站就更重要了，但到底什麼是 RWD 響應式網站？做與不做有什麼差別？
野薑將一一和你說明，我們從客戶的經驗中，所見 RWD 響應式網站對品牌的業績、形象影響。
什麼是 RWD 響應式網站？
現代多數人擁有多台行動裝置，經常在手機、平板多螢幕中切換使用網站。
具有 RWD (Responsive web Design) 網站，可以確保手機、平板、桌機瀏覽，不會出現破圖情況，能針對不同螢幕大小，調整畫面中的元素，讓消費者順利看到網站中的文字與圖像內容。
(RWD gif 圖卡 )
如前所述，現在大家瀏覽網站時候，不一定會用桌機來看，更多時候是透過手機、平板觀看。要如何安排版面，確保版面的可讀性，就需要用 RWD 技術來達成。
( 版面變化圖卡)
沒有 RWD 響應式網站的缺點？
(破圖範例)
之前有一名 B2B 客戶和我們分享，過往網站沒有 RWD 時，在和美國客戶談生意時，對方用手機打開官網想觀看產品，還需要手動放大縮小，業務還得先教客戶如何使用網站，在洽談流程中，客戶看不清楚，又得不停的調整畫面，讓這筆訂單難以簽訂。
這是 B2B 客戶跟我們分享，網站沒有 RWD 時的經驗，而如果你是做 B2C 的產業，現代人生活忙碌，習慣用零碎時間在手機上完成購物，更需要網站以 RWD 形式來呈現最適當的畫面。
從事貿易相關生意，網站具備 RWD 也會大大影響業績成果，野薑遇過一位做貿易相關的客戶分享，在跑展場的採購，為了節省時間，會在事前經做好功課，鎖定要拜訪的攤位，在路途中也會透過網站查詢，該家公司是否有想採購的項目。
早些年筆電、平板還不盛行，採購出差可能會借用飯店電腦，現今談生意帶著筆電、平板已經是標準配備，採購為求快速效率都直接用平板尋找廠商網站。
所以想讓採購將自家產品放入選購清單，把握推升業績的機會，一個能讓畫面自動調整的 RWD 網站，可說是背後的重要關鍵。
沒有 RWD 的網站，難以留住客人的目光，也難以為公司創造業績，而有 RWD 的網站，能配合客人的手機、平板、桌機裝置，讓客人不論在哪一個裝置瀏覽官網，都能輕鬆閱讀，讓交易決策更無痛也更順暢。
RWD 響應式網站的範例
幫客戶做過的 RWD 網站範例
(建議補充截圖呈現，在手機上的樣貌)
(大陰百科圖卡)
(創新民主中心圖卡)
RWD 網站的常見問題
- RWD 網站預設支援幾種版型？
一般來說，常見是三種版型
- 手機 寬 320px
- 平板 寬 768px
- 桌機 寬 1240px
以上版型是已經內含在我們報價中。大部分客戶採用這三種版型，就能服務多數客人。
如果要增加其他螢幕尺寸，可以在業務會議時候提出，當然報價也會對應增加。
- 我該如何驗收 RWD 網站？
Testing 是一門專業，我們會包含在報價中，做好基礎的檢測。以下分享我們檢測作法給您。
通常野薑內部檢測會準備一組 iphone (手機), ipad(平板) , mac(筆電)，當作檢測標準。他們也分別對應三種尺寸 ：
- 手機 寬 320px
- 平板 寬 768px
- 桌機 寬 1240px
為什麼用這三種來當檢測標準呢？因為以市占率來說，這三種尺寸是最多人使用。
我們目標是讓多數人可以獲得好的體驗。如果要支援其他螢幕，可以了解報價後評估資源，再決定是否要投入。
野薑也會每年追蹤市占率，調整支援的尺寸，以前三大市占率作為支援標準。
參考資料 w3c school
除了觀看裝置的尺寸大小，野薑會針對瀏覽器做檢查，以市占率最高的為主：
- chrome
- safari
- edge
- firefox
上述四種瀏覽器是標配，如果您需要支援 IE 瀏覽器，野薑坦承會無法承接，畢竟連微軟都不支援 IE 了，台灣國家發展委員會，也已經明定 IE 會在 2022 淘汰。
如果是客戶的話，不一定會有完整的檢測組，多數人是手機驗收。如果您真的很想做完整驗收，可以有以下方案：
- 自行租借手機、平板、筆電
- 自行透過 google console 做檢測
- 我的手機版型看起來不一樣，這是破版嗎？我要怎麼回報？
如之前所述概念，RWD 網站不能滿足各種機型，只能依據資源盡量滿足客人。
所以如果您不是用大廠的手機(iphone , samsung, 小米 等等)，極度有可能會出現版型不一致問題。
您仍可以回報給我們，但在此之前，我們會非常建議你先做以下動作：
- 請先更新系統
- 請先更新瀏覽器 App
通常更新完成後，就能解決多數版型問題。
如果更新後，仍出現破版，需要提供資訊如下：
- 截圖說明
- 瀏覽器是誰？
- 機型
- 系統是 iOS、Android
如果是大廠手機，我們一定會修復到好。但如果是小廠手機，就要請您評估是否要多花資源來滿足這項需求囉～
- 為什麼我用自己的，用 LINE 打開網頁，和別人不一樣？
這也是近期常見的問題，由於各大社群 App ，Facebook、LINE 都採用內建瀏覽器，希望能將用戶多多留在 App 中。
這些瀏覽器真的讓我們開發者，感到非常無奈，因為我們完全沒有任何工具，可以檢查是那裡出錯。而且最麻煩的是，這些大廠通常會有灰度測試。
灰度測試是什麼呢？當大廠想要推出一個新功能時，他不會全面更新，而是會挑選 1% 比例人做更新，確定沒問題後，再逐步擴大趴數。
(灰度測試圖卡)
所以如果您發現，同樣都是 Facebook，但為什麼我們拿到版本不一樣？蠻有可能是灰度測試造成的現象。
因此，遇到 LINE 和 Facebook 內建瀏覽器的問題，考量這兩組都有一定使用率，我們只能盡量解，但無法保證能解決。
- 為什麼已經修好版型，但我瀏覽器仍然是錯的？
當我們回報破版已經修好時，客戶高興的打開發現「 誒！還沒好呀，仍然是破版，野薑是不是搞錯了！」
不是不是，因為瀏覽器為了更快存取，會留下一些預設值在您的瀏覽器中。通常遇到這種狀況，可以先用無痕模式打開，就能看到正確的畫面囉～
(無痕模式圖卡)
- 哪些因素會影響 RWD 版型？
從前面敘述，我們可以整理會影響 RWD 版型因素
- 裝置：手機、平板、筆電、其他螢幕尺寸
- 系統：iOS、Android、Facebook、LINE
- 瀏覽器：chrome、safari、edge、firefox、Facebook、LINE
- 系統版本
- 瀏覽器版本
- 機型
- 無痕模式
野薑支援標配有
- 前三大市占率最高螢幕尺寸：手機、平板、筆電
- 市占率高的機型：iphone , samsung , 小米
- 市占率最高的瀏覽器：chrome、safari、edge、firefox
如果您想進攻市場，有需要額外支援，也歡迎在業務會議時，與我們討論～
我需要 RWD，如何設定覆蓋率目標？
在設定 RWD 目標時，建議以市場上最多人採用的裝置來製作。我們先滿足多數人體驗，再依據資源，決定要不要服務少數人。所以我們都會協助客人先進行簡單的市占率調查！
調查想發展的市場、消費者年齡層現況，獲得當前最多人使用的螢幕尺寸資訊。
依據之前討論，要訂定 RWD 覆蓋率目標因素有：
- 裝置：手機、平板、筆電、其他螢幕尺寸
- 系統：iOS、Android
- 瀏覽器：chrome、safari、edge、firefox、Facebook、LINE
- 系統版本
- 瀏覽器版本
- 機型
- 無痕模式
在決定以上述數據時，可以在 Google Key 關鍵字「 screen size 2021」，就可以知道前三名市佔比例，確認好多數消費者的需求後，再決定要不要多花資源，支援小群消費者。
RWD 響應式網站的報價
基本上，現在製作網站 RWD 已經是基礎設施了，沒有 RWD 網站幾乎無法在手機上瀏覽。
所以現在多數會討論是「 RWD 要覆蓋支援到什麼程度？」
野薑支援標配有
- 前三大市占率最高螢幕尺寸：手機、平板、筆電
- 市占率高的機型：iphone , samsung , 小米
- 市占率最高的瀏覽器：chrome、safari、edge、firefox
如果您想進攻市場，有需要額外支援，也歡迎在業務會議時，與我們討論～
總結：RWD 響應式網站
RWD 是網站的標配選擇，差別只是不同廠商做出的 RWD 支援度問題，我們建議你在思考時，可以從最少資源支援最多人來做考量，因此市占率是需要先調查的重要數據。
如果沒有方向，野薑貼心提供重要關鍵字，讓你能更快完成調查：
- 裝置：Desktop , tablet , mobile , screen size , market share
- 系統：iOS、Android , market share
- 瀏覽器：chrome、safari、edge、firefox、Facebook、LINE , market share
您需要考量的點有
- 要進攻的市場
- 最新的市占率
如果您屬於小組織，或是公部門組織，採用野薑提供的標配服務，就能滿足多數用戶囉！
RWD 網站的開發工具
RWD網頁的開發通常是在Framework上進行開發，目前市場上有3種網頁設計最熱門的RWD開發工具，分別是Bootstrap, Foundation, Pure。這三種RWD Framework各有各的支持者，並沒有說一定要用哪種架構才能開發RWD，每間網頁設計公司各有自己習慣的RWD開發架構，你可以依自己的程式撰寫習慣和喜好進行選擇。以下簡單介紹這些開發工具的特點，供大家參考。
