你的網站落伍了嗎? 從網頁設計的發展,檢視你的網站是否過時

2017-09-14
網頁設計
 1995年開始使用商業用網路,開啟了訊息傳遞的新形態。網頁設計製作技術大約每5~6年有一次重大革新,除了程式撰寫技術的變革,版面設計也會隨大眾喜好而改變。以下37DESIGN將帶您回顧網頁設計發展的歷史,順便檢視您現有的網站是否跟上時代!
 

簡單、基礎的設計

雖然商業用網路於1995年才正式上線,但早在1990年12月20日就誕生了全世界第一個網頁,並於1991年8月6日正式對外開放。一開始網頁僅由文字構成,直到能讀取圖片的瀏覽器(browser)誕生後,網頁才加入了圖片的元素。
 

Flash─互動網頁的始祖

1996年互動多媒體製作技術「Flash」誕生,改變了網頁表現的形式。可利用「Flash」製作網站動畫,也可以加入聲音、互動式效果,讓靜態的網頁生動了起來!「阿貴」是1999年由台灣團隊製作、風靡一時的Flash動畫。台灣大約5至6年的時間以「Flash」製作網站為主要技術,直到2007年智慧型手機的發明,才引發網站製作的大變革。
 
「Flash」流行之初引領風潮,是當時最好用的網頁特效動畫製作軟體,但是Flash並非開放資源、占用系統大量資源、且有網頁安全性漏洞問題。由於HTML5、CSS、Javascript技術漸趨成熟,加上知名品牌Apple的執行長賈伯斯力推多點觸控螢幕的智慧型手機,賈伯斯不顧外界眼光,對「Flash」開了第一槍:「蘋果的行動裝置將不支援Flash」。2017年Google開發的瀏覽器chrome也開始全面禁用「Flash」,需用戶主動許可才可運行,讓使用Flash技術的網站無法正常顯示。某國際知名速食連鎖店網站因此變成只剩下一行文字,而登上了新聞版面,造成一股討論的熱潮。Adobe也於2017年7月25日宣布,將於2020年底前停止更新、發布新的Flash Player。
 
若您的網站仍然使用Flash,在Chrome、Microsoft Edge無法顯示
↑若您的網站仍然使用Flash,在Chrome、Microsoft Edge會看到以上畫面。
 

表格切版─高相容性的編排方式

於2006年Firefox瀏覽器因相容性的問題,造成網頁設計師相當大的困擾。表格製作方便,且相容於各種瀏覽器,因此受到網頁設計師們的喜愛。表格是由列、欄所組成的矩形元素,且增加、刪減、合併容易。利用HTML語法的元素「表格(Table)」進行網頁切版編排曾稱霸網頁設計。
 
雖然表格上述優點,但只能在表格的範圍內進行編排製作,表格以外的區塊則受限制。網頁設計師不斷研發更好的網頁設計方法,希望可以快速建構版面並且能打破界限、可自由擴展。
 

div + CSS + JS─三劍客打破版面界線

Div也是HTML內的標籤元素,取代了表格切版的網頁製作技術,利用div可以打破版面界線,並搭配CSS(層疊樣式表)的控制碼可讓版面更多樣化。
 
Flash動畫讀取時間較長、軟體解碼耗費手機電池、不適用觸控手機,原本Flash動畫的網頁設計已經不適用行動裝置。2006年誕生的HTML及JavaScript之間操作的函式庫「jQuery」,利用「jQuery」取代「Flash」互動性、動畫等效果,解決Flash的問題。
 

響應式網頁設計(RWD)─裝置影響時代的潮流

自從電腦不再是唯一可以上網的工具,網頁設計師就開始追求打破各個不同載具的限制。因應使用者的上網習慣,行銷人員也開始研究如何讓使用者於行動裝置操作網站順暢,以提升點閱率與訂單。因而發展響應式網站技術。有關於響應式網頁設計更多的介紹,可參考此篇文章什麼是RWD響應式網頁設計?  


HTML5 ─全新技術標準

Adobe公司於2015年發布了一項公告,呼籲大家開始改用HTML5。HTML5是HTML(超文字標記語言,網頁的標示語言)最新的修訂版本,由全球資訊網協會(W3C)於2014年10月完成標準制定,廣義的HTML5包含了三個部分:HTML、CSS3、JavaScript。HTML5添加了許多新的語法,以期符合當代的網頁瀏覽需求,如<video>、<audio>標籤。
 
Flash技術之所以被淘汰,部分與HTML5崛起的因素有關。HTML5不但能做到Flash的功能,而且更安全、有效率、速度更快。且HTML5更是唯一一個可以支援跨平台的程式語言,包含微軟、蘋果、Android作業系統及所有最新的網頁瀏覽器,其重要性更是不言可喻。
 
曾紅極一時的table切版、flash已不符合時代需求,取而代之的是div + CSS + JS、RWD響應式網站設計、HTML5,網頁設計需符合時勢所趨,吸引使用者,讓網站發揮最大作用。
TOP