如果你針對SEO來考慮的話，Responsive Web Design確實是有助益的，並且Google在”Overview of Google’s recommendations“也說 …

1. Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

2. If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.

上述的第一點說明Google的最優先建議，請大家使用Responsive Web Design (適應性網頁設計)，因為不管什麼版本都是相同的HTML、相同的內容，Google最容易處理。

但是第二點又說了，如果Responsive Web Design (適應性網頁設計)不是你的最佳選擇的話，也可以使用其他的方式云云。

因為上面的說法，所以大家都認為使用Responsive Web Design (適應性網頁設計)就對啦 … 其實並不是這樣。

我們前面說到的都是針對SEO而言，當然Responsive Web Design是首選，但是我們也提到一個但書: 「如果你的網頁較為複雜的話，Responsive Web Design還是有其缺點。」

也就是如果你以「網站優化」的觀點來看的話，你必須思考Google的第二點建議的意思。為什麼Google會說~「If responsive design is not the best option to serve your users 如果適應性網頁設計不是你的最好選擇的話 … 」。

這篇”Could Mobile Responsive Website Design Hurt Your SEO?“也提出跟我們同樣的看法，他提到了一個很特別的案例，就是Disney (迪士尼公司) 的網頁。他說在迪士尼網頁中有許多給小朋友玩的網頁遊戲，有些遊戲可以在桌上型電腦玩，但是如果使用行動設備就可以無法使用。因此這個情況下，就必須做出抉擇，放棄使用Responsive Web Design，或是修改遊戲，讓桌上型電腦與行動設備都可以順利使用。

這篇文章”THE DESIGN THINKING BEHIND THE NEW DISNEY.COM“的作者參與了迪士尼網頁工作，他就說到了他們的最大挑戰就是~創造出一個全新的方式來讓訪客與迪士尼日新月異的內容進行互動 (Our biggest challenge was creating a new way for our Guests to interact with our wide array of content on a day-to-day basis.)

如下圖就是迪士尼的內容顯示在桌上型電腦、平板、手機的樣子:

所以Responsive Web Design (適應性網頁設計)確實非常好，但是你必須知道你提供的內容是否能夠在這個架構內如你所想的，讓所有使用者在任何設備下都能夠順利瀏覽。也就是在網站優化的考量下，是否應該使用Responsive Web Design，還必須多加思考。

這篇”5 Reasons Why Responsive Web Design is Good for SEO“說有5個好理由讓適應性網頁設計對SEO有幫助。並且說到~「The bottom line is that as long as multiple devices for browsing are accessible, responsive design will always be a requirement.」。只要在多設備的瀏覽情況下，適應性網頁設計就是必須的。

以下就是這五個理由:

(1)Higher Local Rankings 因為以行動設備瀏覽網頁的比例越來越多，因此可以提升在地評等。
(2)Your Onsite SEO Efforts Are Still Applicable 因為網頁沒有區分版本，所以SEO策略保持一致。
(3)Avoid Duplicate Content 可以避免內容的重覆。
(4)Keep Your Links 可以保持網頁的原本連結。
(5)Google Said So 更重要的是 … Google也這麼說。

通常我們在瀏覽網頁時，有一種情況是很令人挫折的，就是當你使用可攜設備瀏覽某個網頁時，發現網頁內容跟你使用桌上型電腦瀏覽時不同。因為你很可能記得在家中在某個網頁看到某個資料，但是你卻無法使用手機找到相同的資料。

許多網頁設計是自動偵測使用設備，自動轉到特定的網頁，當你使用桌上型電腦瀏覽時，就顯示正常版網頁，當你使用手機瀏覽時，就顯示手機版本的網頁，但是卻沒有提供自由選擇版本的機會。

但是雖然適應性網頁設計對於SEO是好的，但是畢竟這些相關技術都還在演化當中，還是有些尚待克服的地方。

例如下圖中，大的畫面是桌上型電腦瀏覽時的樣子，小的畫面是手機瀏覽時的樣子:

但是，如果原本桌上型電腦版本的網頁是比較複雜的話，就不太容易順利的在手機呈現，例如PChome網頁或是Yahoo!奇摩，都還是讓使用者自己選擇版本，而非自動轉址。

所以雖然都知道適應性網頁設計對於SEO有好處，但是在目前而言，仍然處於技術與現實折衝的階段，如果出現更好的解決方案的話，也許以後就再也看不到網頁有桌機手機雙版本的情況了。

