极客编程技术分享
HTML5学堂 - 刘国利 - 独行冰海：郑重声明，本文来源于优设，原文于2014年12月书写。之所以在HTML5中提到网页设计简史，其实在于网页设计与前端开发有着千丝万缕的联系（而今的网页设计师和前端开发工程师也是从以前的一个工作分化而来的）。站在开发的角度，对文章进行了适当的调整和补充~
在互联网真正开始之时，黑色的显示屏仅能显示单色的像素。可以说，当互联网天地初开之时，Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真正进入千家万户，而那时候，才是属于互联网的狂野西部。
能够显示图片的浏览器的诞生，是促使网页设计这个行业诞生的重要先决条件。实际上在当时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但是在那个时代，这种方法依然显得颇为靠谱，并且大行其道。
网页设计所面临的另外一个问题，就是如何保持网页那脆弱的结构。也正是因为这种需求，切片设计（Slicing Design）逐渐流行了起来。设计师创建出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另一方面，表格还有一些炫酷的功能，比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格可是近乎栅格系统一般的灵活的设计神器，也正是因此，那个时代的开发者并不喜欢前端的代码。（表格嵌套表格有多乱？）
JavaScript的出现补足了尚且原始的HTML。举个例子，如果你想写个弹出窗，或者想动态修改某些对象的顺序？HTML不行，但是JS可以！不过此时(刚刚推出JS时)JS的主要问题在于，它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。今天，JS的功能愈加强大，前端jQuery、Ext等各种框架，后端的Node.js都是不可多得的好东西。
作为一门新技术，Flash为网页开发者/设计师带来了前所未有的自由，它打破了之前网页设计所固有的限制。借助Flash，设计师可以随心所欲地在网页上展现任何形状、布局、动画和交互，可以使用任何喜欢的字体，他们借助Flash熔于一体。所有的这一切最终会被打包成为一个文件，然后被发送到浏览器端显示出来。这也就意味着，用户只需要拥有最新的Flash插件和些许等待时间，就可以享有一个魔术般的网页。这是启动页面（splash pages）、介绍动画以及各种交互特效的黄金时代。不幸的是，这种设计并不开放，也不利于搜索，还需要消耗计算机大量的运算能力（这些缺点也是Flash类型网站未能流行起来的原因）。2007年，当苹果发布他们的第一台iPhone的时候，就决定彻底放弃Flash，也正是在这个时候，彻底宣告着Flash在网页设计中走到陌路。
差不多是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来，所以网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活，和许多新事物一样，它最大的障碍在于许多浏览器还没来得及接纳这一新技术，对于开发者而言，这是一个头疼的事情。需要明确说明的是，CSS并非全新的编程语言，它仅仅只是一种声明性语言。那么当时的网页设计师需要学习编程吗？可能需要。但是网页设计师需要懂得CSS么？当然需要。（这也是为何在21世纪初会有网页三剑客的说法了）
此刻，在手机上浏览网页本就是一种全新的挑战。设计师除了要为不同设备设计不同的布局，还面临着内容控制的问题：小屏幕上展示的内容要和桌面端一样多，还是需要剥离开来？桌面端网页上闪亮精致的小广告要如何在手机上呈现？加载速度也是一个大问题，移动端设备的网络加载速度不够快，而且桌面端网页会消耗大量的流量。网页设计亟待改进。
第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳，甚至成为许多设计师最常用的设计工具。接下来，各种常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还纳入了常见的代码。
刘国利 - 独行冰海：当初自己在自学的时候，也是很喜欢这种布局方式，但是毕竟设计在不断的调整，这种设计/开发方式也就逐渐的被遗弃了。而今，还算是有不错的一些库吧，Bootstrap和Foundation就是典型，对于开发人员来说，自然不错。不太好的地方在于借助这些库设计出来的网页往往大同小异，而且网页设计师要想使用它们还得深入了解相关的代码知识。
惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计，它让网页在内容不变的前提下，布局随着窗口和屏幕的变化而变化，并且将这种设计命名为响应式网页设计。网页设计师依然只需要HTML和CSS就可以实现这种功能，不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言，响应式设计意味着为设计许多不同的布局。对于用户而言，响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言，响应式设计意味着如何控制好网站图片应付移动端和桌面端，在不同情形和语义下，拥有良好的下载速度和呈现效果，等等。简而言之，就是一个网站能在任何情况下良好展现。至少在这一点上，所有人能达成共识。
刘国利 - 独行冰海：比较遗憾的是，想要实现响应式布局，无论对设计师还是开发者来说，都需要有非常高的技术水平。同时还要求产品要合理靠谱，否则漫长的开发期实在不是每个企业都能够耗得起的，这也是为何响应式的设计/开发方法，在行业中如流星般的稍纵即逝~
设计网页布局总会花费大量的时间，好在这个时候我们开始抛弃复杂的光影效果，重新专注于根本的内容呈现。在此之前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素之后，就是我们说所的“扁平化设计”。将复杂的效果淡化之后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感觉。
刘国利 - 独行冰海：2015年在扁平化的基础上，流行起来的设计风是“幽灵按钮”，简言之就是按钮没有背景颜色，只有边框和文字，让按钮和背景合理的融为一体。不过这种设计的风格对前端开发的影响并不是很大。关于2013年，其实还有一个阶段，全屏视差滚动，在此补充一下：随着屏幕分辨率在PC平台“越来越大”，为了追求满屏的效果，设计师逐渐在全屏上下功夫，同时为了增加合理的视觉效果，在全屏滚动过程中，附加了各式各样的小动画，以增强用户的视觉体验，这也就让前端工程师需要了解和学习的内容变得更多~为了制作全屏滚动效果，也出现了基于jQuery的相关插件jQuery全屏滚动插件fullPage.js，感兴趣的可以看看。
技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上，设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来，并且这些代码非常灵活，可控度极高！试想一下，开发者无需担心浏览器兼容性，可以专注于更加实际的问题！
新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。
刘国利 - 独行冰海：从设计的角度的确不错，但是从开发的角度，兼容两个字足矣让每个开发者为之汗颜。不过，随着行业的变化和发展，旧版本的浏览器也会逐渐的类似于IE6、IE8等被淘汰，而最新的浏览器势必也会有新的兼容问题。
网页设计正在飞速发展，未来还会有越来越多的创新，就让我们拭目以待吧！
欢迎沟通交流~HTML5学堂
