针对移动设备web制作的小知识

By | 2010年6月14日

最近,因为对手持设备样式表的逐渐了解,我对手机网站的开发设想产生了一点点改变。

首先,什么时候你会想打开手机用来上网?

通常有两种情况:一种是急需获得某种信息,但因为各种原因只能通过手机上网查询;另一种是闲着无聊,便通过手机上网消遣。
对于后一种情况,设计一种同电脑浏览有相同浏览体验的网站依然是每一个WEB开发者的梦想,但是对于前一种呢?当上课要迟到时,在路上赶路缺忘了上课的课室时,只想快速地查到想要的数据,一点不在乎网页的用户体验;同样,在外地想查询某公司的电话号码时,我们需要的,仅仅是一个8位数的电话号码,并不要任何的视觉效果。

现在开始,我们将讨论如何制作针对前一种情况的wml。

现在正是移动web的成长期,在这个阶段,手机的功能正在变得越来越强,他们的内存甚至比早期的个人电脑还要多,但是,与所有技术的成长期一样,移动WEB的未来还有太多的变数。数百种手持设备,它们可能使用四十种不同的浏览器,而这些浏览器以不同的方式支持HTML和CSS。目前我建议在等待移动WEB成熟的时候保持简约耐心

下面列出了一些针对手持设备应该注意的地方:

  1. 让每KB都物有所值,隐藏额外的部分,使用更少更小的图像,等等,因为WEB访问是昂贵的。
  2. 要确保站点上每个有意义的图像都有替换文本,使以无图像方式查看页面的访问者不会错过任何信息。因为访问者可能会选择在不显示图像的情况下查看页面(从而加快访问速度)。
  3. 保证图像尽可能小,彻底地对站点进行测试。因为许多手机浏览器(比如UCWEB)会通过代理服务器对网站进行过滤,从而去掉手机浏览器无法处理的内容。
  4. 在栏上使用窄的外边距,最好根本不使用。不要使用浮动、绝对定位、表格(它们的内容可能以出乎意料的次序显示)和弹出窗口
  5. 避免使用固定宽度的设计。应该使用em和百分数来代替。
  6. 避免使用CSS字体属性,应该主要依靠标题标记,如h1,h2等等,来区分大标题和小标题。对于常规文本用p,对于强调部分用b或strong,尽量少用斜体。因为大多数手持浏览器只支持一种字体和最多两三种字号,支持粗体而不支持斜体(至少支持得不好)。
  7. 可以对导航条使用有编号的列表(ol)。因为手持设备对列表的支持很好。
  8. 避免使用背景图片。因为不太支持CSS的background-image属性。
  9. 一般支持CSS的color和background-color属性,应尽可能地利用,使得文本颜色和背景颜色之间的对比足够强烈,让访问者在日光下也能够看清页面上的内容。
  10. 确保站点的显示在没有加在样式表的情况下也是有意义的。测试时用尽可能多的手持设备或手持浏览器来查看站点。因为某些手持浏览器会完全忽视CSS文件(比如QQ手机浏览器居然像傻瓜似的不加载一个以上的样式表)。

发表评论