2009-12-04 71 views
14

哈所有,智能手机Web开发从哪里开始?

所以我一直taksed与开发智能手机网站,我们的财产门户和我所做的第一件事就是看看有什么经验教训其他国家不得不在网上告诉但我发现很少。我正在建设一个网站,我正在寻找做的,而不是关于html,css,widths/heights方法,javascript(是jquery打算发挥不错所有平台?)以及其他与此类平台相关的内容。

环顾别人,我非常喜欢http://mobile.whistlerblackcomb.com/

的问候, 丹尼斯

+0

你需要与哪些手机兼容? – 2009-12-04 19:00:51

+0

那不是我的规范。我们有一个wap站点,这不是被取代,而是我们希望在我们的wap实时站点和iphones,driods,palm pres等可以获得的网站之间获得一些东西,因为主站点的负载很高,而且wap功能很低。 – 2009-12-04 19:58:03

回答

15

UPDATE

虽然大多数下方仍然适用的文字,我现在说jQuery Mobile确实提供了一个精心设计和实用的UI组件的一个伟大的工作,同时也减轻了不少我过去曾使用过WURFL的设备测试和检测问题。它仍处于测试阶段,但似乎工作得很好。我建议检查一下。入门当


的两个最重要的要考虑的问题是:

1)设备检测

2)手机UI设计

对于发行数量1,我强烈建议在看WURFL设备数据集:

http://wurfl.sourceforge.net/

使用此功能,您可以使用其用户代理字符串检索访问您站点的设备的(某些)功能。测试移动网络应用程序有点像来自地狱的浏览器测试 - 有很多不同的设备和浏览器组合,这是一项艰巨的任务。如果你可以专注于开发相当功能的手机的一个或两个版本,说:

1)最小300像素宽度与所宣称的“网络”的支持和触摸屏 2)与上面相同,但没有触摸屏

您可以创建一个可用于大多数“智能手机”或“应用程序电话”的非常实用的网站,因为David Pogue已更准确地命名它们。对于实际的测试,你可以尝试:

1)使所有的朋友,什么样的手机,他们有 2)去一个手机卖场的列表,并使用这些手机来测试你的网站

而且,无论您做什么,只要您收到有关其设备上的缓慢/慢速内容的不可避免的用户反馈,就必须保持敏捷。

关于UI设计,有几个问题。最简单的一个是漂亮的CSS。在这里,只需看看你喜欢的一些移动网站并窃取他们的CSS。一旦你完成了这些,你基本上只是在一个小屏幕上进行常规的旧网页开发。 ul的将成为不错的iPhone-y表等。

更大的问题是移动网络的可用性。在很多方面,我们正处于90年代的移动Web开发网络环境。我的意思是我们没有完善的设计模式。这使得移动Web开发变得非常有趣,但这也意味着,随着更好的想法的发展,您必须随时准备好调整丑陋/破碎的用户界面。当前的一个例子是您在很多移动网站上看到的全球导航/面包屑。有数量惊人的人试图通过在移动应用内提供持久导航工具(后退按钮)来模仿原生iPhone应用的行为。虽然这很漂亮,但它有一些问题:

1)考虑到浏览器带有用户非常熟悉的后退按钮,这是多余的。这些全球导航存在于本地应用中的原因是它们没有免费的导航工具。

2)网络很棒。您可以在其结构中的任何位置输入,离开并重新输入“应用程序”。通过假设用户通过应用程序获得线性路径,您将减少其网络性,使其相对于其他网络更加粗糙。

3)中断。要么你可以进入应用程序导航和浏览器导航指向相反方向(在应用程序历史记录中点击应用程序中的后退按钮),或者使用javascript伪造后退按钮, t从应用程序的开始处开始(通过电子邮件发送链接,书签),或者设置会话,这对于复制从浏览器中免费获得的内容可能是一个巨大的麻烦。会话也容易受到破坏(通过电子邮件发送链接,书签),而且你的收益并不高。

我想我在这里要点是:

1)不要忘了你是在网络上。网络很酷,浏览器很酷,利用它。

2)不要害怕玩耍。这里没有很多完善的模式,所以你可能需要尝试一些你自己的模式。

+0

很好,我从我的+1 – 2009-12-21 21:01:36

+1

另外,如果你打算使用mysql作为你的数据库,相比于香草xml wurfl,Tera-WURFL(http://www.tera-wurfl.com/)提供了非常好的性能提升。 – 2009-12-21 21:03:27

0

随着现代智能手机实际上是有发展的常规网页,一个专门的网站没有什么区别。

但是,您可以尝试仿苹果,RIM,摩托罗拉和诺基亚等主要玩家所提供的模拟器,以了解它们的外观。

0

我建议考虑看看一些其他的移动网站。我在下面发布了一些。

  • m.reddit.com
  • diggriver.com
  • mobile.washingtonpost.com
0

因为现代的移动浏览器工作得非常像桌面浏览器的“缩小JS一句古老的谚语和CSS,优化图像“应该是您最关心的问题,因为带宽在移动设备上更有价值。

此外,还应考虑以下几点:

  • 认为,如果你需要的所有图像,如果他们是为小屏幕太大。考虑删除或减少大图像的大小。
  • 检查您的JavaScript - 请问您的网站没有它?这可能是有益的禁用其中的一部分,因为它可以很容易地减少对手机浏览器的速度
  • 通常也可以通过简单地得到通过在你的主站点为小屏幕设备量身定做专门的CSS样式

你可能也发现这有帮助:Why your mobile site probably sucks

0

移动网站通常用于普通电话,并经常去m.example.com而不是www.example.com。这些网站几乎没有javascript或css兼容性。当您询问移动网站时,请记住有两种类型的移动网站。

现代智能手机应该处理的浏览器与完整的浏览器相同,但它们不是。实际上,iPhone生活在一个幻想世界中,将会报告超过900个像素的窗口宽度!

您可以为智能手机做些窍门。触摸屏没有用于:悬停伪类。这可能是需要悬停的菜单的问题。你可以设计这个。怎么样?你问...

苹果看着一个新的元标记(做一个谷歌搜索),其他智能手机浏览器也看着这个。有了这个,您可以强制智能手机以像素形式报告实际的屏幕尺寸,而不是预先编程的幻想尺寸。

现在你已经做到了这一点,你可以使用CSS条件语句,

@media only all and (max-width:600px){

CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS 
} 

我用这个来阻止<div> s表示堆满了移动设备屏幕:收藏夹,例如。我还用它来修改图像宽度,以便它们更好地适应设备。为什么我选择600 px?我觉得很多更新的“上网本”也应该放在这里。

我希望这会有所帮助。

--Dave

0

Meagan Fisher的谈话Designing Effective Mobile Interfaces提供了一个很好的概述。她推荐Cameron Moll编写的“移动网页设计”一书。技术上来说,如果你还没有熟悉XHTML Mobile Profile,我会先开始熟悉。

就设计而言,想一想。用漂亮的印刷术扒一本书,看看你是否可以用CSS复制页面布局。 “适用于网络的印刷风格元素”是一个很好的起点。手机网站是关于滚动,而不是复杂的导航。节奏和间距很重要。保持图像小,文字高对比度,你会最终得到加载速度快,看起来不错的东西。