一站打天下！讓RWD響應式網頁設計，成為您品牌的最佳窗口

RWD響應式網頁及網站設計，變成了近年來網站製作上的顯學。但響應式網站是什麼？響應式網頁設計優缺點又為何？且讓艾肯斯團隊，為您說個明白。

    當世界上首支智慧型手機被發明後，行動裝置的演進突飛猛進，也徹底改變了上網這件事的樣貌——在此之後，「網路」與「線上」的概念，從原本桌上型個人電腦（PC）的專利，演化成不同行動裝置所配備的最基礎功能。時至今日，受到疫情影響，網站平台作為窗口，更取代了零售門店，成為一般企業行號與消費者實際上「親密接觸」的第一線，兩者之間的溝通也更加密切。

    但許多有建置網站的中小企業，對網路環境的觀念仍停留在較為傳統的桌上型電腦，認為「有做電腦網頁就好了」，排版上也以電腦呈現為主，讓自家網站在手機、平板電腦等行動裝置上，都出現如顯示字體與圖片過小、破圖、解析度差、播放影音不順等諸多瀏覽網頁上的問題。更甚者，還間接影響到Google等搜尋引擎上網站的排名，進而影響自然流量。那麼，又該如何妥善地解決這些問題呢？也許與經驗豐富的團隊合作，建置一個響應式網頁，做好RWD（響應式網頁設計，Responsive Web Design），會是最節省成本而有立即性效果的解方。

RWD是什麼？

    先不看「響應式網頁設計」這有點長的名字，單純想像一下：您手上有各種碗，有一般碗（桌上型電腦）、小碗（手機）、方形碗（平板電腦）或超級大的碗（智慧電視、投影螢幕等）。旁邊電鍋煮好了白飯（內容），這時把飯裝進不同碗內（將內容上傳到網站，讓不同裝置都能讀取），裝不下的部分就不會進入碗中（多餘的內容細節在小裝置顯示上會被省略，只顯示核心內容）。碗小飯少、碗大飯多，吃飯的人還是會吃到同一鍋飯，飯的水準不會因為碗的大小而改變（消費者看到的核心內容仍然相同，仍能達到瀏覽網站的目的）。

    而像這樣「根據裝置大小不同，自動調整顯示內容」的設計，讓視覺部分如圖片、影音內容等能同步調整成適合觀看的尺寸，相當於「設計一個網頁，行遍所有裝置」，人人都能瀏覽到最適合當前裝置呈現的內容，就是RWD網站設計。

RWD響應式網頁設計的優缺點，與在SEO操作上的好處

    由上述可知，RWD網頁設計能解決傳統網站在不同尺寸螢幕顯示上的相容度，但凡事都有一體兩面，也有部分特點是需要提前注意的，才能在RWD後，更善用響應式網頁的優點、隱藏缺點，讓消費者在體驗上更加順暢。響應式網頁的主要優點為：

• 適用於大部分裝置的螢幕尺寸

RWD在技術面上，因為能以單一個網站與網域，在不同螢幕大小上自動調節網頁的操作介面顯示、版面寬度、文字排版及視覺呈現，不需特別針對某一種裝置而另行製作網頁，大量節省開發成本，當未來出現更多不同螢幕尺寸的裝置時，也能及時適應，不延誤商機。

• 方便消費者分享網頁

傳統上，每當複製網站資訊或轉傳文章時，使用不同裝置的接收方，都會遇到跑圖、走位、文字色彩大小不一等窘況，內容無法更精確地呈現，甚至還常會被網站自動判定為錯誤頁面，而跳轉回首頁，讓轉傳分享功能完全失效，對計算單一頁面的流量，與頁面的瀏覽體驗來說傷害很大。RWD後，一頁、一網址多用，不產生跳轉問題，內容套用同規格後，瀏覽體驗也能更一致。

• 讓網站更便於管理

過往在網站規模仍小，不特別建置後台系統時，如果網頁需要更新或調整，就要在電腦版與行動裝置版上各進行一次編輯，還要隨時對照不同裝置的前台畫面來微調，緩慢無效率又容易忽略小細節，進而影響瀏覽體驗。在RWD後，有任何更新，只要一次處理就好。

    還記得剛才碗與白飯的比喻嗎？沒錯，RWD後的行動裝置版網頁，因為螢幕尺寸較小，往往只能呈現核心而關鍵的資訊，無法像電腦版或大裝置版，一次一頁羅列所有資訊，而這也是RWD的原生缺點。另外，要在開發期間就先調校好上線後在不同裝置之間的呈現內容，也會讓開發時程稍微拉長，但比起要建置每個裝置專屬的頁面來說，工期與成本還是RWD較為划算。

    而站在SEO設計的觀點來看，Google官方曾在其「行動版網站搜尋引擎最佳化設定指南」中，推薦架站時使用RWD 技術，畢竟RWD只需設計一個網站，只會使用到一個網址，流量集中不分散，能更忠實地呈現網站排名表現，對SEO計算與投放廣告的效益來說也相當有利。 

我還有聽過一個「AWD」，請問這是一樣的東西嗎？

    不同。RWD是響應式網頁設計，而AWD（Adaptive Web Design）則是「自適應式網頁設計」。雖然RWD與AWD兩者都是因應行動裝置上網而生的網頁CSS語法寫法，但前者是「在不同行動裝置與傳統桌機上，都使用同一組CSS語法」，當消費者一打開網頁，RWD就會隨著預先寫好的樣式偵測視窗大小、寬度，以「同一種語法」來自動微調；而AWD則是預設會判斷視窗大小、寬度的語法，在不同的裝置上以「對應不同裝置的不同種語法」，來自動微調。

無論要用哪一種，您都能倚賴最富經驗的團隊來執行

    由於艾肯斯團隊常與中小企業合作，協助建置網站，因此也累積了不少RWD案例，像是知名的YAMAHA山葉機車推出新車商品，與台灣酪農品牌阿秀鮮乳在品牌推廣時，都分別讓艾肯斯團隊量身打造，規劃RWD頁面，得到良好效果。

    在網路已經成為生活必需品的今天，任何新的產品資訊、新的使用者評價、新的促銷訊息，只要能在網路上好好呈現，就有機會被適合的人看見。艾肯斯建議，在疫情期間，委由專業團隊策劃並執行RWD網頁，能營造一個友善的網站環境，讓更多使用不同裝置的潛在消費者「看見」您的商品，進而刺激購買。

RWD響應式網頁設計，「設計一個網頁，行遍所有裝置」