12.1　移动战略和注意事项

创建适用于移动设备的网站通常有两种方法。

• 建立专门用于移动电话的站点，即专门为移动体验打造，且与为桌面计算机和平板电脑用户准备的网站独立的网站。有时还为平板电脑（尤其是iPad）建立单独的网站，因此总共至少有三个网站。

• 构建一个适用于所有情况的网站。为所有的设备（从移动电话到桌面计算机）准备同样的HTML，再分别设置适用于不同设备的样式。通过一些额外的手段，甚至可以为移动电话用户准备不同的图像和视频尺寸，让他们不必因下载太大的文件而遇到麻烦。

（注意，我在本章中常使用“桌面计算机”一词同时指代台式机和笔记本。）

没有一种正确的方法可以适应所有的情形。不过，科技与Web开发技术的最新发展已将单一站点方法推向了Web社区讨论的前沿。稍后即会解释这一点。

1. 专门用于移动电话的网站

这种方法基于这样的思想：用于桌面计算机的网页和用于移动电话的网页之间的差异并不仅仅体现在显示尺寸上，更重要的是环境不一样。这种方法认为，访问者在旅途中需要用移动电话获取的信息与他们在家里或办公室里要查找的信息很不一样，因此单纯地将来自桌面计算机网站的信息小型化是不够的。同时，与移动电话相比，桌面计算机变得越来越强大，互联网连接速率越来越快，因此它们有机会提供更丰富的体验。

这种方法要求决定哪些信息是对移动用户特别有用的，并为他们提供专门针对移动设备的网站，使用户可以通过最少的滚动、触碰、点击、下载和等待时间使用网站。

尽管这种方法并非只针对大型公司和公共服务网站，但实际示例大都来自这些网站。对此，很大一部分原因是这些网站更容易承担开发和维护多站点的任务。Amazon、Target等购物网站通常极大地简化其移动站点的首页，并修改导航的策略。例如，Target（www.target.com）考虑到移动电话访问者很有可能是在户外访问网站，并查找附近的实体店，因此它在其移动站点上突出了商铺位置的信息。同时，该网站为小屏幕用户削减了商品分类数量，为他们提供了完全不同的导航商品分类的方式。

旧金山湾区捷运系统（Bay Area Rapid Transit，BART）是一家提供公共运输服务的机构，受众广泛。它们为访问者提供三种版本的网站：桌面站（www.bart.gov，如图12.1.1所示）、移动站（m.bart.gov，如图12.1.2所示）和为旧设备提供的更为精简的移动版（www.bart.gov/wireless/）。同时，他们允许用户通过页脚的链接（参见图12.1.2）在不同版本之间进行切换，将控制权交到访问者手里。

图12.1.1　这是在桌面计算机上访问BART网站的样子。对于其他一些设备，如iPad，默认也会显示这个版本。页脚提供了切换到移动版的链接（可参见图12.1.2），此处没有显示出来。

图12.1.2　BART的移动版网站精简了界面，省略了桌面站（参见图12.1.1）上的图片，让访问者可以更快地找到信息。如果查看页脚，会发现Desktop（桌面版）和Older Mobile Site（旧移动版）两个链接，前者指向如图12.1.1所示的网站，后者指向一个更为精简的移动版网站（www.bart.gov/wireless/）

耐克公司的网站也提供了至少三种版本——用于智能手机的版本、用于iPad的版本以及用于桌面计算机的版本。它们包含的图像依次变得丰富。类似地，雅虎网站也有移动设备、平板电脑和桌面计算机的体验。

1. 一个网站适应所有情形

看起来，每周都有新的设备投放到市场上，毫无疑问，各家公司都在设计新的设备类型。构建和维护多个网站现实吗？甚至说，有必要吗？我们无法预知未来的情形，因此这种方法主张构建适用于所有设备的网站，然后根据不同的设备调整布局。

对大多数人来说，单一网站就能满足访问者的需求。此外，如今预测访问者访问网站的目的已变得更为困难，特别是在智能手机及其浏览器变得更为强大的情况下，这也是采用单一网站的原因之一。例如，移动用户并不一定处于移动的状态。下面这种情形一定发生在很多人身上：闲坐在沙发上用手机上网，尽管笔记本电脑就在房间的另一侧。大多数情况下，我想看到完整的站点，而不是桌面体验的移动化版本。

