RWD VS AWD VS Fluid Web Layout

最近這一年 RWD (Responsive Web Design) 很紅, 不過昨天同事問了我一個問題, RWD 和 AWD (Adaptive Web Design) 有什麼不一樣？什麼又是 Fluid Web Layout？我聽到時也是一愣, 查了一下各家說法, 大致瞭解如下：

• RWD 是在瀏覽器端判別不同裝置視窗大小, 讓同一個網頁自動套用不同的 CSS 變化版面配置。由於單一網頁內要處理各種尺寸裝置的關係, 所以必須包含所有可能需要的資料, 網頁檔案就會比較肥大, 或是小尺寸螢幕卻是用高解析度的圖檔縮小顯示, 導致下載速度較慢。
• AWD 則是由伺服端判斷後因應不同裝置而傳回不同版本的網頁給瀏覽器顯示, 這種方式可以針對個別裝置設計一套單獨的檔案, 例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等, 檔案內容不必包山包海, 下載速度較快。也因為如此, 不同裝置會導向不同的網址, 例如常見的 m.yahoo.com 就是給手機用的版本, 而 www.yahoo.com 則是 PC 的版本。

至於 Fluid web layout (也稱為 liquid 或是 relative web layout) 則是相對於 Fixed web layout 與 elastic web layout (以下是 dreamweaver 軟體的用法)：

• Fixed web layout 指的是版面配置時直接使用 pixel 這種固定大小的單位指定寬度, 不論用哪一種尺寸的螢幕或是瀏覽器視窗觀看, 寬度都不會改變。
• Fluid web layout 指的則是版面配置時是使用百分比這樣的相對單位, 讓版面上個別區域根據相對比例分配寬度等等。
• elastic web layout 則是以相對字體大小的 em 為單位指定寬度。

Dreamweaver CS6 的 PhoneGap Build 服務與中文路徑名稱水土不服？

因為同事在測試 Dreamweaver CS6 的 PhoneGap Build Service, 之前用英文版都很正常, 可是一改成中文版的 Dreamweaver CS6 之後, PhoneGap Build 服務就沒成功過, 一直看到錯誤。但如果自己打包上 PhoneGap Build 網站上又都正常無誤, 感覺一整個奇怪, 沒道理到了中文版同樣的功能就不能用！

為了測試, 我也裝了 Dreamweaver CS6, 也是先試看看英文版, 果然沒問題。換到中文版, 把剛剛在英文版建好的網站拿來測試, 用 PhoneGap Build 服務重新建置, 沒問題啊！但是念頭一想, 那我用中文版建個新的網站來試試, 一試之下果然出現錯誤！

我想了一下, 看看建好的網站, 發現英文版與中文版唯一的差別是預設的網站儲存路徑一個是「Unnamed Site XX」, 一個是「未命名網站 XX」(XX 是序號), 這下我想不會是因為中文資料夾的原因吧？趕緊試一下, 果然, 只要路徑沒有中文,PhoneGap Build 服務馬上又恢復正常了。

我自己推測, 應該是 PhoneGap Build 服務會把整個網站的內容壓成 Zip 檔之類的, 再上傳到 PhoneGap Build 網站進行建置的工作, 但是路徑有中文的時候可能這個幕後的 Zip 檔檔名會因為編碼的關係變成莫名其妙的檔名, 導致後續的動作出錯吧？

如果你也在測試 Dreamweaver CS6 PhoneGap Build 服務的功能, 可以參考一下！