{简介：从本周开始，我（编辑：张跃，Echo Network的创始人）和RainX将撰写和发表一系列文章，从规划、设计、开发、运营和商业的角度来分享我们在创建和运营（）方面的一些经验，并出版粗略的运动技术。对于从事网络创业的小群体来说，它应该具有很强的现实指导意义；对于社区导向的企业家，它也是一个更加生动的案例。}
    
     手机是未来的主要趋势。要做任何互联网项目，我们必须把移动策略放在一个非常重要的位置，回声也不例外，虽然回声仍然以文本作为内容的主要载体，在这个阶段，它还必须充分考虑到移动场景和体验的使用。
    
     一般来说，社区网站有三种移动策略：1）开发和提供本地应用程序；2）制作专门的移动网站，即Webapp；3）采用响应技术，用一组代码和一个网站来适应不同的终端。最后选择了响应设计技术。
    
     近两年来，它是一种流行的前端开发技术。相对而言，它在国外的应用更加广泛，在中国也更加保守，其特点是只有一组代码可以支持PC、平板电脑和手机等不同终端的接入。
    
     事实上，响应设计的原理非常简单，其核心包括：1。丢失网格布局；2。通过中庭分辨率检测输出不同风格；3。适应性内容元素（如图片）。本文的重点不在于技术细节，而是从宏观角度研究响应设计的优点、缺点和应用场景，并分享我们在使用响应开发回声方面的一些经验和思考。技术。
    
     NATEVApp仍然是追求最强性能和最佳用户体验的最佳选择，但开发NATEVEApp的成本也很高，尤其是对于需要独立开发和测试的主流平台。ECHO团队规模小，从零开始。如果我们开始同时开发网站和本地应用程序，我们不仅会延长项目周期，而且由于需求的不确定性而承受高风险的需求变化。响应设计使我们能够集中精力开发和维护一组核心。资源有限的代码。
    
     如果我们选择开发一个专用的移动版本网站，虽然最初的难度不是很大，但是从长远来看，当添加新的功能时，我们需要考虑这两组代码，并且维护成本相对较高。虽然我们的响应设计结果显著。在早期阶段增加开发成本，对于未来的网站维护，我们可以长期保持移动和PC功能的一致性，而不必考虑每次向网站添加功能时的移动站点。
    
     一般来说，响应设计非常适合于基于内容的网站。在国外，应用响应设计典型案例包括：、、、、等响应式设计意味着页面的URL可以统一在移动和PC终端。不需要判断终端的类型来进行频繁的URL跳转。It has great benefits for SEO and is more convenient for social networking sites to share and disseminate.For example, the content web addresses that echo propagates in the Wechat Friendship Circle are identical to those on the PC side, but when opened in mobile browsers, you can see the interface 为移动终端优化。
    
     虽然回声主要是基于内容的，但也有许多交互操作，这是比较复杂的。在中国，这种规模的社区采用响应技术来构建是不常见的。因此，在实践中需要探索许多经验。这里是一些经验教训，从回应设计回声。
    
     目前，市场上有许多集成的响应设计框架，如Bootstrap这样一个众所周知的响应设计框架，它具有很好的视觉风格，并集成了许多常用的组件，以便您可以快速构建一个完整的网站。
    
     但是，如果您的网站的样式更个性化（与引导程序的默认样式大不相同），并且您希望对底层代码有更多的控制，那么您可以选择这样一个更基本的开发框架作为ECHO，它包含基本的CSS和JS库，使您更容易建立基础。在Web上，开发标准不必担心HTML5的老浏览器的支持和不同浏览器的渲染效果的一致性。雅虎！一个新的轻量级响应设计框架也是一个不错的选择。
    
     在PC互联网时代，移动产品的设计往往基于PC网站。首先设计PC网站，然后在此基础上降低移动终端的功能，但在实践中，我们往往忽视移动端，在PC网站上使用许多新技术，追求最佳的视觉和交互体验，使得实现功能变得非常困难。区域退化，最终不得不削弱用户体验，这是一个非常痛苦的过程。
    
     在最近流行的Mobile第一概念中，强调在产品设计中，应优先考虑移动端的渲染效果，然后逐步增强（渐进增强）到PC端。这样做的好处是，我们可以迫使移动终端至少被认为与PC一样重要。相对而言，从移动到PC逐渐升级是一个更令人愉快的过程，因为我们可以专注于思考如何使网站的体验更好地在PC上使用。面对功能减退的痛苦。
    
     在产品设计中，需要把握从宏观到局部的原则。首先，我们应该设想网站在不同终端上的表现，尤其是页面布局和导航等宏元素。我们不仅要适应不同终端的使用特点，还要考虑网站整体风格的统一性。
    
     从图中可以看出，为了满足响应式设计的要求，采用回波members'homepages流布局+卡处理模式。当浏览不同的终端，导航和内容布局也会发生相应的变化，而整体风格保持一致。
    
     为了保证小屏幕终端的浏览体验，我们没有强迫PC和移动终端在内容上保持一致，而是进行了适当的权衡和重组，如将大屏幕左侧的个人信息模块放置在滑动菜单中。在小屏幕上。
    
     为了追求速度，我们使用了许多基于jQuery的开源组件并支持响应，比如日期选择器、新用户引导、使用Tinybox的弹出模式窗口以及响应改进。使用这些成熟的开源组件可以极大地节省项目的开放性。
    
     Chrome和Firefox浏览器具有许多支持响应性设计的扩展，可以方便地测试不同屏幕分辨率下网页的显示效果。此外，Android上的Chrome浏览器还可以支持通过USB在PC机上进行调试，这一点可以详细参考。
    
     这些成熟网站的响应设计对我们的设计思想和代码规划有很大的启发作用。我们可以从许多优秀的响应网站的设计中学习，并通过调试工具（如Starbucks、Google Plus等）分析它们的代码实现。
    
     经验有很多细节，更不用说，整个网站的功能开发持续了两个多月，结果比较令人满意。目前，来自移动设备的访问流量约占总流量的14。更重要的是，在将来添加新功能时，我们可以同步地支持移动终端。此外，我们还封装了Android移动应用程序在此基础上。其中，采用响应设计的决策有很大贡献。
    
     然而，在回声技术的发展中也发现了一些问题和不足。以下是我们的发现和对策：
    
     没有绝对的东西。与不同终端兼容的一组程序是响应性设计的优点，但是这也会导致HTML和CSS文件需要包含用于各种屏幕分辨率的内容和代码。他的内容和风格显示在PC网站上。
    
     去年，Akamai的产品架构师Guy Podjarny测试了347个响应设计的网站，发现它们的内容大小和加载速度在不同终端上几乎相同。这意味着中国移动互联网用户必须经历的用户体验下降。网络速度慢，成本高。
    
     为了改善这种情况，我们采用了一些相应的策略，例如：对于高流量消耗的图像，我们专门为移动设备生成小尺寸缩略图，以便用户不需要在移动设备上加载大尺寸、高清晰度的图像；对于Javascript和CSS文件，采用高速缓存，压缩机制保证了用户无需重复下载内容而无需更新，通过网络传输的内容尽可能小。
    
     虽然响应技术本身并不复杂，但是要与各种尺寸的终端兼容需要大量的额外时间和精力。Echo初步估计开发成本将超过30%。在一次性开发成本方面，它并不一定比单独开发一个webapp要低很多。是否采用响应性设计实际上是在眼前利益和长期利益之间的平衡。换言之，我们付出了较高的初始实施成本，以换取网站长期维护的方便。
    
     响应性网站的设计需要比普通移动网站更好的架构规划，尤其是在保证访问速度和用户体验的前提下。ND风格根据不同的接入终端在同一URL下进行。
    
     IE8下老版本的浏览器不支持中间层机制，不能应用响应技术，支持HTML5不够好，兼容性很差，这一次Echo放弃了在PC机上8.0下与内核兼容的IE浏览器。这是回声，他会跳到浏览器升级提示页面。然而，由于IE6在中国仍然有一定比例的用户，因此在流量方面仍然存在一定的损失，这是我们为采用响应性设计以向mobi倾斜而必须付出的代价。勒德
    
     由于在开发过程中需要考虑屏幕分辨率不同的终端，因此它们不能像开发单独的移动网站那样自由。PPS。开发人员非常简单地调用它们。相对而言，响应性设计更适合于简洁明了的基于内容的网站，在追求酷效果方面没有优势。
    
     ECHO已经做出了很多努力来优化用户体验。例如，我们在整个站点的列表页面中广泛使用了内容的异步加载机制，并且支持在页面滑到底部时动态加载更多内容。存储。当用户通过浏览器返回时，他可以快速找到先前的位置。这些细节被优化，以便他能够通过他的移动电话访问回声获得更平滑的使用体验。
    
     响应设计本质上是一种WebApp。与本地应用程序相比，在使用移动电话特性方面存在固有的缺陷，例如照片和图像上传、记录功能、地理定位等。如果您的产品对用户体验和性能要求很高，或者需要使用HTM的一些移动电话来源，L5不能很好地支持。对于本机特性，建议首先开发本地应用程序。
    
     到目前为止，响应设计在中国仍然是一个有争议的话题。与国内应用相比，我国应答设计的大规模应用还比较少，事实上，应答设计与移动网站以及本土应用之间在技术本身上没有区别，而只是在适应场景上存在差异。充分了解响应技术的特点，并将其应用到适当的项目中，是比较好的方法。以上是回声在响应设计中积累的一些经验，希望能给您一些有益的启示。