移动Web实现指南——面向移动设备的网站优化、开发和设计

从移动网站项目最早的创意和发现阶段，到最后的可用性分析，本书引导读者使用一种非常全局的方法来思考网站的移动化设计。全书介绍了移动化规划、移动化设计和相应的编码技巧，特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例，也是根据在优化这些网站的过程中所遇到的不同挑战来组织的。更重要地，本书还将带领读者思考如何偱序渐进地对网站进行移动化改造。最后，本书还提供一些实例，使读者能够将本书的知识应用于一个现有的网站，以提供更多学习和动手的机会。

写这本书的目的主要有两个方面：为你打开通往移动化设计的大门，进行案例研究和学习；给你鼓励和启迪，使你今天就可以通过改造你正在做的网站来循序渐进地开始移动设计工作。

所以这本书并不旨在描写移动设计方法的前沿技术。恰恰相反，它是受了很多其他的设计师、作家，以及演讲者的启发，他们在过去的很多年中，提示了我各种各样的移动化设计、内容策略制定、可用性评估和产品管理的方法。为了记录并向这些灵感和好方法的源泉致敬，我很感谢他们这么多人都乐意配合并贡献好的想法，以及配合关于他们在移动设计和开发工作方面的采访：Ethan Marcotte、Colleen Jones、Luke Wroblewski，还有在Happy Cog的这些朋友们—Rawle Anders、Stephen Caver、Greg Hoy、Mark Huot、Jenn Lukas、Yesenia Perez-Cruz、Greg Story、Russ Unger和Jeffrey Zeldman。

我也非常感激Zachary Johnson的贡献，自我的第一本书之后，他已经第二次做我的技术编辑了。他对于本书中HTML、CSS和JavaScript示例所做的修正和建议，极大地提高和优化了我所写的内容。另外还要感谢Mike Resman额外的技术支持，他是我在明尼苏达大学的一个杰出的实习生，他是我的第一个移动化网站项目的合作开发者。正是他的技术支持，才使第一个项目取得了成功。而且也正是有了他的帮忙，才使本书的第10章成为可能，因为他是该章所有PHP代码的作者和编辑。

还要感谢在Peachpit的Michael Nolan，他有充足的信心来鼓励我完成第二本书。我觉得Michael Nolan和我，都是为对方而来的，就像他认为：签下一个项目并不需要为指定的主题找到一个专家，而是应该在正确的时间找到正确的人，那个具有正确想法，并能够将想法准备实现的人。我当然赞同我并不是一个移动化设计的专家，但我兴奋于提议了写一本书的想法，它力求把移动设计的想法带给网络设计师和开发者。我坚定地相信，一个可以接受的移动设计，既不需要专家，也不需要大量的时间和费用，它只需要一个决定和一次尝试，并保证将你所学到的东西用于持续不断的优化工作中。这就是我所做的事情，如果本书也能激励其他人投入到移动化设计和开发中来，我觉得它就成功了。

还要感谢我的项目编辑Jeff Riley，以及在Peachpit的校订和设计人员，他们使这本书看起来更好。感谢我在Capella教育公司的主管Jason Scherschligt，去年春天他愿意雇用我作为Capella新的移动产品经理。这使我有了这份在我想象中所能得到的最好的与移动相关的工作，并有机会与一些最杰出的移动设计者和工程师一起工作。

最后也是最重要的，我要感谢我的家庭：Katie、Sarah、Grace、Emma和Anne。你们可以接受好几个月以来，我为了写书每天都提前一个小时离开家去工作。如果没有你们的支持和鼓励，绝对不会有这本书。

这个词，最近这些日子越来越流行了，以至于我们通常会忽略掉它真正重要的意义。

婴儿迈出的第一步，并不仅仅是一些可以让他们开始行走的简单动作而已。它是具有深远意义的一种转化，从旁观者的角度看周围世界的变化，转变为亲身参与其中。蹒跚学步改变了你的整个视角，并打开了无数新的机会，不仅仅是走，更可以跑、跳和跳舞。它是我们进入全新生活的入口。

本书也是带你进入某个新世界的大门。某种转化，正彻底地颠覆我们，以及自己的认知、所处的环境和与其他人进行交互的方式。这种转化，也就是我们使用移动设备来体验互联网的方法。

快速而强大的移动设备总是与我们同在，并连接着网络，它正逐渐掌握并重新定义了我们查找答案、进行交易、分享信息等各种各样事物处理的方法。根据Jeremy Weinstein（http://goo. gl/Noq9L）在2009年的说法，在所有新的互联网连接中有50%是来自于移动设备的。Gartner也曾报告过，到2013年移动设备将会取代PC成为世界上最普遍的网络接入设备（http://goo. gl/J64Zn）。

如果你自己拥有一个网站，那么很可能你已经注意到这个转变，并发现来自移动设备的访问量不断快速上升。不过，如果对于这个已有的网站，你是否需要在这个移动的时代中，把它完全重新设计和制作来赶上潮流呢？如何让你自己和你的网站都适应如此快的变革呢？

本书就充满了这个概念，今天你就开始做一些小而功能强大的东西，让你现在的网站开始适应变化中的互联网和那些不断变得更重要的移动设备环境。这些技术将会让你开始移动化改造，而无须全部重构、重新设计。就像真正的婴儿学步一样，它们还是会带给你新的机会、大开眼界。从那时起，谁也无法预料你会走多远。

那么，你还在等什么？现在就迈开第一步吧。

——Luke Wroblewski

Principal，LukeW Ideation+Design

《Mobile First》（ABookApart出版社出版）作者

不管是“mobilefirst”还是“mobilelater”^*1，我们现在都处在移动计算和网络浏览的时代。

* “mobile first”及“mobile later”：即是指目前网络中开发者关于应在网站开发之前考虑“移动化设计”还是暂不考虑、留待以后解决的争论。

别让你的网站落后了。哪怕是将移动化改造放在后面，也比完全不做要好！更重要的是，动手改造你的网站，是使你完全掌握移动化网站设计的第一步。

克服“移动优化”的恐惧

在过去的几年中，我有幸参加一些非常重要的、关于移动应用程序设计和移动网站的研讨会。如果你也有兴趣研究移动设备而且刚好在读相关文章，你可能也会了解和学习到一些非常有价值的课程和技术，可以帮你设计在移动设备上进行展示的新网站。

然而，对于我们很多人来说，困难就是，当需要改造一个已存在的、基于桌面电脑的项目时，通常都只是埋头于工作中，并继续梦想着可以进行一次移动优先的网站设计……我们中的很多人都是公司内部的设计师，我们要帮助公司维护和更新好几个已存在的网站，或者是一个非常大的网站。也可能是根据合同的规定，要为客户持续维护和更新他们已存在的网站。

但在这些案例中，我们所在的位置通常并不能提出一套完整的、新网站的设计方案，也就是说我们没有机会实现自己的移动化目标。

