標籤彙整: RESPONSIVE WEB DESIGN

為什麼谷歌推薦使用自適應Web Design

谷歌經常提供建議給網頁設計師和開發人員,使他們可以優化自己的網站為搜索引擎的算法和搜索引擎優化的目的。近日,谷歌終於拿了一個熱門話題立場:響應式網頁設計(RWD)。

但是,什麼是響應式網頁設計?維基百科將其定義為“一種方法,網頁設計旨在各具特色的網站,提供一個最佳的視覺體驗,方便閱讀和導航用最少的縮放,平移和滾動,在廣泛的設備(從台式電腦顯示器到手機)。“RWD的主要優點是,它允許一個URL和單個內容源。一個RWD網站可以為任何設備或屏幕大小,這樣你就不會需要設計不同的網站為移動,平板電腦和桌面設備。

為什麼谷歌想要的東西,谷歌希望

現在你知道為什麼RWD是很重要的,我會更詳細地介紹為什麼RWD重要的是谷歌。谷歌建議“站長後續使用的網頁設計,即服務於相同的HTML的所有設備,使用媒體查詢來決定呈現每個設備上的行業最佳實踐。”

為了把這個成更基本的語言,谷歌建議使用媒體查詢,形成RWD的骨幹部分。媒體查詢允許網站,以適應任何屏幕尺寸。所以,此報價的基本翻譯,谷歌認為它是使用RWD最佳實踐。

動態服務網站是稍快裝,還有一個URL,但你仍然要保持多個自定義的頁面和多套相同的內容。隨著RWD,你只需要關心一個頁面和一組內容,這使事情變得更加高效,簡單的為您服務。

除了上面列出的三個手機設計方案,即谷歌列出了正在創建一個完全獨立的移動網站,在系統檢測到移動訪客和他們重定向到一個離散,移動優化網站的最後一個選項。唯一的移動用戶將看到這個網站;平板電腦用戶仍然會看到原來的桌面版網站。

據谷歌,轉而選擇一單獨的移動/桌面網站配置的主要好處是,它可以讓你創建一個自定義的用戶體驗,並進行便捷的變化。缺點是,你必須小心管理多個URL,重定向,以及移動和非移動網站之間的其他集成。此外,類似於一個動態服務URL的缺點,保持兩組內容在兩個不同的網頁可以使數據管理複雜和困難的。

廣告

WHAT IS ADAPTIVE WEB DESIGN (AWD) AND WHEN SHOULD YOU USE IT?

Stuart McMillan, Deputy Head of Ecommerce at Schuh:
In many ways, adaptive is not dissimilar to a mobile specific site, in that the server delivers different content to different devices. Where it differs is in the logic used to determine which devices get which content.

On an m dot site, the URL tells the server that the client is on a mobile site; on an adaptive site the URL is consistent but the server uses device information sent along with the request to determine the page delivered.

Every time you view a webpage on the internet you send information about the device and browser you are connecting from, it looks something like this:

User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

In this instance, I am using an iPhone and my browser is Safari. So, much like an m dot site, the web server knows I am using a mobile, and sends the mobile content.

This ability to switch content (templates) based on server-side device detection is the heart of adaptive design.

James Gurd, Owner & Lead Consultant at Digital Juggler:
I like the clear distinction of defining AWD as using server side techniques to customise the assets/contents served based on device/browser and RWD as using client-side, or browser-based, techniques.

RESS effectively straddles the two. You’re using a responsive code base and RWD principles but using server side techniques as well (I’ll defer to the more technically versed to explain the details).

Justin Taylor, MD at Graphitas:
Adaptive web design will typically use a completely different set of designs and templates for each platform being targeted.

As a result, designers will create a desktop version of a website and will then design a separate mobile version (and possibly a separate tablet version also).

Responsive web design on the other hand comprises of a single design with a fluid layout that adjusts to screen width of the device, meaning that only one set of page templates need to be created and maintained.

The two routes are often confused as both are essentially methods of targeting mobile devices, therefore perform a very similar role from a users perspective.

The easiest way to determine if a layout is responsive is to view the site on a desktop computer and re-size the browser window, if the layout re-flows and changes relevant to the width of the browser window, you can be fairly sure the site you are looking at is responsive.

Continue reading : https://econsultancy.com/blog/64914-what-is-adaptive-web-design-awd-and-when-should-you-use-it#i.1qj0q47h7tf55w