Simple RWD for Everyone

由淺入深的了解什麼是 RWD

趨勢造就響應式網頁—— RWD

行動裝置占了現代網際網路流量的一半以上,並且這樣的趨勢只會越來越高,隨著行動裝置的普及,像手錶、手機、平板……等裝置,連結上網頁的裝置只會越來越多元零碎,而每個裝置又有不同的解析度與尺寸,因此市場對 「能夠適應各種裝置」 的網頁需求是大大的增加,因此出現了 Responsive Web Design (RWD) 的做法。

在這之前是比較土炮的方式,就是設計好幾種尺寸的網站,並且在不同的裝置上分別呈現,這樣的方式也稱為 Adaptive Web Design (AWD),因為主要維護起來很麻煩,所以現在越來越少見了,但仍有其合適的使用時機,就是比較不通用。

可以說在 2022 年製作任何網站,都會期望多少有這樣兼容各種尺寸裝置的功能,不過僅代表整體趨勢,主要還是看網站的用戶群來決定要不要導入相關功能

RWD 如何製作?從哪裡起步?

不用想太多,網頁本來就是自適應的

不相信嗎?來看看這個簡單戲謔的網站:This is a motherf*cking website.🔗

但如果要製作一個「能讓內容自動適應各種裝置尺寸的網站 」aka 「RWD 網站」,會需要哪些方面的努力呢?

  • 設計師 - 提早規劃不同網頁尺寸的設計稿件。
  • 前端工程師 - 實踐設計師在不同網頁尺寸達成規劃好的佈局。

如果已經對網站的客群十分的明瞭,甚至可以特別為某幾個尺寸的網頁做視覺上的優化。大致上就是 —— 「讓網頁內容可以順應著裝置做合理的配置」 就是好的 RWD。

製作 RWD 網站需考慮不同尺寸與裝置下網頁能以一個舒適好用的角度與用戶互動,因此在設計階段,設計師會需要為此多繪製幾個尺寸版本的平面稿件(通常有:桌面、平板、手機,視情況增加) ;前端也需要考慮更多實踐佈局的方式,與應對的技能。

響應式網頁(RWD)可以指……

  • 設計網頁的模式方法 (這個網站使用 RWD 技術)
  • 一種技能技巧 (他會製作 RWD 網站)

RWD 的優勢與缺點

優勢

  • 提高不同裝置用戶的使用體驗:內容會隨著裝置縮放與挑整版面,因此並不會有需要放大縮小網頁才看得清楚的問題。
  • 降低開發成本、一致的裝置體驗:由於是同個網站的內容重新佈局,因此方便維護修改。傳統網站如果遇到大、中、小尺寸的裝置瀏覽需求,會分別製作三個版本的網站,也代表前端多了三倍的頁面要維護,這樣的開發方式也稱為 Adaptive Web Design (AWD) 。
  • 方便分享網頁:不用思考這個網站是「網頁版」還是「手機板」才能分享。

缺點

  • 較為制式化:由於 RWD 製作上通常避不開規矩的區塊佈局,奇形怪狀的特殊設計可能就要多花時間和技巧去調整。
  • 稍微較高的加載時間:由於 RWD 將內容改為浮動的,通常會需要多撰寫一些代碼來設定物件在不同尺寸下的版面狀況,因此理論上檔案會大一些些。

當然如果是抓已經事先做好的元件庫即不會有這樣的問題,網頁是高度自動化、可複製的,除非有真的特別特殊的需求,否則差別並不會太大,總體來說使用 RWD 並不會有甚麼太大的缺點,只是會費些功夫而已。