這篇”Easy Ways to Reduce Your Website’s Bounce Rate“提到，當然要讓每個頁面都讓訪客滿意是不可能的，但是如果太多頁面的跳離率都非常高的時候，例如60%~80%時，你可能就必須好好思考如何降低跳離率了。

以下列出了幾個可以有效解決跳離率(跳出率)過高的方向:

(1) Check Browser Compatibility 檢查網頁的瀏覽相容性。

這項是最應該即刻檢討的項目，因為許多網頁都沒有經過各種版本瀏覽軟體的測試，更可能沒有經過各種設備的瀏覽測試。你的網站是否可以被不同版本的Internet Explorer、FireFox、Chrome、Safari、Opera所瀏覽呢? 你的網站是否可以被桌上型電腦、手機、平板所瀏覽呢? 你的網站是否使用特殊的Javascript呢? 你的網站內容是否必須使用特殊的播放軟體呢 (如Flash或是一些影片)?

你可以順利瀏覽你的網站，不代表大家也都可以順利瀏覽你的網站，如果你的網站能夠檢查網頁的瀏覽相容性，肯定可以快速的降低跳離率。

其他參考資料:
Responsive Web Design對於SEO有何好處?
應該如何進行Mobile SEO?

(2) Improve Your Page Load Times 改善你的網頁載入時間。

我們在”網站優化的要務 : 速度、速度、速度“說過，對於使用者而言，如果你的速度實在太爛的話，你可能就永遠失去一個客戶。以前的使用者也許可以等30秒的網頁載入時間，但是現在可能超過3秒無法看到網頁，就會馬上離開。

要改善你的網頁載入時間，最快的方式就是找一家連線最快的代管廠商，只要花錢就能馬上解決。另外就是必須檢視你的網站結構，找出拖慢網頁載入時間的最大原因，然後改善它。最常看到的是圖檔過大、外掛過多、Javascript過於複雜、後台資料庫問題 … 等等。

(3) Create Better Content 創造較好的內容。

其實解決了上述(1)(2)的問題，大概跳離率就可以有明顯的改善了。再來就是可以快速降低跳離率，但是沒有那麼簡單的項目了。

我們在”什麼是網頁內容的品質? 為什麼品質關係SEO的成敗?“說到，如果能夠解決網頁的品質問題，可以先取得一些優勢，然後再來檢視內容的品質。要能夠讓內容有品質，就要先避開Think Content的問題，然後再考慮投入行銷的問題。

(4) Make Your Purpose Known 讓你的意圖被知道。

讓你的意圖被知道的意思就是把網頁的主要內容突顯出來，不要再讓訪客找半天。這個說起來簡單，但是其實不是太容易。因為許多網頁都希望網頁能夠「內容豐富」，所以會有雜七雜八的內容跟連結，例如我們的網頁就是有點太龐雜，哈哈，但是實在沒有太多時間去簡化。

如果你的搜尋流量進來，但是無法在三到五秒鐘找到想要的內容，就可能造成跳離。

(5) Avoid Pissing Off Your Readers 避免惹惱讀者。

什麼樣的網頁會惹惱讀者呢? 就是pop-up window (跳出視窗)、過多讓人分心的廣告、關不掉的廣告、自動播放的影片或是音樂、或是過多跳動的元素等等。

許多沒有內容的網頁，都會以上述的方式來騷擾讀者，目的就是要讓讀者誤點廣告，然後賺取廣告費。但是這類的網站久了之後，會讓訪客記得你的網址，不是避免點選就是點入後馬上離開。

(6) 避免過長的內容，或是過於困難閱讀的內容。

過長的內容或是過於困難閱讀的內容，會讓訪客閱讀很久的時間，雖然有實際閱讀活動，但是根據跳離率的定義，還是可能算是跳離。因此一個網頁的內容要「豐富度適中」，單頁不要讓訪客停留過久，最好能夠繼續點選閱讀，或是造成投入。

(7) 在明顯的地方，放置最相關的連結內容。

如上所述，訪客沒有太多的耐心去尋找你的網頁，因此如果內容不是訪客期待的話，至少可以在明顯的地方，讓訪客看到有興趣的內容。

以上七大項目就是可以快速解決跳離率過高的問題，雖然未必都很簡單推動，但是如果你能夠依照這些方向去思考，你的網站跳離率將可以很快的降低下來。

