行動裝置普及之後,企業網站幾乎都必須面對同一個問題:網站在手機上要怎麼呈現才不會跑版、字太小或按鈕點不到。過去十多年間,業界其實出現過兩條不同的技術路線來解決這個問題,一條是「響應式網站設計」,另一條是「獨立行動版網站」。這兩個名詞聽起來相近,做法與後續維護方式卻完全不同。這篇文章不談視覺風格,也不特別針對某個城市的商業效益,而是把焦點放回技術本身,說明兩條路線各自的原理、優缺點,以及為什麼現在多數新建置的網站都會直接採用RWD,還有在什麼特殊情況下企業仍會考慮走獨立行動版這條路。
什麼是響應式網站設計
響應式網站設計的核心概念,是只用同一套網頁程式碼與同一組網址,透過CSS依照使用者裝置的螢幕寬度,自動調整版面配置、字級大小、圖片比例與元件排列方式。換句話說,不論訪客是用桌機、平板還是手機開啟網站,看到的都是同一個網址、同一套內容,只是畫面呈現的方式會依照螢幕寬窄自動重新排版。這種「一套內容,多種呈現」的思路,是響應式網站設計最基本也是最重要的技術原則。
什麼是獨立行動版網站
獨立行動版網站則是另外建置一套專門給手機瀏覽的網頁模板,通常會使用獨立的網域或子網域來呈現,常見的命名方式是在網址前面加上m這個字首。當系統偵測到訪客是使用手機瀏覽器,就會自動把訪客導向這個獨立的行動版網址。這種做法在智慧型手機剛開始普及、行動網路頻寬還不夠穩定的年代相當常見,因為獨立行動版可以把畫面精簡到最基本的內容,讓網頁在較差的網路環境下也能快速載入。
兩種做法在維護與資源投入上的差異
從長期經營網站的角度來看,這兩種技術路線在維護成本上有明顯落差。響應式網站設計因為只有一套程式碼與一套內容,不論是新增文章、調整產品資訊,或是修正程式錯誤,都只需要處理一次,系統就會自動套用到所有裝置的呈現畫面上。獨立行動版網站則因為存在兩套獨立的系統,任何內容更新、版型調整或搜尋引擎優化設定,都必須在桌機版與行動版分別執行一次,長期下來對於內部維運人力與時間的消耗會明顯增加,也更容易出現兩套版本內容不同步、資訊落差的情況。
兩種做法在搜尋引擎與使用者體驗上的差異
搜尋引擎目前是以行動裝置瀏覽到的版本作為主要索引依據,這個機制通常被稱為行動優先索引。在這樣的規則下,響應式網站設計因為桌機版與行動版本來就是同一份內容、同一組網址,天生就符合這個索引邏輯。獨立行動版網站則因為存在兩組不同的網址,容易出現連結權重分散、跳轉判斷延遲、甚至使用者分享網址給朋友時,對方打開卻看到不對應版本畫面的情況,這些都是獨立行動版在使用者體驗與搜尋引擎友善度上相對吃虧的地方。
現在為什麼RWD成為主流做法
目前多數新建置的網站會直接採用RWD,主要原因是搜尋引擎官方文件明確建議採用單一網址架構,而不是分開的桌機版與行動版網址。另一個更現實的原因,是裝置種類已經遠比過去複雜,除了手機、平板、桌機之外,還有各種螢幕比例的筆電、摺疊裝置,甚至同一支手機直向橫向瀏覽時寬度也不同。如果每一種裝置都要另外建置一套獨立版型,維護成本會失控;而響應式網站設計透過彈性版面與流動式網格的概念,可以用同一套邏輯因應絕大多數的螢幕寬度變化,這也是它能夠成為主流做法的關鍵原因。
什麼情況下企業仍會考慮獨立行動版
雖然RWD是目前的主流建議,但並不代表獨立行動版完全沒有存在的空間。少數情況下,企業的行動端使用情境與桌機端操作邏輯差異極大,例如某些需要高度簡化操作流程的服務型網站,或是內部系統因為技術架構老舊,短期內難以直接改造成彈性版面,這時候先建置一套精簡的獨立行動版頁面作為過渡方案,也是可以理解的選擇。不過這類情況通常屬於特殊例外,而不是一般企業官網或行銷網站建置時的常規建議,多數情況下仍會優先考慮往單一網址的響應式架構整合。
企業在選擇技術路線前可以先盤點的重點
如果企業正在評估要新建或改版網站,建議可以先盤點幾個重點,包括現有網站的技術架構是否具備足夠彈性支援版面改造、目前使用的內容管理系統是否方便統一維護單一套版型,以及未來是否有跨裝置擴充的需求,例如平板閱讀、大螢幕展示等應用情境。把這些條件先釐清,再決定要採用響應式網站設計或是評估其他過渡方案,會比單純跟隨潮流做決定更務實。此外,也建議實際用不同尺寸的裝置或瀏覽器視窗檢視現有網站,親自感受版面在窄螢幕下的排列是否順暢、按鈕與連結是否容易點擊,這種第一手的操作經驗,往往比單看技術文件更能幫助團隊做出符合實際需求的判斷。
兩條路線的演進脈絡簡單回顧
如果把時間拉長來看,獨立行動版網站其實是行動網路發展初期的過渡產物,當時裝置效能與網路頻寬都相對有限,把畫面精簡到最基本內容是務實的解法。隨著行動裝置效能提升、網路環境改善,加上瀏覽器對彈性版面的支援愈來愈成熟,響應式網站設計逐漸取代獨立行動版,成為新建置網站的預設選項。理解這段演進脈絡,有助於企業判斷自己現有的網站究竟是停留在哪個技術階段,以及是否已經到了該考慮升級的時間點。
常見問題
響應式網站設計和獨立行動版網站可以同時並存嗎?
技術上可以同時存在,但這代表企業要同時維護兩套系統。實務上多數企業在人力與時間有限的情況下,會傾向把資源整合成單一套響應式架構,避免內容與設定分散在兩個地方管理,反而增加出錯機會。
舊網站是不是一定要整個打掉重做,才能改成響應式?
不一定,要看原本網站的程式架構彈性與撰寫方式。部分網站可以透過調整版面邏輯與樣式設定達成響應式效果,但如果原始架構本身是固定寬度、元件之間耦合度很高,調整幅度有時會接近重新建置,實際情況需要逐一評估。
獨立行動版網站是不是已經完全不能使用了?
並非完全不能使用,只是已經不再是主流建議做法。如果企業有特殊操作邏輯需求,且評估過長期維運成本可以接受,仍可作為過渡性方案存在,但長期而言多數技術顧問仍會建議朝單一網址架構整合。
要怎麼判斷自己的網站現在是用哪一種做法?
可以直接用手機瀏覽器開啟網站,觀察網址列是否出現獨立的行動版網址前綴;也可以在電腦上把瀏覽器視窗寬度縮小,觀察版面是否會即時跟著調整。如果版面沒有跟著改變、內容被硬生生裁切掉,通常代表目前並非採用響應式做法。
如果不確定自己的網站目前屬於哪一種技術路線,或是想了解改版成響應式網站設計需要考量哪些細節,創昇SEO提供免費網站健檢服務,可以協助檢視現有網站的技術架構,並依照企業實際情況給予後續建議。若企業據點分布在全台各地,也提供免費到府解說服務,以面對面的方式說明不同技術選項之間的差異與取捨。