《HTML5触摸界面设计与开发》——第 2 章 创建一个简单的内容型网站2.1 选择一个观念:移动优先或置后-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5触摸界面设计与开发》——第 2 章 创建一个简单的内容型网站2.1 选择一个观念:移动优先或置后

简介:

本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章,第2.1节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第 2 章 创建一个简单的内容型网站

内容型网站组成了Internet的很大一部分。毕竟,网站就是为了浏览文本而建立的,人们在网上做的最多的事情就是阅读文字。内容型网站在触摸设备上保持良好的体验固然很重要,但实际上它们还不够好。 在本章中,我们将为客户—Awesome鸟类基金会,建立一个关于加州鸟类的网站。鉴于人们普遍无法在家中观赏鸟类,我们网站目标就是通过移动设备和桌面电脑,使之成为可能。客户想让数以百万计的网站文章被链接到Twitter上,用户通过单击即可阅读关于鸟类的精彩文章。我们不希望读者在网站加载完成之前流失,必须争分夺秒。在对服务器端进行一切优化之后,还需要网页能尽快加载。

显然,网站在高延迟的3G网络下的加载速度会比在办公室的100MB的宽带网络下慢。但是,一旦开始接收数据,就必须立刻吸引住用户。我们将从基本要素开始制作这个网站:文档对象模型(DOM)和层叠样式表(CSS)。

设计师给了我们两个模拟样式图:一个桌面版本(图2.1)和一个移动版本(图2.2)。


810497701aabc362e520683cd538e6f08559600b


be870d976b189ed0deff2c1849b6c605d946d39d

我们来看这些模拟的样式图。很明显,开发这个网站的难度不大。但不要忘了,此网站要在移动设备和桌面设备上都能使用。作为开发者,我们喜欢尽可能地减少代码量,因为我们知道,写的所有代码都要自己维护。同时,我们还希望网站在任何屏幕上的体验都是最好的。 理想的情况下,我们只写一次代码就可以用在所有的设备上。在许多情况下,我们完全可以利用CSS3的新特性—媒体查询来避免分支。如同我们在第1章“移动设备概述”中讨论的,移动设备与桌面设备相比,性能还有一定差距。一些美好但复杂的交互,在桌面设备上可以良好地运行,在比较差的移动设备上可能会卡死。对每种情况单独处理是有必要的。但作为一般规则,简单的内容型网站应该能在桌面设备和移动设备上共用一些代码。加州鸟类网站就是一个完美的例子。

2.1 选择一个观念:移动优先或置后

短语“移动优先”是指在Web开发中的几个趋势。它是一个设计理念,一个开发方式,也是一个构建CSS的方法。

这种设计理念仅仅是一个观念,即首先针对移动设备设计,然后通过调整使它适应桌面设备。因为本书不讲设计,所以我将这部分留给其他更有资格的人来讲(Luke Wroblewski的书《Mobile First》是一部伟大的开山之作)。开发方式是一个类似的观点:先为移动设备编写代码,然后再适应桌面设备。在实践中,一个交互复杂的移动网站,肯定会与桌面网站的运行方式截然不同,因此会产生大量的不能共用的代码。这没有什么不好,只是我不认为它能节省时间。

真正的移动优先,对于大多数生产环境的网站而言还为时过早,因为Internet Explorer 8不支持媒体查询。(我们会在本章后面的部分详细地探讨媒体查询)。对于这个网站,我们会使用一些HTML5标签。这意味着,为了正确地支持IE浏览器,需要做一些额外的工作,或引入一个库,比如Modernizr。本书不是关于如何支持IE浏览器的,所以我不打算涉及这一点,但在实际生产中,支持移动设备和桌面设备的网站,就必须支持IE8。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章