分類：網頁設計

響應式網頁 RWD 設計（Responsive Web Design）又俗稱為自適應網頁設計、對應式網頁設計或是回應式網頁設計，顧名思義是當網頁設計可以針對不同的瀏覽裝置而有相對應或是最佳適應的呈現模式，即是符合響應式網頁 RWD 設計。   響應式網頁 RWD 設計的來源 由於目前市面上不論是手機、平板裝置、筆電或是桌上型電腦，都各有不同的大小尺寸及解析度，同時隨著行動裝置使用比例年年升高並逐漸超越桌上型電腦，過往專為桌上型電腦尺寸設定的網頁設計尺寸早已不敷使用。此外響應式網頁 RWD 設計，可以幫助免去網頁設計者需要針對不同尺寸各自建立獨立頁面的困擾，只需要在單一設計下進行設定，即可為各裝置提供最完整舒適的瀏覽畫面，綜合上述原因響應式網頁 RWD 設計相應而生。   而 Google 在 2015 年宣布行動裝置時代（Mobilegeddon）的來臨，並對於行動裝置友善或是有執行響應式網頁 RWD 設計的網頁，提高了搜尋引擎排名評分的分數，在在都說明了響應式網頁 RWD 設計誕生的重要性。   響應式網頁 RWD 設計原則 響應式網頁 RWD 設計是一種網頁設計的技術手法，這種技術手法讓網頁可以因應不同的瀏覽裝置、解析度以及裝置尺寸大小，呈現出相對應的畫面，讓每個使用者在進行網頁瀏覽時，都可以獲得最佳的使用者體驗，降低使用者需要進行縮放、滑動或是平移的動作，也減少了因為裝置不同而導致顯示畫面不如預期的風險。 響應式網頁 RWD 設計可以讓網頁設計者自行設定在多少的尺寸範圍內，要顯示哪個相對應的頁面排版以及內容，因此首先尺寸範圍的設定，網頁設計者需要進行妥善的拿捏。除此之外，對於一些網頁內容較繁複，或是顯示畫面排版較複雜的網頁，也應該要對尺寸較小的裝置進行內容縮減，才不會導致畫面凌亂或是顯示不清楚的狀況發生。值得注意的是，並非所有的網站都適合使用響應式網頁 RWD 設計，更多資訊可以參閱提升網頁使用者以及行動裝置友善 – RWD 響應式網頁設計。   響應式網頁 RWD 設計範例 1. Shopify 知名的加拿大電商架站平台 Shopify 在響應式網頁 RWD 設計就是一個很好的範例，為了讓所有的使用者在各個裝置上都可以享有一致的使用者體驗，因此在不同的裝置上針對點擊按鈕以及圖片排版上都有做出變動。 在尺寸

隨著智慧型手機的普及，現代人不論是食衣住行上的各種大小需求或是最簡單基本的網路上搜尋資料，往往都只需要透過點擊自己手上的行動裝置，就可以完成，也因此網路世界這塊令人垂涎三尺的大餅，成了許多企業商家爭先恐後想要搶佔的市場。 在這競爭激烈的市場中，吸引人的網頁設計已不再是使用者的唯一訴求，更多的是需要可以在任何情況、任何裝置上都可以完整呈現網頁內容的網站，這時就會需要執行響應式網頁設計，也就是網路上常聽到的 RWD。   什麼是響應式網頁設計？ 響應式網頁設計，英文 Responsive Web Design，也就是市面上常聽見的 RWD。響應式網頁設計是一種能夠讓網頁依據不同的裝置大小以及解析度，去呈現相對應或是最合適的頁面效果的技術模式。使用響應式網頁設計 RWD，可以提高頁面的靈活性，讓使用者不論是使用手機、平版或電腦，都能擁有最佳的使用者體驗以及瀏覽畫面，更可以大幅降低因裝置不同而跑版的風險。   為何要使用響應式網頁設計 RWD？ 1. 降低裝置使用排他性 科技日新月異，行動裝置、桌上型電腦推陳出新，光一個廠牌的某一特定裝置，就會有許多不同的尺寸，而響應式網頁設計 RWD 的設計，讓單一網頁可以在各個不同的裝置上，都可以有不同的呈現，不局限於單一裝置或是尺寸。 2. 降低成本以及開發時間 如果要為了每個不同的裝置以及尺寸都特別設計出一個專屬的網頁，那所需要耗費的時間以及成本一定比只開發一個還要來的多。響應式網頁 RWD，只需要一個檔案，就可以從中執行更改，根據不同的裝置輸入不同的設定，不僅減少了多餘的開發與維護成本，也降低了整體所需的時間與人力。 3. 有利於搜尋引擎排名優化 由於響應式網頁設計 RWD 在每個不同的裝置下，雖然有不同的呈現，卻依然共用同一個網址，因此當使用者在搜尋有使用響應式網頁設計 RWD 的網頁時，會更容易被搜尋的到。此外，各大搜尋引擎如 Google，過去都曾公開提出，使用行動裝置友善的網頁，因為可以提供用戶更佳的使用體驗，因此在搜尋引擎排名評分上，有更高的機率獲得較好的排名，由此可知響應式網頁設計 RWD 對於搜尋引擎優化 SEO 來說，將會有相對的幫助。   響應式網頁設計 RWD 注意事項 1. 播放軟體是否支援 在過去大部分的網站都會使用 Flash Player 做為網頁的播放器，然而目前市面上

