網(wǎng)頁技術(shù)不斷的演化是網(wǎng)站科技的展現(xiàn)。

世界第一個網(wǎng)站是由英國物理學(xué)家提姆(Tim Berners-Lee)在歐洲粒子物理研究所(CERN)時發(fā)明，當(dāng)初成立的目的，是為了讓世界各地的物理學(xué)家可以方便交換研究資料而開發(fā)，后來CERN在1993年4月30日決定以免授權(quán)費的方式，將WWW (World Wide Web )和全世界同享。27年前誕生的CERN的網(wǎng)站只運用了簡單的URL、http和html組成，這樣的創(chuàng)舉改變了全世界的網(wǎng)絡(luò)世界，也讓他在2002年入選BBC最偉大的100名英國人。

1993 文字和空格

在網(wǎng)際網(wǎng)絡(luò)真正開始之時，黑色的介面僅能顯示單色的像素。當(dāng)時的網(wǎng)站設(shè)計僅能使用文字和空格排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率并不高。直到90年代，圖形化界面才真正進(jìn)入千家萬戶。

1995網(wǎng)站的興起，Table的使用

能夠顯示圖片的瀏覽器的誕生，是促使網(wǎng)站設(shè)計這個行業(yè)誕生的重要先決條件。在當(dāng)時最接近于資訊結(jié)構(gòu)化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel在他的網(wǎng)站設(shè)計書《Creating Killer Sites》講述了他設(shè)計優(yōu)秀網(wǎng)站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動態(tài)的表格以巧妙的方式結(jié)合到一起。表格正確的用法應(yīng)該是在表現(xiàn)數(shù)據(jù)，但是在那個時代，這種方法大為流傳。
網(wǎng)站設(shè)計所面臨的另外一個問題，就是如何保持網(wǎng)站設(shè)計脆弱的結(jié)構(gòu)。也正是因為這種需求，切片設(shè)計（Slicing Design）逐漸流行了起來。設(shè)計師創(chuàng)建出漂亮的網(wǎng)站排版，開發(fā)者將整個設(shè)計稿切片，找出呈現(xiàn)設(shè)計的最佳方法。另一方面，表格也有好用的地方，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在當(dāng)時，表格可是近乎柵格系統(tǒng)一般的靈活的設(shè)計神器，也正是因此，那個時代的開發(fā)者并不喜歡前端的代碼。

?

1995 JavaScript 打破局限

JavaScript解決HTML一些局限。舉個例子，如果你想寫個彈出窗，或者想動態(tài)修改某些對象的順序？HTML不行，但是JS可以！當(dāng)時背景圖像、GIF動畫、閃爍文字字、計數(shù)器等工具迅速成為網(wǎng)站設(shè)計的噱頭。不過JS主要問題在于，它處于整個網(wǎng)站布局的頂層并且需要單獨加載。很多時候它僅僅被當(dāng)作一個簡單的補丁，但如果使用得當(dāng)，JS可以非常強大。今天，同樣的功能如果CSS能實現(xiàn)，我們會盡量避免使用JS。不可否認(rèn)的是，JS本身確實很強大，前端常用的jQuery，后端的Node.js都是不可多得的好東西。

?

1996 Flash 自由的黃金年代

Flash為網(wǎng)站開發(fā)者/設(shè)計師帶來了前所未有的自由，它打破了之前網(wǎng)站設(shè)計固有的限制。設(shè)計師可以隨心所欲地在網(wǎng)站上展現(xiàn)任何形狀、排版、動畫和互動，也可以使用任何喜歡的字體。所有的這一切最終會被打包成為一個文件，然后被發(fā)送到瀏覽器端顯示出來。這也就意味著，用戶只需要擁有最新的Flash插件和些許等待時間，就可以享有一個魔術(shù)般的網(wǎng)站。這是啟動頁面（splash pages）、介紹動畫以及各種交互特效的黃金時代。不幸的是，這種設(shè)計并不開放，也不利于搜尋，還消耗大量的運算能力。2007年，當(dāng)蘋果發(fā)布他們的第一臺iPhone，就決定徹底放棄Flash，也正是在這個時候，F(xiàn)lash開始走下坡路——至少在網(wǎng)站設(shè)計領(lǐng)域，且逐漸被html5取代。

?

1998 CSS (Cascading Style Sheets)

CSS與Flash約同期出現(xiàn)，是一種更好的網(wǎng)站結(jié)構(gòu)化設(shè)計工具。CSS的基本概念是將網(wǎng)站內(nèi)容和設(shè)計樣式分開管理，所以網(wǎng)站的外觀和排版等屬性將會在CSS中被定義，但內(nèi)容依然保留在HTML中。早期版本的CSS并沒有現(xiàn)在那么靈活它最大的障礙在于許多瀏覽器還沒來得及接納這一新技術(shù)，對于開發(fā)者而言，這是一個頭疼的事情。需要明確說明的是，CSS并非全新的編程語言，它僅僅只是一種聲明性語言。那么網(wǎng)站設(shè)計師需要學(xué)習(xí)編程嗎？可能需要。但是網(wǎng)站設(shè)計師需要懂得CSS么？當(dāng)然需要。