那么，这个“移动优先”的口号，虽然可以让我们兴奋和备受鼓舞，但同时它留给我们的真正要面对的工作却是“移动后置”？

更糟糕的是：如果我们觉得是环境限制了我们，使我们“不能做移动优化”，那又怎么办？

这不是一个独立存在的问题

纵观所有因素，创造新的东西，确实很有吸引力，正是它驱动了我们很多人投身于网站设计、图片或文字编辑、编码的领域：使用我们自己创造的、全新的交互设计元素来将一个空空的网页窗口填满，这种兴奋的感觉是非常让人激动和满足的。相反，当我们需要对一些基于已存在的网站元素做增量式的更新或优化任务时，就会感觉平凡无趣得多了。在这种案例中，创新的机会在哪里？

不过有时，我们忘记了在网站上的工作，其实与使用其他媒体、材料或机械系统进行工作没有什么不同。人们投身于各种创新行业的原因，都是诱惑于那种从草稿开始逐渐填满一张空白画布，并最终创造出让人耳目一新的作品的过程，不过这种创新通常也会遇到一些争议和意外。我们拿建筑行业来举个例子。

那些从小怀揣着设计高楼大厦梦想而长大的人们，通常都会进入建筑学校，并在他们完成学业之后，成为一名建筑设计师。

相似地，那些倾向于获得更多建筑技能实践经验的人们，会去上相关的职业学校，学习如何成为一名木匠、泥瓦匠或者其他的技术工人。不论角色如何，想要从事建筑设计和建造工作的人们，恰恰也像网站设计师一样渴求在这个世界上崭露头角。他们希望能设计并建造出让人兴奋的东西，并以此为傲，而且通常也都在梦想着能建造出与别人不同的东西，（见图I.1）。

但是对于每一个大型的新建筑项目来说，都有更多的改造和优化项目。而正是这些项目，消耗掉了绝大多数建筑设计师和建筑工人的大部分时间。

图I.1 明尼阿波利斯市的IDS大厦，它是市中心最高的办公大楼，在1974年开业。

我很幸运，在成为一个网站设计师以前，我曾经从事过建筑领域的工作。所以这个比较，对我来说就不仅仅是一种打比方了。作为一个具有建筑史研究背景的平面设计师，我花费了好几年的时间来为建筑师工作，包括历史性建筑解析和客户业务陈述在内的各种各样的工作。尽管我对于新的建筑设计有强烈的兴趣（那时候我计划利用妻子读研的时间获得更多的建筑经验，然后去建筑学院进修），但绝大多数公司的项目都是那种改造、附加或翻新类型的项目，如图I.2所示。

图I.2 明尼阿波利斯市的磨坊城博物馆，从 2003 年开放，现在是一幢集博物馆、办公室和公寓于一身的大厦。它最早是在1870年建成的，当时是用于面粉研磨的建筑综合体。

不过，让我们面对这样的事实：无论怎么说，旧的东西通常也变成新东西了，对吗？改造或翻新的项目，其实并不仅仅只是给原有的旧项目附着一层新的外衣。它就是一个新的项目，使用了另外一批约束条件，以及独特的存在条件和环境。

这是进入网络设计师和开发者世界的一个引子：我们也一样，由于制作新的东西而感到兴奋，从而投身于工作中。不过正如我之前提到过的，也并非事事如此。

就像刚才使用建筑设计来举的例子，重新将我们的工作置于新的使用环境中研究，我们可以看到，一个新的网站，通常并不需要从草图开始。在这个特殊的案例中，移动网站的体验效果也不需要从新网站开始。“移动后置”确实可以有效工作；我们也无须等待一次“移动优先”改造的机会。而且事实上，朝着难以捉摸的“移动优先”网站设计迈出好的第一步，像小孩那样蹒跚前行，并对已存在的、熟悉的网站应用移动技术手段，这样你就已经踏上了掌握移动网站设计的道路了。

那么，这是如何操作的呢？从哪里开始呢？也许那个已存在的网站，你想要把它改造成适合在21世纪的移动浏览器中展示，而它本身看起来却仍陷于20世纪的泥沼中，无望地使用着固定宽度栅格布局的设计方式。

如果这就是你所担心的，那么本书，正是为你所写。

一读到刚才那句话，你可能就会想了，“是吗？为什么说是为我写的？为什么我不应该去买另外一本关于移动设计的书呢？本书也包括了那些内容吗？”

也是也不是。在过去的几年中，我已经收集并阅读了许许多多关于移动设计的好书和好文章了，而且它们在各自的方式方法上都讲得非常不错，但却都只关注了下面这些分类中的某一点。

1．关于移动设备使用递增的调研分析，以及为什么现在对于每个人来说都正是时候，即日起为移动设备体验进行设计。

2．关于什么造就了好的移动应用程序和网站，以及更高层次地、概念性地思考如何为这种项目做计划。

3．如何进行屏幕布局设计和用户界面设计的生动案例。

4．关于使用一种更加响应式的方法来开发网页的、基于编码的技术书籍（一般都是关注在CSS的使用方法上）。

这些书籍和文章，如果把它们当做资料库来使用，都是相当棒的。但事实上，我更倾向本书中的关于这些篇章的摘录，以及合作网站（www.mobilizingwebsites.net）：它们帮我到达如今的位置，像基金会一样资助我的不间断的工作和协作，而且也是与我们进行知识分享的一部分。

如下是本书与其他书籍的一些不同点。

1．正如从书名所暗示出来的意思，这本书搭建了设计与开发两个世界之间的桥梁。从移动网站项目最早的创意和发现阶段，到最后的可用性分析，它引导你使用一种非常全局的方法来思考网站的移动化设计。

2．本书采用了移动化规划、移动化设计和相应的编码技巧，它们都是特别适用于那些最初是为桌面电脑展示而设计的网站，这也是我们很多人每天需要处理的工作。所以本书中所有的例子，包括可以在配套网站（http://www. mobilizingwebsites.net）上看到的示例代码及页面，都是基于一个已有的、固定宽度的、基于栅格设计的网站的普通约束条件。

3．本书的建议和实例是根据移动化网站过程中遇到的不同挑战来组织的：如何在小屏幕设备上展示页面布局、导航、图片和文字。

4．更重要的是，本书还帮你思考如何递增地来进行网站的移动化改造。将用户体验、用户界面设计以及内容策略移动化，都并不需要做一次性零和博弈似的努力。把优化网站的工作想成就像优化一个软件或者任何一种产品那样复杂的、需要长时间持续的工作（也可以再一次想想建筑工作）。较小的、递增的，但一直持续改进的优化，可以一次性定义并完成全部优化工作，达到一样的效果。

5．最后，在你已经熟悉了移动化约束限制、技术方法以及机会之后，本书提出一些实例，将它们应用于一个现有的网站。提供更多学习和动手的机会。之后可以让使用者来评估你自己的网站，思考内容是否适合于移动展示，并做出那个已经很熟悉的决定，就是你可以继续做很多优化。到那时，更综合的“移动优先”重设计，看起来也就不再令人怯步了：可能会觉得那就是顺理成章应该做的事情而已。

