定州企业网站制作：响应设计不再是关于屏幕大小的了

2012年3月，盖伊·波杰尼运行了一个测试，比较数百个闪亮的新响应网站的性能，跨越四种不同的屏幕分辨率。结果非常令人失望。

两年前响应式网页设计在每一位可以想象的设计师和开发者跳进火车后，几乎要对理论基础进行一次测试。

盖伊证明了几乎所有已知的应答站点都超重了。

但是，更重要的是，定州企业网站制作每个移动用户都收到了与桌面用户相同的千字节重载。

社区对此有不同的反应。一些人声称，响应性设计并不是最终的解决方案，也许还不足以应对当今网页设计师面临的挑战。

值得庆幸的是，Web社区总是可以指望有很多人能抓住形势，扭转局面。

现代网络大师布拉德·弗罗斯特, 卢克·沃博勒斯基和克里斯蒂安·海尔曼看到了机遇，其他人高呼危机，设法把问题转化为社区的优势。

传统上，Web性能是建立在(无意冒犯)开发人员-专属术语的基础上的。GZIP，丑化，缩小，dns查找，文件连接…等术语这些晦涩的字眼把设计师推开了方程式。

然而，社区中的聪明人已经意识到，这个问题有更深层次的根源。如果你优化或压缩一个超高分辨率图像，如果你的计划是对一个移动用户隐藏它，并且仍然让他们下载它，这真的不重要。

要实现真正的轻量级站点，性能不应该仅仅是一个问题，它应该被看作是一个设计特征。

性能和其他问题一样。克服它的网站是那些从一开始就认可它的网站。而那些忽视它的人是那些最终为此而受苦的人。

为什么

页放弃

研究显示57%的用户会离开你的网站装载时间超过3秒.

谷歌，网页速度和搜索引擎优化

截至2010年春季，谷歌将速度作为一个排名因素加以考虑。对于速度平均的网站来说，影响并不大，但如果页面落后于某个阈值，就会受到公司搜索算法的惩罚。

这证明，在谈论用户体验时，速度是一个值得关注的问题。

带宽考虑

在过去，人们常常谈论非常抽象的概念移动上下文“”谷歌的著名理论将移动用户分为三类：

• 现在重复

  *使用手机跟上不断重复变化的人(体育成绩、Facebook提要或股票市场)

• 现在无聊

  用户在等待事情发生时把手机拿出来

• 现在紧急

听起来很有可能，对吧？

事实是这件事没有真相。没有“移动语境”..人们在街上散步、乘火车旅行或在家里放松时都会使用他们的电话。他们同时做每件事！

手机随处都是人，所以人们在任何地方都使用手机。

卢克·沃博勒斯基非常有趣的数据:

人们在哪里使用移动设备？

• 84%在家
• 80%在整个一天的杂项停工期间
• 76%排队等候预约
• 69%购物
• 64%在工作
• 62%在看电视时(ALT)。研究声称84%)
• 47%在上下班途中

随着新情况的出现，随着新市场和不同习惯的出现，移动环境将发生变化。我们可以有把握地假设移动上下文会一直在移动直到人们停止使用手机。

这导致我们关注带宽。只有一种情况下，你可以为肥胖网站的用户提供服务，而不受影响：向他们的Macbook Pros提供服务，而他们却在家里，拥有全带宽。

但是，所有其他可能的情况，其中有很多，也必须包括在内。其中包括每天涌入市场的看似源源不断的设备。当然，人们经常访问网站。

其中包括几年前没有那么多智能手机的国家，但现在却在无情地向前迈进。

但更重要的是，他们包括所有的地方，人们将在使用你的网站。所以你必须注意所有的带宽。不仅仅是世界上贫困地区的居民没有相同的数据速度。用户将尝试在工作中访问一个站点，连接100 mb/s；在家里，使用2到30 MB/s，同时使用3G、4G和数据计划等等。

直截了当地说，响应性设计不再是关于屏幕大小的问题了。，但是对于不同的场景，解决方案必须是灵活的，适应性强，自上而下考虑。

怎么做？

很高兴你这么问。

我们之前说过，不把性能看作是一堆运行服务器端的自动化任务，这些任务帮助已经注定要失败的站点。有办法解决这些问题，并将其转化为竞争优势。

要避免什么

GuyPodjarny引用了我们在那里看到的大量响应性网站数量的三个关键原因：

• 下载和隐藏

  *资产仍被下载，但隐藏

• 下载和收缩

  下载高分辨率桌面级图像，并缩小以适应用户屏幕。

• 过剩DOM

  ：没有办法避免浏览器解析和处理DOM的所有区域，包括隐藏的区域。

先发制人的方法

定州企业网站制作有大量的信息，关于为什么网站一直未能超过预期的表现。但是大多数人开始说的是“从一开始就承担责任”。

我要介绍的所有技巧都有一段时间了。对我来说，有趣的部分在于他们如何混合和交织，掩盖彼此的缺点，并结合他们的长处。现在，在移动爆炸的深处，他们显示出他们有多么强大。