RWD, Responsive Web Design的縮寫，翻譯成中文即是你我都聽過的響應式網頁，好像有點熟悉又不確定是什麼嗎？沒關係，響應式網頁顧名思義就是，可以網頁可以響應各式瀏覽工具，不論是用手提電腦、桌上電腦、平板與最重要的趨勢工具-智慧型手機上都可以完美展示，因此其設計核心即是讓網頁具有彈性與可變性(Fluid grids)，隨著螢幕的大小切換，響應式頁面就會依此做出適當的變化。 響應式的重要性 1. 行動裝置友善 增加線上用戶：目前全世界總線上用戶約有46億，其中約有50%也就是20億的線上用戶僅用行動裝置瀏覽網站與購物，而這個數據到了2025年後預計會攀升到37億，37億很多嗎？大概就是超過75%的線上用戶總和，所以一個非非響應式的網站目前已經流失了一半的瀏覽量而幾年後會再流失25%的用戶。 影片瀏覽量：超過一半的線上影片、直播的觀看數是來自手機用戶。 由行動裝置貢獻的線上平台的流量在過去10年(2011-2020)已經增長了500%。 2. 線上廣告是不可逆的廣告趨勢 線上廣告對比傳統廣告的手法多元許多，有影音廣告、文字廣告、聯盟行銷廣告、影響力行銷、電郵行銷，多變又靈活的廣告手法相比傳統廣告有許多的限制，因此成為廣告商的新寵兒，在2018年光是世界12大國家(包括英國、美國、中國等)企業花在手機廣告上的預算就高達千億，這是為什麼？ 因為社群媒體廣告的觸及率是所有廣告方式中，目前表現最好的！排名在後的則是影音廣告，但就如同前面所說，超過一半的影片流量來自於手機用戶。這代表什麼？ 網站具備響應式功能就有機會讓這些廣告在你的網站上推播，賺取可觀的廣告費用。 RWD - 響應式網頁應該做到什麼 響應式案例分析：戰國策 頁面的圖片要可以隨著螢幕的大小縮放 從左到右由上到下分別為手機螢幕、平板螢幕與桌機螢幕三種不同模式，可以看到這張圖片於三種螢幕大小都能自由縮放並完美顯示。另外可以看到欄位的部分，因為手機螢幕比較窄，因此欄位的顯示從橫向改為縱向，個別區塊展示是不是更加清晰？ 文字字體縮放、內容排列 可以看到文字的部分，因為手機螢幕縮小而增加排數，字體大小合適、文字內容置中，畫面整齊一致容易觀看，無需瀏覽者自行縮放螢幕，若為傳統非響應式網頁用戶需要自行縮放螢幕，直接影響用戶體驗。 延伸閱讀：UX,用戶體驗知多少 – 網頁設計小學堂 (1) 適當的margin與