所以说，如果这本书可以使你从今天起就开始动手进行移动化的改造，并帮助你实现由于传统网站的约束条件所限，而无法继续进行的移动化想法和技术，那么身在远方的我一定会为你鼓掌欢呼的。

想要为移动设备做出好的设计，最基本的，就是要从“用户”这个最重要的部分开始。仔细想想，真正移动着的并不是设备本身，而是使用它的人。当人们在移动时，通常也会使所携带的东西一起移动。

随之，这些东西也就是在移动中的了。

事实上这本书就是关于人的。人们总是在到处奔波：从早上起床开始，如果这个人是健康、活跃、有工作的或者是要忙于个人和家务的，他一般都不会只待在家里一整天。对于许多人来说，生活就是移动的、进行中的，并且四处奔走忙个不停的。

所以，就有了大批“移动设备”会跟着人一起到处旅行。我们通常都会接触到各种各样的设备，如汽车、自行车、手表。其中有的是高科技产品，有的不是。

但是，如果我们是在给人、给那些可以连接互联网的设备做设计开发的话，那么就可以说是在对“移动设备”进行设计。不过这也就意味着，当人们在四处奔波，或者说至少没有被拴在桌子前时，我们就是在给这些使用设备的人进行设计。那么，如何才能把这个设计任务分解成一些符合用户体验（UX）的设计规范，来引导我们正确而专注地进行思考呢？下面就让我们来仔细看看吧。

你有没有听说过这个别出心裁的短语：“做事的人”（它是与“存在的人”相对的）？我并不打算在这里深究或是从哲学层面来分析这个短语，我只是发现，人们大多数时间并不只是存在着而已。就好像之前提到的，我们一般都是在做着某些事情。所以，作为设计师和开发者，最好的做法是，换位思考一下人们如何使用我们创造的东西。在用户体验设计中，我们把描述用户将会用产品来做什么的实例，称做用户故事。

作为设计师和程序员，我必须要老实告诉你：有时候，我就是喜欢陷入设计和开发的技术细节中去。如果你也是这样，那么你跟我是一类人。

不过，你知道吗？我们的用户或客户基本上都不是像我们这样的技术人士，至少与我们的思维方式不同。所以，既然我是一个移动产品经理，那我的工作职责就要强迫我自己（以及设计团队的其他同事）每天、每周都要记住这点。我们可能都很热爱设计或者编码，但归根结底，我们都是在服务于人们，服务于他们所做的事情。我将在本章的后面部分，针对你所做的设计工作，说明该如何进行组织，如何排列优先级。

那么，最重要的是什么，尤其对于那些在移动中做事情的人们来说？让我们拿开车这件事来举个例子吧，因为这是大多数人都很可能会做的或者会参与其中的事情。

即使是在一个很小的镇子或者城市中，开着车随便转转，驾驶汽车都会是一项占据你绝大部分注意力的活动（至少，我希望它是！）。尽管随着时间的推移，大部分的动作会逐渐成为下意识的行为，但是驾驶绝对仍是需要感官和行为都全神贯注的。你得踩刹车和油门、观察并注意其他车辆或行人、控制车辆的转向，还要关心更多的信息，如车速里程表、燃油表等。另外，你也可能还会听一些背景音乐，可能和你的孩子们或者其他乘客聊天打趣。

那么，我想说的究竟什么呢？

汽车已经设计成适合于移动中使用有几十年了。我们可以从中学到些东西。

在用户体验中，有驾驶汽车还要可以关注到周围情况的需求，那么就意味着对于车辆仪表盘等控制设备（见图1.1）的设计，要非常便于使用。而这种使用也并不要求高学历。它们通常是非常简单和直观的。字体大而清晰，旋钮很大，而且图表也应该（虽然并不都是！）很清楚。因为当你在城镇中开车时，你肯定不希望事后再去猜测这个指示器是什么意思，或者那个按钮是干什么用的。

图1.1 汽车内部的仪表盘就是一个移动界面接口，它被设计成适合在移动中使用。

你当下就需要知道这些，并且最好是简单而且易识别的，容易阅读、抓住、推拉或者进行其他操作的。

因此，在为移动互联网进行好的用户体验设计时，要记住，人们在移动、开车、走路或是跑步时是非常忙碌的—他们的感觉器官也一样很忙。把你自己沉浸在这样的体验中，并注意，繁忙的程度约束了访问信息或进行操作的方式。这些将会帮助你为移动互联网设计出更加优秀的用户体验。

除了繁忙以外，人们处于移动中还意味着会有一定程度的分心。

想象一下，你是一个带孩子来上游泳课的家长，然后你要使用手机来打个电话。我其实并不需要假象这个场景，因为我就是这样的。有一天，在我女儿上游泳课的时候，我通过Skype参加了公司的一个日常项目例会。事情过程是这样的：

我并不经常使用Skype，所以不了解它不能像常规的手机服务那样，在讲话和倾听之间快速切换。换句话说，当你使用Skype讲话的时候，另外一个人基本上就被“静音”了，这样你就不会再听到他们在说什么了。

那么，周围的那些孩子们在游泳池中游泳的声音，虽然听起来不是非常响，但足以持续触发iPhone上的麦克风，导致我在开会时，尝试听同事讲话，却总是不断地被打扰。所以，我只能离开泳池等候区域，走到游泳学校外面，但这仍无济于事。因为外面的噪音更大。被周围的声音搞得越来越分心，我感觉自己很无助：此时此刻，我该怎么办？

幸运的是，Skype的优秀设计师效仿了Apple的优秀设计，在Skype的移动应用程序界面上放置了一个相当大的“静音”按钮。差不多有一平方英寸：绝对是硕大无比，实际上比你手指所需要的地方还更大一些。

不过，在你千方百计想要听清办公室里同事的说话声音时，你突然发现点击“静音”按钮就可以解决周围环境噪音的问题了，这个时候，就显得它大得并不那么过分了，如图1.2所示。

图1.2 静音按钮处于激活状态的 Skype 通话界面。注意这个按钮相当大。对于按钮来说，大就是好！

这个按钮这么大，也许可以说是件幸运的事情。或许也可能是设计师早就预料到了，在这种情况下，有些人会疯狂地寻找这个按钮，所以就确保它不能仅仅是一个拥有精巧身材的平凡按钮。不管怎样，从这个例子中我们可以学到：当你的注意力被分散时（甚至是在那些干扰中抓狂时），就要让设计的选项非常容易定位，可以在1ms内就看到你想要找的操作按钮。

因为如果你心烦意乱，那些能帮你找东西的大脑细胞是会大大减少的。

另外一方面，移动设备的使用也显示出，并不是所有的“移动”活动都是发生在路上。但如果是这个情况，就要考虑用户的另一种思维模式了。

