响应式布局的3个陷阱

设计师们无法回避移动设备的大势所趋，当然在网站设计上有大量新的概念来迎合移动设备。但是单独的网站，无法在移动设备层出不穷的大潮中站稳脚跟。无论是在个人电脑、笔记本、智能手机、平板电脑、大屏幕手机、智能电视、上网本以及其它有前景的设备，都需引人入胜的设计。

响应式布局是这种情况下唯一理智的方式。

尽管不是所有人确信响应式Web设计是未来的方向，但是响应式Web设计已经获得全世界Web设计师的广泛支持。 而我们许多人还是通过简单使用响应式Web设计来解决不同大小屏幕的布局问题——这解决了普通设计量用户体验差的问题。在我头几个响应式Web设计项目中，按我的工作方式已经犯了很多错误。 这里有我或其他响应式网页设计师曾经犯的3个错误。

响应式布局陷阱 1: 网站加载时间过长

构建响应式网站的缺点之一是你被迫将太多的资源压缩在一个页面中。你需要这些资源以便在不同设备上展示你的网站。大部分响应式网站在页面加载之前首先加载这些资源。毫无疑问，这个过程需要耗费大量时间。

针对大部分使用笔记本、PC访问你网站的用户来说，似乎没什么问题。但如果在智能手机加载你的网站需要5至7秒之久，那么你将失去大量用户。智能手机用户不喜欢等，即便是1秒钟——短短的等待将产生致命的后果。所以，如何处理该问题呢？参照最佳实践，删减赘余，使用conditional loading这样的先进技术。

响应式布局陷阱 2: 为小屏幕设备删减内容

为智能手机提供更少的内容，已被广泛采纳。故意为移动用户提供低质量的用户体验，无疑是在折损你网站的利益。实际上，用户总是在不停地切换设备来完成各种任务。这就意味着，如果用户在他们的智能手机上找不到某一特定内容，那你也就失去了销售机会。

更好的解决方案是以一种紧凑的、易于导航的格式显示所有信息。在设计中，可能需要花费更多努力，但这是值得去做的。请记住，即便你用CSS隐藏了特定信息，它仍会被下载的。所以要为移动用户提供完整的Web体验，不要丢弃任何东西。

响应式布局陷阱 3: 忽视各设备间的相通之处

响应式Web设计不仅仅针对PC和智能手机。在进行设计时，还要考虑到其他的众多设备。用户如何与平板电脑、互联网电视、智能手机进行交互，都需要考虑在内。这并不是说你要为所有的设备创建一个本地化的UI体验，但你可以根据各设备的环境为它们创建一个响应式导航，再分别创建出用户易于理解的设计。

最后关于响应式布局总结

虽然响应式Web设计仍处于发展初期，但已经有很多指导和最佳实践，当你创建可跨设备工作的设计时可以采用。对于那些希望为使用不同设备的用户提供顶尖Web体验的设计师来说，则需要更多的思考与努力。

 

转载于:https://www.cnblogs.com/gonrun/p/3816187.html