一站打天下!讓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響應式網頁設計,「設計一個網頁,行遍所有裝置」

 

艾肯斯駐點台灣及東南亞,提供您最全面的數位行銷建議及執行。更是您值得信賴的戰略夥伴。