比如，一些研究表示很多时候移动设备都是在家里使用的。

如果你仔细想想，其实在家里会频繁地使用移动设备也并不完全出乎意料。当然，笔记本电脑也是很方便的，而且它是准移动的。可以快速地放置在厨房桌台上使用，甚至有时人们会在床上或者找个舒服的椅子坐着，并把它们放在膝盖上使用，就像它们的名字（laptop）一样。

但是在家中，平板电脑的使用机会和使用方式当然更是各种各样。比如打开iPad的屏幕，侧身躺在客厅沙发里或是坐在前院的台阶上使用它。再看看智能电话，我们带着它们上床、躺在吊床或折椅上，还有时甚至会带着去厕所。

如果平板电脑和智能电话可以在笔记本电脑不适用的场合使用，那么它们的用户使用习惯也就会不一样。我因每周日下午在丈母娘家午餐后，都会拿出我的iPhone手机而出名。那时我总是感到有点累并且倦意袭来（通常也确实是慢慢就睡着了）。所以在周末的午饭后，在庸懒的周日，猜猜我想要的是哪种用户体验，别给我任何操作的负担，谢谢。

设计中也应该考虑这样的用户体验，意在迎合这种饭后嗜睡或明显的惰性情绪。简单地说：每当在这种情况下，我就是想要放松，我不想把太多精力投入到使用移动设备中去。所以如果这些需要太多操作、过于复杂或者有干扰性，我就不爱在类似的情况下使用它了，或是至少在使用的时候会感到恼怒。

考虑一下这个例子，手机应用程序中的和朋友一起玩的单字接龙。这种单字接龙是一种数字棋盘类型的游戏，每个玩家有7个字母，你用这些字母在板子上拼造单词（非常像另外一个很著名的填字风格的棋盘游戏）。当轮到你的时候，你要考虑可以拼成什么单词，在你的字母架上面移动字母的位置可能会发现更多的选择。

在这个字母游戏的新版本中，有一个非常酷的细节，就是可以自动洗牌帮你重新安排架子上面的字母。这个填字游戏早先的版本里利用了设备本身的加速监测计，需要你摇动手机来更换字母组。这么做虽然很酷，但如果你此时正打算放松放松，这其实还是有一定工作量的。如果你正躺在床上，就有可能惊扰了睡在身边的妻子，而如果你正挤在公交车上，几乎就不可能这么做。

那么迅速回到这个拼字游戏的当前版本中来，它新加入了洗牌功能按钮，如图1.3所示。如果你不喜欢疯狂地摇晃手机来重排字母组，那么这个洗牌按钮就真是太有用了（不过对于那些更喜欢运动感觉的人也没有剥夺他们摇一摇的操作）。

图1.3 新的设计中添加了洗牌（shuffle）按钮来提升用户体验。

即便如此，直到HTML5和移动设备浏览器普遍支持加速监测计以前（在写这本书的时候，只有iOS设备上移动版本的Safari才支持），你都不能决定移动互联网的功能是采用摇晃设备的方式还是放置一个按钮。不过这个例子真正想说的是，当你在为移动设备设计产品时，用户所处的环境和心理状态，可以而且应该对你正斟酌的用户体验解决方案产生深远的影响。

为了保持用户的放松状态，我们要做些工作来研究在放松状态下智能手机和平板电脑的使用情况。没错，这好像有点自相矛盾，但是在放松的心态下，动作就真的变难了。当你在使用时，关注一下是如何握住移动设备、在界面之间操作的，以及什么样的细节你觉得是可以接受的、什么样的是让你烦恼或感到混乱的，甚至是完全不可接受的。

需要考虑的另外一个重要的心理状态是，人们使用移动设备和阅读内容通常都是面向任务的。无论用户是在路上还是在家里使用移动设备，他们一般都是关注于要完成一项任务。

人们有可能是想要找菜谱、列购物清单、搜索地理位置、查询日期时间、收发短信或者找一个商品的价格。

事实上，我发现我的孩子们并不觉得我在用手机完成这些任务。在他们看来，我的手机似乎就是充满乐趣和游戏的。所以每当他们看到我把手机掏出来时，如果他们不高兴，就会翻翻白眼说“看，爸爸又在玩他的手机了！”因此我必须指出，没有，我并没有玩我的手机（事实上，我很少为了打游戏而使用移动设备）；我基本上都是为了了解新的消息或者完成一些比较小的任务，当我感觉我有时间来做这些事情的时候，才使用手机。

当然，我也可以在我女儿比赛时，一直站在足球场旁边看她。但如果刚好是中场休息时间，我就想做些事情了，这有什么大不了的。

从另外一方面来说，中场休息并不长。时间刚好，我不想花费更多不必要的时间来查询想要的信息。这就意味着，用户体验需要准确、简明、将交互或展示的复杂度降到最低。我不希望在移动设备的使用体验中，掺杂更多的噪音。

孩子们对于我频繁使用iPhone的抱怨和批评，已经够烦的了。谢谢！

那么，作为无线互联网发现之旅的开始，让我们先暂时离开你现有的网站。实际上，就把电脑关上吧。在用户体验设计的开始阶段，你其实并不需要使用它，除非是用它来做访谈笔记。

为了让你的网站可以移动化，首先需要“移动化”你的客户群：将他们动员起来一起帮助你。组织一些用户访谈，请他们喝咖啡或是吃顿饭，要不就做些快速的一对一面谈。或者，如果你需要，也可以通过电话或者电子邮件来与这些客户互动。

不过，对于那些刚好是在移动中访问了你网站的用户，就直接去了解客户的想法吧，去挖掘他们使用网站时所真正需要的东西。作为产品设计者或者企业主，你也许会认为，某个功能或者某些内容本身是最重要的部分，但这很可能是错的。所以请记住，永远正确的人，是用户，是互联网产品的使用者。

如果你是为业务客户进行产品设计，也一定要走进他们的最终用户群体中。理解业务、了解用户通过移动产品的使用需要达到什么目的。所有这些都是需要换位思考的，按照用户的思维从头再做一遍，即便是你已经为客户第一版的网站完成了全部的用户体验设计，也是一样。事实上，当你在为客户的移动产品进行设计时，可能会感到惊喜，因为你会发现这样做的同时，还可以帮助客户和他们的最终用户一起，更关注那些对业务关系发展最重要的因素。不过你有责任来开始这种对话，并且确保你要花时间将它执行到底。

在一个小小的屏幕中，约束和限制会更加严格。此时用户的需求比以往任何时候都更有决定作用。

即使你并没有把自己想象成一个用户体验设计师，也别拘泥于职位的名称。只要你没有和其他用户体验设计师一起工作，你就需要把撰写用户故事的任务落实到工作中来。这些故事并不需要太复杂，但它们绝对有存在的必要。作为一个设计者和产品经理，我已经发现它们是极为有用的了。

