为你的响应式设计提速

> 原文出处：http://www.uisdc.com/responsive-design @MartinRGB 响应式设计是最近的流行词，能够打造多屏幕一致体验。 现在几乎每个人都喜欢响应式设计，而且可以是没有原因的支持，这跟Flash刚出现那会火热的局面有点相似。然而，响应式设计带来了表现力的问题，这需要通过调整图像、压缩图像、改变图像大小等手段来解决。 然而，为了提高表现力，有的时候不得不增大文件的尺寸。浏览体验需要快速的载入，本文将讲述一些为响应式设计提速的方法。    ## **为什么响应式设计载入那么慢？**    在所有的设备上，响应式设计载入的HTML元素都相同。就算你的网站专供桌面或者专供平板，在其他设备上，载入的元素依然相同。这就意味着需要通过网络传递所有的内容，包括了图像和脚本。 一项去年的[调查](http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/)表明，86%的[响应式网站](http://www.uisdc.com/tag/%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bd%91%e7%ab%99 "查看 响应式网站 中的全部文章")会将一个完整的桌面页传送到手机中。如果我们能够对数据进行精简、提升浏览速度，那么响应式设计将得到更好的推广。 与此同时，响应式设计提高了页面大小，这也是一个亟待处理的问题。因为研究发现 ，如果3秒之内无法载入页面，57%的用户会选择离开。 ## **怎样提高载入性能？**  对于那些已经采用响应式设计，现在想要进行进一步优化的人来说，[Mobitest](http://mobitest.akamai.com/m/index.cgi)可以用来测量手持设备上网页的载入性能，这样就能发现问题，从而解决问题。当然如果设计还在进行或者计划中，那么优化起来就更方便了。只需要在设计过程中注意载入速度即可，这样就不用事后亡羊补牢了。 为了提高表现力，我们需要减少页面的资源的数量，缩小页面的尺寸。并不需要可以的调整页面的外观，通过一些工具和手段也能实现”瘦身”。 首先要考虑的就是哪些元素是必要的，哪些是不必要的，去掉不必要的元素，这样就能最小化HTTP请求，这样用户的等待加载的耗时也最少。这可以通过压缩CSS和JS来实现，推荐一款叫做[Compass](http://compass-style.org/)的工具——开源的CSS框架编写工具。 JavaScript推荐一款工具叫[UglifyJS](http://lisperator.net/uglifyjs/)，可以压缩代码。 ### 有选择的载入 这也是可以考虑采用的重要手段，非常适用于响应式设计的提速，这样就能确保手机用户不会下载那些会降低载入速度的元素。 有选择性的载入，能够阻拦各种内容的载入，包括社交窗口、图像、地图，以及其他。再采用这种手段之前，最好对网站进行全面的测试，先要了解是哪方面降低了网页的载入速度，这样对症下药，效果才能更好。 ### 图像 我们都知道图像在网页中占据了大量的字节。一般在手机上的图像表现力要比桌面上的差。 如果网站内容很多，便会影响到载入速度，因此就需要截断一部分内容，这样就能够提高载入速度。尽管可以通过改变src和img元素来调整标记来实现此功能，但采用PHP解决方案[Adaptive Image](http://adaptive-images.com/)[s](http://adaptive-images.com/)无疑会更加轻松。该软件会根据屏幕大小自动做出调整，合理的缩放嵌入的HTML图像,而不需要改动标记。主要结合了弹性图片技术（Fluid Image)，能够方便的解决问题，而且节省载入时间。这种自适应图像只占用一个htaccess文件，一个php文件，以及一行Javascript代码，能够判断访问用户的设备屏幕尺寸。 ### 文本 文本同样也纳入了”瘦身”范围，在较小的屏幕上，文本的布局不当可能会导致阅读问题。[FitText](http://fittextjs.com/)能够解决此问题，是一款jQuery插件，自动改变字体大小。FitText只能解决标题问题，段落文本的问题无法解决。 ## **为何要选择响应式设计？**  跟任何新式的科技和产品，刚过出现时，往往问题繁多，响应式设计也一样，但并不能忽视它的价值，不能忽视它将带来的完美体验。通过响应式设计，我们能为用户提供更好的浏览体验。没人会因为过去的方法简单，而采用复古的技术，我们需要创新，需要用创新解决问题，并在创新的的同时不断调整、修正，以达到最佳。 Google非常支持响应式设计，他们的[建议](https://developers.google.com/webmasters/smartphone-sites/) 使用响应式设计，他们认为响应式设计师最适合手机的方式。 在社交分享类网站上，响应式设计也大展拳脚，很多手持设备上的体验已经和桌面上的一致。 说的再远一点，[响应式网站](http://www.uisdc.com/tag/%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bd%91%e7%ab%99 "查看 响应式网站 中的全部文章")能够提高工作效率，只需更少的工作人员，就能达到更好的工作效果。 ### 价值所在 手机和平板变得越来越流行，意味着使用也越来越多，越来越多的人选择它们，因为用它们上网更方便。以iOS和Android为系统的平板电脑在数码消费市场大行其道，销量飙升。 目前为止，响应式设计虽然有诸多不便，但是利大于弊。尽管有些许的载入速度问题，一份[调查](http://www.lukew.com/ff/entry.asp?1691)采访了很多世界知名品牌，尽管响应式设计有些载入问题，但是能够带来访问量的大幅上涨。 响应式设计平均提高了网站23%的手机访问量，降低了26%的跳出率（跳出率定义了只浏览了单个页面的访问量占总访问量的比率。跳出率能够反映出引导页的质量，如果引导页好，用户会继续浏览其他页面，而不是浏览单个页面后就选择离开。）增加了7.5%的访问时长。 O’Neill，流行冲浪服饰供应商，在使用响应式设计后，iPad和iPhone上的转化率(网站转换率=进行了相应的动作的访问量/总访问量)提高了65.7%。在便携设备上完成的交易额几乎和桌面设备相同，利润几乎增长了一倍。 而Android设备由于其流行面广，平台支持广泛，便携设备上的转化率的提升更明显，并且能稍微带动桌面设备上的转化率。 上面分析的仅仅是一个品牌的故事，从中我们可见响应式设计的作用非常巨大，别忘了，前些年，响应式设计对于社交媒体/社交应用的推广作用巨大。 如何在响应式设计的同时保证页面的载入速度，找到最完美的平衡点，这非常值得我们去研究。面对挑战，我们必须勇敢面对，努力的优化、改进，如果因为问题而停滞不前，而选择逃避，那么结局只有被淘汰。 67%的手机用户有过用手机网购的经验，手机将会在网购方面取代桌面。因此，更多的商机在移动设备中，因此，我们需要提供更好的多响应式设计。 虽然响应式设计仍处于发展初期，但是毫无疑问，市场需求会激发它的快速发展，因此我们需要多掌握一些它的基本规则，多了解一点响应式设计。 响应式设计的优化，你采用什么办法？一起来讨论一下。 **原文地址：**[https://medium.com/design-ux/9ecd34a1a0dc](https://medium.com/design-ux/9ecd34a1a0dc) **优设网翻译：**MartinRGB