品牌知名度推廣、網路活動規劃與執行、架設網站、網頁設計專業人員、規劃網站、RWD 網頁設計

月光創意網頁設計
關注
月光創意

網頁設計

10/12 11:21

RWD 網頁設計是什麼？從手機打開網站那一刻說起

【先講一個你一定遇過的畫面】
你坐在捷運上，用手機點開朋友傳來的一間餐廳網站。畫面一出來，字小到要兩隻手指放大，菜單是一張橫的圖片，要左右滑才看得到完整內容，按鈕小到點三次才點中。你心裡想的是「換一間好了」，手指已經回到上一頁。
對經營網站的人來說，這一秒就是真金白銀。網站沒壞，電腦上也好看，可是訪客是用手機來的，而手機看到的不是你原本想給他看的樣子。RWD 網頁設計在處理的，就是這一秒。
RWD 是 Responsive Web Design 的縮寫，中文通常叫響應式網頁設計，也有人寫回應式。名字有點陌生，但講白了只有一句話：不管訪客用什麼裝置打開你的網站，畫面都自己調成那個裝置最好讀的樣子。
【換個方式理解：同一個接待，面對不同的客人】
我們做網站常拿現場接待來比喻。
同一位接待人員，遇到坐輪椅的客人，會改走斜坡；遇到抱著小孩的媽媽，會先幫忙開門。他要傳達的內容都一樣，只是做法跟著對方的情況調整。
RWD 就是這件事。你的網站內容只有一份，網址只有一個，但訪客從電腦、平板、手機進來，看到的排版會自己變化。電腦上可能是左圖右文並排，到了手機變成圖片在上、文字在下；原本橫向排一列的三個服務，變成直的往下疊。內容一個字都沒少，只是換了排列方式。
這裡有個關鍵，很多人第一次聽到會誤會：RWD 不是「做一個電腦版，再自動縮小」，也不是「另外做一個手機版網站」。它從頭到尾就只有一個網站、一份 HTML、一個網址。
【核心其實只有三件事】
把行銷詞拿掉，RWD 在技術上就是三件事湊在一起。
第一，一個網址、一份內容。電腦和手機共用同一套 HTML 和一組網址，不是做兩個站再互相轉址。這件事的意義比聽起來大：Google 不用去猜哪個是電腦版、哪個是手機版，也不用處理兩份內容之間的關係，收錄起來單純很多。
第二，用 CSS 的媒體查詢（Media Query）判斷螢幕寬度。媒體查詢像是設在 CSS 裡的一個開關，語法大概是 @media（max-width: 768px）{⋯⋯}，意思是「螢幕寬度小於等於 768 像素時，套用這段樣式」。螢幕寬度一變，套用的樣式跟著換，版面就重排了。
第三，viewport 設定。這行寫在網頁的 head 裡：width=device-width, initial-scale=1.0。作用是在告訴手機：「請用你的真實寬度來顯示，不要自己假裝是電腦。」少了這行，手機會用電腦的寬度硬塞，結果就是字超小、整頁縮在一起，訪客只能一直放大縮小。很多「看起來有做 RWD，手機卻很難用」的網站，問題就出在這一行的細節沒顧好。
順帶講一個效能上的但書。版面能伸縮之後，圖片如果還是照電腦版的大圖丟給手機，手機等於白下載了一堆用不到的畫素，載入自然會慢。實務上會用圖片的 srcset 或 picture 標籤，讓瀏覽器依裝置挑合適的尺寸，速度跟體驗都會好一點。
【斷點要抓多少？不要背型號，看內容】
新手最常問的是「斷點要設幾 px」。網路上會給一串表：手機 720 以下、平板 720 到 1024、桌機 1024 以上。這張表可以當起步的參考，但別把它當規定。
我們的做法是：把瀏覽器視窗從最寬慢慢往左縮，盯著版面看。文字開始擠成一團、圖片開始被壓扁、並排的東西開始不對勁的那個寬度，就是該設斷點的地方。每個網站的內容不一樣，斷點自然不會一樣。硬背裝置尺寸，等於又變相把版面綁死在固定寬度上，反而失去 RWD 的意義。
【RWD、AWD、手機版，到底差在哪】
同樣是「讓手機也能看」，業界其實有三種做法，常被混在一起講。
一種是 RWD。前端自己根據螢幕寬度調整，同一份 HTML、同一個網址。
一種是 AWD（自適應網頁設計，Adaptive Web Design）。它在伺服器端先判斷訪客用什麼裝置，再回傳對應的 HTML，可以是同一個網址，也可以是不同網址。
還有最早期的一種，直接做一個獨立的手機版網站，網址常是 m 開頭，跟電腦版是兩個站。
三個擺在一起，差別最明顯的是維護。手機版網站要把內容更新兩次，電腦改完忘了改手機，兩邊就不一樣；AWD 要維護多份 HTML，每次改版都得顧到每個版本；RWD 只有一份，改一次，所有裝置一起生效。
那 RWD 一定最好嗎？也不盡然。如果網站資訊量極大、分類很多層，或是有很複雜的後台操作介面、需要針對手機做很不一樣的流程，AWD 的動態服務反而能給手機更貼合的體驗。但這種做法需要工程團隊長期維護，成本也高。對絕大多數企業形象網站、服務型網站、一般電商來說，RWD 是很穩的選擇。
【你真的有 RWD 嗎？五個自己就能驗的點】
這段是我們被問最多的。很多業主說「我的網站有做手機版啊」，實際打開來，是另一回事。用下面五點自己檢查一遍。
第一，手機上往左右滑，會不會出現橫向的卷軸？有的話代表有東西超出畫面了，這通常是沒做好，不是設計。
第二，需不需要手動放大才看得清楚文字？正常的手機版字級，是不用放大就能順順讀完的。
第三，按鈕好不好按？用手指點得下去，跟用滑鼠點得下去，是兩件事。按鈕之間留點間距，手指才不會誤觸。
第四，把電腦瀏覽器的視窗慢慢縮小，版面會不會自己重排？如果只是整體一起縮小、文字圖片同步變小，那是「等比縮放」，不是 RWD。
第五，用 Google 的 PageSpeed Insights 或 Chrome 開發者工具跑一次行動版分數，看看有沒有列出「可點擊元素太近」「文字太小」這類項目。工具不會騙人。
五點過關，大概就真的能用了。有一項沒過，就值得找人看一下。
【三個最常見的誤解】
誤解一：「畫面會自動縮小就是有 RWD。」正好相反。整頁等比縮小，是沒有 RWD 的網站被手機硬塞之後的樣子。真正的 RWD 是版面重新排列，不是全部一起變小。
誤解二：「技術上做了 RWD，手機就一定好用。」技術只是門檻。字級、按鈕、圖片、載入速度這些體驗細節沒顧，一樣會被訪客關掉。
誤解三：「RWD 只是把版面做窄一點，應該比較便宜。」版面要同時在四、五種寬度下都好看，工作其實更細。真正決定價格的，是內容、頁數、功能和設計的客製程度，跟有沒有做 RWD 是兩回事。
【優點講完了，也講一下它的限制】
RWD 的優點很實在：網址單一，SEO 的權重集中，符合 Google 的行動優先索引；維護只要顧一份；品牌在每個裝置上長得一致；訪客不用縮放拖曳就能讀完。
但它也有不擅長的地方，該講清楚。
複雜的表格是其一。產品規格表、財務報表這種東西，硬塞進手機的小螢幕本來就難讀，常見的解法是改成卡片式排版，或乾脆另開一份檔案讓人下載。其二是高度客製的互動，有些操作在手機上需要完全不同的流程，硬用同一套版面做，反而卡卡的。其三是效能，前面提過，圖片和資源沒處理好，手機版會被拖慢。
這些限制不是要勸退，而是說：RWD 是主流做法，但不是萬靈丹，要看網站的性質。
【費用大概落在哪，以及要不要自己做】
行情這種東西每年都在動，只能給區間。套版型的 RWD 網站，大概萬元上下起跳；客製化的形象網站，落在數萬元到十多萬元之間很常見；牽涉金流、會員、複雜後台的專案再往上。實際金額還是要看功能、頁數、客製程度，以各家公告為準。
那能不能自己做？可以。現在多數架站平台和 WordPress 的模板本身就支援 RWD，套上去，網站至少有基本的手機版。自己做的門檻不在「版面能不能生成」，而在「排版能不能調好」：手機上文字大小、圖片裁切、選單開合，這些細節決定了訪客讀不讀得下去，也正好是最花時間的地方。
什麼時候建議直接找專業？三個訊號：網站會收錢或收個資；公司要的是一個拿得出手的品牌門面；你沒有時間、也沒耐性去調這些細節。這三種情況硬自己做，通常省了前期的錢，賠上後面的時間和形象。
【找設計公司時，把這幾題問清楚】
如果你決定交給公司做，簽約前這幾題值得問白。
第一，是真正的 RWD，還是另外做一個手機版網站？請對方講清楚是不是單一網址、共用一份內容。
第二，手機版有沒有含在報價裡？有些低價方案把「手機版」拆開另外收。
第三，圖片會不會壓縮、載入速度顧不顧？這題最能看出對方做不做得細。
第四，後台我自己改文字換圖片，手機版會不會跑版？好的後台會讓人不用懂程式也能安全更新。
第五，如果是舊網站改版，是局部調整還是整套重做？這要看原本的程式架構，請對方實際看過再回答。
【月光創意可以幫你做什麼】
我們做網站設計十多年，累積超過一千個網站，服務過的產業從中小企業形象官網、購物車電商，到基金會與健康單位都有。RWD 響應式網頁一直是我們的基本工，不是加購項目。
我們做 RWD 有幾個習慣，你可以拿來當對照：手機版是主版本，不是做完電腦版再順手縮小；圖片在上線前一定壓過、裁到實際要用的尺寸；後台讓你改字換圖不會把版面弄壞。網站結案後有後台，日常更新你自己來就行。
想看更完整的 RWD 原理、各種做法的比較，還有可以自己動手拖曳、當場看斷點變化的互動範本，都放在我們官網這一頁：
如果你正在評估新網站，或覺得現有網站在手機上表現不好，也歡迎直接來聊，我們會先幫你確認問題在哪，再決定要不要動工。
【幾個常被問到的問題】
問：舊網站一定要打掉重做，才能有 RWD 嗎？
答：不一定。要看原本的程式結構。有些網站改底層就能支援，有些重做反而更省時省錢，需要實際看過才知道。
問：用了 Bootstrap 這類框架，就等於有 RWD 嗎？
答：不等於。框架提供工具，做得對不對還是看人。用框架一樣可以做出手機上很難用的網站。
問：RWD 會不會讓網站變慢？
答：做得好不會，還會更快。會變慢通常是圖片太大、資源沒整理、載入的程式沒精簡，問題不在 RWD 本身。
問：小公司、預算不多，也一定需要 RWD 嗎？
答：只要你的客人會用手機找你，就需要。現在多數流量來自行動裝置，這是基本盤，不是選配。
RWD 網頁設計是什麼？從手機打開網站那一刻說起
0 0 43 0