用户故事其实就是一种概要似的设计规范，但它是使用叙述的手法来写的，并且关注于用户的行为和情景。由于和客户谈完后，你要捕获他们使用你的移动网站所希望达到的需求，所以用户故事其实都是在定义使用案例。它们并不是绘声绘色地讲述产品设计解决方案。

你是否已经清楚理解用户故事特征了？

让我们举个例子吧。下面的描述就不是一个用户的故事。

“弗兰克正准备开车带他的家人去当地的水上乐园玩。汽车已经启动，他想在开车前了解一下最好的到达线路。他拿出智能手机，打开水上乐园的网站，选择了屏幕右上角的路线图标签，然后点击最左边的选项……”

不，不，不。这个故事开始还挺好的，但你可以看到它随后立刻转向到了一种视觉思维中，这是设计师们很喜欢做的。简单来说，就是开始尝试对问题描述出相应的解决方案。

下面就是一个比较好的用户故事。

“弗兰克正准备开车带他的家人们去当地的水上乐园玩。汽车已经启动，他想在开车前了解一下最好的到达线路。他拿出智能手机，使用手机上的互联网浏览器打开水上乐园的网站，查找关于水上乐园路线图的相关信息。”

这才是一个用户故事，你可以细细品味一下。最重要的，这种用户故事可以带来更多的、潜在的设计解决方案。比起那些已经预先定义好细节的解决方案，这样做能引出更多你之前并没关注到但需要解决的问题。

是否需要一个附加的用户故事，提示用户将这个移动网站标个书签，放在手机屏幕上？

当在浏览器中打开应用程序后，应该发生什么事情？用户下一步想要的是什么？

用户故事应该仅限于描述用户的动作，以及他们使用网站或应用程序过程中的行为和反应。通过高度关注这些活动，发现更多的细节，不过一定要保持在用户行为上，而不是设计的细节和功能上，最初的移动设计准则就应该关注于用户的需求和目的。

另外，后面我们还要确保进行深度可用性评估。所以请注意，这里总结的用户故事，最后在项目的尾声时，还会被拿回来，作为可用性评估的工具使用。

一旦有了一套简明的用户故事，就相当于有用户任务分解的开头，通过用户任务分解，可以为移动互联网或应用程序提供设计和开发工作的指引。

让我们再回过头来看看那个要找水上公园路线图的需求，弗兰克将会如何打开网站呢？网站是不会自己自动打开的。当然，可以有好几种方式打开网站：输入URL、使用浏览器的书签，或者使用对于手机网站来说最好的方法，也是最经常用到的方法，就是从移动设备的主界面直接启动。

对于这种可触摸的、有型的东西，我们只需先定义一些设计需求。

设计一个主界面的图标。

添加一些适当的说明，好让用户知道如何将你的移动网站添加到他们手机的主界面上。

随着深入研究用户故事，可以进一步将这些故事分解为有可行性的需求。但是即便是在此时，也仍不用着急解决所有的设计细节问题：还有很多东西要去挖掘呢。所以还是先让需求和任务都保持抽象吧，稍后再来研究细节。

一大堆的用户故事和需求本身其实并不是非常有用。要知道应该从哪里开始，就需要进行排序，需要一个优先级。

对用户故事排列优先级是非常重要的。因为，就像我之前提到的，将一个网站移动化，并不是在全部满足或全部否定中进行抉择。你并不需要把那些原本在移动设备上显得笨重的、可用性极差的网站，直接改成一个优雅的、完美的移动互联网设计。在这两种极端之间，还有很大的空间，让你可以为客户提供更好的用户体验。

将网站移动化，可以甚至应该有一个迭代的过程，正如为网站做其他方面改进时所做的迭代一样，可以允许时不时地在网站架构中添加一个新的页面或者区块来优化网站，对么？而且我敢打赌，在网页内容上的变化会更加频繁。让我们借用同样的思考方式来做更多移动化方面的努力：它可以随着时间而改变，无须假定要一下子就达到一种“完全移动化”的状态。

而且，在进行用户故事分解和优先级排列时，应该考虑使用工具来协助处理这个过程，如图1.4所示。

当你尝试着想给用户故事区分优先级时，一定要意识到，这个过程可能不会像你所想象的那么主观。优先级是不能仅仅根据你的一时兴起就编出来的，即使起初看起来，似乎是真的没有什么明显的理由，可以让你将一个故事排在另一个之前。为了更加清晰和系统化，使用评估工具还是很有用的。我建议在给用户故事定义优先级时，使用卡诺模型（Kano Model）。

卡诺模型（Kano Model）

卡诺模型（见图1.5）是由狩野纪昭（Noriaki Kano）在20世纪80年代研究出来的，它旨在帮助企业将产品的发展和用户满意度挂钩。它通过考虑产品性质的不同层面，来帮助那些表面看起来优先级很模糊的用户故事进行的分解和排序。

图1.4 用项目管理工具来管理用户故事是个很好的主意。我使用Pivotal Tracker，一个非常好的互联网应用程序，而且它也有iPhone和iPad的版本。

图1.5 卡诺模型通过基本型、性能型、兴奋型产品功能特点，来帮我们区分客户满意度和客户需求实现率之间的不同层次。

注：想了解更详细的卡诺模型信息，可以查看：

http://en.wikipedia.org/wiki/Kano_model。

产品性质的不同层面包括以下几种。

基本型：这种类型的需求，是一个产品需要很好地满足用户。虽然其中仍然可以有一些关于必要性的自由度，但是这一类需求被看做是最基本的，如果没有这些属性，产品就不用发布上线了。从另一方面来说，基本需求的传递做得越好，就越容易被用户忽略。所以，通过满足基本需求是很难直接提升用户满意度的。

比如对于一辆车来说，基本型需求包括引擎、轮子和方向盘。

性能型：这些需求是指将当前的产品设计解决方案区别于其他类似解决方案的那些需求点，它的基本出发点是产品能工作得多好，这种性能会使用户多高兴。这类型的需求是附加在基本型需求之上的，并且，当产品设计和使用方法正确的情况下，它可以促进用户获得更高的满意度。

在汽车的例子中，性能型需求可以指GPS系统、涡轮增压发动机，或者皮革座椅。

兴奋型：产品属性中最具有挑战性的一类就是兴奋型。它与基本型相反：比起对于产品来说那些被视为不可稀缺的需求，兴奋型属性就不是在客户预期之中的了。它是一种特殊的惊喜感受，用户第一次使用时会感到出乎意料，再加上如果可以很好地传递出兴奋型的特性，就会增添更多欣喜。所以这类属性很稀缺，而且需要非常优秀的创造力。但是一旦这些需求被识别并执行出来，它们就可以成为最有价值的属性了。

对于汽车来说，这个类型的功能包括移动手机可以链接的蓝牙设备，或者是其他一些并不是标准驾驶所必需的特殊功能，但有了这些功能，就可以使人们花在车里的时间可以得到更好的利用。

