Lego7205.com 網站專為廣受歡迎的舊款樂高產品提供評論。站主 Kazuyuki Kakishita 回憶,每當他在小鎮的玩具店看到傳統的樂高積木時,總是雀躍不已。於是他本著與更多人分享美好回憶的心情,創立了這個網站。

為迎接勢不可擋的多螢幕趨勢,考慮了跨裝置策略後,Kazuyuki Kakishita 在 2013 年 8 月決定改用回應式網頁設計 (RWD) 打造網站。在訪談中,他就自己以回應式網頁設計網站的原因、方法和結果侃侃而談。

「遲早行動裝置和平板電腦的流量會超過 50%,因此我很清楚制訂跨裝置策略刻不容緩。」

Lego7205.com 在 2008 年上線時只有一個電腦版網站,但是我非常清楚,行動裝置和平板電腦的流量會逐年增加。在我決定將網站架構改為回應式網頁設計的同一時間,來自行動裝置的流量已經在 2013 年 8 月突破 40%。

2011 年 8 月/2012 年 8 月/2013 年 8 月


「當時我就認為回應式網頁設計會是最有效率的解決方案,可以不必投注過多心力維護網站,因此初毫不猶豫就選擇了回應式網頁設計,做為我的多螢幕解決方案。」

通常來說,要管理為多種裝置設計且解析度不同的多個網站相當費事。如果改採回應式網頁設計,我只需要管理一個網站就好,效率也能大幅提升,何樂而不為呢?所以我毫不遲疑就做出了這個決定。

「設計回應式網頁時,去蕪存菁是成功的關鍵。」

回應式網頁的精隨就在於裝置螢幕不同,版面配置也不同。我從頭開始設計網站版面配置時,每次修改後我就會在電腦、智慧型手機和平板電腦上查看版面呈現的模樣。過去我設計電腦版網站時總是使用許多元素,但對回應式網頁設計網站而言,最重要的是盡量保持設計簡潔。

經過反覆的嘗試和失敗,我總算重新打造了網站,讓網站從此能夠適應各種不同大小的螢幕。

過去,相關的產品清單都位於網頁上方,圖片則在清單下面。但是我在智慧型手機上瀏覽時,總覺得內容敘述太過冗長,而且必須一直向下捲動才能看到圖片。為了將網頁主題立刻呈現在任何裝置的使用者眼前,我重新挑選了有趣而引人注目的圖片,讓精彩圖片立刻抓住訪客的目光。

我也試著讓標題更易於瀏覽,並把內容和其他導覽資訊 放在首頁上,以免主要內容被擠到下面去。



「將網站改為回應式網頁設計,花了我大概一週的時間。」

由於我向來使用的伺服器容量超載,我決定改用更大的伺服器,這花了我大概兩週的時間,但把網站架構改成回應式網頁設計的過程只花了大約一週。網站是我自己從頭開始設計的,但在樣式表的部分,我採用了程式碼簡單且頗受好評的外部範本。省下很多編寫 CSS 程式碼的時間,讓我更有餘裕好好設計網頁版面配置,專注於改善使用者體驗。

我將內容 (資料) 和範本分開管理。範本建立完成後,我只需要插入資料和網頁,就能自動建立網頁。Lego7205.com 其實是由 5 到 6 個範本模式管理的。

以回應式網頁設計打造網站帶來了兩大成果,使用者用得更開心,我的 AdSense 收益也顯著提升。我的努力帶來了豐碩的回報。

就拿網站架構改成回應式網頁設計前的 8 月,比較完工後的 9 月,Lego7205.com 網站在跳出率、離開率、瀏覽量和獲利等方面都大幅改善。當初將網站架構改成回應式網頁設計時,我就決定只留下 AdSense 回應式廣告和標準廣告,其他廣告通通不要。這個決定是因為 AdSense 廣告能帶來最佳的效益,加上將架構改為回應式網頁設計,於是收益便順利地一路上揚。


在改採回應式網頁設計後,跳出率減少了 19%,使用者造訪期間的網頁瀏覽量更增加了 22%。我覺得內容比之前更吸引使用者。此外,在導入回應式廣告程式碼後,AdSense 行動廣告有效千次曝光出價提高了 10 倍,曝光量和點閱率也因而提升。點閱率增加了 62%,因此收益也跟著增加了 10 倍!

「導入 AdSense 回應式廣告很簡單,就像其他 AdSense 廣告一樣,只要貼上程式碼就行了。」


導入 AdSense 回應式廣告一點也不麻煩。就像其他標準 AdSense 廣告一樣,只要複製並貼上廣告程式碼就行了。期待 AdSense 團隊能進一步加強回應式廣告,讓使用者不論是以水平或垂直的方式瀏覽螢幕,廣告大小都能自動配合改變。

「我也計劃讓將自己的其他網站同樣導入回應式網頁設計,作為跨裝置策略。」

無庸置疑,來自行動裝置和平板電腦的使用者只會多不會少。我必須加緊腳步,為我的其他網站發展跨裝置策略,我打算從行動裝置流量最多的網站著手。我很確定會繼續選擇 Lego7205.com 所用的回應式網頁設計,期待能再創佳績。

你對多螢幕時代感興趣嗎?快來閱讀「接軌多螢幕世代系列專題」並且密切地留意我們將推出的多螢幕世代線上教學喲!

* 樂高 (LEGO) 是樂高集團 (LEGO Group) 的註冊商標。