响应式Web设计应避免的三大陷阱
当你需要为令你眼花缭乱的各种尺寸屏幕进行设计时,响应式设计是唯一可靠的选择方案。
虽然大家都不相信响应式网站设计是未来趋势,但采用响应式的方法进行网页设计却获得了全世界Web设计人员的广泛支持。但我们中有很多人只是简单地利用响应式设计解决不同尺寸屏幕间的布局问题——这只为那些普通的设计(为用户提供低质量的用户体验)扫清了道路。在最初进行的几个响应式网站设计项目中,我曾犯过很多错误。在此分享我以及很多其他响应式网站设计者都曾犯过的三大错误。
错误一:网站加载时间过长
构建响应式网站的缺点之一是你被迫将太多的资源压缩在一个页面中。你需要这些资源以便在不同设备上展示你的网站。大部分响应式网站在页面加载之前首先加载这些资源。毫无疑问,这个过程需要耗费大量时间。
针对大部分使用笔记本、PC访问你网站的用户来说,似乎没什么问题。但如果在智能手机加载你的网站需要5至7秒之久,那么你将失去大量用户。智能手机用户不喜欢等,即便是1秒钟——简短的等待将产生致命的后果。所以,如何处理该问题呢?参照最佳实践,删减赘余,使用Conditional Loading这样的先进技术。
错误二、为小屏幕设备删减内容
为智能手机提供更少的内容,已被广泛采纳。故意为移动用户提供低质量的用户体验,无疑是在折损你网站的利益。实际上,用户总是在不停地切换设备来完成各种任务。这就意味着,如果用户在他们的智能手机上找不到某一特定内容,那你也就失去了销售机会。
更好的解决方案是以一种紧凑的、易于导航的格式显示所有信息。在设计中,可能需要花费更多努力,但这是值得去做的。请记住,即便你用CSS隐藏了特定信息,它仍会被下载的。所以要为移动用户提供完整的Web体验,不要丢弃任何东西。
错误三、忽视各设备间的相通之处( Disregarding Cross-contextual Conventions)
响应式Web设计不仅仅针对PC和智能手机。进行设计时,还要考虑到其他的众多设备。用户如何与平板电脑、互联网电视、智能手机进行交互,都需要考虑在内。这并不是说你要为所有的设备创建一个本地化的UI体验,但你可以根据各设备的环境为它们创建一个响应式导航,再分别创建出用户易于理解的设计。
总结
虽然响应式Web设计仍处于发展初期,但已经有很多指导和最佳实践,当你创建可跨设备工作的设计时可以采用。对于那些希望为使用不同设备的用户提供顶尖Web体验的设计师来说,则需要更多的思考与努力。