Responsive Web Design會不會變成以後的網頁設計標準呢? 這篇”The SEO of Responsive Web Design“說到，現在各種類型的設備都可以上網，要讓這麼多種不同大小的螢幕都可以看到適合的內容，Responsive Web Design會是以後網頁設計的標準。

並且提到微軟的網站就是典型的Responsive Web Design的例子，如下圖是桌上型正常的顯示樣子:

當畫面縮小後，就變成下面的樣子:

當繼續縮小成手機螢幕大小，就變成下面的樣子:

這樣子的Responsive Web Design最明顯的好處就是，使用者可以很舒服的以各種設備瀏覽網頁，但是更重要的是，對於SEO有特別的意義，我們整理如下。

(1) 可以減少網頁內容重複性 (Duplicate Content)

如果沒有使用Responsive Web Design，你必須有適合桌上型電腦瀏覽的網頁，以及適合行動設備瀏覽的網頁，雖然這樣子的網頁內容重複不會受到搜尋引擎的處罰，但是你必須維護兩份內容，可能會增加維護成本，更可能因為疏忽而兩個版本的內容不同步。如果使用Responsive Web Design，就可以專心的維護一個網頁。

(2) 可以提升網頁可使用性 (Usability)

如上面所說的，使用者可以很舒服的以各種設備瀏覽網頁，因此使用者不需要再去選擇各種網頁的版本。並且如果你的正常版本與行動版內容是不相同的，許多使用者可能會找不到原本預期的內容，因此Responsive Web Design可以提升網頁可使用性。

(3) 可以降低網頁跳離率 (Bounce Rate)

許多使用者經常會碰到網頁不適合行動設備瀏覽而離開，一來可能因為畫面讓人眼花撩亂，二來可以因為畫面等待過久。如果網頁能夠自動調整畫面，並且自動判斷應該下載的檔案大小，就不會讓使用者跳離。

(4) 可以提升社交化流量(Social traffic) 以及搜尋排名 (SERP)

當網頁提升可使用性，以及降低網頁跳離率之後，隨之而來的就是會增加流量，並且因為越來越多的社交活動都在手機上進行，因此社交化流量也會隨之提升，並且進而影響搜尋排名。

現在Responsive Web Design雖然很熱門，但是並沒有太多的網站採用這類的設計方式，我們後續再來討論Responsive Web Design的相關架構問題。

根本Wikipedia的說法，Responsive Web Design是指網站使用CSS3 media queries方式，以百分比的方式以及彈性的畫面設計，讓不同的設備都可以順利瀏覽的網站。

所以Responsive Web Design的重點就在於，相同的內容讓各類設備都可以利瀏覽的網站設計方式。

另外在”Building Smartphone-Optimized Websites“亦提到，要在智慧型手機正確顯示畫面，可以使用三種方式:

(1) JavaScript-adaptive: 這是Google所推薦的方式，使用相同的HTML/CSS/Javascript在各種不同的載具上，不同的載具會有不同的執行結果。

(2) Combined detection: 使用Javascript或是伺服端的偵測，來決定執行什麼程式，例如決定是否轉址到行動設備的程式碼，這是許多網站經常使用的方式。

(3) Dynamically-served JavaScript: 使用相同的HTML，但是Javascript會因為客戶端的user agent而決定執行哪一種Javascript。

所以Google所說的JavaScript-adaptive，也是Responsive Web Design其中一個方式，不是只有CSS3 media queries方式。因此Responsive Web Design是什麼? 應該可以說~ 網站使用CSS3 media queries或是JavaScript-adaptive的方式，以百分比的方式以及彈性的畫面設計，讓不同的設備都可以順利瀏覽的網站。

例如以下: http://webdesignerwall.com/demo/adaptive-design/final.html

當桌上型電腦顯示時，右側會出現side bar。

但是當行動設備畫面比較窄時，右側的side bar會自動消失。

右側的side bar會自動消失之後，會移動到底部。

我們在”應該如何進行Mobile SEO?“也提到過，「Mobile SEO」是指讓使用者在行動設備上能夠搜尋到你的網站並且順利瀏覽你的網站的SEO策略。如果你的網站不能讓各種設備都很舒適的瀏覽，你可能就已經把許多客戶趕出門口了。

並且由於使用行動設備的使用者，可能有別於桌上型電腦的使用目的，因此你還必須特別思考，如何讓Responsive Web Design可以真正發揮效果，而不是只要很炫的畫面而已。