UX(User Experience)： 用戶體驗，簡單來說就是透過各種操作手法提升使用者的滿意度，這與網站設計有些差別，因為單單網頁站計這件事，只涉及了網站的架設與形象等，而提升用戶體驗的設計卻相當複雜，從網站安全性、可信度、方不方便使用、商品形象圖吸不吸引人、消費者喜好掌握好了嗎、良好的SEM等等都包含其中。如果網站並不注重使用者的感受，那麼網站設計得再好，也只能說是金玉其外、敗絮其內。因為這個網站留不住用戶無法轉換。那麼打造良好的用戶體驗該考慮什麼？讓使用者開心的概念好像有點抽象但其實並沒有想像中困難，大致上可以分成五個面向，我們馬上來說明。   本篇文章包含 1.UX,UI-用戶體驗是什麼？與網站設計有什麼不同？ 2.打造良好的用戶體驗應該考慮什麼？ 想要的(desirable) 實用的(useful) 可被搜尋到的(findable) 方便操作的(usable) 可信的(credible) 3.那些常見的可能激怒用戶的方法，如何掌握消費者喜好？ 填寫資料好麻煩，最煩的是不登入還不能觀看網站內容！(desirable) 客服經驗不好 / 客服反應過慢(useful) 網站載入過慢(findable) 方便操作的(usable) 不安全網站(credible) 4.總結   1. 想要的(desirable) 這個應該不難聯想吧？網站的其中一個功能就是線上銷售，這意味著一個電商網站當然需要將商品的展示包裝成消費者喜歡的樣子。 解決方案：鎖定你的TA提升用戶體驗，將網站設計、排版、網站風格調整成一致，舉個例子，Chanel的受眾與Uniqlo的客人偏好的風格一樣嗎？當你鎖定了某一族群的受眾，網站就要打造成符合受眾期待的樣子，才能緊緊抓牢他們。   2. 實用的(useful) 最簡單也最直接的就是實用的，網站的功能之一就是要替人解決問題，舉凡是專業性問題如：UX是什麼？又或是生活化的疑問：哪裡可以買到口罩？或是提供可以解決問題的產品，一個良好的產品應該要是可以替受眾解決問題的。 解決方案：站在客戶端的角度去設想，這需要參考數據了解你的受眾有什麼困擾，例如說受眾族群為家庭主婦，那麼網站的內容就必須針對她們常碰到的問題進行排解。   3. 可被搜尋到的(findable) 當一個網站已經上線一陣子卻無法被用戶找到，那麼這些優

網路 e 世代來臨，越來越多人選擇將資源投入到網路上，不僅可以獲取更多的資源以及關注度，更可以突破時間以及空間的限制，讓更多的使用者能夠接觸到網頁設計者製作的網站。在製作網頁初期，許多網頁設計者會尋求像是戰國策集團這類提供各式網頁設計服務的公司的協助，然而每家公司的報價也會有所落差，該怎麼做選擇，才不會花大錢卻變成冤大頭，本篇將帶領網頁設計者全面了解。   尋求報價前，先釐清網站設計需求 在尋找網頁設計公司之前，網頁設計者應該先了解自己要架設網站的目的為何？有些人是想要架設網站來創立自己的部落格；有些人是要開立自己的網路商店；有些是要為特定活動做宣傳；而有些是要為自己的品牌建立形象官網，建立網站的目的有百百種，這也影響到網站設計者應該要選擇架設何種網站類型，挑選正確的網站類型，才能更讓網站設計者所建構的網站往正確的方向成長，也才有機會在未來可以進一步獲利。   該如何選擇網站類型？ 1. 活動頁面 活動頁面顧名思義就是為了某活動而特別架設的網站，通常會搭配抽獎或是送禮等誘因增加頁面的瀏覽人數，活動頁面可以算是執行網路行銷中的一項元素。針對活動頁面的設計，普遍上來說，活動頁面的設計比起其他類型的網站來說，會相對比較活潑，色彩設計可能會比較鮮艷或是採用對比色，因為這樣的設計往往更能抓住瀏覽者的眼光提高印象。 2. 企業網站 企業網站是所有網站類型中最常見的一種，主要用於建立公司形象、傳遞公司理念、介紹公司產品、或是提供公司簡介給使用者作為參考以及即時獲得公司訊息。常見的企業網站分頁有關於我們、連絡資訊、商品介紹、即時資訊等等，網頁整體設計風格，會以企業形象或是 logo 顏色去做調色。 3. 電商網站 架設電商網站的主要目的就是要販售商品，因此在這類型的網站中，商品的資訊以及圖片、使用說明需要具備高度的完整性、準確性以及即時性。此外，電商類型的網站也需要更加注意交易的安全機制以及個人資訊的維護，針對網頁安全，可以參閱本篇：設定 SSL 憑證，為你的網站安全把關。 4. 入口網站 入口網站是將不同來源的資訊，經過彙整統一整理到某一網頁中進行呈現。使用者可以在入口網站中根據自身的搜尋目的及需求進行搜尋或是關鍵字檢索，進一步從入口網站中篩選出所需要的內容。在設計入口網站時，需要著重注意資訊瀏覽動線以及資訊分類，提升使用者體驗滿意度，讓使用者可以更快速方便

