什麼是rwd呢

“響應式設計”RWD對於熟悉SEO領域的朋友們一定不陌生,但什麼是RWD呢?

RWD (Responsive Web Design) 是由一位著名網頁設計師Ethan Marcotte 於2010年提出的概念。

而在此網頁設計技術產生之前,網頁工程師們須針對不同解析度及螢幕尺寸進行不同的設計,以達到舒服的閱讀體驗。但隨著智能時代的來臨,無論是手機或是平板在螢幕的尺寸上有了越來越多的選擇,以及動畫、影片流串功能的興盛,若持續使用傳統的設計技術及慨念,將會帶來事倍功半的效果。這時RWD應運而生,在確保訪客的閱讀體驗下,為網頁工程師們節省了網頁開發和各種版面製作時間。

冠億-RWD
冠億建設-RWD網頁

簡單來說,RWD就是利用HTML5及CSS3以百分比的方式和彈性的畫面設計針對不同的寬度和解析度來自動調整並于不同類型的屏幕中呈現出最佳的網頁閱讀體驗。大幅減少了工程師的開發及資料更新時間,而且易於學習,更重要的是不影響SEO結果及排名。

當然RWD的出現雖然解決了許多無論是時間或者開發上的問題,但它相對的也有些缺陷。例如:雖然使用同一個CSS3原始碼便能夠兼容不同的版面,但同樣的在PC頁面開發上,它會比傳統的設計方式更耗時,而且若要對每種解析度的頁面進行校稿,更是會拉長版面製作的時間。此外,因為RWD會在同一頁面中置入多種解析度的CSS,在加劇了傳輸量下難免會影響其下載速度,更無法提供如APP般的絢麗拖拉效果。

最後,在您體驗RWD之前,瀏覽器的選擇也是重要的,由於RWD是建立在CSS3的基礎下,所以您須使用可以支援CSS3的瀏覽器來進行RWD網頁瀏覽。

建議瀏覽器:

  • IE9 以上版本
    Chrome、Firefox、Opera 最新版本

What is Responsive Web Design? – Small Business Trends – https://smallbiztrends.com/2013/05/what-is-responsive-web-design.html

HTML Responsive Web Design – https://www.w3schools.com/html/html_responsive.asp

 


關於作者:Danny Huang

大家好,我是Danny,是位熱愛程式的前端工程師,具有豐富工作與接案經驗。我在這裡會陸續推出一些網頁開發,線上行銷的文章。 如果喜歡這方面的文章可以加入email list。

2018 © Copyright 鎰誠 All rights Reserved.