5大移动网页设计之最佳实践
5大移动网页设计之最佳实践-移动阅读二维码

结构和代码

另外一件需要考虑的事情就是结构代码(markup和styles):

你知道WML或者XHTML mobile profiles?(百科:WML(Wireless Markup Language – 无线标记语言)。它是一种从 HTML 继承而来的标记语言,但是 WML 基于 XML,因此它较 HTML 更严格。WML 被用来创建可显示在 WAP 浏览器中的页面。用WML编写的页面被称为 DECKS。DECKS 是作为一套 CARDS 被构造的。这种描述语言同我们常听说的HTML语言同出一家,都属于XML语言这一大家族。WML的语法跟XML一样,WML是XML的子集。HTML语言写出的内容,我们可以在我们的PC机上用IE或是Netscape等浏览器进行阅读,而WML语言写出的文件则是专门用来在手机等的一些无线终端显示屏上显示,供人们阅读的,并且同样也可以向使用者提供人机交互界面,接受使用者输入的查询等信息,然后向使用者返回他所想要获得的最终信息。XHTML Mobile Profile –2001年发布,基于XHTML,针对移动电话的语言,被认为是目前最优秀的语言)

你所设计的app是应用于iPhone还是Android?

你在设计时有没有考虑到移动设备浏览器的成本和速度?

什么是HTML5和CSS3?(百科:HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式(CascadingStylesheet)。CSS3提供了非常多新途径去改善你的设计工作,且做了不少重要的变化。)

这些问题还不够全面,有些问题也正处于研发阶段。

新设备所支持的代码可能不同于旧的移动设备。

选择

设计一个对移动用户友好的网站,最重要的事情就是选对语言。在智能手机出现之前,旧的手机只支持WML(最基本的语言),随后W3C推出了更加友好的XHTML(XHTML Mobile Profiles档案)。

幸运的是,移动设备产生的更新速度是的网页体验更加完整和健全,如果你不懂mobile profiles或者WML,你可以使用正常的HTML或者XHTML。

不过,仍要强调的一点是,WML仍是要考虑的,你的用户也许使用的是普通手机(非智能手机)。当然现在我们要处理更多的web zombies(网页劫持)。

同样你的决定必须基于网站数据和大量的网站分析。

速度和成本(对用户而言)

无论你采用哪种语言,接下来要考虑的首要因素就是速度和用户成本。

移动互联网运营限制流量,进而使带宽成了一个有限而宝贵的资源,而且漫游收费还很贵!

考虑到流量、成本和速度,所以必须保证markup(编程语言)尽可能的简洁、小且标准。

得记住一点,移动网络运营商收取的漫游费是很多的!

由于新技术更新和采用速度很快,未来肯定是HTML5和CSS3的天下,所以要考虑适当地升级你的代码。

像Apple等都提供固件升级,这样很多老设备也可以支持新标准了。但是也许会发生类似的情况:IE6用户拒绝升级到IE8,因此在决策之前,都要做好研究,测试、测试、再测试!

布局要素

  • 移动网页布局会很麻烦:
  • 移动设备形状尺寸不一;
  • 移动设备质量和解决方案不一;
  • 移动设备或许支持放大滚动,但也可能不支持;
  • 屏幕小,所以页面滚动会更加困难。

移动页面设计布局的终极目的就是:尽可能地让用户快速地找到所寻找的东西,减少这一过程的用户负担。

布局对你的移动网站成功与否起着本质性的作用。

由于空间少,single column designs(单栏设计)是必须的!

简洁

有效的移动网页布局的理念之一就是简洁。内容越繁杂,读起来越困难,需要滚动的地方越多!

空间小致使多栏设计并不适用,内容布局不能超越屏幕,除非是被动放大等。

因此,单栏设计显得更加实用。

本文链接:http://www.mobileui.cn/5-mobile-web-design-practices.html
本文标签: , , , , , ,