【網頁開發】什麼是RWD?不只有工程師要懂的響應式網站設計

2021/06/03閱讀時間約 6 分鐘
還記得在我小學的時候,筆記型電腦不那麼普遍,如果想要看小說或是漫畫,人就一定要跟桌上型電腦綁定,沒辦法像一般書本一樣在任何地點隨心所欲地閱讀小說。
後來到了我國中的時候,mp4 開始變得非常的盛行,除了聽音樂之外,還可以將 .txt 檔案匯入 mp4,讓我可以在看網路小說時不再受限於電腦,那時候就好像發現新大陸一樣,我甚至會偷偷跟同學借 mp4,趁著午休的時候偷偷看。
然而沒想到的是,這一切在到了我高中時都不一樣了。
那個時候是2012年,HTC最輝煌的時代,除了HTC,蘋果的 iPhone 系列手機也漸漸蔚為潮流,4G 網路的盛行,所有的網路行為不再受限於電腦本身
大家開始會在平板、智慧型手機上購物,瀏覽各式各樣的網頁。
那段時間手機 APP 還沒有那麼盛行,主要的網路行為都還是在網頁上,然而一個網頁的尺寸通常都是固定的,依照電腦的寬度通常都是設定在 1000px 上下,小小的智慧型手機寬度也不過 3、400px ,要怎麼看這麼大的網頁?
早期用手機看電腦的網頁,常常需要一直左右上下滑動,沒辦法擁有像用電腦觀看般的良好體驗。
於是一位國外的平面設計師:Ethan Marcotte,因應新載具的出現,在 2010 提出了一個新的設計理念,並在 2011 年時出版了一本名為《響應式網頁設計》(Responsive Web Design) 的書籍,在其著作中闡述如何應用程式碼(HTML CSS),創造較符合手機載體的介面設計

科技造英雄,響應式設計的出世

Ethan Marcotten 所提出的響應式網頁設計,就是現在我們在各大求職平台有關網頁設計、工程職缺中,所會提到的 RWD 技能。
現在我們知道 RWD 是因應智慧型手機、平板出世,所創造出來的設計模式。那究竟什麼是 RWD 呢?
根據中文維基百科,養應式網頁設計,是一種網頁設計的技術。
響應式設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。
舉我們常用的 google 來說,會發現電腦呈現的畫面與手機的尺寸是不同的,電腦網頁畫面所呈現的圖片及搜尋欄位較大,相較於手機版的,圖片較小,搜尋欄位也不及網頁的大小。
再舉大家常用的電商平台 Momo 作為案例,通常現在的電商網站很少針對網站進行響應式設計,原因在於網頁內容太多,很難全部塞進畫面:
如果我們用手機進到電腦版的畫面瀏覽,就必須用小螢幕觀看原本應該用電腦觀看的畫面,這時候我們發現,需要把畫面放大到很大才能用手指點到畫面,但如果是使用專門為手機設計的 APP 購物就不會有這個問題。
可見 Momo 購物網站並沒有針對手機用戶打造響應式網頁設計(RWD),而是使用了 AWD 技術(因為不是本章重點,所以先不詳加介紹),針對手機用戶直接打造了手機購物 APP。
我們接著再看另外一個有使用響應式網站設計的案例,嘖嘖募資網站:
從圖中我們可以看到,同一個網站在電腦上及手機的畫面很雷同,卻有一些細節不一樣,接下來我們看看以下的比較圖:
在網站版的畫面中,紅色的部分縮小了,綠色區塊的部分在手機版則被併入主要商品圖片的下方。
通常我們會把嘖嘖募資網站的設計稱為「兩欄式」設計,但同樣的網站移到手機上時就變成了「一欄式」設計,內容並沒有縮減,但瀏覽的方向從由左至右,變成由上至下。
透過響應式設計,我們可以依據載具的種類,讓使用者獲得最適合的體驗。

如何實作響應式網頁設計?

目前要實作 RWD 的方式,基本上都會透過 CSS 3 Media Query 語法來進行操作,透過設定載具的斷點(Breakpoint),來調整網頁頁面的內容。
然而要依照每個不同的載具大小開發實作,是非常複雜及耗時的。
於是在 2010 年時,兩位美國的開發者在推特發起了一個名為 Bootstrap 的框架融貫許多手機優先的設計模式,模組化了一套CSS框架。
開發者除了能用徒手刻圖的方式打造響應式設計,更多人士選擇使用 CSS 框架,進行快速的響應式網頁開發。
而響應式網頁設計,又可以分為桌機版優先(Desktop First)手機優先(Mobile first)兩種設計模式。
桌機版優先的響應式設計,是以正常大小的桌機螢幕大小開始著手設計,先設計完桌機螢幕大小的內容,再慢慢往下、較小的載具螢幕大小內容設計。
而手機優先的響應式設計方式則是跟桌機版的相反,主要先從手機大小的螢幕內容設計網頁,再逐步往平板、電腦螢幕進行設計。
這兩種模式沒有孰好孰壞,主要是以開發者及設計師的習慣為主,值得一提的是現今常用的 Bootstrap 5 框架,就是以手機優先所打造出來的CSS框架。
當然並不是只有 Bootstrap 5 採用 mobile first 的概念,最近前端開發者所喜歡的 Tailwind 的響應式設計,也是以手機載具優先作為設計的考量。
對於現在行動載具的盛行,響應式設計不再只是開發者需要知道的設計原理,就算只是企業裡一般的行政職位,可能都會因為公司採買需要,而需要接洽相關的事務。
把 RWD 當作軟體業必懂的 know how 也不為過。
這一篇文章主要是介紹想響應式開發的簡史及設計原理,其他實作層面的技術,我會在其他的章節與大家分享。
其他的網頁技術的問題,或是想要了解更多有關響應式開發的小技巧,歡迎你下方留言跟我討論與交流:)
希望今天的文章有幫助到正在閱讀的你,如果你喜歡我的文章的話,可以留下你的愛心或是收藏我的文章,也或者可以點選「贊助」,你的一杯咖啡絕對是我持續寫下去的動力!或是透過拍拍手,用你小小的行動支持我的創作!
我是Vivian,我們下次見。
關於我:
一名從英文系畢業的前端工程師,喜歡閱讀、寫東西及自我成長。
|Instagram: Vivian Yeh|vivian_enlife
|聯絡我:[email protected]
贊助支持創作者,成為他繼續創作的動力吧!
哈囉!我是Vivian 🧚🏻‍♀️ 是一位前端工程師,喜歡閱讀、分享及學習。 Instagram: vivian_enlife
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言4
查看全部
如果要發表留言,請先登入註冊會員
打造你的創作天地
在這裡尋找共鳴,與方格子的 35 萬格友分享觀點與生活。
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限