“喔耶！網站前端設計學習筆記–Responsive Web Design試作篇“

最近在學啥？

話說這幾天，自己嘗試製作近期相當火紅的技術「Responsive Web Design (簡稱RWD)」，

簡單來說，自從iPhone、 iPad以及許多大小尺寸不等的智慧型手機和平板不斷亮相後，

同一個網站如何因應各種載具來呈現出最好的版面，便成了前端關注的焦點，

在這邊給大家看一個典型的例子：

上圖的四個縮圖皆來自同一個網站，由右至左分別代表著，

一般桌上型電腦或筆電、平板橫放或小筆電、平板直放、手機，

可以看到不管在哪個介面上，圖片和文字大小等內容的擺放都被細心地考量，

因此才沒有發生"版型跑位"這麼令人尷尬的事情。

而這樣藉由偵測瀏覽器大小來判斷網頁如何排版的技巧，

便是利用CSS3的Media Queries語法來協助。

網站有沒有用RWD語法，會發生什麼事情呢？

接下來就有請天外奇蹟的小羅協助我一起說明，

首先大家看到的第一張圖片，

這是大家經常在筆電或桌機上看到橫向的網頁畫面，

接著再往下瀏覽，若是網站沒有另外設定RWD，

你就會發現可憐的小羅被切掉了(如下)，這種情況很容易發生在用手機瀏覽網頁時，

想必大家都發生過這樣的情況，這時你就需要用手指東撥撥西滑滑，

才有辦法看到圖文的完整內容。

但如果是使用RWD進行排版過，則圖文會依照你預先的設定，

呈現出適合手機瀏覽的版面，如下面所示。

相信經過小羅的輔助說明後，大家應該對RWD帶來的幫助有了更深的了解！

說了那麼多，那你做了啥？

這次的作業，我使用很單純的圖文排版呈現頁面(其實太複雜我也做不出來)，

預設的瀏覽載具有三種，桌機、平板、手機，

首先我從著名攝影師Terry Richardson的網站偷了很多好看的照片，

並且在左上角利用CSS語法製作一個LOGO（css可以創造的效果比想像的還豐富！）

我在網頁版將圖片的寬度比例設為各30%，

而平板跟手機的部份，除了圖片寬度分別使用了50%和100%的設定，

來維持最佳的檢視狀態之外，

其實往往到了這些行動載具時，就要開始考慮捨棄元素的問題了了，

這點是非常重要的，尤其以手機的使用習慣來說，

其實就是要以瀏覽圖片為主，文字的部份多半就是標題還有簡略的概述即可，

這樣對使用者而言，才是一個友善易瀏覽的親切網站(就跟我們南部人一樣親切！)，

而我這次呢，就乾脆直接把網站的描述拿掉，當然因為只是試做，

所以不必考慮太多外在因素，如果這是客戶的網站，恐怕就不能這麼為所欲為了XDD

另外在LOGO的部份，我特意在手機顯示的狀態上，作了背景和邊框的調整，

目的只是希望在測試時，能更明顯地看到Media Queries的效果，

而顯著的成效也確實讓自己蠻開心的。

經過了網路資料的多方查詢，還有新芽設計總監 吳凱西的協力下，

小弟我勉強完成了這輩子第一個RWD網頁，心中有點小小的成就感，

但也了解到後續若開始製作客戶的網站時，更為龐大的架構和複雜的內容，

肯定是要花上更多時間進行製作，所以希望藉由此篇的試作報告，

來讓自己重新溫習製作過程的想法，也對日後進行這樣的案子時，

心裡大概先知道會面對哪些狀況要解決。