RWD 響應式網站設計是什麼?對SEO 的好處有哪些? | rwd網站設計
跟據TenMax研究調查指出,台灣網路使用者人數已經達到90%以上,幾乎可以說是全台灣人口都會上網,由於智慧型手機的普及,更有95.8%的台灣使用者會用智慧型手機上網,瀏覽電商網站,看看新聞網站,可以說手機離不開生活。在這個趨勢下,網站就必須要更需要符合小螢幕下可操作模式,Google官方也不斷地強調行動裝置優先,如果你的網站符合行動裝置設計,就有機會在搜尋結果頁面有更好的排名。而目前常見的網站設計方式以RWD與AWD方式為主,以下awoo就跟大家介紹什麼是RWD與AWD,以及兩者的差異。[1]什麼是RWD(ResponsiveWebDesign)響應...
跟據 TenMax 研究調查指出,台灣網路使用者人數已經達到 90% 以上,幾乎可以說是全台灣人口都會上網,由於智慧型手機的普及,更有 95.8% 的台灣使用者會用智慧型手機上網,瀏覽電商網站,看看新聞網站,可以說手機離不開生活。在這個趨勢下,網站就必須要更需要符合小螢幕下可操作模式,Google 官方也不斷地強調行動裝置優先,如果你的網站符合行動裝置設計,就有機會在搜尋結果頁面有更好的排名。而目前常見的網站設計方式以 RWD 與 AWD 方式為主,以下 awoo 就跟大家介紹什麼是 RWD 與 AWD,以及兩者的差異。[1]
什麼是 RWD(Responsive Web Design) 響應式網站設計?在這個人手一機的時代,幾乎每一個人都會用手機上網,awoo 也會跟許多合作的客戶強調行動版網站的重要性。而 RWD 響應式網站設計名詞是在 2011 年由 Ethan Marcotte 所提出的,強調用同一套網站設計在不同地裝置(桌機、平板、手機)都可以輕鬆瀏覽。
圖1:RWD 可在不同裝置上順暢地瀏覽網站,來源:searchenginejournal[2]
而在 RWD 時,最重要的就是要先在檢視區(viewport)設定好瀏覽器控制和載入比例:
這代表指定螢幕寬度為裝置寬度,載入畫面一開始縮放比例為 100%,讓頁面不會跑版
其次透過 CSS3(Cascading Style Sheets) 的媒體查詢 (media query) 在適合地斷點 (break point) 進行版面或內容上的調整,大部分地情況下會是頁面上的區塊變化或者圖片大小調整,這會讓頁面有一致性體驗。
RWD 基本原理是運用 CSS3 媒體查詢來變化網頁的內容
最後就是決定變化的形式,例如內容下排或者區塊移動等等方式,可以流暢地在不同裝置之間進行變化。
什麼是 AWD 網站 (Adaptive Web Design) 自適應網站設計?
自適應網站設計是較響應式網站設計更早期的設計,但是目前來說還是有部分公司會採用該設計,它是針對不同裝置給予相對應的版本的網站,例如 momo 購物商城,會根據電腦版給予 https://w...