渐进增强…

…都是关于提供一种网络体验，将其简化为本质，并从中获取它。

几年前，这一理论主要是从浏览器的角度进行的。随着HTML 5、CSS 3、jQuery等新兴技术的出现，网络制造商已经忘记了他们的用户。相当大一部分人得到了他们的网站的不完整形式，过于依赖这一闪亮的新技术。

现在Webkit引擎和Firefox等占据了很大一部分市场份额，问题在于有大量的浏览器不具备iPhone或三星的功能。再一次，渐进增强是解决这些问题的唯一途径。遗忘球员首先，留下光芒给那些能够承受它的人。

移动第一开发

早在2009年，卢克·沃罗博列夫斯基就提出了设计移动优先原因有三：

• 移动正在爆炸
• 移动迫使你集中注意力(让你摆脱过多的杂乱。)

  屏幕房地产)

• 手机扩展了你的能力(使用gps、地理定位、多点触摸手势、加速度计、摄像头…等技术)。

从那时起，Web设计迅速转向这种方法。在此过程中，许多设计师和许多开发人员都指出，首先构建移动设备比桌面开发更有优势(与卢克上面的第二点高度相关)。渐进式增强和移动第一发展经历了各种各样的融合。DEVS开始为移动构建，并从那里逐步增强，将更大的屏幕空间作为对移动核心基础的增强。

乔丹·摩尔提供原因总结..他认为，由于我们不能有把握地押注连接速度，“负责任的网页设计师”将建立起最低的入口点-移动优先方式，假设连接速度最慢，并从那里建立到更大的断点，以获得更快的连接速度。在未来，我们将能够依靠坚实的带宽检测，但就目前而言，一个好的想法是把它作为一个关注，并尽量避免采取任何步骤在错误的方向。

总结：

将站点编码为最低分辨率和可能性。从一开始就充分利用进步增强。建立额外的功能，增强的视觉和互动时，它可以使用。

女用：响应Web设计+服务器端组件

对许多人来说，响应性设计有一个主要缺点。它主要依靠屏幕宽度的检测。

随着越来越多的设备的出现，诸如触摸屏笔记本电脑等混合设备的出现，特征检测已经成为响应性设计的关键。主要提供它的图书馆现代派，现已在大多数项目中得到应用。它们帮助开发人员评估客户端浏览器是否支持某些功能并提供相应的功能。但是很多时候，依赖浏览器是很棘手的，因为“他们”会说他们支持功能，而实际上，“他们”做他们想做的任何事情。对新特性的支持通常是部分的。

为了提供解决方案而生下来的。就像移动第一，这个词是由2011年卢克·沃博列斯基..它依赖于检测用户的设备类型，评估它并提供为其量身定制的体验。要做到这一点，有一些很重的工具，比如WURFL, DeviceAtlas或者更轻的浏览器宝石，它读取用户代理字符串并从那里开始。

评估设备类型还有其他优点。它允许DEVS根据用户的设备提供不同的模板。假设您正在构建一个非常大的站点，并且您希望您的移动导航是一个简化的站点，不会占用桌面导航的一半空间。您可以使用内容、显示和隐藏内容、使用JavaScript移动div，或者可以为移动屏幕和桌面屏幕提供不同的模板，并让服务器决定提供哪一个模板。

这使得响应性设计在Mdot站点上具有优势。在RESS出现之前，MDOT唯一的优势是为移动设备提供了一种特定的体验。

英国广播公司(BBC)(非常聪明的人，全球数百万读者，对他们的用户负有很大责任)谈论了RESS和渐进增强是如何作为一种和唯一的一种方式运作的。他们称他们的方法是切芥末！它包括创建一个核心体验，它将工作在每一个你能想象的设备上。在此之后，他们评估服务器上的设备，并决定它是否“削减芥末”。如果是这样，就会逐步增加经验。但是，如果没有，用户仍然可以访问核心内容。

条件加载

让我们考虑几个观点：

• 移动用户

  这个

  内容，和桌面用户一样多。

• 移动迫使你集中注意力。设计师必须接受一些限制，才能提供相同的内容，比如带宽和较小的屏幕大小。

也被称为“积极增强”，这一开发技术允许设计师专注于核心内容，并逐步增强它为更大的屏幕。它提供了对某些内容的基本访问，这些内容可以在空间可用时注入到页面上。

您可以使用优秀的工具，例如MatchMedia它模仿CSS行为，并在JavaScript中评估屏幕大小。

懒惰加载

像Facebook、Twitter或Pinterest这样需要为移动用户优化的图片和用户网站，可以利用延迟加载来提供更好的体验。当您第一次加载页面时，将加载多个帖子。当您向下滚动时，设计器假设它是因为您想浏览更多的内容，所以它是通过Ajax注入到页面中的。这避免了DOM过量，从而使页面加载速度快得多。

设置绩效预算

蒂姆·卡德莱克认为设置最大页重并始终注意到这一点是达到以下目的最终方法：保持页面加载..“设定你的目标并坚持它们”。SteveSouders讨论了三个选项，如果超出预算，可以选择：

