‘WAP’ 分类的文章

  • 探索移动Web网页编码设计

    如果你正准备为你的网站制作一个移动设备版本，那这篇文章将会对你相当有用，在本文中，将探索移动Web网页编码设计的各种技巧和注意事项：

    * 为了移动设备上的用户体验可以被接受，代码得怎么设计。
    * “Mobile Web”与普通网站的不同之处？
    * 可以让网站成功运行在移动设备和桌面浏览器上的基本技巧
    * 一些Mobile Web设计中的建议和禁忌、以及大量资源

    Mobile Web和普通网站到底有何不同呢？

    这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。

    在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循 Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。
    移动领域的竞争环境并不平衡

    在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、firefox（以及其他 Gecko内核浏览器）或者Safari（以及其他 Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。 但是，移动设备领域在这方面却是不同寻常的：

    * 你拥有能为“Full Web”提供支持的浏览器，像iphone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。
    * 你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像 Chtml或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。
    * 最后，你拥有OperaMini， 以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会 把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90% 左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对 ajax/javascript某些方面将支持的不是很好 – 在这儿有更详细的解释。

    注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。

    2010.02.06 / no responses / 分类: WAP, 设计开发

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

    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浏览器们真是太仁慈了。

    2010.01.04 / no responses / 分类: WAP

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

    前言： 手机有哪些浏览器？这些浏览器对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这样的最新技术。那些被设计从手机浏览器访问的网站叫无线门户。

    2010.01.04 / no responses / 分类: WAP

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

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

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

    二是兼容性工作异常艰辛，难度一点也不比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）

    2010.01.04 / no responses / 分类: WAP

最近文章

最近评论

分类目录

紫枫印迹

2010年三月
一 二 三 四 五 六 日
« 二    
1234567
891011121314
15161718192021
22232425262728
293031  

标签云

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

用户体验设计(UED)

紫枫友情收藏

86ue_rss

设置