本节书摘来异步社区《移动优先与响应式Web设计》一书中的第2章,第2.2节,作者: 【美】Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。
移动优先与响应式Web设计人们不论身在何处,都会尝试使用移动设备,但并不是到处都有移动网络,就算有也会很昂贵(视乎用什么套餐),并且不稳定,以致网速更慢,等待更久。
设计移动体验时,必须接受这个现实,并施展浑身解数,设法提高速度。应减少文件的发送,采用好的浏览器和服务器技术,尽量提升传送速度,减少用户每月的上网费用。
传送文件时,尽量降低文件大小,减少文件数量,要求移动用户减少下载量。可是,由于有移动网络延迟,发送HTTP要求可能会耗时更多。因此请确保做到如下几点。
将多幅图片压缩至单一文件(但要确保解压后不会太大)。组合并简化CSS和JavaScript文件。尽量不要依赖复杂的JavaScript函数库,尤其是只有一两个函数时。同一道理,尽量少用CSS网格系统(Grid System)。用正确的HTTP标头,确保能暂存文件至浏览器。如适用,利用现代浏览器的功能,善用HTML5,例如Canvas和Appcache。还有我的至爱:用CSS3特性来做圆角、渐变色、文字阴影和方块阴影。这样做就不需要用图像来排版了,这在现代浏览器上固然美观,不过就算是旧浏览器不太支持CSS3,也能兼顾。但不要过份使用CSS的效果,否则会有太多效果需要排版,这样就会减慢速度。速度不只在移动平台上才重要。亚玛逊、雅虎、微软等公司经常指出,就算网页加载延迟很短时间(100毫秒),用户也会察觉,然后转用其他服务。谷歌做过长期测试,发现表现差会有长远影响。延迟问题就算修复好,在随后5个星期内,用量仍然会减少。因此在桌面版上,速度同样重要。
若你以移动优先,并且连接移动网络也够快,网站和应用程序的桌面版就会快如闪电,用户一定会喜欢。为何欣然接受移动平台的限制?又有一个理由。
相关资源:敏捷开发V1.0.pptx