移动优先很好，但我想快好省的将现有网站移动化

 

谈到移动设计，并不是所有的人都有足够的资源和时间去重头开发一个全新的移动网站或是重新设计成一个移动优先的网站。Mobilizing Web Sites一书的作者Kristofer Layon将在本文中介绍，如何一步一步地将一个已有的网站改造成一个移动网站。

在过去的几年中，我有幸参与了一些关于移动web设计的重要会议，如果你对移动市场感兴趣并且正在阅读这篇文章，你可能已经听过一些给人带来灵感的文章和一些技术介绍了，应该对如何在移动设备上设计新的网站有所了解了。

对于我们，最大的问题就是，在谈到移动网站的设计时，我们常常是重头来过，并希望能够设计出一个移动优先的网站…而我们还需要继续开发我们的桌面项目。或许我们中有些人是帮助维护和更新现有网站的设计人员。又或者，有些人是签约为客户维护和更新已有的网站。总之，我们的客户都是一些对移动感兴趣的人——但是需要考虑的是，他们是否给了我们足够的时间、资金或是其他我们需要的资源？

通常情况下，重头开发一个符合现在移动目标的全新的网站是一件很奢侈的事情。虽然Luke Wroblewski大肆宣传移动优先的理念，并且确实影响了很多人。但是对于那些已经被设计成移动靠后的网站又该如何是好？更糟糕的是，有时候我们可能会觉得我们的环境根本就不适合转变成移动网站，又该怎么办？

Boston Globes是一个移动优先设计得很棒的网站。但是它聘请了大量的设计顾问并且花费了几个月的时间去设计

开始时逐步提升

请放心，并不是只有你感到无法重头开始。我认为Dan Cederholm在今年八月份已经深刻分析过这个问题了。

“对于一个已经存在的网站，让开发团队放下手头的工作重新开发一个网站是一件很奢侈的事情。我们现在在Dribbble上就碰到了这样的问题，我认为目前最好的办法就是找到一个折中的方法。我们将Dribbble原来在大屏幕上运行的代码和内容保留了下来，然后再对它进行改进…当时间、资源和资金更加充裕了以后，我们再从整体上重新构想一些东西，但就目前而言，逐步改进是最可行的方法。这是我们优先需要考虑的事情。”

事实上，关于web的研究显示，虽然现在有越来越多的网站正试图对移动平台做优化，大多数的网站并没有一个移动版本。dotMobi的研究显示，虽然前1，000名的网站中有40%拥有移动版本，但在前10,000名的网站中，这一比例下降到了30%，前500,000的网站中则只有19%了。

这意味着大多数人并没有做移动设计。这并不是一个小问题。研究表明，将近一半的移动用户在发现一个网站的移动版本做得不够令人满意以后，将不会再去访问这个网站，57%的用户表示不会向其他的用户推荐这个网站。所以，你准备如何逐步改进你的网站，让它变得更加移动友好？这其中应该包括调整布局的大小适应屏幕的尺寸，利用触屏功能重新设计导航系统，重新设计文本和图片的尺寸。这都可以在现有的设计中加以改善。这就好比是重塑一个房屋而不是完全新建一个房子。

如果你需要在渐进改进和等待时机重新设计之间选择一个方案，我建议你选择前者。虽然这种方案每一次的改进可能并不明显。但至少这种方法将使得更多的网站能够变成移动友好型，帮助用户拥有更好的体验，提升网站的业务。

另外，即使是很小的改进也能像重头设计一样具有创造性和重要性。

Dribbble并没有按照移动优先的原则重新设计，但是它同样具有很好的移动导航和浏览体验。

翻修vs新建

谈到设计一个拥有良好移动体验的应用，就想到重头开始设计是一件很自然的想法。事实上，一提到设计，我们首先想到的就是设计一个全新的东西。因为能够创造一个全新的东西是促使和吸引我们去设计的原动力。图像、文本和代码：将一个空白的浏览器窗口用自己的设计让它变得丰富起来确实能给人带来创作的激情和满足感。

所以一想到要在一个已有网站的基础上进行改进和修补，的确有点令人觉得乏味。但它是否也能变得有创造性呢？其中的创造性又在哪里呢？

有时我们常常忘记了，其实web工作者和媒体、材料或是机械系统工作人员没有本质上的区别。人们的创造性体现在重头到尾设计一个全新的东西并在空白的画布上填充上各种新的想法——但这种情形往往是些个例，而不是常态。就拿建筑为例吧。

那些从小梦想着设计一些建筑的人们最后大多去了建筑学院，当他们完成了自己的课程，便成为了建筑师。类似的，那些喜欢手动实践的人可能会进入职业学校成为一名工匠、泥瓦匠或是技工。无论他们的角色是什么，那些希望能够参与建筑设计和构建领域的人就和我们想要出人头地的想法一样。他们想要建造一些让他们引以为傲的作品。通常梦想能够打造一个全新的建筑。

