這幾年由於智慧型手機與平板使用度日益遞增,現在大部份的網站都需思考跨平台策略,跨平台策略到底有多重要?看看Google的多螢幕網站攻略就會知道有多重要。一般網頁設計的趨勢與設計,像Google這樣世界知名的大公司是不會做什麼特殊專題的,但Google卻建立了多螢幕網站攻略專題網站來作說明,可見跨平台策略有多重要。
目前跨平台網站的製作方式大概分成三種,第一種是響應式設計(Responsive Web Design,簡稱RWD),第二種是RESS( Responsive Design + Server Side Components),第三種是獨立手機版網站。
響應式設計(Responsive Web Design,簡稱RWD)
在Google的名詞翻譯上是採用回應式設計這個翻譯詞,響應式設計的優點是整體設計一致性高,前端與後端只需費心在同一設計架構上即可,並且不需重新導向其他網站,在同一個網站設計下會針對不同頁面顯示出不同內容,也是目前中小型網站在跨平台策略上最優先選擇,但是缺點就是必須考量資料內容的多寡,前期網站企劃環節必須仔細思考規劃,多費心思在資料量、架構的部分,所以資訊較多的網站直接採用響應式設計(RWD),很容易造成在手機或平板瀏覽時loading較久,導致使用者失去耐心。
RESS( Responsive Design + Server Side Components)
在Google的多螢幕網站攻略稱為動態放送,即針對不同平台由後端組合出適合該平台瀏覽的網站,所以可以有效解決響應式設計(RWD)對資料流過大的問題,在大型網站比較適合選擇這樣的方式作為跨平台的策略,而且同樣不需轉到其他網站,不過RESS的缺點就是設計、前端、後端必須大量模組化,視覺設計是會較於乏味,而且後端上稿時需要針對各種不同平台做設定或上稿,大幅增加網站後續維護的時間,甚至可能還有遺忘需要維護手機版網站的可能性,而且各平台的內容不一致,甚至操作模式也可能有所改變的情況下,很難維持網站一致性,造成網友混淆的現象。
獨立手機版網站
最早期網頁設計對於手機版的網站,莫過於選擇獨立製作手機版網站,採用這種做法的網站通常都會轉跳到另外一個網址下(ex:m.domainname.com 或是 domainname.com/mobile),所以可以針對各平台打造專屬內容,但缺點就是會造成維護時也要分兩邊維護,除了造成後續維護時間較長以外,各平台版本的網站內容也會不一致。
了解這三種方式之後,可以發現網站整體的資料多寡其實影響很大,這裡的資料多寡不光只是現在網站內所有的資訊,還包含後續維護的資料、上稿難易度與維護時程等等,透過對資料內容的了解我們勢必得先從content first的概念出發再到手機、平板以及手機的設計,在分別考量各平台的產出結果是否好操作並且不需大量下載導致網友需等待過長的時間等等,最後我們要怎麼知道網站在各平台上的表現結果?其實我們透過Google Pagespeed Insights 這個工具做測試,在測試結束後我們還可以取得相關的優化建議。
本篇內容皆有在”好感度No.1的網頁設計:RWD不出槌法則,網站在任何裝置都完美呈現“一書中詳細提到,如果對這些內容想要獲得更深入的介紹,歡迎購買本書,或上本書FB社團一同討論喔!