标签：
自从 Ethan Marcotte创造了这个词(响应式)以来，我们一直在寻找如何真正的设计出一个响应式网站，5年之后人们正式定义并且认可了这个词，我们现在能正确的理解这个词的意义，其旨在创建响应式APPS。
问题是：它并不是真正的工具(就像frameworks和effects),它与经验相关。直到几年前，没有人去关心转化率这些，我们是为了设计而设计的。我们旨在创建漂亮的网站，不多也不少。 但是在这数十年的转变中，我们才开始意识到乔布斯当时所说的意义：
我们早在2006年就明白了一个网站的设计95%是在排版。之后慢慢的发生了变化，但基本还是保持不变的。排版，包括网站中的所有的文本，无论是最大的标题或者是页脚那很小的免责申明...这些都是排版。
我们所有的重点都是为了增加转化率和ROI(投资回报率)...并且为了实现这些我们需要做相关的设计工作。我们需要引导访问者的每一步操作并且去说服他们这么做。完成这一切的唯一途径就是关注网站的排版。一个一切都以完美的方式完成却不注重排版的网站就像是一辆很漂亮的车却不能开一样，它不能带你去任何地方。
随着现代数字产品的到来，媒体技术也随之改变。在前数字时代，总有相同的服务为所有的设备进行广播。让我们举一个收音机的例子。相同的收音机服务在被传播时没有保持终端设备(即无需考虑设备的多样性)，无论侦听器是否有一个巨大的天线或者是一个口袋大小的晶体管，同一服务可以为多种设备所用。同样的也正如从电视到高清电视的到来一样。
但是今天，已然改变。一开始我们不得不记住那些终端设备。现在我们的媒体、网站在大量的设备上正在不断的变的可用。从手机到大屏的PC桌面，屏幕的分辨率通常从320px到2000px。在这样的场景中，我们的站点在设计和开发过程中去记住所有这些设备是不可或缺的。
开发网站要适配多种设备是一个巨大的问题，但值得庆幸的是html5和CSS3带来了解决方案。
1：自适应布局：是指在多个步骤中调整布局。这样做是为了限制断点的数量。
2：流体布局：是指布局根据每一个可能的宽度不断的进行调整。
由于可读性比设计更重要，自适应布局很快在这两种方法中显得略胜一筹，今天，当我们说响应式网站设计的时候，通常是指自适应布局。
事实上：是的，我只是在做铺垫。你知道，当你没有理解一样东西如何并且为何这么工作时，你是很难从中学到东西的。
我们之前讨论的网站大约有90%是文本...虽然数量似乎有些夸张，但关于文本的一件事是很清楚的：文本一直并且永远是主要内容。
在早期的WWW(不是WWII)，网页是没有图片的，并且在响应式网站设计中，这一趋势又回来了。为什么？因为：
1： 字体是流动的，当被放大时，它可以被分解成好几行
2： 无限的缩放并且不破坏整个设计的方案是可行的。
3： 文本加载更快，呈现更快、使得网页显示顺畅。
4： 最新的CSS3/CSS4为文本提供了大量的样式属性。
当然我们也在解决基于SVG的独立图片方面取得了进步，但依然没有在文本方面取得的进步大，一些开发人员甚至宣传在不久的将来，这将就是排版的所有。因为图片、位图或者矢量图、创建并发依然存在着设备不可知性的问题。另一方面，文本对象更加容易管理。你可以移动他们，添加处理程序和所有类型的效果...文本依然不会失去它的效果。
术语：断点。这是个允许布局根据用户的屏幕大小来调整的CSS声明。举个例子，如果你在你的侧边栏设置了一个断点，当你在小屏幕上打开网站时，它会改变它的位置。
现在你知道为什么每个人都在专注基于排版的网站并且为什么有些专家说在未来，99.9%的网站是在排版。
再说一次，这可能说一个夸大的数字。事实上就我个人而言，设计世界最终会找到一个方法来让图形在RWD（响应式网站设计）中工作。但这会需要5-10年时间并且我们不得不为排版时代做好准备，这个时代指日可待。
一些web开发人员以及开始了响应式网站的工作。 Gareth Lawn 就是一个例子。
也许你认为这样的设计是不会出售的。 他们没有和艺术设计师的爱好擦出火花。我不得不说我同意你的观点。但是如果这样的网站开始大量引进并且开始做大量的转换时就会改变。
随机抽查的结论：最优的长度介于50-75个字符之间。
现在我们开始这篇文章的核心概念。我提倡成沉闷的黑白配的网站？当然不是！我们的思想需要视觉冲击。我们需要把这些视觉冲击显示给用户从而可以引导并且说服他们。
一旦你决定限制文本，你可以设计出合理的设计而不需要图片。你会更加注意基于CSS的设计。
提醒你自己：图片内容不是设计的一部分。产品的图片、地图等不算是设计图片。我们纯粹的是在说设计部分而不是内容。
自从网络上出现字体库，网页设计师便有了很多徒手画的狂野的字体。
我们有这样的一句谚语：你不能用锤子去把螺丝转紧。这就意味着你必须对每个任务使用适当的工具。这是因为一个事务能在一个地方工作并不意味着它可以在另外一个地方工作。
这里有关于创建网站排版的七个最重要的提示。这是在创建一个网站设计时的基本技巧。
1:设计思想：每个字体都会有一种心理影响并且每种颜色都有自己的情绪。当你在设计的时候，确保字体的颜色和文本的布局与情绪同步。正确的完成这件事，你将至少赢得90%的用户体验。
2:不要有乱数假文：占位符文本永远不要透露出你的真实意义。你看到的结果和用户看到的可能是两个完全不同的东西，因此乱数假文不是一个好主意。
3：避免集中文本：这不是一个硬性的规定，并且它特别不适用于标题，但却适用于一个超过一行的句子或段落，它应该左对齐(或者右对齐：如果你让你的网站的文字从右到左了看)。当一行文本换行时使得两行很难对齐，这会降低整体的用户体验。
4:不要有特殊字符：这从SEO角度来说至关重要。搜索引擎不擅长识别特殊字符，它们喜欢纯文本。因此，内容和标题都要尽量尝试使用文本，也就是说不要唱破折号和引号等。
5:保持字体的可缩放性：目前，用户会在各种设备上打开你的网站。在许多设备上，字体会自觉的被放大。所以你不得不保证你的设计和文本在缩放时不会被分解。
6:大小很重要：有时候，为了设计，我们让文本变的比较小从而来适应网站并且让网站能与我们的设计保持同步。这却并不是一个好主意。可读性在设计上是第一步并且也是最重要的一步。这东西没有商量的余地，所以不要试图在文本大小上进行妥协。
7:阅读你的网站：你可能会发现文本出奇的明显，但是你不知道我们中有多少人在将网站内容发送到客户端或者使其变得更有活力之前实际的去阅读过他们的网站。你应该自己检查你的设计，并且你会意识到是否会在正确的位置被断开。同事，你必须明白是否能通过关键词的复制来得到关注。一个伟大的设计，如果存在不恰当的强调则会毁了它自己。
我只找到两个专门用于创建响应式盘版的jquery插件，如下：
因为CSS没有完整的属性来控制字体，所以Lettering.js会让你可以去控制字体。
1：字距调整类型
2：编辑设计
3：管理代码
4：完全的控制
FitText使得字体能自适应分辨率。但是确保你是对大尺寸文本使用它，而不是段落。
你了解REM么？这是一个CSS3中引进来的新的单位类型(比如pt,px,em等)。REM等价于root ems,这对于创建基础的网站排版特别有用。REM单元相对于html5文档中的字体大小。所以你可以定义html文档中的单个字体也可以把所有REM单位定义成一个百分比。
在任何网站中最重要的当然是它的内容。内容中最重要的一部分是文本。使其可见。这就是整个文章索要讲述的。
创建一个简单网站的附带好处是他们很容易修改，因为他们很简单。基于复杂图片的设计是相对难编辑的。
现在给你两个链接。第一个是教程，你可以在开发网站排版中获取经验。第二个是一个简短的响应式排版指南。
Handling Typography for Responsive Design
原文链接：http://www.gbtags.com/gb/share/9397.htm
标签：
原文地址：http://www.cnblogs.com/gbtagscom/p/4981377.html
