移动网页设计最佳技巧和实践
深圳网站制作据预测，到2013年底，全球将有超过17亿的移动互联网用户。有了这些数字，Web设计者和开发人员就必须学习移动设备的最佳开发和设计实践。

在大多数情况下，你不需要学习任何新的移动网站设计技术。但您需要以一种新的方式来看待站点设计，这一点比标准浏览器的设计要严格得多。为了解决移动站点设计带来的问题，并获得与您的标准站点一样方便和有用的结果，需要一些创造性的解决问题的技巧。

移动网页设计最佳技巧和实践熟悉可用的硬件和软件

移动电话和移动设备平台在操作系统、屏幕尺寸、分辨率和用户界面方面差别很大。为了决定你想要优化你的站点的哪个平台，熟悉不同的可用选项是很有帮助的。

最常见的操作系统是Windows Mobile、iPhone平台、Palm OS、移动Linux、Symbian操作系统、黑莓平台和安卓（由于Verizon和谷歌最近达成的协议，Android将变得更大）。还有其他专用于特定手机的专有系统，比如一些Verizon手机和特定品牌的手机。您可以根据站点的受众类型来估计，您的用户最有可能使用哪些OSS。如果访问者大多是业务用户，则需要优化Windows Mobile和黑莓设备的站点。如果你的用户是年轻的，时尚的，或更多的技术知识，你想让你的网站为iPhone和Android设备优化。不管怎样，确保你的站点至少在大多数移动平台上都是可用的。

移动浏览器是另一个需要考虑的因素。一些常见的浏览器，包括Safari浏览器为iPhone，Android的浏览器，Opera移动，WebOS browser（掌上设备），黑莓浏览器和Internet Explorer移动（Windows移动设备）。在诺基亚和其他手机品牌上也有更多的浏览器。有些浏览器是基于专有的代码，而其他人都是建立在WebKit（Android，Safari），壁虎（Fennec，Mozilla浏览器）或其他常见的平台。

最后，您需要考虑站点访问者最常见的屏幕大小和分辨率。你的站点应该工作在你的访客可能使用的最广泛的移动设备上。标准手机常见分辨率包括101×80像素（索爱手机），128×128像素（三星手机），和120×160像素（摩托罗拉手机）。对于智能手机来说，还有很多工作要做。iPhone 320×480像素屏幕；HTC Touch Pro有480×640像素屏幕；Palm Pre有320×480像素屏幕的黑莓风暴；有360的×480像素的屏幕；和HTC的金星已经高达800×480像素屏幕。许多这些屏幕可以轻松地显示一个标准的网站。

移动网页设计最佳技巧和实践简化！

在大多数情况下，您的移动站点应该比您的标准站点更简单。唯一的例外是，如果你的标准站点已经很简约了。从站点中删除图形元素通常是优化其在移动设备上显示的有效方法。寻找简化站点设计和功能的方法。这可能意味着重新调整你的菜单，消除图像，打破了文字在多个页面，或重新工作网站的布局和功能。

使用有效的标记

考虑到潜在的操作系统和浏览器可能会访问您的站点的多样性，Web标准变得更加重要。标准浏览器在很大程度上是非常宽容的坏代码，但与移动浏览器，你往往不会得到这样的余地。确保代码验证尽可能的简洁和简洁。

给用户访问网站的选择标准

根据访问者使用什么样的设备，他们可能只想使用你的标准网站。对于很多更好的智能手机和iPhone来说，情况尤其如此，后者在出色地发布标准网站方面没有问题。给你的移动访问者访问标准站点的选项，即使它只是通过页脚的链接（我们大多数人都倾向于看）。您还可以给他们选择返回到移动站点，而不必使用他们的后退按钮。

使用单独的移动主题

同时优化您的手机使用的主要网站有时是有道理的，它往往是更容易使用一个单独的手机主题，可以做的最下移动设备改变CSS。一个专用的移动主题意味着您可以真正考虑到访问者将如何看待您的站点，并为其优化它。有些网站有一个针对常规移动设备和iPhone用户的优化设计。

限制滚动到一个方向

当使用标准浏览器时，在网页上滚动多个方向真的很烦人。当你从移动设备访问时，这种情况不会改变；事实上，情况更糟。使用触摸屏时，很容易意外地滚动错误的方式（水平方向而不是垂直方向，反之亦然）。如果你的站点只滚动一种方式，那么你就消除了这种麻烦的可能性。

不要使用弹出窗口或打开新窗口。

根据特定的平台，弹出新窗口可以影响浏览体验的，所以不要使用它们。如果您绝对需要在新窗口中打开某个东西，请确保提醒移动访问者它会这样做。

移动网页设计最佳技巧和实践尽量减少图像的使用

只使用你需要的图片来传达你的信息。标志是好的，就像大多数图标一样。与网站内容无关的图片也很好。但要消除那些除了好看以外没有别的用途的形象。他们一般不会在移动设备上看起来漂亮，所以为什么要麻烦呢？有时候，它们只会让你的站点看起来更糟，或者导致奇怪的滚动或布局问题。

优化你的导航

许多移动设备都有触摸屏接口，所以请记住这一点。这意味着在你的链接的可点击区域较大，使得按钮更大，把更多的空间之间的联系。试图点击微小的、几乎看不见的链接是一件非常痛苦的事，每次你想点击某些东西时都要放大，这并不能使它更好。为了改善这些导航问题，许多网站使用一个完全独立的移动导航的设计，对触摸屏或非鼠标输入设备优化。

不要依赖Flash或JavaScript

并非所有的手机和移动设备都支持Flash或JavaScript。即使他们这样做，也不能保证它将是最新版本。如果访问者使用iPhone，就忘了Flash。确保移动站点上的所有重要信息和功能都在普通（x）html / CSS中。否则，您就有很大一部分访问者无法访问重要内容。

从你的标准站点中包含尽可能多的内容。

有多少次你从你的手机到一个最喜欢的网站，然后意识到你不能到达你想要访问的部分？这种事总是发生。在移动站点上尽可能多地包含原始站点内容。除了使它可用，确保导航路线到达它也保持相对不变。

移动网页设计最佳技巧和实践确保将正确的工作

不要只发送移动用户主页。没有什么比点击一个链接更令人讨厌的了，无论是在搜索引擎结果中还是在另一个网站上，如果你在移动设备上，它都会重定向到主页。如果你的站点自动检测到一个访问者是否来自一个移动浏览器，请确保它已经设置好将访问者发送到他们试图访问的链接，否则他们很可能会离开，再也不会回来了。