本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章，第2.1节,作者： 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第 2 章 创建一个简单的内容型网站
内容型网站组成了Internet的很大一部分。毕竟，网站就是为了浏览文本而建立的，人们在网上做的最多的事情就是阅读文字。内容型网站在触摸设备上保持良好的体验固然很重要，但实际上它们还不够好。 在本章中，我们将为客户—Awesome鸟类基金会，建立一个关于加州鸟类的网站。鉴于人们普遍无法在家中观赏鸟类，我们网站目标就是通过移动设备和桌面电脑，使之成为可能。客户想让数以百万计的网站文章被链接到Twitter上，用户通过单击即可阅读关于鸟类的精彩文章。我们不希望读者在网站加载完成之前流失，必须争分夺秒。在对服务器端进行一切优化之后，还需要网页能尽快加载。
显然，网站在高延迟的3G网络下的加载速度会比在办公室的100MB的宽带网络下慢。但是，一旦开始接收数据，就必须立刻吸引住用户。我们将从基本要素开始制作这个网站：文档对象模型（DOM）和层叠样式表（CSS）。
设计师给了我们两个模拟样式图：一个桌面版本（图2.1）和一个移动版本（图2.2）。
我们来看这些模拟的样式图。很明显，开发这个网站的难度不大。但不要忘了，此网站要在移动设备和桌面设备上都能使用。作为开发者，我们喜欢尽可能地减少代码量，因为我们知道，写的所有代码都要自己维护。同时，我们还希望网站在任何屏幕上的体验都是最好的。 理想的情况下，我们只写一次代码就可以用在所有的设备上。在许多情况下，我们完全可以利用CSS3的新特性—媒体查询来避免分支。如同我们在第1章“移动设备概述”中讨论的，移动设备与桌面设备相比，性能还有一定差距。一些美好但复杂的交互，在桌面设备上可以良好地运行，在比较差的移动设备上可能会卡死。对每种情况单独处理是有必要的。但作为一般规则，简单的内容型网站应该能在桌面设备和移动设备上共用一些代码。加州鸟类网站就是一个完美的例子。
2.1 选择一个观念：移动优先或置后
短语“移动优先”是指在Web开发中的几个趋势。它是一个设计理念，一个开发方式，也是一个构建CSS的方法。
这种设计理念仅仅是一个观念，即首先针对移动设备设计，然后通过调整使它适应桌面设备。因为本书不讲设计，所以我将这部分留给其他更有资格的人来讲（Luke Wroblewski的书《Mobile First》是一部伟大的开山之作）。开发方式是一个类似的观点：先为移动设备编写代码，然后再适应桌面设备。在实践中，一个交互复杂的移动网站，肯定会与桌面网站的运行方式截然不同，因此会产生大量的不能共用的代码。这没有什么不好，只是我不认为它能节省时间。
真正的移动优先，对于大多数生产环境的网站而言还为时过早，因为Internet Explorer 8不支持媒体查询。（我们会在本章后面的部分详细地探讨媒体查询）。对于这个网站，我们会使用一些HTML5标签。这意味着，为了正确地支持IE浏览器，需要做一些额外的工作，或引入一个库，比如Modernizr。本书不是关于如何支持IE浏览器的，所以我不打算涉及这一点，但在实际生产中，支持移动设备和桌面设备的网站，就必须支持IE8。
