近期在学习有关响应式设计的内容,对此做了些整理,部分图片来源于网络。
1、为什么需要响应式web设计
由于目前移动设备的大量使用,以及PC显示器的尺寸逐渐出现较大差别,传统的web页面已经不能满足多种设备的浏览效果,比如传统页面在大浏览器中会有较大的空白区域,而在小浏览器已经移动设备中,不能完全显示页面,或是将页面缩小至适应移动设备尺寸大小,不能正常浏览,对于点击触点也有影响,很多人会选择放大页面,在进行浏览,这样整个页面就需要不停的拖动,给用户的体验不好。
简而言之,有如下几点:
- 各种屏幕尺寸
- 各种操作系统
- 各种访问设备
- 各种需求
2、什么是响应式web设计
一个网站兼容多个终端。同样的代码,通过设备适配,满足不同的访问设备,能展现出不同的效果,始终内容优先,移动设备优先(不引人注目的js和逐渐增强),基于浏览器(特性活设备探测的逐渐增强)。
3、响应式设计的替代方案
开发针对网站的、完全独立的移动版本,开发移动应用APP。但这样做也存在一定的不足:
- 开发独立版本的网页,可以通过设备适配进行跳转,需要维护多个页面,对于首页级别页面适用,不适用于内容页
- 开发移动应用,开发成本高,不利于搜索引擎收录
4、响应式web设计的优势&不足
优势:
- 多终端视觉和操作体验风格统一
- 开发、维护、运营成本低
- 不同设备间的兼容性强
- 操作灵活:响应式设计是针对页面的,可以只对必要的页面部分进行改动
- 对用户友好:用户可以与网站一直保持联系,比如URL不变
- 积累分享:通过单一的URL地址收集所有的社交分享链接
- 最佳化搜索引擎:可以完成移动网站和桌面网站的连接
- 无重定向:包含无用户代理定向
不足:
- 兼容性:低版本浏览器可能存在不兼容问题
- 移动带宽流量:相比移动版定制网站,流量稍大
- 加载需要一定的时间:在响应式设计中,需要下载一些看起来并不必要的HTML、CSS。除此之外,图片并没有根据设备调整到合适大小,而这正式导致加载时间加倍的原因
- 优化搜索引擎:对于响应式web设计,为搜索引擎确定关键字不是一件容易的事。因此相比一般的桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难
- Google排名:如果响应式网站仅基于移动内容,它困难会影响到网站的Google排名。因为Google不支持这样的网站,它不会对你的网站进行索引
- 时间花费:开发响应式网站是一项耗时的工作。如果你计划把一个现有的网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计
- 布局:响应式web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后,响应式web设计策略才能真正实现。
5、响应式与自适应的区别
响应式布局:流体网络
- 网页的布局改变
- 重新排布
- 更好的用户体验
- 测试难度大
自适应布局:固定断点
- 网页的完全缩放
- 实施代价低
- 测试容易
- 设计更加可控
6、移动终端屏显元素
移动设备浏览器内核:Trident(IE)、Gecko(FF)、Presto(opera,已废弃)、Webkit(Safari、chrome)、Blink(google)
移动设备的尺寸:iPhone(980),iPad(1024),Android(分辨率480*800情况下,980),WinPhone(1024)等
移动设备的分辨率:
7、响应式web设计流程
用户研究与设备规格预估
框架原型规划&测试
视觉设计
前端构建
相关推荐
响应式web设计 html css javascript 图灵设计丛书。。
响应式web设计-HTML5和CSS3实战,越来越多的网站开始使用响应式设计,此书可以帮助你更好的学习它。
关于网页布局的设计, HTML 响应式 Web 设计,响应式 Web 设计让你的网页能在所有设备上有好显示。 响应式 Web 设计只使用 HTML 和 CSS。 响应式 Web 设计不是一个程序或Javascript脚本。
Luke Wroblewski,Ethan Marcotte 著;...移动优先的理念是响应式Web设计的基础,而后者又是实现理念的核心技术。只有深刻理解并掌握这两部分内容,才能切实地为互联网用户带来优秀的体验,从而实现业务目标。
[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版
交互设计-响应式Web设计实践 PDF电子书下载 带书签目录 完整版
《响应式Web设计实践》试读干货,响应式——适应浏览器的不同——Web设计实践
《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的HTML和CSS语法,并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。, 《响应式Web图形设计》结构整、轻松易懂,能够...
响应式web设计html5和css3实战 源代码 绝对一手!
移动互联网时代到来了 本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来。 为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术 不仅讨论了媒体查询 流式。
如:“Implementing.Responsive.Design-响应式Web设计实践”。书名经反复校对绝无一字错漏。 (5)每本pdf书默认都是有书签的。来源不限“某星”网站,还有各大网络书店和出版社官网的页码信息。 凡无书签的pdf...
关于响应式Web设计的概念,是从2010年提出来的,但是目前在国内至今很少网站能够适应响应式,该资料为内部培训写的一个关于响应式Web设计培训,结合之前项目组的经验写的,分2季,
响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版
《响应式WEB设计:HTML5和CSS3实践指南》┊Benjamin Lagrone。带书签高清完整PDF,仅供学习参考!
资源名称:响应式Web设计 HTML5和CSS3实战 第2版内容简介:本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3...资源目录:第1章 响应式Web设计基础 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
响应式Web设计 HTML5和CSS3实战第二版,带有目录,非常清晰的版本。
《响应式Web设计实践》干货