?

2007 Grid Syste iPHONE 問世

在手機上瀏覽網(wǎng)站本就是一種全新的挑戰(zhàn)。設(shè)計師除了要為不同尺寸的屏幕設(shè)備設(shè)計不同的排版布局，還面臨著內(nèi)容控制的問題：小屏幕上展示的內(nèi)容要和PC端一樣多，還是需要單獨抽離開來？PC端網(wǎng)站上的廣告要如何在手機上呈現(xiàn)？加載速度也是一個大問題，移動設(shè)備的網(wǎng)絡(luò)加載速度不夠快，且PC端網(wǎng)站會消耗大量的流量。

第一個重大的改進(jìn)是柵格系統(tǒng)的出現(xiàn)。960- Grid System或12- Grid System，12- Grid System被設(shè)計師們廣泛的接納，甚至成為許多設(shè)計師最常用的設(shè)計工具。各種常見的設(shè)計元素諸如表格、導(dǎo)航、按鈕被標(biāo)準(zhǔn)化成為可復(fù)用的套件，構(gòu)成了視覺元素庫。其中最典型的代表就是Bootstrap和Foundation，使得網(wǎng)站和APP之間的界限逐漸模糊。它們也不是沒有缺點，借助這些元素庫設(shè)計出來的網(wǎng)站往往大同小異，而且網(wǎng)站設(shè)計師要想使用它們還得深入了解相關(guān)的代碼知識。

?

2010 ??響應(yīng)式網(wǎng)站設(shè)計（Responsive Web Design）

設(shè)計師Ethan Marcotte決定挑戰(zhàn)傳統(tǒng)的網(wǎng)站設(shè)計，讓網(wǎng)站在內(nèi)容不變的前提下，版面布局隨著顯示器的尺寸的變化而變化，將這種設(shè)計命名為?響應(yīng)式網(wǎng)站設(shè)計。設(shè)計師只需要HTML和CSS就可以實現(xiàn)這種功能。不過大家對于響應(yīng)式網(wǎng)站設(shè)計依然有些許誤解。對于設(shè)計師而言，響應(yīng)式網(wǎng)站設(shè)計意味著為設(shè)計許多不同的布局。對于用戶而言，響應(yīng)式網(wǎng)站設(shè)計就意味著這個網(wǎng)站可以在手機上完美瀏覽。對于開發(fā)者而言，響應(yīng)式網(wǎng)站設(shè)計意味著如何控制好網(wǎng)站圖片在移動端和PC端，在不同情形和語義下，擁有良好的下載速度和呈現(xiàn)效果。簡而言之，就是一個網(wǎng)站能在任何情況下良好展現(xiàn)，且更利于搜尋引擎優(yōu)化。

?

2010 Flat Design 扁平化設(shè)計

以往設(shè)計會耗費太多時間在繁雜的設(shè)計上，如不必要的陰影、紋理、裝飾等，現(xiàn)今開始拋棄復(fù)雜的光影效果。設(shè)計走向化繁為簡，回歸到設(shè)計的根本，專注在內(nèi)容呈現(xiàn)。將復(fù)雜的效果淡化后，這些簡化的視覺元素就是說謂的「扁平化設(shè)計」。充滿光影特效的按鈕被扁平化的圖標(biāo)所替代，向量圖SVG和圖形字Font icon體開始被廣泛使用，簡約的介面與流暢操作，給使用者更直覺的設(shè)計。

?

2014網(wǎng)站設(shè)計璀璨的未來

網(wǎng)站設(shè)計演化至今，目的在于呈現(xiàn)直覺的內(nèi)容、快速的傳遞訊息。在許多設(shè)計平臺上，設(shè)計師只需要在屏幕上移動不同的控件就可以生成整潔的代碼，且這些代碼非常靈活，可控度極高！開發(fā)者無需擔(dān)心瀏覽器兼容性，可以專注于更加實際的問題！網(wǎng)站設(shè)計的概念與技術(shù)不斷推陳出新。在CSS中新誕生的屬性，如vh和vw（viewport height與width），就使得網(wǎng)站設(shè)計的元素的定位控制更加靈活自由，一次性解決了設(shè)計師糾結(jié)多年的頑疾。還有影片型網(wǎng)站、向量圖形SVG與圖形字Font icon...等技術(shù)使網(wǎng)站效能更加優(yōu)化。

原文與圖片來源自froont.com