响应式设计(Response Web Design)浅谈

简介: 响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计? Web发展迅速,各种应用和服务层出不穷,现在打开电脑,可能使用最多的程序应该是浏览器了,访问不同的网站,可以满足人们购物,社交,获取新闻资讯,娱乐,等等需求。

响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计?

Web发展迅速,各种应用和服务层出不穷,现在打开电脑,可能使用最多的程序应该是浏览器了,访问不同的网站,可以满足人们购物,社交,获取新闻资讯,娱乐,等等需求。然而近几年内,移动设备快速崛起,移动互联网慢慢进入人们的生活,预计未来5年内移动设备的使用度会超过桌面计算机。所以需要您的网站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验,同时在小尺寸屏幕上也应该可以提供一致的用户体验。使得用户可以在桌面大屏幕上和移动小屏幕上平滑的切换使用,同时没有任何的不适应感觉。

clip_image002

(移动设备趋势:http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/)

要网站在桌面大尺寸屏幕上和移动小尺寸屏幕上提供一致的用户体验,最直接的方法就是为每种设备及分辨率制作一个网站或者特定的页面,使得移动用户在这些页面里取得平滑友好的用户体验。但是到底有多少不同的移动设备和屏幕分辨率呢?这种方法需要投入多少成本能?

clip_image003

