为你的响应式设计提速

简介:

响应式设计是最近的流行词,能够打造多屏幕一致体验。

现在几乎每个人都喜欢响应式设计,而且可以是没有原因的支持,这跟Flash刚出现那会火热的局面有点相似。然而,响应式设计带来了表现力的问题,这需要通过调整图像、压缩图像、改变图像大小等手段来解决。

然而,为了提高表现力,有的时候不得不增大文件的尺寸。浏览体验需要快速的载入,本文将讲述一些为响应式设计提速的方法。

featured50@wdd2x
 

featured50@wdd2x

为什么响应式设计载入那么慢?

 
march-blog-wordcloud

march-blog-wordcloud

在所有的设备上,响应式设计载入的HTML元素都相同。就算你的网站专供桌面或者专供平板,在其他设备上,载入的元素依然相同。这就意味着需要通过网络传递所有的内容,包括了图像和脚本。

一项去年的调查表明,86%响应式网站会将一个完整的桌面页传送到手机中。如果我们能够对数据进行精简、提升浏览速度,那么响应式设计将得到更好的推广。

与此同时,响应式设计提高了页面大小,这也是一个亟待处理的问题。因为研究发现 ,如果3秒之内无法载入页面,57%的用户会选择离开。

怎样提高载入性能?

speedometer-540-2501

speedometer-540-2501

对于那些已经采用响应式设计,现在想要进行进一步优化的人来说,Mobitest可以用来测量手持设备上网页的载入性能,这样就能发现问题,从而解决问题。当然如果设计还在进行或者计划中,那么优化起来就更方便了。只需要在设计过程中注意载入速度即可,这样就不用事后亡羊补牢了。

为了提高表现力,我们需要减少页面的资源的数量,缩小页面的尺寸。并不需要可以的调整页面的外观,通过一些工具和手段也能实现”瘦身”。

首先要考虑的就是哪些元素是必要的,哪些是不必要的,去掉不必要的元素,这样就能最小化HTTP请求,这样用户的等待加载的耗时也最少。这可以通过压缩CSSJS来实现,推荐一款叫做Compass的工具——开源的CSS框架编写工具。

JavaScript推荐一款工具叫UglifyJS,可以压缩代码。

有选择的载入

这也是可以考虑采用的重要手段,非常适用于响应式设计的提速,这样就能确保手机用户不会下载那些会降低载入速度的元素。
有选择性的载入,能够阻拦各种内容的载入,包括社交窗口、图像、地图,以及其他。再采用这种手段之前,最好对网站进行全面的测试,先要了解是哪方面降低了网页的载入速度,这样对症下药,效果才能更好。

图像

我们都知道图像在网页中占据了大量的字节。一般在手机上的图像表现力要比桌面上的差。

如果网站内容很多,便会影响到载入速度,因此就需要截断一部分内容,这样就能够提高载入速度。尽管可以通过改变src和img元素来调整标记来实现此功能,但采用PHP解决方案Adaptive Images无疑会更加轻松。该软件会根据屏幕大小自动做出调整,合理的缩放嵌入的HTML图像,而不需要改动标记。主要结合了弹性图片技术(Fluid Image),能够方便的解决问题,而且节省载入时间。这种自适应图像只占用一个htaccess文件,一个php文件,以及一行Javascript代码,能够判断访问用户的设备屏幕尺寸。

文本

文本同样也纳入了”瘦身”范围,在较小的屏幕上,文本的布局不当可能会导致阅读问题。FitText能够解决此问题,是一款jQuery插件,自动改变字体大小。FitText只能解决标题问题,段落文本的问题无法解决。
 

为何要选择响应式设计?

connection ?omputer telephone tablet black

connection ?omputer telephone tablet black

跟任何新式的科技和产品,刚过出现时,往往问题繁多,响应式设计也一样,但并不能忽视它的价值,不能忽视它将带来的完美体验。通过响应式设计,我们能为用户提供更好的浏览体验。没人会因为过去的方法简单,而采用复古的技术,我们需要创新,需要用创新解决问题,并在创新的的同时不断调整、修正,以达到最佳。

Google非常支持响应式设计,他们的建议 使用响应式设计,他们认为响应式设计师最适合手机的方式。
在社交分享类网站上,响应式设计也大展拳脚,很多手持设备上的体验已经和桌面上的一致。
说的再远一点,响应式网站能够提高工作效率,只需更少的工作人员,就能达到更好的工作效果。

价值所在

手机和平板变得越来越流行,意味着使用也越来越多,越来越多的人选择它们,因为用它们上网更方便。以iOS和Android为系统的平板电脑在数码消费市场大行其道,销量飙升。
目前为止,响应式设计虽然有诸多不便,但是利大于弊。尽管有些许的载入速度问题,一份调查采访了很多世界知名品牌,尽管响应式设计有些载入问题,但是能够带来访问量的大幅上涨。

响应式设计平均提高了网站23%的手机访问量,降低了26%的跳出率(跳出率定义了只浏览了单个页面的访问量占总访问量的比率。跳出率能够反映出引导页的质量,如果引导页好,用户会继续浏览其他页面,而不是浏览单个页面后就选择离开。)增加了7.5%的访问时长。