因此，你要做的第一步，就是进行用户故事的细分、归类、排列优先级。同时，仍然需要根据上面所说的价值来给不同分类排序。为了简化过程，给每个基本型的用户故事标记1分，每个性能型的用户故事标记2分，剩下每个兴奋型需求标记3分。这是排序的一个维度。

再增加些其他的维度，也可以评估一下对每个用户体验点的改进程度。使用5分制可以协助进行这个评估。例如，当前使用手机浏览器在你现在的网站上查找一些特定内容，可能会因为页面上链接的大小和位置，造成很差的用户体验。所以这个网站最初的排名分值是1。

如果你决定做一个短平快的改进来优化这个问题，但并不是理想的解决方案，那么可以给这个中间方案打排名分值3。这样可以标记出这是一个优化方案，但日后想继续改进它时，也还是会有优化空间的。

将这个升级状态和最初版本之间的差值2乘以这个需求类别值（我们认为这是一个性能型等级的需求，设置需求类别值为2），就产生了结果值4。这就是你的卡诺改善指数（Kano improvement index）。

在继续评估其他需求类别和优化等级之前，可以看到这套体系能帮助分析用户故事，并放到更有意义的优先级列表中。

根据你的用户来提炼卡诺指数

关于卡诺模型还有一个小提示：如果你有多个用户或者群组的用户，基于分析和其他的一些反馈信息，会发现他们的想法很不统一。那么可以将下面这些也加入卡诺优化指数中：比如对于业务决策来说，哪组用户的意见更重要，以及在使用你的网站时访问模式上有哪些不同。

举例来说，如果你有两个特征刚好都得了4分，但其中一个可能会影响网站上75%的访问者，另一个会影响到50%，将这两个4分分别乘以0.75和0.5，就得到了新的指数，一个是3，一个是2。这就在整理优先级的过程中，提供了更多的排序维度。

如果熟悉电子表格制作软件，可以使用这个软件建立一个用户故事的分析工具，并让电子表格软件来帮你进行计算。

由于在移动设备上访问互联网与使用台式机或笔记本电脑非常不同，而且在不同的人之间、不同的上网环境中也大相径庭，所以改造网站移动化的过程，是一个强调自始至终规范化进行用户体验研究的过程。移动设备产品设计也正像这句话一样，在整个过程中，我第一时间就引入了用户体验设计的概念。而且也正是因为我发现用户体验是非常有用的，才会用了一整章来介绍。

希望我概括提炼出来的那些小提示和技巧，可以帮你比以前更加了解客户，并让移动产品设计的优先级更加吻合那些对用户来说最关键的需求。

最重要的是，我希望你的用户体验分析和结果能够帮你了解本书后面的内容将如何协助用这些方法来让项目变得最靠谱。由于后面的章节会将网站逐个元素地分解出来讲解，所以可以根据自己项目的优先级，对照着来开始设计移动元素和用户体验。这些章节的顺序并没有在暗示你应该按照这个顺序来阅读（事实上，当你第一次试图逐个元素地关注和改造移动网站时，你也就会发现，其实还是需要同时注意很多事情的）。

改变屏幕的页面布局，这听起来很像是要重新设计页面一样。

如何才能在移动化页面布局的同时，又无须重新制作一个全新的网页呢？

要想对网站进行移动化改造，首先要明白一件事情，那就是你需要放下一些对页面元素定位的控制欲望，并不是全部的掌控能力，只是一部分而已。

不过让我们先来琢磨琢磨这个：Ethan Marcotte最近在他的教学内容中明确指出了响应式网站设计（responsive web design）的概念，在此之前的很多年也有一些人对响应式设计进行了解释，我们回头看看最早Jeffery Zeldman的网页设计经典著作，其中讲到过一个遵循标准的网页设计其实本质上也是符合响应式设计规范的。

就这一点来说，让我们来想想网络冲浪这个比喻真是再合适不过了，而且它并不是仅仅从一个用户的角度来说的，还来自设计者的想法。

我们需要驾驭波浪，并小心谨慎地注意周围的环境和条件，使得我们可以调整平衡、沿着预期的线路滑行。我们并不能控制波浪，但是肯定可以适应它。

所以如果你正在做的移动版网站是使用CSS来控制页面布局、定位和样式的，并且使用了HTML标记页面内容，那么你其实就已经打下了打造一个可适应于移动设备的页面布局的基础。

可能会让你感到惊喜的是，即便使用的是固定宽度的CSS页面布局，也没问题。你说得对，就算是固定宽度的布局，其实也并非那种不能改变或无法适应的意思。它仅仅是基于一系列特定条件下的固定而已。

下面，就使用固定宽度的网站作为移动化页面布局的例子来证明这一点。因为我猜想，大多数人都使用固定宽度的网站页面布局。

注意：想要了解更多Ethan Marcotte关于响应式设计的讲解，可以看他的那本《响应式网站设计（Responsive Web Design）》（A Book Apart出版社出版)。如果要想研究响应式设计的概念第一次被建立起来的基础，一定要读读Jeffery Zeldman的《网站重构（Designing with Web Standards，也译作：使用网页标准化进行设计）》（New Riders出版社出版）。

让我们从这个问题开始吧，起初是什么让一个固定宽度的CSS布局看起来是“固定”的。本书中案例所使用的是一个普通的、已稳定下来的开源CSS框架，叫做Blueprint。你在这里所学到的方法，应该也可以适用于任何一个基于CSS所控制的固定宽度页面布局。它们的原理都一样，只是细节上有所出入而已。

一个固定宽度的CSS框架要做两件事。

定义一套系统级的方法来组织屏幕上的二维空间，换种更简单的说法，就是指定了单元和栅格的尺寸。

定义命名法或一套命名体系。CSS的class和ID可以依照这套体系来保持命名的一致性，并且（像大多数网站所允许的那样）在基于栅格的页面布局系统中，实现预加载网站的内容。这些class和ID的名字，之后会在网页主体内容区域HTML元素中被引用到。

注意：要了解更多关于Blueprint的信息，可以访问www.blueprintcss.org。

如果固定宽度布局是依赖上面提到的这两类元素相互匹配的话，就相当于一方是单元和尺寸的定义，另一方是CSS中class名称的引用，那么改变其中任何一方，都可以让这个系统解体。举例来说，如果在CSS中指定：

而在HTML中把原本的引用

那么，在CSS中给类columnone定义的400 px的宽度值，就不再适用于包含在这个<div>中的内容了。因此，改变HTML中的class名称，并不能直接修改页面布局，除非已经有了另外一套class，准备了新的单元、尺寸、定位，或者是这些的组合。

再加上，在HTML中修改class的名称明显就是个很大的麻烦！而且这绝对不是标准化网站设计的意图，它的意图恰恰相反。如果已经建立起了一套class命名体系，可以在网站的CSS部分重新定义class的名称，那么你就已经做好在那里进行改造的准备了。只需要在一个地方修改，就可以同时修改整个网站中所有涉及class的地方，无论网站有多少个页面。

