我总结的手机web页面设计及编写规则,适用于xhtml basic 和 xhtml mp。仅代表个人观点。
1. 设计相关
1.1 硬件限制
推荐结构
手机屏幕由于尺寸、分辨率和色彩的限制,不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条,必需有滚动条时要保障只在一个方向上产生,如右图所示,不使用传统的上左右下结构,而使用上下结构。应该把主要的导航链接放在页面顶部,而且应当尽量精简,1或2行较为适宜。如果需要其它次要的导航就放在页面底部,这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩,手机屏幕不一定能正常显示,只要使网站总体风格一致即可。
手机网络往往要比有线链接要慢,例如,中移动GPRS升级EDGE后峰值只有384kbps,而且由于机制所限,手机连接互联网会产生较高的延迟,这些都将导致页面加载时间的延长;使用移动网络需要用户支付的费用通常会比较高,中移动降价后的GPRS流量费仍高达0.01元/KB。(不知升级3G后会是何种情况,呵呵)
在进行页面设计时应注意图片,flash等元素的使用,不要尺寸和字节数过大的图片,这样加快网页加载,不产生不必要的滚动条,降低用户的使用成本。
版本低一点的手机浏览器往往不支持脚本或插件,而且在许多情况下,用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页,构建表,处理不必要而且复杂的样式表,处理无效的标记等等这些操作,由于手机的处理能力通常都相当有限,这意味着网页渲染可能需要很长时间才能完成,这将引起明显的延迟,并且浪费更多的电池电量。
1.2 用户输入
手机输入一般都不像使用普通键盘那么方便,而且一般手机都没有像鼠标这样的指点设备,应尽可能让用户少输入内容。例如一个较长的URI,用户没有耐心去输入它,而且也不能保证输入的正确性。
例如:不推荐使用这样的URI
“http://www.example.org/index.html”,
推荐使用这样的
“http://example.org”。
1.3 用户目标
用户通过手机上网浏览所需的网页时,通常都比桌面用户有更具体的目标,他们的意图往往是为了找出直接相关的资料。例如,用户可能需要收发某封重要的电子邮件,找一个距离最近的中国石油的加油站,看看CCTV5今天是否直播火箭队的比赛等等,恰巧手边又没有一台能上网的电脑。
同样,手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容,用户往往还是因为没有更方便的接入方法,只得使用手机作为最后的手段。
2. 代码相关
2.1 文件总体结构应遵循以下样式。
xhtml mp使用:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
xhtml basic使用:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
2.2 去掉不必要的空格和换行
不必要的空格和换行会增大文件大小,去掉空格及换行对浏览器解析来说没有不好的影响,因此推荐在编写完成上传服务器时去掉不必要的内容。
2.3 尽量避免使用Cookie
不是所有的浏览其都支持Cookie,即使支持也不是所有的用户都开启了Cookie支持。我们可以在URL中传递相关信息,当然,要注意不要超过最大长度。如果使用Cookie也要保证是哪些非必要的功能在使用它。
2.4 不要使用<table>标签
<table>在小屏幕上表现不佳,解析难度较大,大多数手机浏览器对<table>都支持不佳。
2.5 图片或其它嵌入对象要添加必要属性
在使用图片或flash等元素时,要添加alt属性,以便在元素不能加载时给用户相应的提示,添加width,height属性,防止发生不可预期的版式破坏,添加id属性以替代name属性。
2.6避免使用绝对度量单位
推荐使用em,ex或者百分比等相对单位替代px,这样便于浏览器对网页的自动缩放。
2.7 把需要共享的样式和脚本通过外部链接引入
推荐把样式和脚本写在文件里通过外部链接引入,这样可以减少解析难度和出错几率。
如果客户端支持缓存就可以不再向服务器发送请求,如果不支持,那么每次都要从服务器取这个文件,不相关的内容也在这个文件里,将额外增加不必要的流量;网页里的每个外部链接都会单独从服务器请求一次,如果内容过于分散,请求次数就会很多。
因此,尽量把可以共享的样式或脚本写在单一的文件里,减少不必要的请求和流量。
分享到:
相关推荐
手机页面设计及编写的建议规则,网上收集的,希望大家用得上
软件设计文档 文档编写规则 需求说明书 概要设计说明书 详细设计说明书 等项目开发文档的设计
本文阐述了一种编写PCB设计规则检查器(DRC)系统方法。利用电路图生成工具得到PCB设计后,即可运行DRC以找到任何违反设计规则故障。这些操作必须在后续处理开始之前完成,而且开发电路图生成工具开发商必须提供大多数...
使用jsp编写一个计算器的页面,实现加减乘除功能。
较为详细的介绍了使用modsecurity rule language编写Rule。
cppcheck编写自定义规则文档,cppcheck支持自定义规则,通过正则表达式编写检查规则
规则描述,可以帮助初学者,掌握C语言编写规则,理清思绪
makefile的编写规则 Makefile中包含五种内容:显式规则,隐式规则,变量定义,指令(directive)和注释。 1.显式规则――描述如何生成规则的目标,它列出了目标依赖的文件,指定了产生或更新目标的命令。
学位论文编写,正规规则。大学学生必读的txt
这是一个手机通讯录的程序,全部用C语言编写.可以实现出现多个相同名字的时候,进行修改和删除.
GB_T 7713.2-2022 学术论文编写规则,国家标准,供各位要写论文的童鞋参考
Java实验,关于编写程序实现访问一个网站,并将指定的一个页面保存到本地
makefile编写规则入门级手册,适合刚接触linux的人员
网页设计页面源文件,可编辑编写,网页设计页面源文件,可编辑编写,网页设计页面源文件,可编辑编写,网页设计页面源文件,可编辑编写
snort是一个强大的轻量级的网络入侵检测系统。它具有实时数据流量分析和日志IP网络数据包的能力,能够进行协议分析,对内容进行搜索/匹配。它能够检测各种不同的攻击方式,对攻击进行实时报警。此外,snort具有很好...
Windows 下的 Makefile 编写(一)Makefile的基本规则
陆上油气田安全生产标准化评审报告编写规则.pdf
Chapter 1: 理解安全编码规则 这章节包括以下标题: 什么是安全编码规则? 什么是Secure Coding Rulepacks?什么是自定义规则?什么是漏洞类别?什么是规则类型 什么是安全编码规则?
列举了大量有用的建议,帮助大家进行低级程序设计,并提供了代码编写的一般性指导
本文阐述了一种编写pcb设计规则检查器(DRC)系统方法。利用电路图生成工具得到PCB设计后,即可运行DRC以找到任何违反设计规则故障。这些操作必须在后续处理开始之前完成,而且开发电路图生成工具开发商必须提供大多数...