HTML5:这么远,那么近 [2]

[续上]

2.面对国内互联网的情况,很多问题不可回避,比如说就浏览器的份额,受众和决策者的认知程度都制约HTML5的采用。

国内互联网有很多坏习惯和现象,这是无法在短期内解决的,只能面对和接受,但这个不影响HTML5的采用。要清晰认识到HTML5的兴起和移动设备有最直接的关系,所以如果要部署到尽可能多的移动端,肯定需要采用HTML5的,而且策略可以从移动端开始着手。

另外对于旧版本浏览器的支持,这个要从你的商业角度出发,不是说非要用HTML5,要是Flash更能满足需求,完全没有必要转化为HTML5,但是在长远来看,我们要看看是否有移植到移动端的需要,考虑长期的运营和更新成本,技术肯定是不断往前的,我们应该抓住那些真正给我们带来价值的那部分用户。

这里分享一下IE10重塑的cnBeta是怎么对不同浏览器进行优化的,我们很明确CB的受众是谁,他们的浏览器肯定不会很低级(结果也证明我们是对的,IE10和Chrome的用户加起来占了70%),我们知道要让iPad和智能手机可以正常使用,而采用Modernnizr和自适应的瀑布流排版让不同分别率的设备都有很好的显示。对于不支持HTML5的浏览器,比如IE8,我们放上了升级页面并屏蔽了整个应用,我们就是需要那些还在使用旧版的用户升级,来享受到更好的效果。

3.利用HTML5开发Web App貌似很难提供一个有效的盈利方式,Web App根本没有可以让用户去下载和查找应用的App Store。

这里涉及到两个问题,一个是外部环境,ditribution问题;另外一个是内部问题,App的盈利机制。

Venturebeat的Ben Savage就说HTML5不具备一个类似App Store的地方让用户去发现应用,用户发现不了应用,盈利也无从谈起。而Mozilla的rpiovesan则说,用户怎么找到一个网站就怎么找到一个Web App。我认为后者的观点目前是有问题的,SEO不能很好地解决用户寻找Web App的问题,除非搜索引擎专门为web app进行索引和归类,或者又搜索引擎牵头制定一套Meta data的规范,说明Web app的类型,行业,开发者,简介等信息,并有专门的搜索页面显示,相信未来会有的。目前有一些第三方的网站在做这个事情,比如Listio,还有Bestvendor,但是影响力很有限。

目前,Chrome有个App Store,算是一个比较好的平台,Mozilla貌似也在弄个Marketplace,rpiovesan在他的文章中也指出everything.me这样的平台也在致力于帮助用户更方便去发掘web app。国内也有不少“web app”中心,各个也都在平台,百度不更是要赏150万来鼓励开发者么?不过我认为,很多都是把戏,没有什么高度的指导,强大的工具,方便的开发环境和设施的实际支持。

这里不得不说的另外一个更深层次的问题是Web app的发展或许会在一定程度上影响到目前巨头们的移动OS的应用利益,虽然目前来看还远远构不成威胁。

上述所说的都是外部环境,只能慢慢等待环境成熟,现在说说Web App的盈利机制。你肯定想到了广告,这个是肯定的,但未免会太微小。直接让用户付费来使用根本不现实,这是一个free web,我觉得有效的机制是订阅制(Subscription),其实有点类似InApp Purchase,目前New York TimesFinantial Times这两资讯媒体就运作的比较理想,不过他们是有精品内容作为保证的,这个或者不太适合国内用户,但也可考虑订阅开启功能的方式,很多Project management的web app还有网盘等都采用这样的方式。

[待续 … ]

HTML5: 这么远,那么近 [1]

2012年过去了,这一年业界对HTML5有很多讨论,有人说它这一年的表现没有什么建树,比如Venturebeats的文章“Why HTML5 Provided More Tricks Than Treats in 2012“, 甚至Facebook的CEO Zuckerberg都说“Our Biggest Mistake Was Betting Too Much On HTML5” ,这对HTML5来说不能不说是一个打击。当然支持的声音也不小,针对Venturebeats的文章,Mozilla的一位仁兄发表了他的还击,而对于扎克伯克对HTML5的质疑,HTML5 Web App框架Sencha也做了一个表现还不错的facebook web app: Fastbook来证明HTML5的良好表现。

恰恰是这样的争论,在我看来,印证了HTML5目前的状况:Not ready yet,but on the way. 这里要对Ready来做一个说明,并不是不ready的东西就不能用,主要看用在哪里和怎么用。