所以，你将要做的，看起来更像是下面这样。

从CSS中的这里开始：

在你的CSS中，通过重新定义columnone来为页面布局修改columnone的规格。

如果想要优化网站在移动设备上的显示效果，通过这种方法，就可以给已经存在的HTML元素定义新的单元和尺寸了。

做好准备将这些理论付诸实践了么？

你还记不记得滑块拼图游戏？需要重新识别网格中的图像滑块，并拼接成一个完整的图片。通过拖曳滑块来拼图，每次滑动一块，拖曳到网格中剩余的空白区域。初级的游戏是在3×3的网格中有8个图片滑块，而拥有15个滑块和4×4网格的游戏就非常具有挑战性了。

如果你已经很久没玩过这个游戏了，休息一下，看看你的电脑上有没有它的电子版本吧。Mac在桌面小控件中就有这个游戏，如图2.1所示。

网页浏览器的页面布局行为与这些滑块拼图游戏的表现非常相似。即使是一个非常小的页面，当你拖曳浏览器的一个角想改变浏览器的大小时，浏览器的文字也会自动重新排列调整位置。比如宽度变小时，文字的行宽会自动调整来移动并填充在窗口底部出现的“空出来的地方”。或者从另一个角度来说，窗口变窄了，就把文字的行也挤得更短了。好吧，事实上，这两件事情是同时发生的（见图2.2和图2.3）。

重点是：浏览器的可视区域天生就是响应式的。它们本来就被设计成比原始的滑块游戏更加灵活有弹性。而且它使用文字、段落、图像、区块和空间来代替原来连续相等的矩形，所有的调整都像是对空间的创造、删除、推动或伸展操作一样。

图2.2和图2.3 改变浏览器的大小，可以看出浏览器和网站是否已经符合响应式设计。内容可以自动进行调节来填充观察区域的空间。上面第一个图片是 1024 像素 × 768 像素，第二个图片表示的网页就已经被修改为 768 像素 × 735 像素了。

固定栅格的CSS布局，也能使用同样的方式执行。这可以称为是移动化改造背后的基础原理了，它将布局从较大格式的桌面电脑展示版本修改为较小屏幕上的移动展示效果。事实上，固定栅格通常会自然地随着浏览器的可视区域而响应。所以怎样才能发挥出这个属性的优势，使之应用于移动化展示，而又可以在一定程度上，根据移动化输出时的一致性需求来控制它们呢？

本书的其他部分将展示如何移动化网站内容而又不必全部重写HTML 标记。是的，如果你已经有了一个用CSS布局的网站，那么今天将会学到如何为网站进行面向移动设备的优化，而无须任何工程浩大的重新设计或者重新编码。这是你能做得到的，因为就像我们刚刚讨论过的，浏览器天生就有自适应的能力。

我们在脑海中记牢了网页的设计标准和浏览器的实现机制之后，现在是时候把注意力转移到实践移动化的网站上来了。我设计了一个小型网站（见图2.4），用于优化更新它在移动设备上的展示效果。它在很多方面都是具有代表性的，我希望这样做能让你感到不太陌生，即便你可能对芬兰的设计从来都没有兴趣，或从来都不了解（碰巧我也是这样，虽然我的老一辈家人中有一半是来自芬兰的，还有一位最好的朋友也居住在那里）。

图2.4 使用苹果笔记本电脑，在 Safari 中访问“Design in Finland”网站 (www.mobilizingwebsites.net/finland/)。

先做一些关于网站的注释。

固定宽度：像大多数网站那样，它也使用了固定宽度（950px，使用Blueprint CSS框架）。对于现在的网站来说，这真是太普遍了，不过也本该如此。虽然有些设计师提倡流动布局，但是流动布局可能会真的出现问题，因为当行宽超过66个字符时，易读性就会降低。因此，在宽屏幕上，使用流动布局就是一个设计的败笔了（除非字号大小也根据宽度放大）。

水平式导航：水平式导航十分常见。更重要的是，你在这里将学到的内容，可以应用在已有的导航上，无论它们是不是水平的。

多栏布局：这网站有一个页面模板，它包括一个主要的内容区域和一个在右边的较窄列，用来强调一些相关的内容。

页头和页尾：这也是在绝大多数网页设计中十分常见的部分。

那么它在一个手持移动设备，如iPhone上，看起来会是怎样的？如图2.5所示，它确实非常小。那么让我们开始动手为这个网站进行移动化改造吧。

图2.5 使用 iPhone 的移动版 Safari 访问“Design in Finland”网站（www.mobilizingwebsites.net/ finland/)

注意：这个网站没有经过移动化的原始版本是 http://www.mobilizingwebsites.net/nonmobilized/。如果你想跟着我一起来做移动化改造，可以在http://www.mobilizingwebsites.net/nonmobilized/download.zip下载整个网站（2.7MB），并像本书后面部分所描述的那样，在这些文件上直接修改。

在我们开始之前，有一个小预告：要做这个移动化改造，不可能一点都不修改HTML。你需要在HTML页面顶部做两处小改动，因为这里是页头，所以只需要在页面模板中修改一次就可以了。

提示：噢，你搭建网站的时候使用了网站模板，对吧？如果没有，就需要对全部网页进行查找替换，这也能实现同样的效果。

第一个小的改动，是运用了一些额外的方法来控制用户的浏览器，把这些浏览器的可视区域（就是在浏览器窗口框架或“chrome”中显示内容的区域）的宽度，设置为与设备屏幕宽度相同，并把这种单位和尺寸按1:1的比例定义在新的移动CSS文件中。

请注意，这并不会影响到普通的桌面计算机或者笔记本电脑浏览器的显示效果（除非把浏览器窗口的宽度缩窄到小于在移动样式表中定义的最大宽度）。

其次，需要链接一个新的移动样式表：

注意移动样式表要加在标准CSS框架和网站的main.css样式表之后。

那么关于HTML的第二处小修改是干什么用的呢？它包含了一个媒体查询，并告诉网页屏幕的宽度是否小于768px，它将使用mobile.css中的规则来规定网页的定位、单位和尺寸。在这种情况下，在这个样式表中重新定义的所有样式，都可以覆盖之前样式表中定义过的样式。

为什么是768px？

在本书的这些示例中，我使用了768px，因为这是iPad 和 iPad2 屏幕的最窄尺寸。我曾在iPhone、iPhone4和两个标准大小的安卓手持设备上测试过这个“最大宽度”（使用meta标签设置max-width）。这个“最大宽度”也在iPad上做过测试，网站在横屏模式下渲染成全屏效果，在竖屏模式下使用了移动版本的样式风格。对于在更多的平板电脑或其他设备的情况，如何为媒体查询做更多配置，可以查阅Ethan Marcotte的《响应式网页设计Responsive Web Design》（2010年由A Book Apart出版社出版）中关于媒体查询的章节。

