關於台灣網頁開發，你必須知道的事 — — RWD響應式設計？

我們常常聽到網頁設計工作室打著RWD響應式設計的口號，說這是一種很厲害很新的東西？但真的是這樣嗎？

4 min readAug 15, 2020

RWD 全名 Responsive Web Design 中文我們常常翻成響應式網頁設計。

最早使用這種技術的是 Audi .com 也就是我們所熟知的奧迪汽車的官網。

這是一種應用瀏覽器 browser viewport width 也就是瀏覽器視窗寬度來調整版面的設計方式。

記得早期我們上Facebook的時候，如果用手機上facebook網站，都會切換到 m.facebook.com 這樣子的手機版網站。而這種設計恰恰解決了這樣的問題，利用了自動排版的 CSS 可以設定讓我們的網頁自動縮排。

在我們的網站 HTML中加入這樣的短短一行代碼，就能夠允許 CSS 根據螢幕寬度來判斷什麼寬度要呈現什麼樣式。

這樣的設計原則，其實有很大的一個重點是很多坊間的工作室所沒有提到的。

就是 mobile-first design （我把它稱為從手機出發的設計）

這樣的設計就是先從手機的小板面設計開始，然後再去思考隨著螢幕逐漸拉大的時候，要去調整什麼樣的版面設計。

mobile-first design 的模型

我們可以在寫 CSS 的時候，利用 media tag 來調整不同寬度以上或以下要呈現的CSS layout，例如：

@media(max-height: 500px) { .container: { width: 80%; } }

這樣就是說在寬度 500px以下時（最大寬度500px適用）讓這個 container class的 div 呈現 80% 的母元素寬度。

這就是在網頁設計上很常見的技巧。

我是一個 self-taught programmer，我沒有去上過台灣坊間的補習班或是線上課程，幾乎都是看國外的學習平台。記得好幾年前我剛開始學寫網站時，在學完基礎html後，我的第一堂課就是學 mobile-first design。

當時我沒有學bootstrap 等css框架，而是學習怎麼用自己的程式碼一行一行的設計構思出網站在螢幕拉寬時的版面。

時隔多年，我原本打算到國外進修，後來因為疫情的關係，我選則留在台灣並且希望能推廣網頁、App的教學和開發。

原本不常看到台灣網站相關資訊的我，突然發現坊間很多工作室都喜歡打著RWD響應式設計的口號，告訴大家他們的網站有多厲害，可以做到不需要手機版網站，
也能在手機上漂亮呈現出網頁內容。

剛開始不以為然，後來實則發現這是一個台灣現在網路工作室的亂象，把如此基本中的基本推上天。就像是現在很多人網拍喜歡講成電子商務這樣的感覺。

我想說的是，身為消費者或剛學網頁開發的朋友，不要被這樣的噱頭給騙了。這些其實在國外是稀鬆平常的設計。

網頁設計中有很多的desgin pattern其實都是行之有年，只是台灣的網站開發這方面真的慢國外非常多。因為現在網路上的資源大部分都是英文為主，很多人都還是在接收比較舊的資訊。

現在因為坊間流行bootstrap, wordpress套模板。因此很多網站都長得大同小異。對於開發過網站一段時間的人其實很容易就能看出這個網站是用什麼東西做的、做得好或不好。

以上只是我個人小小的淺見，不代表現在台灣的工作室都是這樣子。

我知道現在也有很多很厲害的工作室，只是想要藉著我觀察到的亂象和大家分享，台灣很多網站、App方面的資訊是落後的，因此不希望無辜的消費者被欺騙，把這樣基本的設計模式拿來當高額的設計在賣。

我希望日後可以發更多網站、App想關的教學和資訊，破除大家的迷思，讓台灣的網站開發這方面可以更好，並且消彌這樣好幾年資訊落後的gap。這才是我的目的。謝謝大家！

作者：周家鋐 — — 浚鋐網路科技有限公司創辦人