网站时光机，网站设计的五个世代变革

第一个网站从1989年到现在经历了34年，以网站设计方式大致分成五个世代，第一代是「静态HTML网站」，然后走向容易管理的第二代「资料库网站设计」，因应行动装置则有了第三代的「RWD网站设计」，为了让网站建置更有效率于是出现了第四代的「SAAS网站设计」，有了AI之后接着就是出现了第五代的「AI网站设计」，可以利用AI需求问答直接产出网站，未来的网站还需要网站设计师吗？谁也不知道。
〈延伸阅读：网页设计公司不会告诉你的5个真相〉
 

有了浏览器才有网站

讨论网站设计的年代之前，必须先浏览器的兴盛起落，因为浏览器是网站设计的载体，有了浏览器才会有网站，有了网站才需要进行对网站进行「网站设计」。
〈延伸阅读：网站建置前，你应该知道的6个网页设计观念〉

 

世界上第一个网站

Sir Timothy John Berners-Lee（出生于1955年6月8日）是一个英国电脑科学家，他于1989年发明了全球资讯网（WWW），于隔年1990年12月25日，在网际网路实现了超文字传输协定（HTTP）客户端与伺服器的第一次通讯，发明了世界上第一个网站与第一个浏览器，被《时代》杂志列为20 世纪最重要的人物。
〈延伸阅读：如何选择网页设计公司？ 7个秘诀过滤设计公司〉

 

世界上第一家全球资讯网公司- Netscape

第一次看到网景是在小编16岁的时候，当时的网站浏览器就是目前网站的雏形，浏览器可以放图片、文字、超连结，当年的浏览器开创者Netscape可是市占率90 %的公司。

 

Netscape(网景)浏览器

 

第一次浏览器大战

以前的Netscape可是收费的，要在各大电脑系统像是微软Windows、苹果MacOS都是安装Netscape进行上网，Netscape可以跨平台，有一致的使用体验，但好景不常，网景于1995年试图开发可以修改档案的网路应用系统，这踩到了微软的红线，于是微软开始制作自己的浏览器，就是大名鼎鼎的Internet Explorer (1.0)，并在Windows 95时随作业系统赠送免费的IE(Internet Explorer) ，于是展开了第一次浏览器大战，Netscape Communicator与IE不断在浏览器加入了许多功能，而且相互不支援，让网站设计变得难以整合。

 

第一次浏览器大战，谁赢了？

微软1997年发布到Internet Explorer 4.0的时候，市场口碑正式超越Netscape Communicator，于1999年正式超越Netscape Communicator市占率，微软有钱、人才多，针对网景的功能往死里打，「免费程式对上收费程式」终究撑不住微软的多拳进攻终于落败，经历了被美国线上收购，与微软的诉讼之后，于2003解散。 Netscape曾于1998年1月，展开Mozilla开放原始码计画，也就是现在Firefox的前身，也是之后与Google Chrome进行第二次浏览器大战的主角之一。

 

第二次浏览器大战

Netscape Communicator全面溃败之后，虽然留下了Mozilla这个火苗，但是IE(Internet Explorer)已经取得前所未有的胜利，几乎等于是浏览器的代名词，Mozilla Firefox 一路抵抗在开放原始码得到支持，但微软市占率一直是居高不下，对于IE的漏洞、闪关只能忍受再忍受，Firefox维持26％上下的市占率，直到2008年的Google Chrome上市，展开了为期4年的第二次浏览器大战， 2013年IE与Chrome产生了黄金交叉，从此Chrome甩开了IE与Firefox，称王至今，市占约65%，唯一稍稍能抗衡的只剩下Mac的Safari(19%)。

2013年Chrome正式超越IE，成为浏览器霸主

【资料来源：WIKI 】
 

网站设计的第一个时代：静态网站(1990~2005)

1990年第一个网站与浏览器被发明的同时，Adobe Photoshop 也在当年推出1.0版本，为设计产业开创了一个新时代，当然也包含了网页设计。网站一开始就是图片、文字、超连结，因为有了美感的需要，慢慢才有设计师的加入，以前是没有网页设计软体的，都是要熟悉HTML才能进行网站设计，直到1995年的的FrontPage出现，网页设计师这个职业才正式浮上台面，网页设计师不再需要懂HTML就能进行网站设计，1997年又推出了Macromedia Dreamweaver，静态网站设计正式进入了白热化阶段。
注：Macromedia Dreamweaver于1997年推出，Macromedia后来被Adobe并购。

 

同场加映：Flash已经死亡

静态网站中最令人印象深刻的就是Falsh，Flash开始于1996年，是多媒体创作和支援播放的技术，Flash使用的是向量图片与动画，记得那时候有一堆Flash创作，像是阿贵、讦谯龙，Flash也可以做互动的功能，当年真的很流行，网站设计师还要会做Flash才行，Flash因为技术封闭而产生资安风险，慢慢所有的浏览器慢慢不愿意提供支援，Flash于2020年即完全无法使用，Flash动画效果已经被CSS、jQuery、HTML 5…所取代。
〈延伸阅读：UX/UI不一样，UI/UX设计是什么？ 〉
〈延伸阅读：2024 网页设计指南〉

 

