移动网站设计要点及建站工具

 2012-05-03  

“移动网页”是网站设计中的重要一环，随着能访问互联网的手机逐步普及，因此，大家希望能随时关注自己喜爱的网站。在本文中，我们将着重探讨网站开发/设计人员在设计简洁和专业的移动网站时必须注意的重要方面和技术细节。

移动界面通常很小，因此开发人员必须对预定义好的尺寸进行调整。以下是一个非常基本的“移动网站”的布局。

布局

我们一起来看看不同元素在布局中的使用情况：

标志

标志是布局的核心之一。标志要尽可能做到引人注目，但与此同时，应注意它的尺寸，并确保它的大小不会超过2KBs。因为，移动网络载入图片通常要花很长时间，你也不想因为个体差异而使得自己的网站载入不完全。

网站导航

导航是设计中最重要的事之一。不管怎样，你都需要导航栏来链接到网站的各个位置，它的位置通常在网站顶部。你也明白，大多数移动设备根本不便于使用QWERTY实体或虚拟键盘。因此，为网站创建导航是移动网站界面友好的一个关键环节。

内容

内容在移动网站中占据着核心位置。人们用移动设备访问网站，最主要的目的就是为了获取内容信息。所以要确保你的移动网站的内容不会有任何改变，否则，你最终可能将面对用户流失。

人们使用移动设备时，通常处于移动状态，所以他们没有太多时间来浏览网站内容。为此，你应该采取缩减内容的措施，并选取内容中有价值的部分，与此同时，你要将完整内容的链接提供给用户。如果你的个人博客处于活跃状态，你可以忽略这个问题，因为，你不会每天都去对每篇博文的内容进行缩减。

我们都明白图片在内容中的重要性。但是移动网站不宜使用过多图片，因为，大部分手机载入这些图片要花很长时间，所以尽可能地少用，如若上下文中涉及到相关图片时，图片则不可少。

如果你希望在移动网站上添加图片，最好使用占用空间小的.JPEG，.GIF，.PNG等图片格式。为了避免用户对图片进行缩放，一定要对图片进行压缩。现在几乎所有的设备都能显示图片，但是，有些用户可能在浏览时会关闭图片显示。因此，推荐大家用ALT替换文本显示图片信息。一些读者或访问者会放大图片，为了避免这种情况，图片的尺寸必须固定。

页脚

老话说得好：“看男人不能只看它的衣服，要看它的鞋”。许多网站的页脚做得非常烂。我经常逛博客和营销网站，看到页脚放慢了杂乱的超链接，我跟大多数人对此都非常厌恶，再加之，移动网站的屏幕尺寸小，这就可能造成客户或读者流失。所以，制作吸引人的页脚非常有必要。

所以，如果你希望你的应用程序/网站的移动界面大获全胜，你就应该把重心放在布局上面，做到零错误，因为用移动设备进行网页浏览将会是未来发展的大趋势。

代码设计

很多开发新人在写移动界面代码时一直很犹豫，下面的建议有助于你打消这些考疑虑：

有效代码

使用合适的代码，确保其100%有效，因为大部分移动浏览器达不到电脑端的浏览器性能。

流动布局

在所有移动浏览器上查看布局效果，这往往是不现实的，因为用来浏览网页的移动设备太多，逐一去追踪效果让人很头疼。流动布局可以很好解决或避开这个问题，它可以根据屏幕尺寸自动调整。

为了达到这种布局效果，应避免用像素值设置宽度，用百分比或ems代替。

你可以搜索关于移动网站的流动布局，也可以通过此链接下载示例：Perfect multi-column CSS liquid layouts – iPhone compatible

具体的样式表

你可随时使用各种移动设备找出更好的用户体验。比如，使用手持设备浏览你的网站的用户。

点击此链接了解媒体类型的更多内容：W3.org – Media Types.

拒绝使用花哨的脚本

你的移动网站想要成功，不要使用Javascript脚本，Flash动画或其它任何花哨的脚本语言。因为大多数移动设备无法解析这些脚本语言，最终，要么设备死机，要么出乱子。

如果你非用不可的话，那么就应该给出友情提示，告知用户他们的移动设备正在载入和启用这些脚本。如果出了差错，也错不在你，因为你事先已经提醒了他们。

小心插入广告

这一点应该引起大家的重视，不要让你的移动网页铺天盖地都是广告，PC端的网站同样也应该注意这个问题。

俗话说得好：“一颗耗子屎搅坏一锅汤”。这对许多网站而言，倒是大实话。因为许多网站都是广告满天飞，他们根本不关心用户体验，一个个都唯利是图。因为移动设备的CPM（每千人浏览页面的费用）很高。

所以我建议，不要让网站淹没在广告里，尤其不要插入那些五颜六色的广告。

自动识别移动浏览器

为了成功打响你的招牌，你应该在服务器端纳入“移动浏览器侦测和重定向”服务的脚本（比如说PHP）。你可能用得着User Agent侦测服务，服务器会根据当前浏览器所描述的信息来判定它应该访问移动还网页还是原网页。你可以用User Agent 侦测替代前面提到的“PHP移动浏览器侦测”。再介绍另一例实现办法，通过实时的JavaScript脚本语言，请求存储了设备相关信息的DeviceAltlas或WURFL数据库，进行浏览器判定。

如有必要，可开发专门的客户端程序

如果你的用户群体数量非常高，可以为此开发一款针对多种移动界面的应用程序。Facebook、Gmail、Twitter、Yahoo以及许多大公司都有自己的客户端应用程序，这也是他们如此成功的原因。如果你有了自己的客户端程序，就不必再担心那些花哨的脚本语言了，因为你可以按照自己的方式提升程序性能。（你不能改变浏览器，但是你完全可以改变自己的程序）