五年多來的設計與開發歷程

墮夜

以後可能不定期會回來鐵傲分享些東西
五年前我還只是鐵傲的鄉民，五年後的今天


我已經是個Web Designer & Developer

---------------------------------

最早以前開始摸網頁設計大概是高二上。
那時候的網頁技術還不成熟，到哪你都可以見到FLASH為主的多媒體網站。
當時也被視為市場主流，幾乎是每個設計師手上必備的工具。

高三上學期，跟著老師接外頭的CASE，用PS修修產品圖、拉拉表格...
沒錯，當時CSS Layout技術不普及，連YAHOO都是表格排出來的。

回頭看看以前我在鐵傲網頁版寫過的教學，現在只是國中生的程度。

大二那年接資管系上的系網CASE，很可惜的是將帥無能累死三軍。
後來聽說還是花錢找外頭的人解決，不過那時候我已經辦休學重考去了。

直到我開始自學JavaScript、CSS 2、Action Script 3.0，是大四的事情。
你也許猜到了，為的是畢業專題能提前處理；
專題的成果不如預期，至少還是學的到東西。
這時候的Adobe Creative Suite正夯的版本是CS 3，也是最穩定的版本。

記得那時候仿照nico nico的撥放器和頁面關鍵字廣告做出了差不多的東西。
不過完成度不高，評審結果只有第四名，一組六個人只有三個人在做事，認了。

大四專題開始的期間，也是我剛好進入正式職場的開始。
慢慢發現目前的網頁技術已經不適用在這個年代，決定在這家公司利用既有資源、
好好的把每一樣交辦事項作好的同時，練就自己的經驗。

當時瀏覽器版本使用族群最多的還是IE7~IE8、Mozila FF；Google Chrome倒是很少人用，反而蘋果的Safari多些。
之後開始注意各家瀏覽器和版本上的問題，特別是IE這個妖孽...
至今我在IE身上花的時間，遠超過我做視覺設計和寫jQuery的時間。
IE6、IE7、IE8、IE9四個版本編譯模式全都不一樣，光IE Hack就足夠讓CSS整整多肥上兩圈。
為了SEO關鍵字行銷可以順利進行，你不得不聽從業主的需求和來自工程師的發難...XDDD

除了獨自學習這些東西，那幾年也認識了專做SEO的業務、工程師。
就一直在長期合作，去年從海軍陸戰隊被踢回家後SOHO了大半年才乖乖去上班。
賺的沒有自己接案的時候多，倒是遇上很好的Partner

今日2013/12/25為止。
我經手了很多專案，其中有公家標案，也有與過去完全不同的佈局和開發模式。
近期作品除了臉書外，有我好友的可以在鐵傲相簿看到。
我取其中兩個：

1. Tablet Style With CSS 3+jQuery



2. Responsive Web Design 響應式設計開發模式實景。






RWD的開發模式採用的是流動佈局。
也就是任何解析度大小都必須確保資訊沒有障礙的傳達表現。

比如我們慣用Container Width = 990px
就必須導正為Container Width = 95%

字體大小由font-size = 16px改為font-size = 1em
此外還有table-cell、clearfix的導入，這個日後有機會我會在這提到。

響應式設計(RWD)的開發著重在判別各裝置解析度斷點
你們從上圖ViewPort Resizer可以看到主流的裝置解析多少。
網頁在那些解析度下怎麼呈現

@media screen and (min-width: 768px) and (max-width: 968px){
　　　　.container{
　　　　　width: 55%;
　　　　　padding: 10px;
　　　　}
}

以上判別裝置寬度高於768px且小於968px時，".container"會做width和padding上的變化。
類似這樣的概念去執行你的網站開發。

現代的Web Designer不只要會視覺設計、佈局，更要知道jQuery UI、使用者體驗UX、後端系統串接知識。
能夠和工程師溝通的才是最好的設計師。

接著是行動裝置和HTML 5+CSS 3的年代，又有一段路了 :)


真正取決網頁體驗生死的還是JavaScript和CSS
裝置來臨的年代，更要多Study如何在不同規格的裝置、解析度下製作流動性佈局
這才是我們現在開始該檢討的地方。