在上一篇文章 5G 世代來臨，2020 網頁設計最新發展趨勢（上），曾經提到當前網頁設計趨勢之一便是在網頁設計中加入影片元素，因為令人印象深刻的影片置入，比起普通文字更能夠抓住使用者目光，此外適時的影片使用，也會比文字或是圖檔更能清楚傳達訊息給使用者，進一步延長使用者在網頁的停留時間。   當影片成為網頁設計不可或缺的重要要素之一，越來越多網頁設計者為了提升視覺行銷開始在網頁中嵌入影片，不論是商品使用說明影片、品牌介紹影片、活動花絮影片等等，然而，當網頁設計者一昧的將影片上傳到主機上，無形中卻也成為了拖垮網站速度的兇手，這時，善用 Youtube 資源，就能大幅度減少降低網站整體表現的狀況發生！使用 Youtube 播放影片究竟可以帶來哪些好處，以下將一一解析： 1. 降低主機負擔，提升網站速度 目前網路上的網站，多數都是透過向虛擬主機服務供應商購買虛擬主機，而非本身擁有私人的實體主機，而當網頁設計者將影片上傳到網站上，他會耗費虛擬主機的流量，越多的網頁設計者上傳影片，虛擬主機的處理負擔就會越大，這將會造成網站品質下降，讓網站設計者需要更進一步的花費更多的預算，購買更高效能的主機方案，才能達到最理想的影片播放品質。然而如果網頁設計者直接使用 Youtube  所提供的空間，不僅不需要額外負擔費用，又可以減少虛擬主機的負擔，可說是兩全其美的解決方案。 當虛擬主機負擔下降，他就能夠有更多的資源處理網站其他相關的運轉，例如圖片以及內容的加載、資料的處理或是網頁其他程式的運行，而這將大幅提升網站的加載速度，避免使用者點入網頁卻苦等不到內容的窘境。此外，使用 Youtube 影片上傳功能還有一大利處，就是 Youtube 除了有影片緩衝讀取功能，也會根據不同的觀看裝置，去提供使用者最佳的影片格式，這對於網站設計的響應式設計是非常友善的要素之一。 2. 不需安裝外掛播放程式 當網頁設計者將影片上傳到虛擬主機上時，這意味著瀏覽者需要有相對應的影片播放軟體，例如 Flash Player 才能夠順利播放影片，而這對於某些使用者來說，卻是一個跳出網頁的重大因素，因為並非每個使用者的瀏覽裝置上，都有安裝或是能夠執行相對應的播放程式，簡單來說會造成使用者的排他性，同時，不同的影片播放軟體所能呈現的影片品質並不相同，而這兩者與網頁設計者希望可以接觸到最多使用者並提供最好的網頁品