我们谈HTML5,不仅仅是它本身和一系列API,还要涉及CSS3和JavaScript,他们组成一个系统,那么要成为一个严谨的完整的开发技术和平台,这个系统是非常不足的。HTML5作为一个未完全被标准化的标记语言,本身还有很多定义和使用对于开发者来说是模糊的,CSS3对于效果的呈现也有限,而JavaScript虽然也是面对对象,但却不是拥有严谨语意结构的语言,对于大型复杂的app来说,有很大局限性;而不同平台在支持和性能上的差异在很多开发者眼里更是一道鸿沟;另外,没有一个统一和整合的开发环境也是一个劣势,这些都是Not Ready的主要原因。HTML5要成为未来统一的App开发基础,上述的各个方面都需要改进,但貌似很难依靠开源来做,因为要整合就需要强大的控制力和推广,这对于一个人人都可以用的技术来说仿佛是一个天然的不足。

不过我不认为这些就扼杀了HTML5成为未来霸主的命运。这又回到了我说的问题:用在哪和怎么用。下面我对一些列问题或观点来讨论。

1.HTML5跨平台并不是那么理想,甚至是痛苦的,那么多不同的设备和浏览器,兼容性和性能都很闹心,不是么?

HTML5,CSS3和JS是现在唯一一个跨平台支持的技术,无论是构建网站还是Web App都能高效地发布到各个平台。HTML5确实做不到Wirte once, run everywhere, 不过只要肯去优化,整个跨平台的开发还是很高效的,这是我做IE10优化版的cnBeta的体会。整个项目花的实际时间大约一个月(一个设计,一个项目经理,两名开发),从设计到上线。我们对于不同平台的优化花了不少时间,大约占整个项目的2/5. 另外规划和设计2/5,主体开发1/5. 但想想,我们在各个系统浏览器,iOS和Android上都可以运行,这个对于需要覆盖尽可能多的人群的最佳选择。必须要指出的是,跨平台更多的需要前期的思考和计划,很多人浪费了巨大的时间在后期的兼容性上其实也和前期没有计划好有关。或者你听说过Responsive design,所谓的自适应或响应式设计,就是需要很好的planning,让同一套网页为desktop和mobile设备提供不同的呈现,这有时候需要在呈现内容和方式上有所取舍。

谈到HTML5,不能不谈各大浏览器的支持,也是大家爱吐槽的点。不同浏览器无论是对HTML5 API的支持还是性能都存在差异,特别是旧版浏览器根本就不支持。这个问题牵涉很广,主要是国内互联网的问题,这里暂且不谈,抛开陈旧的浏览器不说,目前主流的最新版本浏览器,包括IE10对HTML5支持都很好,完全没有必要担心,不同浏览器看到有差异,只要不是错乱,就让这些差异存在好了,我觉得这也是Responsive设计的精髓之一。而对于旧版浏览器,我建议的策略是设立简化版或者提供升级提示页,IE10重塑的cnBeta就是这么做的。

关于性能问题,更大差异在于移动端和PC端的表现。这确实是一个大问题,除非为移动设备专门写一个,但这似乎又多了一套开发,失去了跨平台的意义。对于这个问题,除了我们自己对代码优化外,就要依靠硬件的不断升级了。或者换一个思路,先思考移动端,然后扩展到PC,这个本人没有试过,没有经验可谈。

[待续 …]

 

Indesit Anual Report

看过很多公司的年报都是一本印刷出来的,厚厚的,字密密麻麻的跟电话簿差不多的东西,而Indesit这个公司的年报却不一般,以一个精美的网页来展现。

网页顶部是公司主要Highlight的几个点,用漂亮的大图Slideshow形式展示,鼠标向下滚动,公司的财务情况,销售数字趋势等就渐进地出现,大大的数字非常突出,还有简化的曲线图,饼图等,让人一目了然。

其实无论多么复杂的内容,即便是一家公司的年报也是可以经过认真取舍突出最关键的数据的,而且很多受众也只能在很短的时间内接受有限的信息,这个年报无疑是很成功的。

相信以后还会有更多这样HTML形式的Infographics出现,因为这样可以让人在不同的设备随时随地看到信息,起码Indesit 的股东们不用捧着一本厚厚的年报看到眼花,拿出他们的iPhone就清晰地了解情况了。

链接:http://annualreport11.indesitcompany.com/

 

Weight and Things

