响应式网站设计须知


响应式网页设计是网页设计中一个比较新的术语,它2010年5月才出现。

对于响应式设计是否只会昙花一现,目前尚有争议。只有时间才能告诉你这一问题的答案,但有一点肯定,响应式设计努力提供尽可能舒适的用户体验。响应式设计提供了一种页面设计的哲学理念,旨在为用户提供视觉体验更好的网页,如轻松的导航和阅读,以及尽可能少地改变浏览器的尺寸,或者划动及转动浏览器。所有这些都要应用于不同的设备,如桌面电脑或智能手机。

网页设计方法仍处于发展的初期,你可能仍然不清楚响应式设计究竟是什么东西。它究竟是在跨平台无缝显示内容,还是帮助企业创建更有吸引力的网站,通过提供更好的用户体验来增加销售呢?

2013年被称为响应式设计年。虽然一切未有定论,但响应式设计的一些基本属性是不会改变的。下面是响应式网页设计的一些重要特征:


响应式设计与移动设计不同

更多

响应式网页设计与自适应网页设计,哪种方法更好?


你也许听人们提到过我们现在生活在后PC世界。这对网站开发公司意味着,30%~50%的流量来自移动设备,在不久的将来,很少有人会使用桌面电脑或笔记本电脑上网。

我们已进入互联网由自适应网页设计和响应式网页设计统治的新纪元。事实上,W3C已将这一趋势描述为“单一网站设计方法”。现在,大部分网站开发人员都采用这种方法:

  • 使网站能够在平板电脑与智能手机上正常工作
  • 使网站适应未来的发展,不管未来的设备有怎样的显示屏尺寸及分辨率,网站都能正常无误地工作

网站开发公司采用的不同各类的设计方法主要包括服务器侧的自适应设计,以及客户端侧的自适应设计和响应式设计。在新建网站时,网页开发者需要在这三种方法中任选一种。


服务器侧自适应方法

优势:专业网页开发公司通过定制用户代理检测或通过服务器侧插件,可以实现服务器侧这种方法。这种方法包括为不同的设备提供独特的模板,允许更多的定制化。它将设备检测逻辑保留在服务器上,使移动网页可以快速加载。

更多

自适应网页设计与响应式网页设计有何区别?


自适应网页设计与响应式网页设计,这两个概念让人有点困惑。

响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询)。

自适应网页设计所包含的内容远不止流动布局。实际上它与“Progressive Enhancement(逐渐增强)”这一概念相同,就是向尽可能多的用户提供尽可能好的体验。自适应设计不应与自适应布局混为一谈,它们是完全不是的概念。

自适应布局是由多种固定宽度结合起来的一种布局。当固定宽度与流动宽度结合起来时,自适应布局就是一种响应式设计,而不仅仅是它的一种替代方法。

更多

响应式网页设计:应避免的4个错误


就在不久的过去,差不多所有人都还利用桌面电脑上网。2006年,两种屏幕尺寸占了所有上网应用的77%。

现在八种屏幕尺寸占了上网应用的77%。没有哪一种尺寸超过20%的市场份额。

在当今的多屏幕世界,智能手机和平板电脑用户期望获得桌面电脑用户一样丰富及良好的上网体验,解决这一问题的方法就是采用响应式设计。响应式设计已成为网页设计师和开发者喜欢采用的技术,并迅速成为建设新网站的主导方法。响应式设计工作流是为不同屏幕尺寸的设备度身量造上网体验的最有效的方法之一。

响应式设计虽然能够解决不同屏幕尺寸布局的问题,但它本身还是存在一些为许多设计师所忽略的问题。

下面是响应式网页设计中经常碰到的4个问题。


错误#1:响应式网站使用过多资源

对15个顶级电子商务供应商的响应式网站的分析显示,这些网站的主页平均使用87.2种资源,包含1.9MB的数据。这些数据如此之高,是因为响应式网页必须适应所有不同的设备及屏幕尺寸。当一个响应网网站需要载入87种不同的资源时,会发生什么呢?速度降低。

更多

让70个优秀的响应式网站激发你灵感

过去3年中,响应式网页设计已变得越来越普及。要设计一个适应任何设备,从智能手机到智能TV,响应式网页设计现在被认为是最好的方法之一。

 

我们选取了70个漂亮的响应式网站,它们分属不同领域,希望这些网站能够激发你的灵感。

 

左边显示的是平板电脑的屏幕截图,右边的则是智能手机的屏幕截图。

 

点击下面的链接,你可以看到这些网站的图片:

 

更多

为移动而设计:响应式设计、移动站点及移动应用


哪种网页设计方法最适合你的移动用户

IDC预测,到2014年,智能手机的销量将是PC的两倍。因此,各个公司都争先恐后地实现移动网站方案,使他们的用户可以方便地在移动设备上访问公司站点。

如果你的目标仅仅是提供“足够好的”移动体验,那你可能会逐渐丢失你的业务。这不是关于“如何使我的网站在智能手机上工作”,而是“如何在智能手机上促进我的业务”。

向移动设备用户提供信息及交互的方法主要有三种:响应式(和自适应)网站设计,移动网站,以及移动应用。至于哪种方法最适合你的业务,取决于你的具体应用,你的用户的习惯,当然,还有你的预算。

开发人员、设计人员、以及其它移动专家可帮助你决定哪种方法最适合你。


响应式网页设计

更多

响应式/自适应网页设计的现状

响应式/自适应网页设计已经出现好几年了,它是2012年的热点话题。很多名人,如Brad Frost和Luke Wroblewski,都有很多相关经验,他们为这一技术的进步做出了贡献。但是,要做的事还很多。

 

在这篇文章中,我们会看一看哪些是目前已经实现的技术,哪些是目前尚未标准化但将来会应用的技术(如CSS Level 4t HTML5 APIS),以及哪些需要改进。这篇文章不会涵盖所有方面,也不会深入讨论每一种技术,但文中提供了大量的链接和知识,如果你有兴趣,可以自己进一步研究。

 

下面是全文链接:

http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-we...

更多

你准备好了吗?适用于移动设备的响应式/自适应网页设计

随着消费者越来越多地使用平板电脑和智能手机,移动设备正迅速成为消费者访问互联网的主要介质。
 

由于人们的习惯在改变,你的网站也应做出相应变化。商业网站的所有者应使他们的网站适应这些更新、更小的设备,而非开发并维护一个个独立的站点。

 

理解响应式/自适应网页设计

 

什么是“响应式/自适应网页设计”? 响应式/自适应网页设计是设计出的网站能够适应各种不同类型设备,包括桌面电脑、移动电话、及平板电脑等。一个响应式/自适应网站在任何设备上、在任何情况下都容易阅易读并导航。响应式/自适应网站可极大地改善用户体验,提高流量,增加销售,从而保证信誉。

 

更多
Subscribe to RSS - 博客