浅谈响应式网页设计 | 抓住移动先机


什么是响应式设计?

响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

响应式网页设计

响应式Web设计(Responsive Web design)的理念是:

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad或是移动终端,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

区分响应和设计

响应是一个互动的过程,响应是双方的,是互动的过程,用户请求网站,网站判断用户使用终端,以调用不同的布局来适应用户的设备,实现最佳的浏览体验。

一般响应式设计的排版都比较简约,留白空间较大,这样比较容易自适应屏幕,同时也让网页整体版面更加的简洁清晰,让重要的内容突显,走在21世纪的年轻小伙伴们,对简洁的东西情有独终,轻微博和流行就是一个很好的例子。

为什么要使用响应式网页设计?

我们通过响应式的设计和开发思路让页面更加"弹性"了,图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad、手机上浏览,页面都会真正的富有弹性。

响应式网页设计的优缺点?

优点:

一、1个网址访问

  1. 方便用户记忆和访问;
  2. 提升企业品牌化发展;
  3. 移动设备越来越多,显著提升用户体验;
  4. 保持网页原有链接,链接统一化;

二、1套内容

  1. 宣传得到统一,减少信息同步压力和错误;
  2. 避免重复内容,专心维护一个网站,节约企业资源,大大节约编辑人员工作量;

三、同一代码

  1. 没有网页版本区分,所有SEO策略一致,利于搜索引擎优化(SEO);
  2. 所有设备相同的代码,便于搜索引擎处理;
  3. 节约服务器资源;

四、HTML5+CSS3技术

  1. 响应国际潮流;
  2. 适应未来趋势;
  3. 安全、良好体验、加载速度快、代码语义化;
  4. 谷歌、百度都建议使用响应式网页设计技术;

缺点:

  1. 开发难度较大;
  2. 不支持低版本浏览器,尤其是IE6/7;
  3. 为适应多种终端,需要更简洁的设计;
  4. 大量会用FLASH的站点不建议采用,苹果系列产品不支持;
  5. 由于采用同样的代码和资源,移动端占用更多带宽;

 究竟该不该选响应式网页设计?

两利相权取其重,两害相权取其轻,响应式网页设计还是可取的,优点这里就不说了,我们来说说如何克服缺点。

  1. 开发方面应该寻找专业网站设计机构进行,可以考虑和屏蔽诸多隐患;
  2. 2014年4月8日微软停止了XP的更新,大多数用户都已升级到win7系统,win7默认安装IE8以上浏览器,由于IE浏览较慢,大多数用户都采用第三方浏览器,而第三方浏览器大多都良好支持响应式网页设计技术。
  3. 设计简洁未尝不是一件好事,现在是知识大爆炸的时代,浏览模式也进入扫描式阅读,用户打开一个网站会用最短的时间扫描自己想要的内容,复杂的设计和堆砌的内容会让用户产生阅读压力,不利于用户转化。
  4. 搜索引擎不能识别FLASH,类似视频现在都有HTML5视频技术所取代。
  5. 移动端占用速度和打开速度方面,随着中国4G时代的来临及国内手机品牌的崛起,4G已接近普及(一、二线城市),用户完全有能力承载响应式网页设计技术带来的良好体验。

综上所述,蓝思格认为响应式技术完全可取,随着技术的不断演进,会有更好技术来完善响应式设计技术,这也是响应式网页设计流行的本因。

扩展阅读: