Responsive Web Design是什麼?

Responsive Web Design可以翻譯成「回應式網站設計」,也就是透過相同的code,在不同的設備上顯示出適合該設備的畫面。我們來看看這個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可以真正發揮效果,而不是只要很炫的畫面而已。

敬請留言

你的回應對我們是很重要的. 你的電子郵件將不會被公開.

請等待 ...
*
Loading Facebook Comments ...