一个网站除了酷炫的特效,更多时候有好的内容更让人印象深刻,而Weight and things就是这么一个网站。

首页并没有透露很多内容,但是视觉上就很吸引人,大大的输入框醒目地提醒你去输入你的体重,输入和loading过后,丰富有趣的内容就飞进来了。它生动地用有趣的类比数据来重新定义你的体重,比如95KG的体重,相当于633只香蕉,如果你是一只霸王龙,你的脑容量等比例却只有可怜的7g,95KG也相当于136部iPad的重量,当然还有很多很有趣的数据,甚至同一个体重在输入玩一次都会出现不一样的结果。当你一步步去了解这些好玩的数字后,最后发现原来是Withings的Wifi体重计的宣传,品牌结合和感觉都非常自然,不但让用户直观了解到体重的趣味知识,也让人有冲动去了解这款产品了。

这个网站不是用HTML5实现的,仅仅是html,但是丰富有趣的内容却让这个网站成为一个非常特别而有效的营销案例。

链接:http://www.weightandthings.com/

Spiderman Game

新的Spider man电影快要上映了,而随之而来的游戏大作当然也不会放过这个机会,这个网站就是The Amazing Spiderman游戏的介绍网站,HTML5的又一个经典商业推广体验。

打开网站首先是一个可以左右滑动,进行panning的大大的蜘蛛侠城市背景,也是整个网站主要的导航,用户通过这里的按钮可以不断去探索网站的内容。

除了Parallax效果,整站还运用了大量的CSS3变形效果,里面还嵌入了大量的视频和音频都运用了HTML5的video和audio标签,并没有插件。

链接:http://www.theamazingspidermangame.com/

Penthouse Project

一家设计公司的网站,Penthouse Project特别的地方在于整个网站的内容呈现方式就像是一张张PPT播放一样,让人一步步去了解。

一般的网站都把所有要说的事情摆出来,而这个网站则需要用户去翻阅,这样其实需要在文案和交互上花很大功夫,让用户既不觉得麻烦,最好还要有趣,另外需要阅读的文字也尽量少而且切中要害,这个道理很PPT非常类似,而这个网站做到了。

用户访问网站顶部提示可以通过上下左右的方向键来控制,这个PPT也是一样的,而随着操作,内容一步步呈现,过渡动画风常丰富,3D,飞入淡出,很多变化都是JS控制的CSS3变形,使用到的JS应该就是类似impress.js的代码。

链接:http://thepenthouseproject.com/

Rover Evoque

这里分享一下The Range Rover Evoque 特别版的介绍网站,这款全球200辆的Range Rover是Land Rover设计团队和维多利亚 贝克汉姆(Victoria Beckham,现在也是Fashion designer)合作产生的,这个网站全方位介绍了这款车的造工,设计细节和考量,灵感来源等等。

技术上也运用了普遍的parallax效果,特别需要指出的是滑动到第五屏的效果,Parallax改为横向,局部放大并滑过背景原图,非常有创意。

链接:https://victoriabeckham.landrover.com/INT

Monarchy

I’ve always held to the belief that the practice of creating compelling graphic design occurs not by employing the principals of a democracy, but rather, that of a monarchy.

— Thomas Vasquez

Nubilous

iOS上已经不怎么缺少天气的应用了,不过这个名字叫Nubilous的应用还是很值得推荐,因为够简单,界面够精致漂亮。

虽然目前要1.99美金,但个人感觉整个界面要比苹果官方的App要优秀,也可能是因为审美疲劳吧,不过真的很喜欢那个圆形的幽幽发着蓝光的天气icon,很有复古的感觉。应用会自动识别你所在的城市来显示当地天气,你也可以添加更多的城市,而点击每天的天气会下拉显示这一天早上,中午,下午和晚上四个时段的情况,点击今天的就会根据你现在的时间来显示今天余下的时间段的情况,很贴心。

 

链接:http://itunes.apple.com/us/app/nubilous/id513379153?mt=8

 

Glamour.biz

glamour.biz这个网站最近到处收获CSS奖项,除了精美的插画元素以外,还有比较特别的导航。

顶部导航是一个大的下拉菜单形式,点击后对应内容的自上往下滑动出来,而左上角的配图就是上下交替更换,而且压在导航最上面,这样的层次感让网站添色不少。

网站配色也是值得称赞的地方,那个红橙中略带粉色的主色#让整体感觉很新鲜和有活力。

链接:http://www.glamour.biz/