本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

当我发现规划网页有多投机取巧的办法之时，就逐步开端对手打网页代码失掉爱好。的确，许多网页规划的问题并不止一种处理计划，可是很少有计划能处理一切的阅读器兼容性问题。最令我疑惑的是，为什么会有做规划和写代码的分工？跟着技能的开展，许多在曩昔难以处理的问题现在能够轻松搞定，但为什么与此一起一些简略的工作反而越来越难以完成？这些问题的答案并不是简略的是与否，对与错，或许咱们需求从网页规划的整个开展进程来寻觅答案，找到真实弥合规划与代码之间隔阂的原因地点。

温故前史之前，无妨看看2014年最优异的网页规划：《爱不释手！2014年最佳的20个优异网页规划》

网页规划：黎明前的黑暗（1989）

在互联网真实开端之时，黑色的显现屏仅能显现单色的像素。能够说，当互联网六合初开之时，Web Design 只是意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真实进入千家万户，而那时分，才是归于互联网的狂野西部。

表格（table）：网页的鼓起（1995）

能够显现图片的阅读器的诞生，是促进网页规划这个职业诞生的重要先决条件。实践上在其时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的网页规划书《Creating Killer Sites》叙述了他规划优异网站的诀窍：在表格中嵌套表格，将静态的表格和动态的表格以奇妙的办法结合到一同。虽然表格自身是用来承载数据的，用来承载内容和图片有点古怪，可是在那个年代，这种办法仍然显得较为靠谱，而且大行其道。

网页规划所面对的别的一个问题，便是怎么坚持网页那软弱的结构。也正是由于这种需求，切片规划（Slicing Design）逐步流行了起来。规划师创立出美丽的网页布局，随后开发者将整个规划稿切片，找出出现规划的最佳办法。另一方面，表格还有一些炫酷的功用，比方笔直对齐，以像素为单位或许以百分比来操控对齐。在那个年代，表格可是近乎栅格体系一般的灵敏的规划神器，也正是因而，那个年代的开发者并不喜爱前端的代码。（表格嵌套表格有多乱？）

来自JavaScript的救援（1995）

JavaScript的出现补足了姑且原始的HTML。举个比如，假如你想写个弹出窗，或许想动态修正某些目标的次序？HTML不可，可是JS能够！不过此时JS的首要问题在于，它处于整个网页布局的顶层而且需求独自加载。许多时分它只是被懒散的开发者用作一个简略的补丁，但假如运用妥当，JS能够十分强壮。今日，相同的功用假如CSS能完成，咱们会尽量防止运用JS。不可否认的是，JS自身的确很强壮，前端常用的jQuery，后端的Node.js都是稀少难得的好东西。

Flash：自在的黄金年代（1996）

作为一门新技能，Flash为网页开发者/规划师带来了史无前例的自在，它打破了之前网页规划所固有的约束。凭借Flash，规划师能够为所欲为地在网页上展示任何形状、布局、动画和交互，能够运用任何喜爱的字体，他们凭借Flash熔于一体。一切的这一切终究会被打包成为一个文件，然后被发送到阅读器端显现出来。这也就意味着，用户只需求具有最新的Flash插件和少许等待时刻，就能够享有一个戏法般的网页。这是发动页面（splash pages）、介绍动画以及各种交互特效的黄金年代。不幸的是，这种规划并不敞开，也不利于查找，还需求耗费计算机很多的运算才能。2007年，当苹果发布他们的第一台iPhone的时分，就决议完全扔掉Flash，也正是在这个时分，Flash开端走下坡路——至少在网页规划范畴。

CSS的诞生 (1998)

差不多是在Flash兴起的一起，一种更好的网页结构化规划东西CSS诞生了。CSS的基本概念是将网页内容的款式分离出来，所以网页的外观和格局等特点将会在CSS中被界说，但内容仍然保留在HTML中。前期版别的CSS并没有现在那么灵敏，和许多新事物相同，它最大的妨碍在于许多阅读器还没来得及接收这一新技能，关于开发者而言，这是一个头疼的工作。需求清晰阐明的是，CSS并非全新的编程言语，它只是只是一种声明性言语。那么网页规划师需求学习编程吗？或许需求。可是网页规划师需求懂得CSS么？当然需求。

栅格与结构：移动端的兴起（2007）

此时，在手机上阅读网页本便是一种全新的应战。规划师除了要为不同设备规划不同的布局，还面对着内容操控的问题：小屏幕上展示的内容要和桌面端相同多，仍是需求剥离开来？桌面端网页上闪亮精巧的小广告要怎么在手机上出现？加载速度也是一个大问题，移动端设备的网络加载速度不够快，而且桌面端网页会耗费很多的流量。网页规划亟待改善。

第一个严重的改善是栅格体系的出现。通过探索，960栅格体系终究胜出，经典的12栏栅格被规划师们广泛的接收，乃至成为许多规划师最常用的规划东西。接下来，各种常见的规划元素比如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其间还纳入了常见的代码。其间最典型的代表便是Bootstrap和Foundation，它们也使得网站和APP之间的边界逐步含糊。当然，它们也不是没有缺陷，凭借这些库规划出来的网页往往迥然不同，而且网页规划师要想运用它们还得深化了解相关的代码常识。

呼应式网页规划（2010）

惊才绝艳的规划师Ethan Marcotte决议应战传统的网页规划，它让网页在内容不变的前提下，布局跟着窗口和屏幕的改变而改变，而且将这种规划命名为呼应式网页规划。网页规划师仍然只需求HTML和CSS就能够完成这种功用，不得不供认这种规划理念十分超前。不过咱们关于呼应式规划仍然有少许误解。关于规划师而言，呼应式规划意味着为规划许多不同的布局。关于用户而言，呼应式规划就意味着这个网页能够在手机上完美阅读。关于开发者而言，呼应式规划意味着怎么操控好网站图片敷衍移动端和桌面端，在不同景象和语义下，具有杰出的下载速度和出现作用，等等。简而言之，便是一个网站能在任何情况下杰出展示。至少在这一点上，一切人能达到一致。

扁平化的年代（2010）

规划网页布局总会花费很多的时刻，好在这个时分咱们开端扔掉杂乱的光影作用，从头专心于底子的内容出现。在此之前，网页规划讲究精巧的图片和排版作用，美丽的插画与周到的布局规划，而简化这些视觉元素之后，便是咱们说所的“扁平化规划”。将杂乱的作用淡化之后，视觉的扁平化，也促进内容和信息层级的扁平化。充溢光影特效的按钮被扁平化的图标所代替，矢量图形和图标字体也开端被大范围运用，网页字体和版式规划的结合令网页视觉愈加美丽。风趣的是，这时分的网页规划开端有返璞归真的感觉。

光亮的未来（2014）

技能的改造现已开端将网页规划推进到一个全新的境地。在许多规划平台上，规划师只需求在屏幕上移动不同的控件就能够生成整齐可用的代码出来，而且这些代码十分灵敏，可控度极高！试想一下，开发者无需忧虑阅读器兼容性，能够专心于愈加实践的问题！

新诞生的概念正在推进网页规划。CSS中新诞生的特点，比如vh和vw（viewport height 与 width），就使得网页元素的方位操控愈加灵敏自在，一次性处理了规划师纠结多年的恶疾。作为CSS一部分的Flexbox则是另一个新事物，它能够快速创立布局，轻松修正特点而无需编写过多代码。

网页规划正在飞速开展，未来还会有越来越多的立异，就让咱们拭目而待吧！