网页设计

在设计中经常遇到这几个问题:

  1. 想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本。

  2. 想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本。

  3. 很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好?

有没有办法能有效解决这些问题呢?

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的!

或许大家之前会注意到,有很多知名网站都推出了iPhone或针对智能手机的专门网站,比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。 那么问题就来了——我们要为每一个设备做一个单独的网站吗?来让网站在每个设备中得到相应的视觉风格和操作体验? 这样势必就要增加很多的工作量,而且很多还是重复的。 我们在做页面的时候,一般很强调模块化的概念,我们要求一个合格的模块要能够“可扩展、无侵染”,它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配,而不用为每个设备单独做个子网站! 但是,产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样,甚至要像素还原——WTF!不同的浏览器本身的功能、行为和处理方式都不一样,为什么要表现完全一样?!

响应式Web设计的优势:

  • 随着移动设备越来越多,可以提升用户体验。
  • 该设计没有页版本区分,所以SEO的策略保持一致。
  • 开发、维护、运营成本优势,页面只有一个,只是针对不同的分辨率、不同的设备环境进行了一些不同的设计,所以在开发、维护和运营上,相对多个版本,能节约成本。
  • Google也建议优先采用响应式设计,因为无论是什么页版本都是相同的HTML、相同的内容,Google最容易处理
  • 兼容性优势:移动设备新的尺寸层出不穷,定制的版本通常只适用于某些规格的设备,如果新的设备分辨率变化较大,则往往不能兼容,而开发新的版本需要时间,这段时间内的访问就是个问题,但是响应式Web设计可以提前预防这个问题。
  • 操作灵活:响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。

响应式Web设计的趋势:

响应式设计在2012年被提的比较多,但是响应式设计仍然在不断变化,不断创新。比如,新的设备不断出来(iPad Mini),这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意,“让人们忘记设备尺寸”的理念将更快地驱动响应式设计,所以Web设计也将迎来更多的响应式设计元素。

免费轻量级的响应式 CSS 网格系统,让你可以快速创建适应于手机和平板电脑的网站。

以上都是只是介绍

如果想深入学习请参考:http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries


相关文章、网站:

通过CSS3 Media Query实现响应式Web设计

一个国外的响应式web设计介绍网站