让页面在手持设备中有良好表现(1)
文章标题:让页面在手持设备中有良好表现
英文原名:Making Small Devices Look Great
文章分为三部分:为移动设备书写文档,为移动设备进行测试和为多个媒介做设计,今天翻译的是第一部分
译者注:Opera小屏幕模式是用Opera模拟手持设备显示效果的模式,操作方法是在查看菜单中选中"小屏幕"项,调用media属性为handheld的CSS样式表,可以达到同样效果的有Firefox Web Developer扩展中的Miscellaneous>Small Screen Rendering.
快速提示:
编码提示:
- 使用简单有效的标记
- 避免使用框架
- 避免使用弹出窗口
- 避免自身属性
- 为图片指定高度和宽度值
- 为图片指定alt
- 为JavaScript及动态效果预留退路
- 用桌面版的Opera在小屏视图下进行测试
- 在关闭图片显示下进行测试
- 在关闭JavaScript下进行测试
- 在无鼠标状态下进行测试
- 根据构思中的文档顺序进行设计
- 依据"小屏幕,大内容"原则,最大化页面的可读性
- 为小屏幕网页配置专门的图片
- 特别要注意颜色,字体以及对齐方式的使用
为移动设备书写文档
文章中的"设备"专指小型的,可移动的单元比如只能手机或者PDA.为小型设备设计页面的规则大体与传统页面差不多,但也有一些需要特别注意的地方.
低带宽
手持设备加载页面的速度远低于有线网络,费用也要贵得多.有效的代码可以让页面更好的被访问到,但是速度优化对于设备来说特别重要.好的代码也能降低服务器的负担.一个很浅显的规则,不要为文档添加更多的标记,一个经过优良设计的页面会用非常少的标记以至于可以从源码中阅读出页面的内容.
更多的空间应该用在相关的图片,小程序或者其他的媒体文件上而不是花在为自身编码(包括HTML,CSS和脚本)上.
使用简洁的代码
将所有的font标签用CSS的class替换掉,不光是更快更简洁,而且更利于维护和再次开发.
使用有语义的标签.同样是告诉浏览器这个是头条新闻,<h3>头条</h3>比起<p><font size="+2" face="宋体"><b>头条</b></font></p>更简洁和更有可读性.并且浏览器会用有语义的标签提供的信息为用户设置一些方便易用的功能.比如在一个拥有键盘的设备上,使用S和W就可以跳转到头一条或者下一条头条位置.
由于浏览器默认的h样式并不理想,所以以前很多设计师使用font标签来定义头条的样式,并且一直沿用了下来.但现在已经不必要了,CSS能为头条的外观进行全面的控制,而且CSS能得到各种浏览器的支持包括Netscape 4.
网站的导航部分通常出奇的大,用CSS替换复杂的表格布局可以显著的减小文档的大小.
最好的解决方案是将表格布局更换成CSS布局,但这个并不是在所有情况下都是可行的,在一些诸如Netscape 4时代的浏览器中可能会出问题,折衷的解决方法是在保持表格布局的同事尽量避免表格的嵌套.
移除不必要的代码,文档默认颜色是黑色,那么<font color="#000000">就是多余的,为默认左对齐的文档中的元素添加align="left"同样是多余的.手动删除这些代码会消耗很多时间,但是这样的优化是值得的.
当多个页面可以共同实用相同的脚本活样式表时,从外部引用它们而不要内嵌.
有效的图形
大图片不太设用于设备,那些比整个屏幕还要大的图片会带来糟糕的用户体验.背景图片是不被推荐的.图片消耗下载时间并且要话费内存和时间来显示.图片不要超出整个屏幕一半(大约100-150像素)大.小屏模式下的Opera会忽略掉许多图片,而且还会将图片重新定义尺寸让它们匹配屏幕大小.
总是为图片指定长宽值(通过CSS或HTML都可以)有几个很重要的优点.当浏览器知道需要给图片多大页面空间时,整个页面布局才会在图片下载完成之前显示出来,这样会让页面有更快的加载速度.即便浏览器设置成不显示图片,页面布局也不会因此混乱.最后,可能也是最重要的一点,很多不适合设备显示的图片可以在下载之前回避它们.这会为页面带来很大的不同,无论是从下载时间看还是从花销上面看.最后会决定用户是否会再次访问你的站点,或者是不是要显示页面里面的图片.(译者注:推荐阅读关于reflow)
如果你的网站图片太多太大,用户可能会关掉图片显示,你要确保在这样的情况下你的网站还能正常工作.
无图浏览模式
无图浏览模式通常更快,更省钱和更有效.因此页面中有重要作用的元素,比如按钮和标题,必须要在禁用图片时也能使用.这个策略是为图片添加alt文本.
alt可以作为图片的解释性文本,比如用在照片上,可以给用户提供更多的信息让用户知道是不是值得下载它.如果图片不重要或者纯粹是装饰性的,可以将alt设置为空白,即alt=" ",但alt标签最好是不要省掉.
要测试一个页面在无图模式下的效果,禁用掉图片就可以了,任何浏览器都可以做到.但是使用Opera尤其方便,通过在无图模式下查看你的页面,看看问题会出现在哪里.
当使用图片作为标题时
其实有很多理由说明用文本做标题比用图片好,但是如果你的确用了图片作标题,你需要为图片添加alt属性,并且把它标记成标题:<h2><img src="图片URL" alt="标题名称" /></h2>
当图片用作指示性按钮
指示性按钮也需要有一个alt,让站点能正常使用:<a href="下一页URL"><img alt="下一页" /></a>
设备的屏幕
尺寸
设备与桌面电脑最大的区别就是屏幕尺寸,只有页面的一部分可见,而且桌面电脑上同时可见的两个东西,在设备上可能就需要用到滚动条了.
动态菜单在小屏幕上表现也不好,如果你的网站使用了动态菜单或者别的占空间的元素,尽量为动态元素预留后路.
颜色
现在的手持设备都拥有彩色屏幕了,但是它们的对比度不如PC屏幕高.另外,设备会用在日光下和别的PC不会应用到的场合.降低显示器的对比度也可以节约电量.综上所述,你应该选取前景和背景对比鲜明的图片,避免使用差别细微的颜色.
窗口管理,框架
避免使用框架.Opera支持设备上使用框架,但是小尺寸屏幕意味着框架会成为页面的障碍.在设备上框架可以显示为下面三种形式之一:
- No frames
- As a list
- All frames
No frames意思是Opera使用<noframes>里面的内容代替框架.要在这种情况下使用正常,必须是<noframe>里面的内容是有用的,而不单单是提示用户必须打开框架以显示页面内容.
As a list意思是每个框架是个单独的窗口,顺着浏览器像列表一样排列下去.为了让它更好的被使用,需要为每个框架添加一个不同的而且有意义的名称.比如logo,navigation,content而不是未命名1,未命名2,未命名3.
All frames就是保持桌面电脑上显示的样子.
窗口管理,弹出窗口
特别要避免弹出窗口.弹出窗口指使用JavaScript打开新窗口.弹出窗口会非常麻烦,因为设备只有一个单独的窗口可以被显示(译注:而不能像Windows下一样非常方便切换).
右键菜单
很少有设备使用右键菜单,在很多情况下Opera根本不支持,不要依赖于右键菜单.
输入不便
移动设备通常只配备很小的键盘或者没有键盘.输入数据会非常缓慢.谨慎设置输入数据的时间限制,并且不要让用户输入过多的数据
没有鼠标
设备也没有鼠标,所以不要期待用户在设备上做出跟PC一样精确的交互.
事件管理
指点笔和触摸屏只能触碰,它没有具体的鼠标,所以mouseover和mouseout事件不能应用.有触摸屏的设备可以接触产生的是click事件,而别的设备只能通过按键触发click事件.mouseup和mousedown事件也是不易触发的,也不要依赖双击和单击右键来触发事件.有的设备是有虚拟键盘的,但是你也不要通过指定按键来触发事件.可用的UI事件是:获取焦点,失去焦点和应用(译者注:即确定,相当于PC上按下ENTER键).
传统的UI事件可以用在设备上,但是不要太理想化了,"按下Y键继续"在没有Y键的设备上是没有用的.
处理器,内存和存储器
快速的处理器更耗电,为了省电,设备的处理器相对比较慢.意味着一些在PC上方便实现的效果在设备上会难以实现.用户必须花费很多事件等待浏览器解析这些复杂的脚本和多层嵌套的表格.未经专门设计的页面可能会导致问题.
内存是个很大的制约.设备通常没有硬盘,内存和存储器是共用的,这显得太少了.大的复杂的页面耗费很多的内存,图片的页面同样如此.大体积页面会占用更多的存储空间.
Java和插件
设备可以支持Java和一些常用插件比如Flash或者PDF,但是很少可以同时显示页面和Java或者Flash.因此设备上要避免完全建立在插件上的页面.
可移动性
当所有页面在设备上都可用了,并且有的页面看上去似乎比在电脑上更好用了,使用设备可以在你需要的时候得到准确的信息了.
交流导向信息,比如含有电话号码,email和地址的联络方式页面,短信联系方式可能对于设备来说更有用.
有一些功能只能用在设备上,比如HTML代码<a href="sms:12345678">给我发短信</a>启动设备的短信编辑器,向号码12345678发短信.这个在PC上很罕见,在没有短信功能的设备上你可以设置这个链接只能在手持媒体上看到.
让页面在手持设备中有良好表现(2):为移动设备进行测试
