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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

异步社区 2017-05-02 11:13:00 浏览902
展开阅读全文

本节书摘来自异步社区《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。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注