文档章节

Bootstrap响应式设计在中国-关于移动网站和卓越网站体验的那些事儿

华夏互联若梦
 华夏互联若梦
发布于 2014/04/11 18:23
字数 1621
阅读 13
收藏 0

原文来源: http://www.hx008.com/corp/media/3438.html

  为移动而生-更窄的网页并不是移动网页

  提供完整的用户体验,打通移动端与客户端的区隔,这在中国互联网业界已经没有什么好争辩的了,然而天国总是有天国的实情,比如人们对于移动网站的理解,从早年的“短信网址”笑料收场,到现在的微信上诸多“伪微门户”泛滥,离真实的移动用户体验相差很远。

  比如下图是一个热门微信颁发出来的“微门户”页面,其实和早年的wap网站制作一样,只不过是做了一个“更窄”的网页,并没有理解移动设备的真正需求。

  

  在移动设备上,人们使用手指触摸来取代鼠标点击,并不能使用“二指琴魔”来不断放大设备。

  不同的媒体又有不同的介质,比如PAD和手机,虽然同属移动设备,又有不同。

  再者,在苹果设备上,横屏与竖屏有不同的媒体查询规则。

  如何让图片在移动设备是同比放大,而不是被屏幕遮蔽?

  这时只有祭出Bootstrap这面大旗,方能迎刃而解。

  巨头的精湛之作-匠人打造、为匠人用

  很少有一个web框架为了适应移动互联网时代而诞生的。

  而Bootstrap恰恰是这样的一个作品,虽然目前国内开发者接触的人群不多,但一场流式布局与响应式体验的变革将由其引领。

  检验一个网站是否支持响应式标准其实很简单,就是将网友窄,如果能自适应屏幕就是符合这一标准,目标大多数网站不支持此标准,而越来越多的名企和卓越门户已经引入这一标准。

  Bootstrap的娘家Twitter(推特),可谓是当今移动互联网的开山鼻祖,开创了微博这一个新网络载体,大陆网民所能体验到的新浪微博、腾讯微博无不是其追随者。

  早期Twitter提供的内部开发工具缺乏一些精致和平易近人的设计,为了应对复杂的设计需求,Twitter前端工程师在开发风站时喜欢采用自己所熟悉的技术,这就了网站维护困难、可扩展性不强、开发成本等问题。

  2010年6月,为了提高内部协调性和工作效率,Twitter公司的几个前端开发人员自发成立了一个兴趣小组,期望设计一个伟大的作品,开发一个开放源码的前端工具包,旨在帮助设计师和开发人员快速、高效的构建出卓越的网页,这就是Bootstrap。

  最终,Bootstrap在Twitter公司迅速成长,且被业界广泛采用(美国NASN、Breaking  News、WordPress、Drupal等均导入了Bootstrap),不仅包括了基本样式,而且有了更为优雅和持久的前端设计版式,目前这个版本为3.0。

  可以毫不客气的说,看到Twitter公司的白鸽图标,就可以看到Bootstrap的优雅美丽,这正是无数个WEB开发者朝思夜想和渴求的!

  下图:印象笔记和HTC官网的响应式体验

  

  开发者利器-提供网站开发效率的首选

  还在用*{margin:0px;padding:0px}这样的全局定义?

  还在用图片作为图标?

  还在用自定义的媒体查询来定义各个界面的宽度?

  这已经远远不够。

  一个优秀的网站应该除了坚强的内核,还应该包括:

  l 跨设备、跨浏览器

  l 支持响应式设计

  l 良好的栅格系统

  l 优秀的字体样式

  l 多媒体展示

  l 良好的导航和表单

  l 支持hmtl5

  l 以及更多

  BootStrap在中国-逐浪CMS首倡导入

  中国软件业不缺乏优秀的设计者和思想家,但缺乏优秀的行动家。

  全世界人民沉浸在元旦圣诞的节日快乐中,逐浪CMS的人可能是从前一天开始加班到元旦中午12点,为了赶在新年发布一个产品。

  全国人民都在看两会,逐浪软件的架构师们可能奔波在雪域高原和南海之滨,用脚去丈量祖国母亲的每一寸胸膛。

  早在2013年中旬,通过与中科院、阿里云、中化集团、搜狐软件团队、中电集团等多家企业的合作中,迫切认识到提升整体CMS的应用和web体验的重要性,先后推出了微信接口、MIS系统、云盘、二维码、设备自适配等技术,并成功于2014年的第一季度全面导入BootStarp框架,全面向国内用户开放下载。

  逐浪CMS目前中国首家导入Bootstrap的网站内容内核系统厂商,这源于我们以客户为本的服务品质、以质量为先的研发导向、以技术为本的企业思维。

  目前逐浪CMS官网和测试平台均已上线,可以自由支持各类移动体验,同时点击屏幕上的电话,能自动启动手机上的电话拔号和发送短讯等功能。

  目前逐浪CMS官网已经开放全面支持Bootstrap的CMS内核系统,用改革开放的精神来说:我们既要走得出去,也要请得进来。

  期待中国互联网的开放进取新时代的到来!

  下图逐浪CMS移动设备响应式界面:

  

  下图:逐浪软件体验门户界面

原文来源: http://www.hx008.com/corp/media/3438.html

© 著作权归作者所有

华夏互联若梦
粉丝 0
博文 28
码字总数 40078
作品 0
南昌
私信 提问
Web响应式设计中应避免的八大误区

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本。但是,要做最大限度相应的网页设计,有些误区你应当避免。...

kouxunli1
2014/07/30
146
0
Bootstrap2和3的区别与选择

相信大家对Bootstrap都已经不陌生了,这个在网站建设领域赫赫有名的前端开发框架可谓是受到了全球前端工程师的推崇。 不过自从推出了Bootstrap3版本以来,国内很多朋友都在Boostrap2和3的选择...

6pker
2014/12/27
677
0
手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。 解决问题 跨设备的网页...

snowing1990
2016/03/11
283
0
2017 年 20 个最佳的极简 CSS 框架

无论是在产品设计,还是在研发上,极简主义的应用简直无处不在。如果你和我一样热衷极简主义,那么本文分享的内容,一定是你的“菜”。在文章中,我们将与大家分享 20 个最佳的极简 CSS 框架...

IT程序狮
2017/07/08
0
0
你应该避开的 3 个响应式 Web 设计的陷阱

设计师们无法回避移动设备的大势所趋,当然在网站设计上有大量新的概念来迎合移动设备。但是单独的网站,无法在移动设备层出不穷的大潮中站稳脚跟。无论是在个人电脑、笔记本、智能手机、平板...

oschina
2013/05/29
4.8K
5

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
6
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
17
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部