RWD網頁設計
行動裝置時代提升使用者體驗

拓展客戶
推展全球業務

$ 888
$ 888
$ 888
$ 888

什麼是 RWD 網頁設計?

RWD 是 Responsive web design 的縮寫，中文一般翻譯為響應式網頁設計或自適應網頁設計，在 2010 年由美國著名的設計師 Ethan Marcotte 所提出的名詞，代表一個使網站在各種不同的裝置，都正常正常瀏覽操作的網頁設計概念和精神。

近年來由於智慧型手機，以及行動網路科技的發展，全球的行動上網人數每年持續增加，網路也影響了人們的生活習慣，網路成為接收資訊的一個重要入口。

但是許多網站在以觸控操作為主，更多變的螢幕顯示尺寸、不同系統的智慧型手機上，不只使用者體驗不佳，甚至網站無法正常顯示內容。

這時候就需要 RWD 的相關網頁程式技術，如 CSS3 的 Media Query, 偵測視窗寬度與裝置類型, Viewport 的設定, 設計觸控裝置專屬元件等等，透過全新的思維與製作方式來設計網站、用跨螢幕的觀念編排網頁內容。

網站必須要有 RWD 網頁設計的理由

最佳化使用者體驗，降低使用者跳出率，提升網站的競爭力。
符合最佳瀏覽趨勢和用戶互動體驗，直的橫的都完美呈現。
Google 搜尋引擎 SEO 的網站排名指標之一，為使用者著想，讓您 SEO 不落人後。
全球已有超過三分之二的人擁有行動上網設備(*)，任何時間都有人利用智慧型手機溝通聯繫及搜尋資訊。在許多國家/地區，智慧型手機的數量已超過個人電腦，依據我們許多客戶的網站數據顯示，在一些食品、服飾等生活消費商品，使用行動裝置的訪客數量，更是超越電腦使用者。
硬體科技與行動網路發展，以前需要帶厚重的筆電、紙本出門才能做到的事，現在用平板、手機就行了，連 iPad 也可以接無線滑鼠、鍵盤，變成生產力裝置。莫因網站在行動裝置上瀏覽不便，而造成訪客流失。
不必開發高成本APP，使用者也可在電腦、智慧型手機、平板上瀏覽店家的商品與服務內容，或操作管理線上資料。
使用者用電腦、手機，產品頁都是同一個網址，對於社群分享、SEO行動優先索引上更加暢通無阻。

網站未針對行動裝置的操作與顯示優化，將會導致:

需要一直用手指放大縮小、左右移動畫面，才能好好閱讀網頁上的內容，使用者體驗不佳。
在表單輸入填寫資料非常痛苦，使用者體驗不佳
使用 Flash 製作首頁動畫與選單，在行動裝置上無法顯示
行動裝置使用者的網站跳出率增高，網站內容文案不管多精心構思，瀏覽者可能一進去就離開，根本不想看。
畫面上的選單、連結和按鈕過小，無法方便用手指點擊
商品資訊、店家地址、電話號碼資訊過小不明顯
投放 Google, Facebook 廣告時，容易造成品質分數較低，品質排名與互動率低落，造成廣告曝光量被廣告系統調低，或是需要更高的出價才能爭取曝光。當消費者點進廣告來到網站也造成過高的離開跳出率，導致廣告成效不彰。

有網站想要針對行動裝置優化? 想要製作一個有RWD的網站?

聯絡我們

RWD 網頁設計

對於使用者體驗最佳化的策略

RWD 網站就是直接把設計稿畫面縮小嗎? 網頁在每一支手機都長得一模一樣嗎?以下舉幾個 RWD 網頁設計的範例。

手機上的選單文字變超小，難以閱讀?

手機上的選單文字不會變超小，製作收合選單項目，重點功能圖示放在顯眼處。

手機上的表格資料變超小，難以閱讀?

依照表格內容，重新設計編排小螢幕的顯示方式

電腦上看起來很豐富的 DM 或圖文，
在小螢幕上是否適當呈現?

電腦上看起來很豐富的 DM 或圖文，重新設計小螢幕專用的圖文顯示方式

在一個畫面讓人看到最多的商品、文字、按鈕?

清楚的商品資料、適當的點擊區域與間隔，
符合 Google 建議的觸控元素友善設計規範。

電腦大螢幕上的網頁表單、網頁元件，
在手機小螢幕上好用嗎?

規劃設計小螢幕的 UI 元件顯示方式

滑鼠移入才會顯示的內容、選單?

避免製作滑鼠移入才會顯示的內容、選單，才是行動裝置友好的觸控裝置界面設計

Flash 首頁動畫與網站主選單?

不用 Flash 做首頁動畫與網站主選單，製作行動裝置瀏覽器能顯示、
且符合網站形象與現代使用者瀏覽習慣的內容

電腦上兩欄式、三欄式的版面，
以及捲動時跟隨移動的內容?

在小螢幕上重新構思哪些是重點內容，
內容要在哪邊顯示?

要做尺寸多大的圖?