不过，我们无法绕开的事实是移动电话的屏幕尺寸和带宽更小，因此我们仍需花工夫创建适应这种环境的网站。

1. 一个网站适应所有情形：着手实现

一个网站的方案听起来的确不错，不过怎样才能适应如此繁多的设备呢？

这是渐进增强值得称道的地方（请回顾前言中的“渐进增强：一种最佳实践”一节）。由于HTML与CSS是分离的，因此可以按照分辨率逐渐增高、设备功能逐渐增强的次序，提供逐渐增强的布局（如图12.1.3、图12.1.4和图12.1.5所示）。

图12.1.3　不管你信不信，这里以及图12.1.4和图12.1.5显示的Food Sense主页都来自同一个网站（www.foodsense.is），而不是各自具有单独URL的不同网站。这个网站采用了响应式Web设计方法，因此它的布局可以根据不同的查看环境进行改变。iPhone（如本图所示）及其他屏幕大小相似的设备会根据特定的CSS规则显示布局。对于更大的浏览器窗口（参见图12.1.4和图12.1.5），则有另外一些CSS规则控制相应的布局

图12.1.4　这是使用iPad及其他屏幕大小相似的设备查看Food Sense主页的样子。由于浏览器有更多空间显示内容，因此这套样式的CSS对标识和导航都进行了调整

图12.1.5　这是Food Sense主页显示在桌面浏览器上的样子，也是最宽的显示效果。该站还有另外两个布局没有展示出来。你可以在计算机上访问www.foodsense.is，再拖动浏览器的一角让浏览器窗口变窄或变宽并查看效果

Ethan Marcotte为我们提供了如何实现上述效果的蓝图，并将相应的方法命名为响应式Web设计（responsive Web design）。他的文章（www.alistapart.com/articles/responsive-web-design/）和Responsive Web Design（A Book Apart，2011）一书均获得了极高的评价。他的方法植根于以下三点。

• 灵活的、基于网格的布局。这就是你在第11章看到的流式布局（有些微调整）。对于响应式站点，所有的width、margin和padding属性都用百分数设定，因此所有的布局成分都是相对的。

• 灵活的图像和媒体。图像和媒体资源的尺寸也是用百分数定义的，从而可以根据环境进行缩放。（参见Ethan的书摘：www.alistapart.com/articles/fluid-images/。）随着技术的发展，现在已经可以根据不同的设备屏幕尺寸呈现不同尺寸的图像，从而让使用移动电话的用户不必等待大尺寸图像的下载。

• 媒体查询。媒体查询是CSS3的组件之一，使用这项技术，可以根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整（参见下一节的“理解视觉区域及使用视觉区域meta元素”）。你将在12.2节了解更多的信息，并在12.3节看到有关的实例。

Web社区围绕响应式站点的讨论已经越来越多了，并分享了大量基于Ethan方法的技术。这种方法并不仅仅是博客上的讨论。《波士顿环球报》（www.bostonglobe.com）的新网站是基于响应式Web设计技术制作的，该站一经推出就成了热议的话题。

我们将在本章余下的部分重点介绍这种方法。从第11章起，你将了解到如何对网站运用移动优先的方法，使用媒体查询逐渐为更大的屏幕分辨率添加CSS（参见图12.1.3、图12.1.4和图12.1.5）。

不过，这并不是一刀切的解决方案。如前所述，访问环境以及所需的内容、导航、外观、交互的不同有可能要求建立分离的站点。

提示　Luke Wroblewski于2009年11月开始倡导“移动优先”的设计（www.lukew.com/ff/entry.asp?933）。其前提是在考虑移动体验的情况下设计网站，再针对桌面环境实现对应的组件（如果这些站点不一样的话）。根据他的观点，这样做更容易判断哪些内容对所有设备的用户都是最重要的。他针对该主题的演讲见www.lukew.com/ff/entry.asp?1137。他还写了一本书，书名正是Mobile First（A Book Apart，2011）。

提示　Jeremy Keith在题为“One Web”的演讲中归纳了“一个网站适应所有情形“的方法（www.vimeo.com/27484362/）。（如果你更倾向于阅读，可以参见相应的讲稿全文：www.adactio.com/articles/4938/。）

提示　上述两个材料都值得高度推荐。其实，现在就可以观看了，我等着你！