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

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

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

  比如下图是一个热门微信颁发出来的“微门户”页面,其实和早年的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移动设备响应式界面:

  

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

时间: 2024-09-21 05:58:31

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

UI设计:触摸优先设计、响应式设计、移动优先设计

文章描述:UI应遵循的三大网站设计原则. 触摸优先设计.响应式设计.移动优先设计是UI设计师设计网站应遵循的三大原则,以使网站最大范围地适应各种设备.外文<Designing The Well-Tempered Web>中详细阐述了这三大原则.CSDN对该文进行了编译,内容如下: 随着技术的进化,Web设计的艺术和技巧也在不断进化.新的技术创造了新的挑战,而新的挑战要求新的解决方案.我们通常工作在未知领域,需要给出全新的解决方案. 考虑到有限的Web设计历史,我们必须超越当前的领域去回答更有挑

如何提升移动站点的响应式设计?

现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤.作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. 随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少.很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性. 我们必须承认,移动设备已经彻底改变了我们使用web的方式.2013年开展的一项调查显示,多达百分之73的用户会通过移动设备浏览网络,因

为你的响应式设计提速

  响应式设计是最近的流行词,能够打造多屏幕一致体验. 现在几乎每个人都喜欢响应式设计,而且可以是没有原因的支持,这跟Flash刚出现那会火热的局面有点相似.然而,响应式设计带来了表现力的问题,这需要通过调整图像.压缩图像.改变图像大小等手段来解决. 然而,为了提高表现力,有的时候不得不增大文件的尺寸.浏览体验需要快速的载入,本文将讲述一些为响应式设计提速的方法. 为什么响应式设计载入那么慢? 在所有的设备上,响应式设计载入的HTML元素都相同.就算你的网站专供桌面或者专供平板,在其他设备上,载

bootstrap响应式网页设计的9条基本原则!

bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站.因此,我们需要弄清楚bootstrap响应式网页设计的一些基本原则,接受流体网页,而不是与之相抗.为了让它保持简单,我们将着眼于布局(是的,响应式比它更复杂,如果你想了解更多,这是一个很好的开端.) 响应式 vs 自适应网页设计 它

避免3种响应式设计灾祸

  设计响应式网页时也会遇到一些问题,菜单.图片.内容排布如果处理不善,会破坏网站的视觉效果与内容层次关系. 响应式设计方法对开发者非常有用,因为它使我们的内容在各种设备上广为传播.不用保留几个独立版本的网站,也可以摒除诸如缩放和流式布局这些方法的弊端. 本文重点讨论设计师遇到最多的3个响应式设计问题,也会提供一些规避错误的策略. 缩放.流式布局与响应式 这些术语容易造成混淆,设计师常常错误地交替互用.实际上,每个都是布局技巧的显著进化过程,像技术演进那样逐一显现. 缩放布局,旨在相对缩放每一个

网站设计:复杂产品的响应式设计流程

都说2013年将是响应式设计爆发的一年.一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘"玩客"项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式.中间积累了一些经验也踩了不少坑,于是就有了这个响应式设计三部曲,此系列文章包含理念篇.知识篇和流程篇. 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪

设计师不应该错过的响应式设计框架

  当下最火热的框架就是Bootstrap和 Foundation了. 随着响应式设计框架越来越火,一个巨大的争议出现了:为什么一个专业的设计师还需要用这些框架呢? 许多人宣称响应式框架是可怕的,因为他们根本不懂一点点html和css的知识.下面是另一些具有标志性的反对使用框架的意见: 设计师可以写自己的框架,如果他们懂得一点点html和css的知识的话就更应该自己写. 基于框架的网站加载非常慢. 基于框架的网站看起来大同小异. 伴随多余的div标签,5000+行的css后者更多的javascr

请大家指导下我html5响应式设计可好

问题描述 请大家指导下我html5响应式设计可好 现在的技术就是:使用百分比设定标签宽度,em设字体,然后通过媒体查询判断不同屏幕尺寸下的标签具体变化,还有什么阻止内容溢出的max-width:可以设计不同尺寸时加载不同的图片: 但我查资料这些都是13年大家都会的技术了. 请问:最近有什么关于响应式的新技术吗?我没查到什么新技术的资料啊 解决方案 最新出来的很多ui 都是基于H5 你可以参考下bootstrap ZUI ace等一些用 网格布局的前端UI框架. 解决方案二: 推荐使用bootst

使用前端框架Foundation 4简化响应式设计开发

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Foundation是一套使用广泛的前端开发套件,可以帮助你快速的网站.最近ZURB发布了一个新版本的Foundation 4前端框架,能够有效的帮助你快速的开发响应式的网站. 和另外一个套知名的前端框架BootStrap类似,Foundation同样也提供了一套HTML/CSS的模板,可以帮助你快速的搭建网站基础,包括:布局,组件,字体,表