先討論有哪些圖文訊息要呈現在網頁上，
再討論各種螢幕尺寸要如何呈現這些圖文。

文案強制斷行，在不同螢幕尺寸
造成文案顯示異常，影響閱讀?

調整文案編輯方式，避免文案強制斷行，在不同螢幕尺寸造成文案顯示異常，影響閱讀。

*2020年9月起 Google將採用行動裝置優先(Mobile First)的爬蟲索引政策，這種大小網網站的電腦版連結，將極有可能從搜尋引擎中消失。

電腦版/手機版製作網址與內容架構
兩個完全不同的網站(俗稱大小網)

RWD 網站設計，電腦手機瀏覽都是同一個網址，
不用分開維護兩個網站。

RWD 網頁設計案例隨機顯示

常見問題:

想在線上提供服務、做電商銷售，我該做APP還是做網站?

這就如同有了官方網站，是否還需要經營臉書社群? 兩者是相輔相成的，而不是只能留一個，要依照實際需求考慮。

例如您希望 APP 內的商品資料能在 Google 被人搜尋到，可以直接點擊，那麼店家還是需要建置一個網站來顯示這些商品資訊。

例如您的 APP 就是您的商品，但您可能還是需要經營一個官方網站，來介紹您的 APP 商品。

網站的建置開發、維護成本，通常比 APP 低

開發 APP，兩大手機系統各有不同的上架收費方式，Apple Developer 需每年繳費，每當手機作業系統有重大的版本號更新，就得擔心 APP 會不會閃退或功能異常? 新版本APP要審核幾天後才能上架? 新的隱私權相關規定讓APP又要做修改了?

網站也可以讓消費者付款時不需輸入信用卡號

APP使用內購付款功能(IAP)，消費者刷一下臉或是掃描指紋就可完成付款，但店家需支付30%服務費用給 Google 或 Apple，且需要通過 APP 上架規範的審核。

網站也可串接 LINE Pay, Apple Pay,台灣Pay 等線上行動支付/電子支付系統，或是串接超商取貨付款，消費者付款時不需輸入信用卡號，也可以方便快速的完成購物。

網站一樣可以當數位會員卡

網站程式可串接 LINE Login, Facebook Login API，讓使用者更快速註冊會員，導引使用者填寫個人資料，讓店家做行銷上的利用，也讓消費者保留喜愛的商品、消費紀錄、客服問答紀錄等。

消費者在實體店面時，用手機連上店家網站，出示會員條碼或優惠券，一樣可以達到流暢的O2O的整體服務流程體驗。

網站一樣有很多方法可以發送促銷資訊

APP有發送推播通知，經營網站的店家也可使用 LINE 官方帳號、Telegram 頻道、臉書Facebook、EDM電子報、簡訊、HTML5 網頁推播(僅支援 Android 系統，與桌上型電腦的現代瀏覽器)等，告知最新資訊給使用者。

在所有裝置上都可以看到網站，真正的跨裝置

從 iPhone 換到 Samsung 手機，卻找不到常用的 APP? 使用 iPad 卻在 App Store 找不到某些APP? 因為有的 APP 只開發單一作業系統用的，有的 APP 沒有針對 iPad 專門開發另一個版本，或是使用時有大大的黑邊(像 Instagram)。

網站就方便得多，發佈網站內容不需要審核(但要符合主機商的規範與國家法律)，使用電腦、平板、手機都可以觀看網站的內容，使用者不需要安裝、下載，只要輸入網址或掃描 QR Code，還可以透過 PWA 功能將網站加到手機/平板的桌面圖示、讓網頁全螢幕顯示。

網站建置的線上商品資料也可以隨時在 Google 搜尋引擎中，被潛在消費者搜尋到。

Web 網站程式無法達到的功能?

像 3D 手遊的遊戲引擎必須要更直接的利用系統效能，遊戲廠商會開發 APP 來增進玩家的體驗。web 網頁程式並非無所不能，網頁必須多透過「網頁瀏覽器」來讓裝置執行功能，需求得考量使用者資料的瀏覽器相容性、HTML5 與 JavaScript 各功能相關 API 的支援度，以及後端整個資訊管理系統的建置。

以下列舉兩個 APP 的強項:

需要大量取用硬體裝置資料，如連接藍芽、NFC 感應、掃描裝置內檔案、SIM卡資料、各種相機影像的相關應用，這些仍然還是APP的強項。
在背景傳輸資料的用途，許多人可能都聽過某些 APP 會在背景使用持續麥克風收音，後續分析語音內容來推送廣告、或是手電筒 APP 卻要求手機檔案讀取寫入權限、通訊錄名單之類的資安事件。諸如此類即使手機螢幕沒開，應用程式仍可持續取得、並傳輸使用者隱私資訊的用途，也是目前 web 網頁程式沒辦法做到的事。

什麼是 RWD 網頁設計?

網站必須要有 RWD 網頁設計的理由

網站未針對行動裝置的操作與顯示優化，將會導致:

有網站想要針對行動裝置優化? 想要製作一個有RWD的網站?