
RWD網頁設計是什麼,為什麼大家都在用?3分鐘讓你搞懂RWD!
RWD響應式網站設計(Responsive Web Design)因應行動裝置使用者增加而誕生,此外Google在2020年已宣布會以行動版的網頁內容作為建立排名的依據,除了評估網頁整體資訊品質,優質的網頁體驗也列入排名評分的關鍵,當與對手的網頁內容相似時,網頁體驗就成為自然排名勝出的關鍵。RWD設計和傳統網頁有什麼差別,為什麼可以提升網頁排名?RWD網頁設計有什麼好處?本篇文章將帶你簡單搞懂RWD的奧秘! RWD是什麼? 提到RWD網頁,相信大多數人都會跳出「手機版網頁」這幾個字,但其實RWD設計不僅單指可以在手機上正常運作,而是指可以根據不同裝置的版面配置調整網頁內容的大小,讓使用者在手機/電腦/平板/筆電等不同螢幕大小的裝置,都可以對網頁內容一目瞭然,不用放大縮小來調整版面來看清被不同版面限制的內容。 RWD響應式網頁設計透過調整程式語言,使文字、圖片、站內連結等可以正確顯示在行動裝置上,免除不必要的特效干擾,建立一個虛擬可視區域,使瀏覽器自動適應不同螢幕比例的設備,自動調整顯示內容的大小,和必要的選單或按鈕,將其他多餘的物件隱藏收起,給予使用者簡潔且容易操作的介面。 為什麼使用RWD響應式網站設計? 最初為了滿足智慧型手機使用者的需求,會設計電腦版和手機版以滿足不同裝置使用者的需求。但兩個版本的網址並不相同,讓網頁內容不能同步連動。且以電腦版開啟手機版時,有些內容會被隱藏無法顯示,需要另外搜尋操作。簡單來說,若是採用傳統網頁,一般會依照在電腦裝置的寬度1240px來設計網頁,但行動裝置的寬度一般在320px~720px之間,網頁內容就會有所限制,且使用者也會因為操作不方便而跳出網頁。此外,設計和維護兩個網頁會使時間成本增加,也造成人力成本的消耗,反而花了更多不必要的支出在修改網頁內容上。 RWD有哪些功能?優點與缺點介紹 RWD網頁設計功能一:CSS樣式運用 RWD設計採用CSS @media簡易篩選條件,設定適合的版面樣式,因為大多數的元素皆採用相對寬度而不是絕對寬度,所以能夠針對不同螢幕大小套用適合的寬度,使文字間距、圖片大小、字型大小和行距等,讓網頁內容也完整呈現在手機/平板/筆電畫面中。 RWD網頁設計功能二:不同裝置單一網址 RWD設計的網頁不需特別針對電腦版和手機版另外設計兩個版本的網頁,而是使用相同網址,簡單來說便是只要維護一個