RWD 響應式網站是在幾乎人手一台手機的時代,做網站不只要顧慮到電腦筆電,也是要需要顧慮到手機體驗,所以 RWD網頁設計 就成為很重要的一環,除了讓瀏覽體驗更佳之外,對SEO增加和成本減少都很有幫助,本文會說明6大RWD好處和一些網站設計範例介紹!說完好處,當然也要說一點RWD缺點或小小限制!
這幾年常常聽到RWD(又稱為響應式或自適應網頁設計),這裡盡量用簡易的方式介紹什麼是RWD網站設計.
RWD就是指同一個網址,同樣的內容,在不同螢幕寬度(電腦、平版、手機)會自動適應產生不同的排版變化.
電腦版網站通常用什麼形式看起來差異不大,但如果用手機瀏覽網站,不同的方法製作的手機版網站,網站呈現就會有所差異;因此也有人直接稱RWD網頁就是手機版網頁,如果您的網站沒有RWD,是傳統的網頁設計,那您的客戶用手機瀏覽網站,所有畫面圖片文字都會超級小,不方便瀏覽,導致體驗不佳而快速地就會關閉您的網頁
(這樣辛苦做好一個網站,沒人瀏覽不是很難過嗎? TT).
用網站舉例,下圖同樣是手機瀏覽尺寸約400px寬,可以看到是否有RWD在電腦版影響不大,但手機版就有明顯的差別:
沒有使用 RWD網頁設計 柑仔店 手機板(圖片擷取時間:2020/6/9)
您可以實際用手機看看:柑仔店網站傳送門
畫面都濃縮到太小,資訊不易瀏覽,手指也不易點選連結
有使用 RWD網頁設計 人之初產後護理之家 手機板
您可以實際用手機看看:人之初網站傳送門
畫面根據螢幕調整排版,讓瀏覽者可以舒服地看網站,也方便點選任何連結
運作原理:電腦版網站轉換到手機版的時候,畫面調整是每一個元件依序從上依序往下,電腦版左邊欄位的元件會自動變成手機版的上方,電腦版右邊欄位的元件則會自動變成手機版的下方,「從上往下+左上右下」.看圖比較好理解,下圖為 RWD響應式網頁設計 呈現範例圖,可以看到相同元件在不同裝置的呈現:
畢竟,現在是個幾乎人手一台手機的時代,所以做網站不只要顧慮到電腦筆電,也是要需要顧慮到手機體驗的,所以RWD網頁設計就成為很重要的一環,除了讓瀏覽體驗更佳之外,對SEO增加和成本減少都很有幫助,下方會說明6大RWD優點!
PS:至於怎麼呈現RWD,會有人說可以自己寫CSS相關程式之外也可以用Bootstrap等其他來協助,但小編認為想要做網站的您就是不擅長此領域,那就把專業交給專業的網站製作/網站設計團隊執行,這邊就不多介紹技術面的東西~!
Google 目前是全世界最大搜尋引擎,在 2015.08.17 時,Google 有篇文章這麼說的: “Google recommends web masters 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.”
Google更在自己的指南之中提到RWD以下這些好處(文字摘自2020.6.10 Google Developer官網):
有RWD網站設計需求,歡迎聯繫我們:
填寫表單:線上諮詢
連Apple官網以及美國白宮官網,還有現今很多企業都使用RWD,就知道 RWD優點 遠遠大於這些微小的限制的!
近年來網路上有時候會有人提到AMP網頁(Accelerated Mobile Pages),是為了加速手機瀏覽的網頁模式,連Google大神也極力在推行!
他確實可以在手機瀏覽速度很快,但相對的他會刪除你網頁上所有的視覺美化效果,幾乎只留下文字和圖片,所以當然畫面就會較為簡陋的不太好看,而且要看產業,所以過去大部分的公司不太使用AMP,不然就是會同時有做RWD一個版又要另外做一個AMP,製作成本自然會往上增加,所以是否要用AMP版本,就看客人與其對應的網站型態去考量.