上一篇 5G 世代來臨，2020 網頁設計最新發展趨勢（上）提出了因應 5G 世代的來臨，網頁設計趨勢的四大發展重點：影片的使用、設計排版、網站加載速度、RWD 網頁設計，本篇將延續上一篇的內容，提出另外四大網頁設計發展趨勢重點。 網頁設計趨勢五：內容重點摘要 當使用者在使用網路時，往往會希望可以花費最少的時間就能找到所需的資訊，或是達到目標，而當網頁提供給使用者的資訊以操作流程過於冗長繁複，將會加速使用者跳出網站的機率，這對於搜尋引擎在判定網路排名時是非常不利的，因此網頁設計者，應該要思考應該提供怎麼樣的內容給使用者，以此延長使用者在網頁上停留更長的時間意願。 根據研究，在網頁中顯示內容重點摘要，逐漸成為現今網頁設計的趨勢，因為以往，當使用者點進頁面時，因為不清楚各頁面間的內容，而會產生盲點的狀況，當使用者進到頁面發現資訊不符預期時，就會立刻跳出，進而大大提高了網頁的跳出率。在內容重點摘要的輔助下，使用者可以在點進內容頁面前，就先對於裡面所提供的訊息有一定的概念與方向，提高點進適當頁面的準確率，這時當使用者進入正確頁面時，往往會須要耗費數分鐘去閱讀完整內容，而這將有助於提高停留時間，同時對於網頁來說，也可以更精準的了解這些真正有價值的核心用戶。 此外，設計內容重點摘對於使用手機或是平板裝置的使用者來說，也是一大助益，因為使用者不需要在狹小的界面上，閱讀過多不必要的文字，不僅提供這些裝置使用者更好的使用者體驗，也更符合這些使用者的使用習慣。 網頁設計趨勢六：SEO 搜尋引擎優化 網頁設計不僅希望可以美觀並可以提供使用者適當的內容資訊，更重要的便是要讓使用者可以在搜尋引擎上找到你，這時候就會需要執行搜尋引擎優化，也就是常見的 SEO。SEO 執行的方式可以從很多不同層面，從網頁的加載速度、使用者的跳出率、關鍵字的密度、內外連結的提供等等，都會影響 SEO。因此在執行網頁設計時，不僅僅要留意整體使用者體驗以及視覺上的美感，也需要將 SEO 列入考量，才可以避免，精心設計的出網頁，卻無法被使用者所搜尋到。  網頁設計趨勢七：字體設計變化 受到字體庫過於龐大的影響，網頁設計者在設定中文字體，並不如英文一般的多元，多數採用最基本的新細明體或是標楷體，就算使用了其他的網路字體，例如 Google Font 或是 Adobe Typekit，事前也會需要先從雲端上下載字體才能正

2026 即將進入 5G 的高速網路世代，也就是說網路世界勢必走向一個全新的面向，在這股新勢力的推動下，過往的網頁設計早已無法因應網路世界龐大的需求，因此將網頁設計的品質、實用性、使用者友善性全面提升，成了當今網頁設計最大的課題。而在這新課題的產生下，也有許多提供網頁設計服務的公司如雨後春筍般出現，如戰國策集團，這些網頁設計公司，提供了網站業者更多的選擇以及諮詢管道。   網頁設計趨勢一：影片的使用 以往的網頁設計，多數選擇使用圖片多於影片，而現在，令人印象深刻的影片露出，卻更能夠抓住使用者的眼光，拉長使用者在網頁的停留時間。然而在網頁中添加影片，複雜度卻遠遠比添加圖片還要來的多，像是網頁開啟後影片的加載速度、影片是否自動撥放、影片的畫質、載入時是否靜音、影片是否可以在不同裝置上正確播放等等，都是在網頁上加入影片時需要注意的。 關於影片使用，除了後期的網頁設定外，前期的拍攝以及素材挑選也暗藏玄機，如何在短短數分鐘的影片畫面中，將欲傳達的資訊準確的傳達給觀看者，影片的拍攝手法、運鏡、後期的字幕以及特效剪輯等等，都需要特別的著墨。 最後，介於圖片以及影片之間的 Gif 動圖檔，也是當今網頁設計愈來愈熱門的呈現方式，製作的繁複程度低於影片製作，卻依舊可以呈現生動的效果，在連續的秒數中，不斷重複播放相同的畫面，更可以加深使用者的印象，也提高了網站整體的趣味性，然而目前在某些架站平台中，並不支援 Gif 動圖檔的使用，因此在使用 Gif 動圖檔時，也需注意網頁瀏覽時是否可以順利呈現，或是需要透過其他外掛裝置去優化。   網頁設計趨勢二：設計排版 過往的網頁設計通常趨於保守，現今的網頁設計則更為講究整體設計感與排版動線，讓使用者在瀏覽網頁時，除了可以輕易獲得想要的資訊，更可以滿足視覺上的體驗。根據統計，網頁設計的排版方式以對稱排版最被廣為採用，因為對稱的設計界面，可以讓使用者可清楚的了解網頁動線，並幫助使用者更快速的找到資訊整理出重點。對稱網頁設計呈現的方式有很多種，可以是顏色上的對稱、格式上的對稱又或者是水平型式的對稱。網頁設計者可以根據不同的網站目的以及多數使用者的需求去選擇適合的對稱方式，常見的對稱模式為 Z 字型的排版樣式。 為了要在眾多網站中脫穎而出，有些網頁設計者會捨去非對稱的設計型式，例如 N 字型的模式，利用不同的變幻風格，讓使用者產生視覺

