导读:国内手机网站目前还算是个新鲜事物,相应的手机网站前端开发也并不是特别成熟,对于一个网页设计师来说要做一个手机网站还是会碰到许多问题,本文转载自淘宝 UED,分享如何开发进行手机网站的前端卡发。
从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子,感慨良多。
手机网站开发,有着许多不为人知的困难:
一是可参考的资料太少,大部分手机网站都处于起步阶段,很多的时候都是摸着石头过河,而鉴于淘宝自身的特殊性,也使得我们在参考成功案例之余,要做更多的思考;
二是兼容性工作异常艰辛,难度一点也不比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。
· 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱?
有条件的话,我们当然建议在手机实体上进行测试,因为目标客户群的手机设备总是在不断变化的,这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况,比如图片色彩,页面大小限制等就很难再模拟器上测试出来。当然,一些第三方手机浏览器的在线模拟器还是可以进行测试的,第三方浏览器相对来说受手机设备的影响较小。
推荐参考资料
开发权威网站
· WAPForum:XHTML Mobile Profile规范.pdf
· WAPForum:WCSS规范.pdf
· W3C:XHTML Basic 1.1规范.html
· W3C:Mobile Web Test Suites Working Group.html
· PPK:关于手机浏览器兼容性的测试和研究.html
· Developershome:XHTML MP 教程.html (汉化版)
经典开发文章
· Unknown:移动WAP相关标记语言的演进.jpg
· Flora Graham:Alternative mobile browsers tested.html
· Lucas Pettinati(Yahoo):Challenges of Interface Design for Mobile Devices.html
· Holly Kolman:How to Make a Click to Call Link.html
· Brian Suda:Introduction to the Mobile Web.html
手机型号查询
· handsetdetection:手机查询.html 机型很全,偏国外机型,参数较多
· mobile9:手机查询.html 机型较全,偏门机型可能无内容
· 试手机网:手机查询+模拟.html 机型稍少,可以模拟手机操作
总结
目前来说,手机网站开发是个典型的设备驱动开发的过程,页面被设计成什么样,能做到怎么样,几乎全取决于目标客户的手机设备情况。
所以,对手机设备的了解,对于设计开发过程有着直观重要的作用,对于前端来说,就需要有计划的进行长期的手机浏览器兼容性测试,什么样的设计能被实现,什么样的标签可以使用,这些都需要有数据的支持。
我们必须有这样的认知,开发的手机网页总是会在或多或少的手机设备上出现问题,因为我们永远无法知道所有用户的手机设备情况,所以我们更要尽量的遵循标准进行开发,这样才能将满足用户的比例做到最好。
任何一个领域都有值得你进行深入了解的地方,即使现在看起来,手机网站的开发还有点不入主流,但我相信,随着手机设备的更新换代,总有一天它也会成为我们占领客户的一个重要战场,iphone这类有符合web标准的浏览器的手机发布,也给了我们更多的信心。
分享到:
相关推荐
本资源就可以为你解决你所面临的这些问题,原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作资源合集,画面精美,非常适合初学者学习使用。 多套(HTML+CSS+JS)网页设计的学生期末大...
我从2004年末开始接触web标准,2005年5月正式采取完全的web标准方式的网页制作,2005年8月,第一个符合web标准的网站UI开发工作完成。直至今日,经历了无数的艰辛,也有过许多的困惑。所幸,我的瑞典籍的Project ...
在互联网时代,网页的设计与制作是构建网络平台和提供信息内容的基础。基于Web标准的网页设计与...更为重要的是,设计人员需要始终以Web标准为基础,确保网页的设计与开发既符合技术规范,又能够提供优秀的用户体验。
该作品运用web网页制作整本书知识综合实现,看各老师要求,基本符合80%~100%的要求。 导航栏,最左上角为网页logo,五个导航栏标题采用了鼠标悬停,点击首页推荐链接到本页面,点击作品大全链接到对应网址,点击作者...
新浪网页制作标准是互联网开发中的一个重要参考,尤其对于大型网站如新浪来说,这些标准确保了网页的一致性、可访问性和高效性能。本标准主要涵盖了HTML、CSS、Web和XHTML等方面,旨在优化用户体验和提高网页开发...
### 符合W3C标准之网页制作基本指引 #### 结构篇—XHTML1.0 ##### 贰、为什么要有网页国际标准 互联网的发展让网页成为了信息传递的重要渠道,而网页的标准对于确保信息的有效传达至关重要。网页的显示质量受多种...
4. **设计要求**:网页设计需符合一定的审美标准,包括颜色搭配、字体选择、布局合理性等。 #### 二、HTML5期末考核大作业的具体实现方法 1. **网页布局设计**:使用`div`+`CSS`进行网页布局是一种非常常见且实用...
WEB标准化页面制作指南是互联网行业中一项重要的...总的来说,Web标准化页面制作是确保网站质量与可持续发展的重要环节,通过遵循这些最佳实践,开发者可以创建出更符合用户需求、更具可扩展性和易维护性的Web应用。
本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计。具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、...
[目标] 使用WEB标准化布局技术制作网站。 [时间] 约360分钟。 [步骤] 1.明确网站的主题,同时也可以借鉴同类型的网站。 2.使用Dreamweaver创建站点结构,使用WEB标准化布局的技术制作企业网站。。 3.使用...
【网站制作期末作业】是一个关于网站开发的项目,包含...通过这个项目,你不仅可以学习到各种技术的实战应用,还能了解到一个完整网站从设计到实现的整个流程,这对于提升网站制作技能和理解Web开发全貌是非常有益的。
在本资源中,我们主要关注的是一个Web网页设计与制作的毕业设计项目,具体是一个蓝色的手机网站模板,适用于WAP(Wireless Application Protocol)设备,并且基于HTML5技术构建。这个压缩包文件包含了实现这样一个...
- **语义化标签**:使用`<section>`、`<article>`、`<aside>`等标签定义页面的不同部分,提高网页的可读性和搜索引擎优化效果。 - **媒体元素**:利用`<video>`和`<audio>`标签嵌入多媒体文件,无需依赖第三方插件...
网页制作是IT行业中一个基础且重要的领域,尤其在数字化时代,网页成为了信息传播的主要载体。Dreamweaver作为Adobe公司的一款专业级网页设计软件,被广泛应用于网页制作中,它为用户提供了直观的可视化编辑界面,...
【标题】:“Web端答题卡制作源码,可视化在线制作答题卡” 【描述】:这个项目提供了一套基于Web的答题卡制作工具的源代码,它允许用户通过可视化界面来设计和创建各种类型的答题卡。这为教育、培训、考试等场景...
此外,符合Web标准和无障碍(WCAG)指南也是高质量网页设计的重要组成部分,这样可以确保有特殊需求的用户也能方便地访问和使用网站。 总结起来,这个"Web课程设计网页设计成品"项目展示了如何综合运用HTML和CSS来...
在IT行业中,Web前端开发是构建互联网应用的重要组成部分,它主要负责用户与网站之间的交互界面。Web前端模板则是为了加速开发过程,提供预设样式和布局的代码框架。标题提到的"web网页前端模板",具体指的是"H+4.1...
在构建一个功能齐全且美观的网站时,"网站建设与网页制作"是至关重要的步骤,它涉及到从规划到实现的全过程。网页制作不仅包括了HTML、CSS等基础技术的应用,还要考虑用户体验、交互设计等因素。本主题将深入探讨...
【Web网页设计制作-毕业设计期末大作业源码】(FZY017)婚纱影楼公司网站手机触屏网站手机网站模板 本资源是一套适用于毕业设计或期末大作业的Web网页设计项目,主要针对婚纱影楼行业的手机触屏网站和手机网站模板。...