2010年1月4日 的存档

  • 手机网站开发必修课（2）：浏览器兼容性测试

    日期：2010.01.04 | 分类：WAP | 评论数：0

    1 为什么要有兼容性测试：比web浏览器还恐怖的手机浏览器

    对于web网站，一般来说，目前我们需要兼容的是

    1个操作系统（windows）X 3种浏览器（ie 6、ie7、firefox）= 3种情况

    要求高一点的web网站需要兼容的是

    1个操作系统（windows）X 7种浏览器（ie6、ie7、firefox、chorme、opera、safari、遨游）+ 1个操作系统（mac） X 1种浏览器（safari）= 8种情况

    注：以上浏览器除了ie外，均指其最新版本。另，遨游浏览器虽然是基于ie内核，但某些表现却完全出人意料，故也加入考虑。

    好了，以上最多8种需要兼容的情况，已经让人大呼头痛不已，何况事实上这些浏览器对html代码本身的解析都是没问题的，你比较需要费心的只是ie6的css和js。

    那么手机浏览器有多少种需要兼容的情况呢？

    从上一篇文章看来，如果要做到比较好的兼容性，我们要兼容的手机浏览器至少有二十种情况（手机自带的浏览器+用户可安装的浏览器）

    web浏览器的兼容性大致可根据浏览器的渲染引擎来确定兼容类型，但手机浏览器，即使是使用的同一个渲染引擎，在不同的手机上表现也可能很不一样。

    还有两个更令人头痛的问题：

    1. 你没法使用css hack
    2. 你也没法逐一去测试各浏览器的实际效果

    所以，当你涉足手机网站开发的时候，你才会感概，web浏览器们真是太仁慈了。

    不过事情还不算太坏，就目前来看，基于手机浏览器的限制，一般手机网站的布局和功能不会太复杂，而高级一些的手机浏览器（如iphone等）兼容性还是很理想的，不用操心。

    不管怎样，对于一个专业的手机网站来说，有一份专业的浏览器兼容性测试报告是非常有必要的。面对成百上千的手机型号，还有日益强大的山寨机，我们的兼容性测试要覆盖哪些机型呢？

    2 目标用户数据挖掘

    我们基本不可能兼顾到所有类型的手机浏览器，所以你必须要根据你的用户数据来决定要测试兼容性的手机型号。

    你的手上需要有以下数据：

    1. 你的网站访问的手机型号统计
    2. 用户访问你的网站的主要行为

    如果拿不到这些数据，那么接下来的兼容性测试将会艰难很多，你不得不通过广撒网的方式，测试尽可能多的手机（而不是主要目标客户群的手机）来确认某些属性的兼容性，这可不是一个好主意，相信让你的老板掏银子给你采购几十乃至上百台手机不太现实。

    总的来说，你需要得到测试手机的以下数据：

    手机型号、操作系统、浏览器类型、屏幕尺寸、颜色深度

    3 安排测试，整理测试结果

    当我们设计测试点的时候，应该涵盖哪些内容呢？

    1. 对xhtml代码本身的支持度，如是否支持
    2. 对特殊字符的支持度，如★◆
    3. 对css的支持度
    * 对css不同引入方式的支持
    * 对css的属性的支持
    * 对css某属性不同属性值的支持，如margin的取负值、background-repeat的不同取值
    * 对css选择器的支持，如tag，class，id，选择器的嵌套
    * 对css高级选择器的支持
    4. 对js的支持度
    * 目前还不太可能在手机上创建很复杂的js效果，可以仅测试js的基本功能，比如对事件的支持，当然，使用js最重要的是要考虑好如何优雅降级，确保用户在没有js的情况下也能顺利完成任务
    5. 对图片的支持度
    * 支持图片类型，包括gif非透明背景、gif透明背景、gif动画图、jpg、png8非透明背景、png8透明背景、png24非透明背景和png24透明背景
    * 支持图片颜色，如色彩复杂的图片，光滑渐变的图片

    设计一个专用于测试的excel表格，方便测试人员填写测试结果也是非常重要的工作，如果这一步没有做好，也许你之前所有的努力都将白费。传承有价值的研究结果，其意义不低于研究本身。

  • 手机网站开发必修课（1）：手机浏览器

    日期：2010.01.04 | 分类：WAP | 评论数：0

    前言： 手机有哪些浏览器？这些浏览器对xhtml、css和js的支持度怎么样？目标用户的手机使用情况？条件限制下的手机界面设计要如何进行？如何快速搭建一个手机网页？如何做好网站的兼容性工作？想必这些问题每个参与过手机网页开发的人都遇到过。

    头大的是，除了自己公司已有的一些经验，网上恐怕没有过多的(公开的)文档可以参考。  09年上半年的工作重心全在手机网页开发上面，这使得自己某种程度上也成了拓荒者。现将这段时间的开发心得同大家分享以下，欢迎大家跟我交换自己的想法。

    手机网站开发必修课系列文章计划：

    1. 手机浏览器
      1. 来自wiki的解释
      2. 对wiki的总结
    2. 浏览器兼容性测试
      1. 为什么要有兼容性测试：比web浏览器还恐怖的手机浏览器
      2. 目标用户数据挖掘
      3. 安排测试，整理测试结果
    3. 测试结果对手机网站开发的指导意义
      1. 对设计的指引作用
      2. 确保裸html代码具有较高可用性，谨慎使用html标签
      3. css使用注意事项
      4. 非常重要：代码的优雅降级

    注：由于有些数据牵涉到公司的商业机密，所以在这个系列的文章当中，有些可能不会公布出详细的数据，但会给出方向性的结论或者意见，请大家见谅。

    要了解手机网站开发的诀窍，我们必须先了解手机浏览器。虽然百度“手机浏览器”没啥有价值的文章，所幸google“mobile broswer”出来了比较多有价值的文章。那么，站在前人的肩膀上，我们可以看的更远。

    以下文字翻译自维基百科》手机浏览器:http://en.wikipedia.org/wiki/Mobile_browser

    手机浏览器，又称微浏览器、迷你浏览器或者无线因特网浏览器，是被设计用于像手机或者PDA之类的无线设施的网页浏览器。手机浏览器针对在便携设备上的小屏幕网页显示进行了专门的优化，以使网页内容显示最高效。手机浏览器的软件必须小巧并且能适应无线掌上设备的低存储量和低带宽。它们一度是最简朴的网页浏览器，但是2006年以后有些手机浏览器能够支持象css2.1、JavaScript和Ajax这样的最新技术。那些被设计从手机浏览器访问的网站叫无线门户。

    内容概览

    1. 相关的技术
    2. 先驱们
    3. 流行的移动浏览器
      1. 被主流手机和PDA厂商使用的默认浏览器
      2. 用户可安装的手机浏览器
      3. 手机HTML代码转换机
    4. 更多
    5. 参考
    6. 更多外部链接

    1 相关的技术

    手机浏览器通常通过蜂巢网络连接，通过无线局域网连接的手机浏览器数量也日渐增多，后者使用基于TCP/IP的HTTP并能显示那些使用HTML, XHTML Mobile Profile (WAP 2.0), 或者WML (从HDML发展而来)编写的网页。WML和 HDML是适于通过低带宽传送数据的最简朴的形式，而无线数据的连接被称为WAP。

    在日本，DoCoMo定义了基于i-mode HTML的 i-mode服务，是压缩HTML(C-HTML)的一种扩展，HTML的一个子集。

    WAP 2.0指定了XHTML手机协议和WAP CSS，WAP CSS是是W3C标准的 XHTML和 CSS在移动设备上扩展的一个子集。

    2 先驱们

    那些被称为微浏览器的技术，诸如WAP， NTTDocomo的 i-mode平台和Openwave的 HDML平台点燃了人们对无线数据服务的第一次热情。

    第一个微型浏览器的诞生大约是在1997年， 当Unwired Planet 公司(后来发展为 Openwave)将他们的”UP.Browser”放在AT&T公司的手持设备上以供用户访问HDML内容。

    一家英国公司， STNC股份有限公司，在1997年的时候研发了一款叫做 HitchHiker的微型浏览器，并对这款装备设计了全套的UI。这款微型浏览器(Webwalker)的演示平台拥有每秒处理百万条指令的能力。它是一个单核处理平台，在类似于应用堆栈的处理器上跑着GSM堆栈。1999年 STNC被微软收购，并且HitchHiker变身为Microsoft Mobile Explorer 2.0,不同于之前的Microsoft Mobile Explorer 1.0。HitchHiker被认为是第一款拥有统一标准的渲染模型的微型浏览器，它在一个客户端遵从EcmaScript, WMLScript, POP3 和 IMAP 邮件等标准处理 HTML 和 WAP。尽管这个浏览器最终未被使用，但它确实可是使HTML 和 WAP在一个页面上联合使用，虽然这将使得其他的设备无法正确渲染该页面。另外， Amstrad公司倒霉的将HitchHiker作为他们e-m@iler和 e-m@iler+产品的操作系统，手机浏览器2.0在Benefon Q, Sony CMD-Z5, CMD-J5, CMD-MZ5, CMD-J6, CMD-Z7, CMD-J7 and CMD-J70.等设备上都可使用。

    还有一款叫Palmscape的用于PalmOS的免费浏览器（虽然后来才成为共享软件的），由Kazuho Oku 1998年在东京编写，他继而发现了Ilinx，这款浏览器直到2003年才放开使用限制。

    于2001年发布的 Mobile Explorer 3.0增 加了iMode的兼容性和众多的专利设计。通过假想的将这些专利设计结合到WAP协议中， MME3.0执行了OTA数据库同步、推送了email，推送了信息客户端和PIM功能。已经退出市场的索尼爱立信CMD-Z700深度集成了 MME3.0。MME的开发脚步在2002年中旬画上了句号。

    Opera Software公司以他的小屏幕渲染技术(Small Screen Rendering )和中屏幕渲染技术(Medium Screen Rendering)领先于该领域。Opera的的web浏览器可以让普通的web网页在小型屏幕和中型屏幕上重新布局，并达到最优显示。他是第一款广泛支持Ajax和通过ACID2测试的浏览器。

    3 流行的移动浏览器

    手机浏览器和基于web的模拟器不同，基于web的模拟器使用一种“虚拟的手持设备”在电脑上显示wap页面，使用java或者html转码器。这些模拟器有 Wapjag, TT, Waptiger 和 Superwap。

    一下表格列出了一些当下非常流行的手机浏览器。一些手机浏览器是web浏览器的精简版本，因此一些手机浏览器厂商也提供用于台式机和笔记本电脑的浏览器。

    3.1 被主流手机和PDA厂商使用的内置手机浏览器

    浏览器 开发者 开源 渲染引擎 软件许可 注意
    Danger browser Danger 否 - 专利的 installed on all Danger-designed devices including the T-Mobile Sidekick
    Embider Infraware 否 - 专利的 [2]
    Internet Explorer Mobile Microsoft 否 - 专利的 -
    Nokia Series 40 Browser Nokia 否 - 专利的 -
    Novarra nWeb Novarra 否 - 专利的 -
    Obigo Browser Obigo AB 否 - 专利的 100% owned by Teleca AB
    Picsel Browser Picsel Techologies 否 - 专利的 -
    jB5 Mobile Browser Jataayu Software ? ? ? available on Symbian Series 60, Windows Mobile and Linux
    Wapaka Browser Digital Airways ? ? ? Java micro-browser
    Myriad Browser (Previously Openwave Mobile Browser) Myriad Group 否 Fugu (Next version to use WebKit)[4] 专利的 Acquired from Openwave in 2008
    Fennec Mozilla 是 Gecko ? Currently in Beta
    BlackBerry Browser Research in Motion 否 Mango 专利的 -
    Kindle Basic Web Amazon.com 否 NetFront 专利的 -
    Blazer Palm 否 NetFront 专利的 installed on all newer Palm Treos and PDAs
    NetFront ACCESS Co., Ltd. 否 NetFront 专利的 -
    PlayStation Portable web browser Sony 否 NetFront 专利的 -
    Opera Mobile Opera Software 否 Presto 专利的 Capable of reading HTML and reformat for small screens, installed on many Phones
    Android browser Google 是 WebKit Apache 2.0 and GPLv2 -
    Iris Browser Torch Mobile Inc. ? WebKit ? Linux/ Qt and Windows Mobile
    Safari Apple Inc No WebKit 专利的 on iPhone and iPod Touch
    Symphony Motorola ? WebKit ? on MOTOMAGX
    Web Browser for S60 Nokia ? WebKit ? -
    Browser Creator FOSS Current layout engine Software license Notes

    3.2 流行的用户可安装的手机浏览器

    3.3 手机HTML代码转换机

    手机HTML代码转换机将web内容重新格式化并压缩成移动设备可用的内容，并且必须和内置的或者用户安装的手机浏览器配合使用。以下是几个领先的手机HTML代码转换机服务。

    4 更多

    5 参考

    6 更多外部链接

    对wiki的总结

    对于wiki中提到的浏览器类型，还有两个页面可供参考

    1. 手机浏览器型号查询
    2. ppk：手机类型和浏览器表格

    看完整篇文章后，有一些问题要问问聪明的你

    1. 什么是渲染引擎？什么是浏览器？这是两个最先要搞清楚的概念。
    2. 内置的手机浏览器，用户安装的手机浏览器和基于web的模拟器
    3. 每个浏览器都有相应的渲染引擎，因此有必要知道使用同一个渲染引擎的手机浏览器的页面表现是否一致
    4. 国内主流的浏览器机型有哪些？国内用户是否喜欢使用用户自己安装的浏览器。不管怎么样，作为一个开发人员，应该尽量去体验一下这里提到的各种用户可安装的浏览器。
    5. 基于web的模拟器是前期测试很有效的工具，推荐使用safari,opera和firefox(需安装插件)
    6. 如何保证手机网页的开发效率（包括质量和速度哦）？

    以上这些问题，前两点在本文中有提到，后面几点希望大家能开动脑筋先想想，答案将在后续的文章中揭晓

    建议用你自己的手机访问一些国内较大的无线网站。比如 http://wap.taobao.com，http://wap.163.com等等

  • 手机网站开发必修课（3）：2009总结版

    日期：2010.01.04 | 分类：WAP | 评论数：0

    手机网站开发，有着许多不为人知的困难：

    一是可参考的资料太少，大部分手机网站都处于起步阶段，很多的时候都是摸着石头过河，而鉴于淘宝自身的特殊性，也使得我们在参考成功案例之余，要做更多的思考；

    二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）；

    再者作为一个手机网站的前端开发，也往往容易被人忽视（包括我们自己），大家也许会觉得做好一个手机网站能有多难，了解一点XHTML、一点 CSS，甚至不需要对JavaScript有什么研究，事实却不是如此，正因为手机网站的开发受到设备的太多限制，前端们常常为了节约几个字节而纠结万 分，写出语义化良好的代码也显得更加重要，而多版本的开发需求也对于JavaScript的优雅降级要求甚高，这样才能使得网站有分版本需求的时候可以公 用同一套XHTML代码，最大程度的降低开发成本。

    对于手机网站来说，相信现在仅仅只是个开始，随着各种新机型的相继面世，这块领域必将成为兵家必争的新高地。

    注意：由于手机网站发展迅速，请参阅者注意本篇文章的发布时间。

    目录

    1. 手机用户设备统计分析
    2. 手机浏览器兼容性测试结果概要
    3. 手机网站开发中你需要注意的问题
    4. 推荐参考资料
    5. 总结

    手机用户设备统计分析

    拥有全面的用户数据，无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解我们的目标用户群的特征；而外部数据能告诉我们大环境下的手机用户状况，并且能在内部数据不够充分的时候给予我们一些非常有用的信息。

    从外部数据来看，09年10月到11月期间

    国内浏览器品牌市场占有率前三甲为：

    • Nokia(78%)
    • Opera(OEM) (10%)
    • iPhone(Safari) (3%)

    国内的手机操作系统前三甲为：

    • Nokia SymbianOS(80%)
    • iPhoneOS(6%)
    • SonyEricsson(5%)

    当然，作为中国的手机网站开发者，不能忽视强大的山寨机市场（或者应该叫作做国货精品手机市场？）。顺便提一下，这类手机通常使用的是MTK操作系统。

    （以上数据均来自statcounter.com）

    手机浏览器兼容性测试结果概要

    注意：以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。

    XHTML部分

    大多数手机不支持的：

    • 表单元素的“disable”属性

    部分手机不支持的：

    • “button”标签
    • “input[type=file]“标签
    • “iframe”标签。

    虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。

    少数手机不支持的：

    • “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。

    CSS部分

    大部分手机不支持的：

    • “font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
    • “font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
    • “font-style: italic;”：同上；
    • “font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
    • “white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
    • “background-position”属性：但背景图片的其他属性设定是支持的；
    • “position”属性；
    • “overflow”属性；
    • “display”属性；
    • “min-height”和”min-weidth”属性；

    部分手机不支持的：

    • “height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
    • “pading”属性
    • “margin”属性：更高比例的手机不支持”margin”的负值。

    少数手机不支持的：

    • 少数手机对CSS完全不支持；

    JavaScript部分

    这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

    在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

    其他

    • 部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
    • 另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
    • 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
    • 少数手机在打开超过20k的测试页面时，会显示内存不足

    开发中你需要注意的问题

    • 手机网页编码需要遵循什么规范？
      遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为XHTML MP，也就是通常说的WAP2.0规范。 XHTMLMP 是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
    • 网页文档推荐使用扩展名？
      推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
    • 为什么现今大多数的网站一行字数上限为14个中文字符？
      由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。 假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
    • 使用WCSS还是CSS？
      WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。
    • 避免空值属性
      如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。
    • 网页大小限制
      建议低版本页面不超过15k，高版本页面不超过60k。
    • 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？
      有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情 况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设 备的影响较小。

    推荐参考资料

    开发权威网站

    经典开发文章

    手机型号查询

    总结

    目前来说，手机网站开发是个典型的设备驱动开发的过程，页面被设计成什么样，能做到怎么样，几乎全取决于目标客户的手机设备情况。

    所以，对手机设备的了解，对于设计开发过程有着直观重要的作用，对于前端来说，就需要有计划的进行长期的手机浏览器兼容性测试，什么样的设计能被实现，什么样的标签可以使用，这些都需要有数据的支持。

    我们必须有这样的认知，开发的手机网页总是会在或多或少的手机设备上出现问题，因为我们永远无法知道所有用户的手机设备情况，所以我们更要尽量的遵循标准进行开发，这样才能将满足用户的比例做到最好。

    任何一个领域都有值得你进行深入了解的地方，即使现在看起来，手机网站的开发还有点不入主流，但我相信，随着手机设备的更新换代，总有一天它也会成为我们占领客户的一个重要战场，iphone这类有符合web标准的浏览器的手机发布，也给了我们更多的信心。

    感谢：http://www.fool2fish.cn/ 博主分享！[转载]

最近文章

最近评论

分类目录

紫枫印迹

2010年一月
一 二 三 四 五 六 日
« 十二   二 »
 123
45678910
11121314151617
18192021222324
25262728293031

标签云

CSS+HTML css2.0 HTML5 SEO seo优化 SNS User Friendly2009 VIP web 中文手册 互联网 交互 交互设计 产品 产品设计 产品设计师 体验 信息架构 关键词 制作网页 前端开发 原型 命名规则 垂直居中 小技巧 手机网站开发 按钮 支付宝 李开复 流程 用户习惯 用户体验 用户界面 用户研究 用户访谈 瞬间的设计 网站运营 网页设计 背景 行动 视觉设计 设计 设计师 身体语言 页面重构

用户体验设计(UED)

紫枫友情收藏

86ue_rss

设置