网站设计的第二个时代：资料库网站设计(1995~至今)

「资料库网站设计」顾名思义就是以资料库进行的网站设计，也有人称作「动态网站设计」，网站不再像是静态网站一页一页制作，可以透过网站程式连结资料库，方便从后台(CMS)轻易的产出网页，网站正式进入程式设计的年代，到现在为止都还是网站设计主流，PHP于1995年上市，ASP于1997年发表，之后的1999年的JSP初始版本上线，复杂的技术先不谈，总之有了PHP、ASP、JSP之后，网站才能透这些程式去连结资料库(MySQL、MsSQL、Oracle…)，网站设计正式加入了「网站程式设计师」或是「网际网路程式设计师」这个职缺，负责与网站设计师配合，网站设计兼具了视觉与程式的整合。
〈延伸阅读：CMS是什么？好的网站后台有什么特质？ 〉

 

网站设计的第三个时代：RWD网站设计(2010~至今)

虽然苹果于2007年就发表了iphone，也搭载了Safari网页浏览器，但RWD设计概念则是在2010年5月被美国网页设计师Ethan Marcotte提出，但RWD真正的最高峰的时间点是Google于2015年4月21日宣布RWD是关键字排名的重要依据，Google当时已经是市占超过90%的搜寻引擎，没有RWD的网站如同被宣判死刑，你不做RWD都不行，当RWD变成显学而且依附Google所需要的SEO架构时，「网站前端工程师」或称「网站前端设计师」这个网站设计职缺就慢慢出现了，网站前端工程师的工作是，将网站视觉设计图变成HTML，而且要将网站「适应于各种装备与载体」，以前会使用「即见即所得」设计软体，像是Dreamweaver、FrontPage，因为RWD的复杂度，需要更精准的撰写HTML以精简程式、提高效能。
〈延伸阅读：RWD网页设计是什么意思？ 〉
〈延伸阅读：什么是RWD？ RWD跟AWD有什么不同？ 〉
〈延伸阅读：RWD网页设计并没有都一样！ 〉
〈延伸阅读：手机版网站、 RWD响应式网站，差在哪?〉

 

网站设计的第四个时代： SAAS网站设计(2011~至今)

「SAAS(软体即服务)」这个名称据称初次出现在一个2011年的「战略背景说明会：软体即服务」的文章中，也陆续出现在网路服务中，SAAS就是只要开个帐号马上就能用的软体服务，而网站也是一种线上软体，开个帐号就能用的网站，像是Shopify(2004)、Wix(2006)、Webflow(2013)、Shopline(2013)、Cyberbiz(2014)… ，SAAS这10年间已经变成网站设计主流，撇除一些特殊用途的网站，SAAS提供的各种云端服务，已如雨后春笋般的发展，现在购物网站已经很少有人要独立开发了，都会使用SAAS建置购物网站，又快、成本又低、更安全、更全面，当大量SAAS网站服务出现时，网站设计师就得学会各种SAAS服务的组装工作。
〈延伸阅读：网页设计的使用者体验(UX)如何执行？ 〉
 

网站设计的第五个时代： AI网站设计(2024~至今)

AI(人工智慧)不是新的知识，从有计算机概论以来，一直都是基本知识，但是因为硬体的效能提升，AI运算进入了新纪元，AI网站设计于是开始出现在市场上，只要透过AI引导式的需求访谈，就能凭空生出一个网站，虽然还不到非常成熟，但AI网站设计绝对是未来的趋势，市场有看到的AI网站生成软体有DurableAI、10Web、Hocoos、Pineapple Builder、Kleap、 Jimbo，太多AI商品了，除了可以架站，可以进行网站文案生成，中文文案支援目前比较差，但不久的将来一定可以发光发热。
〈延伸阅读：写文案用ChatGPT好吗？ AI为SEO带来什么影响？ 〉

 

结论

网站设计经历了34年，网站设计变化是很快的，从「静态网站」升级到「资料库网站」，然后又因为行动装置的普及，「RWD网站设计」变成主流，因应云端系统的发展， 「SAAS网站设计」也逐渐变成流行的网站设计的方法，因为AI的崛起带动网站设计工法，「AI网站设计」已经严然已经是设计趋势，网站设计公司真的只能走在技术前端，因应网路各种变化，网站设计已经不是单枪匹马可以搞定，而是专业分工的设计团队，从视觉设计、前端切版、后端程式设计、SEO顾问、系统工程师…，只有能专业整合的网站设计公司才能有效提供价值。
〈延伸阅读: SEO是什么? 简单说给你听〉

(本文为达文西数位科技所有，禁止所有转载文图)