• 优化现有特性或资产
• 删除现有的特性或资产
• 不要添加资产的新特性

对我来说，这听起来有点激进，但它强调了一个网站的整体性能随着时间的推移和每一个新的功能密切关注。

我们去找技术人员！

有一定的速度方法，工作在一个更技术性和较少的概念层面。

图像技术

图片约占网站的60%。如果你是为移动用户提供未知带宽连接的桌面大小的图像，你基本上是把你的网站的糟糕表现。

克服这一问题的诀窍是根据屏幕大小或类型提供不同版本的图像。你可以为手机提供一张小图像，向桌面提供一张高分辨率的图像，并为Hi-DPI设备提供一张双倍大小的图像。

响应图像

世界各地的设计师和开发人员一直在努力将响应性的图像输入到HTML规范中。“威尔托”侯爵是最直言不讳的。这场战斗还没有打赢，但是有许多解决方案依赖于JavaScript来实现所需的结果。斯科特·杰尔，也来自灯丝群，编写了一个插件，该插件模仿社区提出的标记，并且工作起来像一种魅力：图片填充.

压缩图像

大安一位荷兰设计师在用Photoshop压缩图片时发现了一个非常奇怪的现象。他证明了以下几点：将图像放大一倍(200%)，压缩到25%或更低的原始质量，在浏览器中重新调整大小(100%)。这幅图像不仅体积更轻，而且已经为HiDPI屏幕进行了优化，因为它的像素密度已经翻了一番。

唯一观察到的问题是，浏览器可能很难将双倍大小的图像绘制回原来的大小(如果必须这样做100次，就像在图像重的站点中那样)。需要进行一些测试，看看这是否是最佳解决方案。

向量与位图

SVG图像是目前要走的路。它们是完全可伸缩的，因此在任何屏幕上都会表现得更好。提供退路非常容易通过现代化。

图标字体

从技术上讲，它们是基于矢量的图像，只用作字体。如克里斯·科伊尔把它说成“图标字体太棒了”，因为：

• 你可以很容易地调整尺寸
• 你可以很容易地改变颜色
• 你可以很容易地隐藏它们的形状。
• 他们将在IE6中工作，不像透明的PNG。
• 你可以用图像做所有你能做的事
• 你可以用印刷术做任何事

HiDPI图像

戴夫·布希尔最近写了一篇很有趣的文章HiDPI图像..他认为，即使今天我们有可能为iPhone、iPad和其他具有屏幕功能的现代设备提供服务，但假设一个网站不会因此而瘫痪还为时尚早。

重点是这样做，但明智的做法，考虑到情况前跳到4x图像。

接下来是什么

谷歌最近开发了一种新的图像格式，WebP..它为Web图像提供无损压缩，与PNG相比，文件更小3倍。

有一些简单的、轻量级的JavaScript库，它们可以从WebP转换到现在的WebP。考虑到谷歌最新工具的影响，今天就开始进行实验来处理一个图像重的网站可能是个好主意。

资产装载

仔细、有序地加载资产。控制这个方面提供了一个很大的优势，允许页面呈现基本内容，然后再对其进行增强。

CSS、图像

通过媒体查询、条件加载或延迟加载以及响应/压缩图像技术控制加载

JavaScript

利用HTML 5的功能，如异步或推迟..还有一些装载助手，如RequireJS它可以处理加载和依赖关系。

广告、社交小工具或任何第三方资产

只是一次又一次注射。

老派表演技巧

他们已经存在了一段时间，但今天仍然同样重要。

减少HTTP请求的数量

为了实现这一点，DEVS必须按资源来考虑资源，但以下是一些指导原则：

• 连接所有CSS文件或使用CSS预处理器将它们编译成一个文件。
• 将所有JS插件统一在同一个文件下，并始终在页脚中加载它们，除非它们确实需要阻止页面的呈现(如果您在页脚中加载Typekit字体，您将得到著名的fout或“Flash of unstyed text”)。
• 如果必须使用PNG图像，请使用精灵。他们把所有的图像统一在一起，并利用CSS来切割碎片。
• 在可能的情况下使用数据URI方案，它允许将图像作为内联数据来包含，从而消除一些更多的HTTP请求。

减少字节数

丑陋，缩小您从页面调用的每个脚本或CSS文件。将服务器设置为允许GZIP压缩和扩展以及GZIP的每个资产。

摘要

自从响应性设计诞生以来，Web性能的重要性就被略微忽略了。

设计师和开发人员一直在关注如何解决这个敏感的难题，并且，在他们的过程中，一个新的多带宽、多设备、多位置的网络开始成为人们关注的焦点。

为了为明天的问题做好准备，我们定州企业网站制作必须把性能作为一个基本考虑因素，因为以桌面为中心的网络正在消失在我们眼前。移动用户越来越快，不会跳过圈来获取内容，而且每天都会有越来越多的网站涌现，快就意味着领先.