后移动年代的 Web 规划准则浅析

还记得 Wap 吗，现在还有多少人运用 Wap？后移动年代，跟着阅览器技能的前进，为移动设备设置特殊站点现已不再必要。作为 Web 规划师，假如你能遵循一些基本的规划与布局准则，你的站点将能被大都移动设备更轻松地拜访。本文叙述的是后移动年代的 Web 规划准则。

移动阅览技能现状

当今最受欢迎的手机体系包括 Android，BlackBerry 与 iPhone。尽管这些手机体系中的阅览器都支撑 HTML + CSS + JavaScript，但它们依然存在某些局限。

Flash

现阶段，用手机拜访 Flash 站点，除了一个黑屏幕，什么都不会显现，并且手机也不会提示说无法加载 Flash，因此，Flash 站点应该经过阅览器勘探技能，在不支撑 Flash 的客户端上输出代替内容。尽管 Flash 在众多渠道上都能输出漂亮的内容，但在手机上运行 Flash 就像在 Mac 上运行 Windows 相同，不过，业 界现已出现一些技能来处理这个问题，但不要盼望太多。

Silverlight

Windows Mobile 7 将支撑 Silverlight，那将是唯一一款支撑该技能的移动阅览器。不过，既然微软现已向 HTML 5 敞开大门，因此，也不要盼望微软在移动渠道上会为 Silverlight 做多少尽力，因此，底线是，不要在你的移动站点中过于依靠 Silverlight。

JavaScript

过去5年，移动渠道对 JavaScript 的支撑势不可挡，其体会现已挨近桌面，但不能支撑过于复杂的功能，这里有一个关于这个问题的事例剖析。至于那些比 较老的手机，尽管也支撑 JavaScript，但大都都是默许关闭的。当你需求为移动设备编写 JavaScript 的时分，需求对代码进行验证和检查，避免用户的设备溃散，另外记住，将 JavaScript 脚本放到页面底部，这样，不至于在页面还没加载前就溃散。

CSS 3

移动渠道对 CSS 的支撑现已很久了，如今，许多基于 Webkit 开源项目的 手机开始支撑 CSS 3，CSS3 拥有更好的视觉体会，支撑降级运用，还能加快页面加载，你在运用 CSS3 的时分，只需求注意其间的某些属性在旧的手机上能够降级运用。

规划感与易用性之争

流行的 Web 技能并非都是你的最佳选择，你需求对运用的各种技能进行测试，事实证明，在移动阅览领域，比如 Lightbox，视频，鼠标回旋扭转一类的技能存在问题，需求避开，咱们将在这一节中对各种 Web 规划元素进行叙述。

为什么视频不能播映？

前面提过，不同移动渠道对 Flash 和 Silverlight 的支撑很不共同。目前，像 Vimeo 及 YouTube’s 一类的站点在移动设备上拜访还存在各种问题，YouTube 比 Vimeo 略好一些，而内嵌视频支撑目前则好像只限于 Google Android 渠道。

移动渠道的视频，是经过 HTML5 完成的，但是，到目前为止，HTML5 视频的许可问题仍不明朗，不过 Google 一直在这个问题上走在最前面，期望他们能最终使这个问题免于重蹈 DVD 解码器许可的覆辙。

文字缩放

期望你的文字最多运用的是相对方位而不是绝对方位，不然，Android 渠道的阅览器会将你页面的文字扔到屏幕之外的某个当地。

在小屏幕上的显现清晰度问题

在手机的小屏幕上看网页，就像你隔着一个房间看电脑屏幕那样，成果是什么看不清晰，你需求将重要的页面元素加深对比度以便用户能看得清楚点。

Lightbox 技能

Lightbox 是最受欢迎的 JavaScript 技能，也是最容易让手机用户抓狂的当地，在许多时分，手机屏幕上的 Lightbox 只显现一个旮旯，而大部分内容则被扔到屏幕外的某个当地。另外，在某些时分，Lightbox 还让手机的 Web 页面溃散，导致任何东西都无法点用。这并不意味着你不能运用 Lightbox，比如登陆框一类的当地还是能够运用（登陆框能够做得比较小一些 - 译者注），但不管怎样，最好一起供给一个传统的登录办法，避免 Lightbox 显现到屏幕之外。