但是与全新的建筑相比，更多的还是翻新和改进工程。这才是大多数技工的主要工作。

所以，我们应该面对现实：常常是那些旧的作品变成了全新的东西，不是吗？在某种程度上讲，一个翻新或是重用的项目并不是一个旧的工程。它是一个使用了一些不同的组件，加上以前已有组件的新项目。

再看看web设计和开发领域。我们之所以会选择我们现在的工作就是因为我们认为我们能创造出一些新的东西。但是正如我之前所说的，现实往往不能尽如人意。

那该怎么做呢？

正如之前所举的建筑的例子，我们发现一个新的网站其实并不一定需要重新设计。特别是，移动web体验并不需要设计一个新的网站。移动靠后的理念有时可能行得通；我们不需要等到一个合适的时机再去开发一个移动优先的网站。其实，取代重新设计一个全新网站的方法可以从考虑先逐步改进现有的网站开始，在现有的网站设计中加入移动技术。

打破固定的宽度和网格限制

到底该怎么做，又该从哪里入手？当你想将一个已有的网站改造成移动化的网站时，可能深深感到被固定的宽度和基于网格的设计限制了。

但如果你考虑移动优化——我更喜欢将它称之为mobilising ——如果一个网站使用CSS处理布局、位置和风格设计，使用HTML封装内容，那么它就已经为适应移动设备和环境做好准备了。

可能令人惊讶的是，即使你使用了固定宽度的CSS布局也能够做到这一点。对，固定宽度的CSS并不意味着它无法更改。只是需要修改几个条件设置。

即使为桌面浏览器设计的网站采用了固定的网格布局，那也不意味着它们需要重新设计以实现移动性

固定宽度的CSS框架做了两件事：

1. 它定义了一种二维空间屏幕组织方法，它使用网格管理各个单元。
2. 它定义了一个术语，或是系统名称，可继续作为CSS类或是IDs（只要web运行），并能在基于网格的布局系统中呈现一个网站的内容。这些是与HTML封装相关的类和ID的名称。

如果你要将一个固定宽度的网站改造成一个移动版本，你只需要指定新的单元，并且重新测量你的网站中已有HTML元素的大小，让他们在移动设备上能够更合适地呈现出来。这个策略可以逐步实施到你设计的各个方面：布局，导航，排版，图像和表格。

当你逐步开始改造你的网站时，你会发现其实web的内容具有很好的可塑性和响应能力。

Finland中的移动设计版本

在增量的移动改造中学习

我认为当你熟悉了移动限制，技术和机遇并将它们应用到现有的网站之中后，你将学到更多的东西并且能够做更多的工作。你可以让用户评估你的工作，从移动展示和移动环境的角度更加全面地重新考虑你的内容，从而持续地提升你的应用的移动性。这样，一个更加全面的移动优先重新设计看起来也并没有那么困难了。这看起来应该就是一个正确的方法。

更重要的是，它看起来现在就是一个合适的时机可以开始改造了。

如果你先从用户体验，布局，导航开始，你将会学习到很多移动环境的东西。学习一些交互做得很好的移动网站将让你从一个全新的语境审视你的内容。可以将你改进的初步成果展示给你的同事或是其他访问者，并及时获取反馈。

从另一个角度看待这个问题，它并不是将所有的东西都打包起来，然后将这些内容全部放到一个行李箱中，你需要检查自己的行李。但是你无法真正的弄清楚你需要哪些东西，如何根据你拥有的容量决定你需要的内容范围，除非你知道你拥有的空间大小并且测试了如何让你的内容满足空间的限制。

同样的，如果你是对一个已有网站实施增量的改进，那你可以清楚地知道如何让web内容适应一个移动环境。所有你能想到的事情都能成为一些额外但是重要的工作：你的内容清单，对品牌呈现的审视，重新评估网站的目标。事实上，这个打包行李的比喻是相当贴切的。对最初移动设计的重新思考将让你增加对移动限制的认识。

因此，无论是采用迭代的方式在一个已有网站中增加额外的处理（使用媒体查询和CSS，创建一个用户可以自由选择的PHP的移动版本），还是通过jQuery Mobile之类的移动框架开发一个单独的移动web体验，现在都是时候尝试移动开发了。大多数的web目前还没有准备好适应移动设备上的浏览器。现在你是否应该发挥你的力量，让更多的人能够享受移动访问？

现在是时候准备让web移动化了！

 

文章来源：Mobilise your website

 

译文来源：http://www.webapptrend.com/

 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注ITeye的同时，关注我们的新浪微博 @WebAppTrend，关注我们的腾讯微博@WebAppTrend，欢迎加入我们的Q Q群：193775364