既然链接了一个新的移动样式表，那就需要评估要修改哪些样式来让页面布局更好地为移动展示工作。

在修改了可视区域并附加了一个空白mobile.css样式表之后，图2.6为我们展示了在移动设备上得到的效果。

那么这里的主要问题是什么？实际上那个页面的行为是完全被控制的：它把可视区域调整为与iPhone可视区域一样的大小（320px）。这里有一个问题，就是还没有修改页面布局中由Blueprint定义的div宽度。这就意味着，我们只看到三分之一的页面，其他部分跑到屏幕之外了。

那么让我们来看看那些包裹所有内容的div。

类名称：container、span-24、span-15、span-7。

ID名称：banner、nav、bodycontent、rightbar、footer。

我打赌如果把所有这些类和ID的宽度都重新调整为100%，那一切问题就迎刃而解了，对吗？因此，就让我们用这种方法来搞定它们吧。为了安全起见，还要顺便把margin和padding设置为0。

图2.6 将可视区宽度修改为设备宽度后的“Design in Finland”网站（www.mobilizingwebsites.net/finland/）在iPhone的移动版Safari上的效果。

让我们再来看看现在的效果（见图2.7）。

好了，离全部完成这个网站的移动化改造还早着呢。但是你肯定可以看到这项工作是如何开始的，因为现在的内容已经受限制于屏幕的宽度了。

不过当向下滑动屏幕时，我发现自己忘记移除在桌面版网站中设置的边框了，边框有助于定义div的边界，并为这个页面布局提供视觉结构和风格。而在新的移动布局中，它们（除了让网页看起来更糟糕之外）就一点用也没有了，所以需要把它们移除。

另外，在检查效果之前还有一件事情要做。因为#bodycontent div是由Blueprit的类.span-15 appen-1来指定的，所以需要把append-1部分的宽度也考虑进去。换句话说，把.span-15设置为100%并不起效，这就是因为append-1仍然会给宽度中加入一些空间。而且也无法将复合div.span-15 append-1 的宽度设置为100%（我尝试过，这是没用的）。所以取而代之的，你需要使用新的规格来指定那个ID（bodycontent），把它设置为比100%小一些，我发现90%是可以达到理想效果的。

最后，既然已经改到这里，就增加一些外边距。因此，下面就是一些针对bodycontent这个ID所附加的CSS规则。

那么现在就来看看我们劳动的果实吧（见图2.8）。

图2.8 把 div 宽度重新设定为设备宽度并移除多余的边框之后，“Design in Finland”网站（www.mobilizingwebsites.net/finland/）在 iPhone 移动版 safari 上的效果。

还不错！对于移动化布局来说，这看起来是个好的开始。实际上也并不会比这个困难很多。诚然，我们可以用一个小实验来找出一些更诡异的CSS 指令（比如在这个例子中bodycontent ID的问题，就是我花了好一阵子才解决的）。不过任何设计工作都需要一些实验，所以别太胆小。沉浸到你自己的代码中去，把你在这里所学到知识投入实践吧。

注意：当移动化改造已有网站时，还有另一个布局问题需要考虑：要确定是否想要隐藏内容。我们下面会接触到关于这个问题的一些方面（而且在后面的第5章中还会看到关于这个问题其他方面的讨论）。

显示还是不显示

当设计师才决定不展示一个或两个div的内容（因为它是次要的或者无须在移动版网站中呈现）时，这里出现了一个移动化设计中的热门话题（as in，它让一些人非常气愤）。

反对派的观点非常简单，而且容易理解：当通过CSS告诉浏览器不要显示一些内容时：

你需要意识到，浏览器的确切做法是不显示内容。但是， CSS没有（也不可能）告诉HTML不去加载那些内容。所以内容仍然会被下载到移动设备，而往往通过蜂窝网络，因此就会经常消耗一些用户数据使用计划的很多字节。

现在我可以理解这一点，并从表面上看，让移动浏览器下载额外的、不会显示内容的div，这初看起来是愚蠢的，甚至是错误的。

除非这些内容是必须下载的，那么，是如何区分的呢？

在逻辑上的差别是手机浏览器下载了更多的内容。嗯，按理说它不会被展示出来，它就应该是额外的，但它和那些没有被设置为不显示的、无论如何都会被下载的内容是一样的。

因此，在既没有使用移动优先的重构方法（如果你有时间和预算来做的话，它绝对是个很好的主意），又缺少完整的内容梳理和重写的情况下，对一个已存在网站进行的移动化改造，就是寻求一种使用已有HTML代码能做得到的、面向移动设备最优化的效果。

这也正是我又一次觉得使用display:none这个逻辑可以说得通的地方，因为我们能够争辩说，有一个面向移动设备优化的网站，即使HTML本身并没有被重构或优化，也还是具有非常重要的价值的。它有足够的价值，可以论证地，下载了那些看不到的内容的人，应该不会介意多花一两个便士换取特权来使用专门为他们的小屏幕而优化过的网站。

此外，从企业所有者的角度来考虑这种价值。如果仅仅需要花费几便士的移动资费就能得到更多面向移动优化的网站体验，而这种体验的有无可能会影响销售订单的成败，那么这种情况下，是不是每个人都是赢家了？

所以，这就是我的观点。你不必同意，但你至少应该考虑一下，让人们下载一些不会显示的内容只会带来极低的成本消耗。毕竟，当人们下载所有在网页头部的额外的搜索引擎优化meta数据时，你大概不会仔细考虑这么多带宽问题，对么？因为他们也看不到那些。

最后，对于这个示例，我选择不显示每个页面右边栏的div。它有13行代码，差不多400个字符，下载了但不显示的代码量相当少。而且如果显示它，会让移动版页面长了将近一倍。虽然我觉得侧边栏在桌面版网站上的效果很好，但我并不认为它足够重要，需要放进移动版中。

在页面模板头部的HTML中，做了两个小改动之后，你就可以放开自己进入移动化的世界，改造那个已存在网站，而无须从头再设计一遍全新的移动优先了（移动优先依然还是长远的网页战略中的完美解决方案）。但如果你现在没有时间或预算来做这个，那么移动化改造现有的内容，就是目前最正确的事情。

因为你现在就可以做。今天。

正如HTML的第二处修改所标示的地方，在附加了一个移动化样式表之后，本章帮你理解了如何优化一个固定宽度页面的展现，使其适用于移动展示效果。这并不是很难，真的，几个月或几年以前，当你第一次设计网站时，就已经做过很多类似的事情了。因为你的网站已经被设计为响应式的了，使用新移动样式时，仅仅是使站点更加移动化。

作为响应式的一部分，你现在更好地理解了选择不显示某些内容而用户仍然会下载它们的成本。如果它只有少量的内容，不会显著消耗用户的成本，特别是如果他们明白，你提供了新的移动式结果。因此仔细衡量你的选择，并决定什么是最适合你的用户的项目、预算和时间表。