阅览器勘探

许多年前， Web 开发与规划者需求凭借阅览器勘探技能，为不同阅览器，或者不同版别的阅览器输出不同内容，跟着 Web 规范的深入人心，为不同阅览器输出不同内容现已不可取。阅览器嗅探能够经过比如 jQuery 一类的 JavaScript 库轻松完成，还有一些能够嗅探 flash 支撑状况的库能够运用，但是现实是，除非你有许多 Flash 应用，不然很少会用到这个，事实上，现在的许多移动阅览器在遇到不支撑的内容时会悄然掠过，而不会像 IE6 那样弹一堆过错。

鼠标回旋扭转

许多站点的导航运用鼠标回旋扭转并下拉子菜单的办法，但是移动阅览器没有鼠标回旋扭转一说，尽管有的手机支撑这一操作，但和桌面办法有很大的差异。应该避免 将重要的信息放到需求鼠标回旋扭转才干显现的状况。

下拉菜单导航

下拉菜单需求鼠标回旋扭转才干翻开，前面说过，在手机上，这无法完成，另外，下拉菜单的尺度往往超越手机屏幕尺度，即时用户翻开了下拉菜单，也很有可能 无法彻底拜访。你应当始终在侧边栏保留子菜单，不管是针对手机站点还是桌面站点。

缓慢的加载速度

手机阅览器加载速度非常慢，你需求压缩自己的数据，乃至运用 CDN 加快网络。在 WordPress 一类的 CMS 中能够启用数据压缩，你可在在这个站点测试你的数 据是否经过了压缩，假如你运用静态规划的页面，能够运用 Minify 对你规划的网页代码进行净化。

加载进展提示

你应当运用加载进展图标，告诉用户现在正在加载，关于手机阅览器这种 Internet 衔接不很稳定的情形特别重要，在一些 Ajax 应用场合，假如不显现加载进展，用户会认为你的站点现已失去反应。

回忆用户的数据

手机用户打字很不便利，应该尽可能运用 Cookie 回忆用户的数据。

侧边栏放在左边还是右边？

应该是右边，由于手机屏幕很小，用户阅览你的网页的时分，假如左边显现侧边栏，他们要看真正的内容，就不得不左右翻滚，放在右边，用户就能够直接向 下翻滚看具体内容，需求看侧边栏的时分再左右翻滚。

小屏幕

前期的 Web 规划师提起当年的 800x600 屏幕就一肚子怨气，好在现在的桌面屏幕都足够大了，然后移动设备的屏幕比这个更小。你所能做的，尽可能不要把网站的 Header 或 Logo 做得太大。

移动站点合适你吗？

许多公司花费许多金钱布置专门的移动站点，事实上，这并不必要，假如你有个电子商务站点，而手机用户存在拜拜访题，这种状况，或许才值得专门布置一 个移动站点。

单列布局

要想让你的站点更好地支撑移动阅览器，你或许需求丢掉侧边栏，由于侧边栏对移动用户来说毫无疑义，Facebook 以及 Amazon 一类的站点运用这种办法改进用户体会。

图片缩放

许多基于博客体系的站点都包括移动版，完成更简略的导航，问题是，这些站点一起会像文字那样缩放它们页面上的图片，那些被缩小的图很难看清楚，更甚 的是，你没有办法改变图片的显现尺度。应当答应用户点击一个图片以显现其完好尺度版。

简略导航

与其让移动用户像在桌面上那样显现站点中的所有内容，不如只为他们显现最基本的内容，免得处处翻滚，YouTube 在这方面做得最好，页首的那些干净，简略的按钮非常好用。

广告

去掉侧边栏之后，你的站点中的大部分广告位就没有了，一个不错的办法是将广告放到页尾。

页尾的完好站链接

尽管你拥有一个移动版别的站点，但用户可能期望看到完好的站点内容，大都移动站点的做法是在页尾放上完好版站点的链接。

结论

以上叙述了现代移动 Web 站点规划中的各种问题，下面是创立移动 Web 站点的一些资源和工具：

Tools

W3c Mobile Checker （W3C 移动站点验证）

JavaScript Support for Phones （手机阅览器的 JavaScript 支撑）

Mobile Site Converter （移动站点转化）

Simple Mobile Site Testing （简略移动站点测试）