💡 快速答案:WordPress 架站的完整流程是什麼? 六步:註冊網域(NT$300-800/年)→ 租 WordPress 主機(NT$3,600/年起)→ 一鍵安裝 WordPress → 選佈景主題(Astra 等免費起步)→ 裝必備外掛(SEO/快取/備份)→ 建頁面上線。全程一天內可完成;戰國策主機含免費代安裝與中文支援,新手最快 30 分鐘上線。 常見問題 FAQ WordPress是免費的,為什麼架站還要花錢? 軟體本身確實免費,但網站要上線需要網域和主機這兩項基本成本,一年大約NT$4,000到12,000元不等。這筆錢買的是網址和存放網站檔案的空間,等於是租房子和掛門牌的概念。相較於用平台建站長期要付月費又可能被抽成、資料還搬不走,自架WordPress屬於自己的資產,長期算下來反而更划算,也更有彈性做客製調整。 完全不懂程式碼也能架WordPress網站嗎? 可以,現代WordPress搭配Elementor這類頁面編輯器,操作幾乎都是拖拉點選,不需要寫任何程式碼。只要會用簡報軟體排版,大致就能上手編輯網頁內容和版型。真正需要技術背景的部分像是主機安裝、疑難排解,可以交給主機商的客服處理,例如戰國策主機就提供免費代安裝與中文技術支援,新手最快30分鐘就能把網站架起來。 自己架站和找設計公司代做差別在哪? 自架省的是預算,花的是時間,適合手頭緊又願意花時間學習排版和外掛設定的人。找設計公司則是花錢買時間和專業,套版設計行情大約NT$3到6萬元起跳,適合想快速上線又希望畫面更精緻的店家。也有折衷做法,先請專業團隊把網站框架架好,自己之後負責維護內容更新,兼顧成本與效率。 WordPress架站完整流程有哪些步驟? 完整流程大致分六步驟。先註冊網域,一年約NT$300到800元,接著租用WordPress主機,一年約NT$3,600元起,再透過主機商的一鍵安裝功能裝好WordPress,接著挑選佈景主題像Astra這類免費模板起步,再安裝SEO、快取、備份等必備外掛,最後建立頁面內容並發布上線。整個流程熟練的話一天內就能完成,新手若搭配有代安裝服務的主機商甚至更快。 架設WordPress網站每年要花多少錢維護? 基本維運成本一年大約落在NT$4,000到12,000元之間,主要包含網域續約費、主機租用費,再加上部分付費外掛或佈景主