O’Neill,流行冲浪服饰供应商,在使用响应式设计后,iPad和iPhone上的转化率(网站转换率=进行了相应的动作的访问量/总访问量)提高了65.7%。在便携设备上完成的交易额几乎和桌面设备相同,利润几乎增长了一倍。
而Android设备由于其流行面广,平台支持广泛,便携设备上的转化率的提升更明显,并且能稍微带动桌面设备上的转化率。
上面分析的仅仅是一个品牌的故事,从中我们可见响应式设计的作用非常巨大,别忘了,前些年,响应式设计对于社交媒体/社交应用的推广作用巨大。

如何在响应式设计的同时保证页面的载入速度,找到最完美的平衡点,这非常值得我们去研究。面对挑战,我们必须勇敢面对,努力的优化、改进,如果因为问题而停滞不前,而选择逃避,那么结局只有被淘汰。
67%的手机用户有过用手机网购的经验,手机将会在网购方面取代桌面。因此,更多的商机在移动设备中,因此,我们需要提供更好的多响应式设计。
虽然响应式设计仍处于发展初期,但是毫无疑问,市场需求会激发它的快速发展,因此我们需要多掌握一些它的基本规则,多了解一点响应式设计。

响应式设计的优化,你采用什么办法?一起来讨论一下。
 原文发布时间为:2013-09-06

本文来自云栖社区合作伙伴“Linux中国”

相关文章
|
5月前
|
机器学习/深度学习 搜索推荐 计算机视觉
探索 OOTDiffusion:一个高度可控的虚拟服装试穿开源工具
探索 OOTDiffusion:一个高度可控的虚拟服装试穿开源工具
530 1
|
5月前
|
缓存 前端开发 JavaScript
|
编解码 前端开发 UED
响应式设计:构建适应多平台的现代网站
在当今数字时代,用户在各种设备上访问网站,包括桌面电脑、平板电脑和智能手机。为了提供一致的用户体验,响应式设计已经成为现代网站开发的重要组成部分。本博客将深入探讨响应式设计的核心概念、最佳实践以及如何创建适应多平台的网站。
90 0
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
40 1
|
2月前
|
Web App开发 前端开发 UED
移动端适配布局指南:打造完美用户体验的秘密武器
【8月更文挑战第26天】在Web前端开发中,选择合适的移动端适配方案对确保跨设备的良好显示与用户体验至关重要。常用方案包括:媒体查询实现响应式布局;百分比、flexbox与CSS Grid布局提供更灵活的设计;结合viewport元标签和rem单位实现等比缩放;利用第三方库如Bootstrap加速开发。实践中应综合运用这些技术,并通过广泛测试保证兼容性和效果。
49 4
|
3月前
|
缓存 Shell API
PWA与原生应用:性能与用户体验的深度对比
【7月更文第28天】随着Web技术的进步,渐进式Web应用(Progressive Web Apps, PWA)已成为一种越来越受欢迎的选择,它结合了Web和原生应用的优点。尽管如此,原生应用仍然占据着移动应用市场的主导地位。本文将深入探讨PWA与原生应用之间的性能和用户体验方面的差异,并通过一些实际代码示例来展示如何构建高性能的PWA。
92 1
|
3月前
|
编解码 前端开发 JavaScript
响应式设计与移动端适配技巧:打造无缝用户体验
【7月更文挑战第29天】响应式设计与移动端适配是提升网站和应用用户体验的关键环节。通过遵循响应式设计的核心原则,并结合一系列移动端适配技巧,我们可以打造出既美观又实用的跨平台应用,满足不同用户的多样化需求。随着技术的不断进步和用户需求的日益复杂,持续学习和实践这些技巧将是我们作为开发者的重要任务。
|
5月前
|
缓存 前端开发 开发者
提升网页性能的五大技巧
在当今互联网高速发展的时代,网页性能成为了影响用户体验和搜索引擎排名的重要因素。本文将介绍五项有效的技巧,帮助开发者提升网页加载速度和用户体验,包括优化图片、压缩代码、减少HTTP请求、使用CDN加速以及合理利用缓存机制。通过采用这些技巧,可以让网页加载更快、响应更迅速,为用户带来更流畅的浏览体验。
|
5月前
|
缓存 前端开发 JavaScript
优化前端性能的五大技巧
在当今快节奏的网络世界中,优化前端性能是网站开发中至关重要的一环。本文将介绍五种有效的技巧,帮助开发者提升前端性能,提升用户体验和网站效率。
|
5月前
|
缓存 监控 Android开发
提升安卓应用性能的五大技巧
【5月更文挑战第20天】 在竞争激烈的应用市场中,一个流畅、高效的安卓应用能决定用户的初次体验和留存率。本文将深入探讨五种不同的技术手段来优化安卓应用的性能,包括对内存使用的精细管理、多线程和并发处理的合理应用、UI渲染效率的提升、网络请求的优化以及应用大小的控制。这些技巧不仅帮助开发者构建更加稳定和响应迅速的应用,同时也能显著改善最终用户的使用体验。