(早先的数据:2005至2008年市场中的400余种移动设备的统计情况

http://www.quirksmode.org/mobile/mobilemarket.html)

这份统计结果已经比较早了,随着时间的推移,又有很多移动设备投入市场,为每种设备及分辨率制作一个网站或者特定的页面,这应该是比较大的工作量,是比较耗时耗费资源的。是否可以只做一个网站一套页面,既满足桌面大尺寸屏幕,同时也可以满足各种不同移动设备的小尺寸屏幕。

因为有了这个问题,才有了响应式Web设计这种方案:一个网站能够兼容多种移动设备屏幕尺寸,而不是为每种屏幕尺寸做一个特定的版本。这个概念可以说是为移动互联网而生的。国外已经有一些这样的应用例子了,如: http://foodsense.is/, 此网站在Android 上的效果:

clip_image004

不采用响应式Web设计 news.sina.com.cn 在Android上的效果,需要用双指进行缩放才能友好浏览:

clip_image005

foodsense.is 在其它设备分辨率下的情况:

clip_image007

(iPad1/2 1024X768 横向)

clip_image009

(iPad1/2 1024X768 纵向)

clip_image010

(iPhone4 320X480 横向)

clip_image011

(iPhone4 320X480 纵向)

clip_image012

(ASUS Galaxy 7 480X800 纵向)

foodsense.is 可以在各种设备分辨率下,根据分辨率的不同做出响应,对菜单和图片进行重新布局,来满足显示的需要。这种技术就是响应式Web设计,这个概念是Ethan Marcotte在A List Apart发表的一篇文章"Responsive Web Design" (http://www.alistapart.com/articles/responsive-web-design/) 中援引响应式建筑而得名的: “响应式建筑(responsive architecture),物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构,还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产"智能玻璃":当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。” Web借由建筑上这个概念,当设备分辨率发生变化时,根据设备分辨率,调整菜单,图片,文字,等其它页面DOM的状态和布局,使得页面仍然可以给用户提供友好的使用体验。

 

未完待续……

相关文章
|
前端开发 UED 开发者
探索现代Web开发中的响应式设计
【8月更文挑战第29天】在数字时代,Web页面不再是固定大小的画布。随着移动设备的兴起,响应式设计变得至关重要。本文将引导你了解如何利用CSS媒体查询、Flexbox布局以及网格系统等工具来构建一个灵活适应不同屏幕尺寸的网页。我们将从基础出发,逐步深入,确保即使是初学者也能跟上节奏。让我们一起打造美观、实用且适应未来的Web界面吧!
|
11月前
|
前端开发 开发者 UED
移动优先:响应式设计在现代Web开发中的实践策略
【10月更文挑战第29天】在现代Web开发中,响应式设计已成为不可或缺的实践策略,使网站能适应各种设备和屏幕尺寸。本文介绍了移动优先的设计理念,对比了移动优先与桌面优先的策略,探讨了流式布局与固定布局的区别,详细讲解了CSS媒体查询的使用方法,并强调了触摸和手势支持及性能优化的重要性。
212 1
|
11月前
|
前端开发 JavaScript 开发者
构建响应式设计的现代Web应用:实用技巧与工具
【10月更文挑战第24天】本文介绍了构建响应式Web应用的实用技巧和工具,涵盖流体网格布局、弹性图片、CSS媒体查询、CSS Grid和Flexbox、响应式导航菜单、图片和字体的响应式处理,以及测试和调试工具。掌握这些技能将帮助开发者提升用户体验和项目适应性。
|
12月前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
140 3
|
前端开发 开发者 UED
探索现代Web开发中的响应式设计原则
【9月更文挑战第21天】 在数字化时代,Web页面的响应式设计已成为开发者必备的技能之一。本文将通过浅显易懂的语言和生动的比喻,带你了解响应式设计的精髓,并结合代码示例,展示如何在实际项目中运用这些原则。我们将从基础出发,逐步深入,确保你能够掌握并应用这些知识,让你的网页在不同设备上都能展现出最佳的用户体验。
134 5
|
缓存 前端开发 Java
打造未来兼容的Web应用:Apache Wicket引领响应式设计的热潮
【9月更文挑战第4天】在软件开发领域,构建响应式Web应用至关重要。Apache Wicket作为一个强大的Java框架,支持响应式设计,确保应用在不同设备上均有出色体验。本文通过示例代码介绍使用Wicket的最佳实践,涵盖页面与组件模型、CSS媒体查询及自定义标记处理器的应用。同时,文章强调了优化加载时间、增强交互性和提升可访问性的重要性,帮助开发者打造高性能且美观的Web应用。
155 3
|
12月前
|
前端开发 JavaScript UED
探索现代Web开发中的响应式设计原则与实践
【10月更文挑战第9天】在移动互联网的浪潮中,响应式设计已成为Web开发的必备技能。本文旨在深入解析响应式设计的核心原则,并结合实战案例,展示如何运用这些原则构建灵活、高效的Web应用界面。文章不仅涵盖理论探讨,更提供具体代码示例,帮助读者从概念到实现全面掌握响应式设计。
137 0
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
187 0
|
前端开发 JavaScript 开发者
革命性的飞跃:Apache Wicket新特性大揭秘,让你的Web开发之旅如虎添翼!
【8月更文挑战第31天】Apache Wicket作为一个成熟的Java Web框架,持续进化以适应现代Web开发需求。本文介绍Wicket的最新特性,包括响应式布局支持、组件化与模块化开发、异步请求处理、增强的表形处理以及与现代JavaScript框架的集成。通过具体代码示例展示如何利用这些特性构建高效、灵活且用户友好的Web应用程序。
181 0
|
开发框架 前端开发 JavaScript
构建响应式设计超赞!Blazor 与 Bootstrap 完美结合,开启高效 Web 开发新潮流!
【8月更文挑战第31天】在当前的网络环境中,响应式设计是打造优质用户体验的核心。为满足用户在不同设备上的需求,Blazor结合Bootstrap成为构建响应式设计的高效方案。Blazor作为C#和 .NET技术栈下的Web开发框架,实现了服务端与客户端同语言开发,提升了开发效率与代码维护性。而Bootstrap作为一个流行的前端框架,提供了丰富的CSS和JavaScript组件,便于快速搭建美观且响应式的用户界面。结合两者的优点,可以轻松实现复杂Web应用的高效开发。
400 0

热门文章

最新文章