💡 快速答案:RWD 響應式網站是什麼?一定要做嗎? RWD 讓同一網站自動適配手機/平板/電腦螢幕。2026 年是絕對必備:行動流量佔 7 成、Google 行動優先索引、非 RWD 網站的跳出率高一倍。檢測方法:Chrome 開發者工具裝置模擬,或直接手機開自家官網 — 要縮放才能看的,就該改版了。 常見問題 FAQ RWD響應式網頁設計到底是什麼意思? RWD是讓同一個網站自動偵測裝置螢幕寬度,呈現最適合的版面配置,手機平板電腦都用同一套程式碼。做法上靠HTML設定檢視區、CSS3 Media Queries判斷螢幕寬度、圖片影片用相對比例縮放三個技術達成。判斷網站有沒有做RWD最快的方法是拿手機打開官網,如果字太小要縮放才能看清楚,或需要左右滑動才看得到完整內容,就是還沒做RWD,該考慮改版了。 RWD和AWD自適應網頁差在哪裡? RWD是一套版面用CSS彈性縮放適應各種螢幕,AWD則是針對不同裝置預先做好幾個獨立版面再依裝置切換。維護成本上RWD只要改一次內容全裝置同步更新,AWD每個版本都要分別維護,人力時間成本高出很多。目前現代網站約95%選擇RWD,只有特殊效能需求,例如遊戲或大型互動網站,才會考慮用AWD搭配獨立版面處理。 舊網站改成RWD響應式設計要花多少錢? 改版費用主要看工程量,單純套版換皮大約NT$2到5萬,若需要重新切版設計則落在NT$5到15萬之間。判斷標準是網站的架構複雜度與現有版型能否沿用。若網站已經超過5年,通常連載入速度、資安更新都一併老舊,這種情況直接整體改版會比一直局部補丁更划算,長期維護成本也更低。 RWD對SEO排名有實際幫助嗎? 有明顯幫助,因為Google目前採用行動優先索引,也就是以手機版內容作為排名判斷基準。如果網站不是RWD,等於用殘缺不完整的行動版內容去跟別人競爭排名,天生就吃虧。加上RWD通常伴隨載入速度與使用體驗提升,這些都是Google重視的訊號,實務上很多網站改成RWD後,幾週內排名就明顯回升。 怎麼知道自己的網站需不需要改成RWD? 最簡單的方法是直接拿手機打開自家官網,或用Chrome開發者工具切換裝置模擬檢視。如果畫面跑版、文字重疊、按鈕小到點不到、需要用手指縮放才能閱讀,就代表沒有做好RWD,應該優先處理。另外可以看後台流量報表,如果行動裝置流量占比高但跳出率也偏高,通常就是

在網路世界當道的世代，許多企業開始投入愈來愈多的資源與心力在建立官網上，也因此促成了網頁設計軟體、課程相關以及像是戰國策集團這類提供網頁設計服務公司的蓬勃發展。然而看似直白的網路設計，卻暗藏了許多「眉角」，舉凡HTML 語法設定、CSS 設計、JavaScript、SEO 設定、使用者體驗、視覺設計、RWD 網頁設計等等，全都包含在了網頁設計中，環環相扣。 網頁設計範例 蘋果官網 相信大家對蘋果官網都不陌生，簡單俐落的風格，整齊的頁面排版和清楚的產品圖示，一目瞭然，搭配上巧妙的動畫設計，讓每次的瀏覽都是一次令人期待的視覺饗宴。 Nike 商品頁 在Nike 的商品頁面中，針對每一項產品都有給出清楚的商品名稱、預覽圖、價格，以及可供選擇的顏色。左邊的側邊欄中，根據不同的消費者需求，給出了不同的篩選條件，大幅提高了使用者體驗的分數。 Dropbox Dropbox在使用RWD 響應式網頁設計上表現得非常出色。從電腦轉移到行動設備時，字體顏色以及大小不僅會根據不同的背景顏色做更改，連帶的圖片也會更改方向。此外Dropbox 也根據不同的瀏覽裝置，而制定不同傻用者體驗，例如，為了防止使用者疑惑，在電腦介面上有一個小箭頭符號，導引桌面使用者向下滾動以查看更多內容。然而當使用者是透過具有觸摸屏功能且可上下滾動的行動裝置時，小箭頭則會消失。 網頁設計軟體推薦 工欲善其事必先利其器，想要架設一個好的網站，首先你需要先有一個簡單上手、方便使用的網頁設計軟體，以下將分別推薦適合初學者或是進階使用者所使用的網頁設計軟體，以及不熟悉語法的使用者所適合採用的網頁設計網站。 FontPage 圖形化的網頁設計軟體，使用簡單，基本功能完善，適合網頁設計的初學者做使用。但其進階功能上卻稍嫌不足，因此比較少專業網頁設計者會使用。 FontPage 主要由三個部分組成，分別是頁面製作的編輯頁、HTML 語法編輯器以及網頁預覽頁。而FontPage 的導覽模式以及所提供的版型，都能讓初學者在初期使用時，更清楚也更容易上手。 Adobe Dreamweaver 針對HTML 語法已經有一定了解以及基礎的使用者，Adobe Dreamweaver 將會是一個最佳的選擇。與FontPage 同樣採圖形化的設計，介面友善，使用門檻也不高。 Adobe Dreamweaver 支持了許多不同的程式軟體，包括Ja