从哪里开始智能手机Web开发?

时间:2009-12-04 18:42:18

标签: javascript html css mobile smartphone

哈哈,

所以我一直在为我们的房产门户网站开发一个智能手机网站,我做的第一件事就是看看其他人在网上讲的课程,但我发现很少。

我没有构建应用程序,我正在建立一个网站,我正在寻找做的,而不是关于html,css,宽度/高度方法,javascript(jquery会在所有方面都很好玩平台?)以及其他任何与此类平台相关的东西。

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

此致 丹尼斯

10 个答案:

答案 0 :(得分:15)

<强>更新

虽然下面的大部分内容仍然适用,但我现在说jQuery Mobile在提供精心设计和可用的UI组件方面做得很好,同时也减轻了大量的设备测试和检测我以前用过WURFL的问题。它仍处于测试阶段,但似乎运行良好。我建议检查一下。


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

1)设备检测

2)移动UI设计

对于第1期,我强烈建议您查看WURFL设备数据集:

http://wurfl.sourceforge.net/

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

1)最小300px宽度,声称具有“web”支持和触摸屏 2)与上面相同,但没有触摸屏

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

1)列出你所有的朋友以及他们拥有的手机类型 2)去手机商店并使用这些手机测试您的网站

并且,无论您做什么,当您收到有关其设备上内容破损/慢速的不可避免的用户反馈时,您都必须保持敏捷。

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

更大的问题是移动网络的可用性。在很多方面,我们处于移动网络开发的90年代网络状态。我的意思是我们没有完善的设计模式。这使得进行移动Web开发真的很有趣,但这也意味着您必须随时准备好调整丑陋/破坏的UI,因为更好的想法不断发展。目前的一个例子是您在许多移动网站上看到的全局导航/面包屑。有惊人数量的人试图通过在移动应用程序中提供持久的导航工具(后退按钮)来模仿本机iPhone应用程序的行为。虽然这很漂亮,但它有一些问题:

1)这是多余的,因为浏览器附带了一个用户非常熟悉的后退按钮。这些全局导航存在于本机应用程序中的原因是它们没有免费的导航工具。

2)网络很棒。您可以在其结构中的任何位置输入,离开和重新输入“应用程序”。通过假设用户在您的应用程序中采用线性路径,您正在降低其网络性,使其相对于网络的其余部分更加粗糙。

3)它打破了。您可以进入应用程序导航和浏览器导航指向相反方向的情况(点击应用程序中的后退按钮在应用程序历史记录中前进),或者您使用javascript伪造后退按钮,如果他们不在从应用程序的开头(通过电子邮件发送的链接,书签)开始,或者设置会话,这可能是一个很大的痛苦,只是为了免费复制从浏览器中获得的内容。会话也容易受到破坏(通过电子邮件发送的链接,书签),而且你真的没有太多收获。

我想我的主要观点是:

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

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

答案 1 :(得分:1)

List Apart可以帮助您入门: CRAIG HOCKENBERRY "Put Your Content in My Pocket"

答案 2 :(得分:1)

这是一个为网络提供智能手机应用程序的网站,我还没有测试过, 我会在使用后发表评论! http://www.makeuseof.com/dir/appsbar-build-your-own-smartphone-app/

答案 3 :(得分:0)

使用现代智能手机,开发传统网页和专用网站之间实际上没有区别。

但你可以尝试Apple,RIM,摩托罗拉和诺基亚等主要厂商提供的模拟器,看看它们的外观。

答案 4 :(得分:0)

我建议看看其他一些移动网站。我在下面发了几个。

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

答案 5 :(得分:0)

由于现代移动浏览器的工作方式与桌面浏览器非常相似,因此“缩小JS和CSS,优化图像”的古老格言应该是您最关心的问题,因为带宽在移动设备上更有价值。

此外,请考虑以下事项:

  • 想想你是否需要所有图像,以及它们是否对于小屏幕来说太大了。考虑删除或减小大图像的大小。
  • 检查您的JavaScript - 您的网站是否可以在没有它的情况下运行?禁用部分内容可能会有所帮助,因为它可能会轻易降低移动浏览器的速度
  • 您可以通过简单地为主网站中的小屏幕设备添加专门的CSS样式来实现。

您可能还会发现这有用:Why your mobile site probably sucks

答案 6 :(得分:0)

移动网站通常用于普通手机,通常转到m.example.com而不是www.example.com。这些网站很少/没有javascript或css兼容性。当您询问移动网站时,请记住有两种类型的移动网站。

现代智能手机应该像完全成熟的浏览器一样处理浏览器,但它们不是。事实上,iPhone生活在一个幻想世界,并将报告超过900像素的窗口宽度!

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

Apple查看新的元标记(对其进行谷歌搜索),其他智能手机浏览器也会查看此标记。有了这个,您可以强制智能手机以像素为单位报告实际屏幕尺寸,而不是预先编程的幻想尺寸。

既然你已经这样做了,你可以使用css条件语句,

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

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

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

我用它来阻止混乱移动设备屏幕的:例如,灯箱。我也用它来修改图像宽度,因此它们更适合设备。为什么我选择600像素?我觉得许多较新的“上网本”也应该集中在这里。

我希望这会有所帮助。

- 戴夫

答案 7 :(得分:0)

如果您希望专门针对iPhone或iTouch进行开发,请使用此条件声明。

[if SafMob] @import url(iphone.css);

这是一篇关于为移动设备构建网站的文章。 http://www.alistapart.com/articles/pocket/

答案 8 :(得分:0)

Meagan Fisher关于Designing Effective Mobile Interfaces的演讲提供了一个很好的概述。她推荐了Cameron Moll的“移动网页设计”一书。技术方面,我首先要熟悉XHTML Mobile Profile,如果你还没有。

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

答案 9 :(得分:0)

Cameron Moll还提到了这一部分“移动网页设计”:

State of the Mobile Web
Methods to the Madness
Tips & Techniques

该系列是从2005年开始的,但许多信息仍然相关。最后一部分“技巧与技巧”还列出了许多关于移动网络开发的其他资源。