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) 的註冊商標。