您可以创建一个非常有用的网站，适用于大多数“智能手机”或“应用程序手机”，如 David Pogue 更准确地命名了它们。对于实际测试，您可以尝试：
1）列出您所有的朋友以及他们拥有什么类型的手机 2) 去手机商店并使用这些手机来测试您的网站
，无论您做什么，当您不可避免地收到有关其设备上内容损坏/缓慢的用户反馈时，您都必须保持敏捷。
关于UI设计，有几个问题。最简单的一种是好看的 CSS。在这里，只需查看一些您喜欢的移动网站并窃取它们的 CSS。完成此操作后，您基本上就可以在小屏幕上进行常规的旧 Web 开发。 ul 将成为漂亮的 iPhone-y 表格等。
更大的问题是移动网络的可用性。在很多方面，我们的移动 Web 开发都处于 90 年代的 Web 状态。我的意思是我们在没有完善的设计模式的情况下工作。这使得移动 Web 开发变得非常有趣，但这也意味着您必须准备好随着更好的想法的发展而调整丑陋/损坏的 UI。当前的一个例子是您在许多移动网站上看到的全球导航/面包屑。令人惊讶的是，有很多人试图通过在移动应用程序中提供持久导航工具（后退按钮）来模仿本机 iPhone 应用程序的行为。虽然这很漂亮，但它有一些问题：
While most of the text below still applies, I would now say that jQuery Mobile does a great job of providing a well-designed and usable set of UI components, while also alleviating a lot of the device testing and detection issues that I've used WURFL for in the past. It's still in beta, but seems to be working pretty well. I recommend checking it out.
The two most important issues to consider when getting started are:
1) Device detection
2) Mobile UI design
For issue number 1, I strongly recommend looking at the WURFL device dataset:
Using this, you can retrieve (some) capabilities of devices that are accessing your site, using their User Agent string. Testing mobile web apps is kind of like browser testing from hell--there are so many different combinations of devices and browsers, that it's a difficult task. If you can focus on developing one or two versions for fairly capable phones, say:
1) minimum 300px width with claimed "web" support and a touch screen 2) The same as above, but without a touch screen
you can create a very usable site that will work for most "smartphones," or "app phones" as David Pogue has more accurately named them. For the actual testing, you can try:
1) Making a list of all of your friends and what kind of phones they have 2) Going to a phone store and using those phones to test your site
and, regardless of what you do, you'll have to be agile when you receive the inevitable user feedback about broken/slow content on their device.
Regarding UI design, there are a couple of issues. The simplest one is nice looking CSS. Here, just look at some mobile sites you like and steal their CSS. Once you've done this, you're basically doing regular old web development, just on a small screen. ul's will become nice iPhone-y tables, etc.
The bigger problem is mobile web usability. In a lot of ways, we're in a 90s-web situation with mobile web development. What I mean is that we working without well-established design patterns. This makes doing mobile web development really fun, but it also means that you have to be ready to adjust your ugly/broken UI as better ideas evolve. One current example are the global nav/breadcrumbs you see on a lot of mobile sites. A surprising number of folks out there are trying to mimic the behavior of native iPhone apps by providing a persistent navigation tool (back button) within the mobile app. While this is kind of pretty, it has a few problems:
1) It is redundant, given that the browser comes with a back button that users are very familiar with. The reason these global navs exist in native apps is that they don't come with a free navigation tool.
2) The web is great. You can enter, leave and re-enter "apps" at any point in their structure. By assuming that a user takes a linear path through your app, you are decreasing its webiness, making it a lot more crude relative to the rest of the web.
3) It breaks. Either you can get in a situation where the app nav and the browser nav point in opposite directions (hitting the back button in your app steps forward through the app history), or you fake a back button with javascript, which breaks if they don't start at the beginning of an app (emailed link, bookmark), or you set up sessions, which can be a big pain just to replicate what you get from the browser for free. Sessions are also vulnerable to brokenness (emailed links, bookmarks), and you're really not gaining much.
I guess my main points here are:
1) Don't forget you're on the web. The web is cool, browsers are cool, make use of that.
2) Don't be afraid to play around. There aren't many well-established patterns here, so you may have to try out some of your own.
Since modern mobile browsers work quite much like desktop browsers, the old adage of "minify JS and CSS, optimize images" should be your primary concern, as bandwidth is more valuable on mobile devices.
In addition, consider following:
Think if you need all your images, and if they are too large for small screens. Consider removing or reducing the size of large images.
Check your JavaScript - Will your site work without it? It may be beneficial to disable parts of it, as it may easily reduce speed on mobile browsers
You can often get by simply by including specialized CSS styles tailored for small screen devices in your main site
Mobile sites are often used on regular phones, and often go to m.example.com instead of www.example.com. These sites have little/no javascript or css compatibility. When you ask about mobile sites, keep in mind that there are two types of mobile sites.
Modern smartphone are supposed to handle browsers the same as a full fledged browser, but they are not. In fact, the iPhone lives in a fantasy world and will report a window width of over 900 pixels!
There are tricks that you can do for a smartphone. A touchscreen has no use for the :hover pseudo-class. This can be a problem for menus that require hovering. You can design around this. How? you ask...
Apple looks at a new meta tag (do a google search on it) and other smartphone browsers look at this as well. With this, you can force the smartphone to report it actual screen size in pixels, and not it's pre-programmed fantasy size.
Now that you have done this, you can use css conditional statements,
@media only all and (max-width:600px){
CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS
}
I've used this to block <div>s that cluttered up a mobile device screen: lightbox, for example. I also used this to modify image widths, so they fit on the device better. Why did I choose 600 px? I felt that many of the newer "netbooks" should be lumped in here as well.
Meagan Fisher's talk on Designing Effective Mobile Interfaces provides a good overview. She recommends the book "Mobile Web Design" by Cameron Moll. Technology wise, I'd start by getting familiar with XHTML Mobile Profile if you're not already.
As far as design goes, think thin. Snag a book with nice typography and see if you can duplicate the page layout with CSS. "Elements of Typographic Style Applied to the Web" is a good starting point for that. Phone websites are about scrolling, not complex navigation. Rhythm and spacing are important. Keep images small and your text high contrast, and you'll end up with something that loads fast and looks good.
The series is from 2005, but many of the info is still relevant. The last part "Tips & Techniques" also lists a lot of other resources on mobile web development.
发布评论
评论（9）
更新：
虽然下面的大部分文字仍然适用，但我现在想说 jQuery Mobile在提供一组精心设计且可用的 UI 组件方面做得非常出色，同时还缓解了我过去使用 WURFL 处理的许多设备测试和检测问题。它仍处于测试阶段，但似乎运行得很好。我建议检查一下。
开始时要考虑的两个最重要的问题是：
1) 设备检测
2) 移动 UI 设计
对于第 1 个问题，我强烈建议查看 WURFL 设备数据集：
http://wurfl.sourceforge.net/
使用此功能，您可以使用其用户代理字符串检索正在访问您网站的设备的（某些）功能。测试移动网络应用程序有点像来自地狱的浏览器测试——设备和浏览器的组合如此之多，这是一项艰巨的任务。如果您可以专注于为功能相当强大的手机开发一两个版本，请说：
1）最小 300 像素宽度，并声称支持“网络”和触摸屏
2) 与上面相同，但没有触摸屏，
您可以创建一个非常有用的网站，适用于大多数“智能手机”或“应用程序手机”，如 David Pogue 更准确地命名了它们。对于实际测试，您可以尝试：
1）列出您所有的朋友以及他们拥有什么类型的手机
2) 去手机商店并使用这些手机来测试您的网站
，无论您做什么，当您不可避免地收到有关其设备上内容损坏/缓慢的用户反馈时，您都必须保持敏捷。
关于UI设计，有几个问题。最简单的一种是好看的 CSS。在这里，只需查看一些您喜欢的移动网站并窃取它们的 CSS。完成此操作后，您基本上就可以在小屏幕上进行常规的旧 Web 开发。 ul 将成为漂亮的 iPhone-y 表格等。
更大的问题是移动网络的可用性。在很多方面，我们的移动 Web 开发都处于 90 年代的 Web 状态。我的意思是我们在没有完善的设计模式的情况下工作。这使得移动 Web 开发变得非常有趣，但这也意味着您必须准备好随着更好的想法的发展而调整丑陋/损坏的 UI。当前的一个例子是您在许多移动网站上看到的全球导航/面包屑。令人惊讶的是，有很多人试图通过在移动应用程序中提供持久导航工具（后退按钮）来模仿本机 iPhone 应用程序的行为。虽然这很漂亮，但它有一些问题：
1）它是多余的，因为浏览器带有用户非常熟悉的后退按钮。这些全局导航存在于本机应用程序中的原因是它们没有附带免费的导航工具。
2）网络很棒。您可以在其结构中的任何位置进入、离开和重新进入“应用程序”。通过假设用户在您的应用程序中采用线性路径，您就减少了它的网络性，使其相对于网络的其他部分更加粗糙。
3）它坏了。您可能会遇到应用程序导航和浏览器导航指向相反方向的情况（点击应用程序中的后退按钮会向前浏览应用程序历史记录），或者您使用 JavaScript 伪造后退按钮，如果不这样做，则会中断不要从应用程序的开头（通过电子邮件发送的链接、书签）开始，或者设置会话，这可能会非常痛苦，只是为了免费复制从浏览器获得的内容。会话也很容易被破坏（电子邮件链接、书签），而且您实际上并没有获得太多好处。
我想我的要点是：
1）不要忘记您正在网络上。网络很酷，浏览器也很酷，充分利用它们。
2）不要害怕玩耍。这里没有很多成熟的模式，因此您可能需要尝试一些自己的模式。
UPDATE:
While most of the text below still applies, I would now say that jQuery Mobile does a great job of providing a well-designed and usable set of UI components, while also alleviating a lot of the device testing and detection issues that I've used WURFL for in the past. It's still in beta, but seems to be working pretty well. I recommend checking it out.
The two most important issues to consider when getting started are:
1) Device detection
2) Mobile UI design
For issue number 1, I strongly recommend looking at the WURFL device dataset:
http://wurfl.sourceforge.net/
Using this, you can retrieve (some) capabilities of devices that are accessing your site, using their User Agent string. Testing mobile web apps is kind of like browser testing from hell--there are so many different combinations of devices and browsers, that it's a difficult task. If you can focus on developing one or two versions for fairly capable phones, say:
1) minimum 300px width with claimed "web" support and a touch screen
2) The same as above, but without a touch screen
you can create a very usable site that will work for most "smartphones," or "app phones" as David Pogue has more accurately named them. For the actual testing, you can try:
1) Making a list of all of your friends and what kind of phones they have
2) Going to a phone store and using those phones to test your site
and, regardless of what you do, you'll have to be agile when you receive the inevitable user feedback about broken/slow content on their device.
Regarding UI design, there are a couple of issues. The simplest one is nice looking CSS. Here, just look at some mobile sites you like and steal their CSS. Once you've done this, you're basically doing regular old web development, just on a small screen. ul's will become nice iPhone-y tables, etc.
The bigger problem is mobile web usability. In a lot of ways, we're in a 90s-web situation with mobile web development. What I mean is that we working without well-established design patterns. This makes doing mobile web development really fun, but it also means that you have to be ready to adjust your ugly/broken UI as better ideas evolve. One current example are the global nav/breadcrumbs you see on a lot of mobile sites. A surprising number of folks out there are trying to mimic the behavior of native iPhone apps by providing a persistent navigation tool (back button) within the mobile app. While this is kind of pretty, it has a few problems:
1) It is redundant, given that the browser comes with a back button that users are very familiar with. The reason these global navs exist in native apps is that they don't come with a free navigation tool.
2) The web is great. You can enter, leave and re-enter "apps" at any point in their structure. By assuming that a user takes a linear path through your app, you are decreasing its webiness, making it a lot more crude relative to the rest of the web.
3) It breaks. Either you can get in a situation where the app nav and the browser nav point in opposite directions (hitting the back button in your app steps forward through the app history), or you fake a back button with javascript, which breaks if they don't start at the beginning of an app (emailed link, bookmark), or you set up sessions, which can be a big pain just to replicate what you get from the browser for free. Sessions are also vulnerable to brokenness (emailed links, bookmarks), and you're really not gaining much.
I guess my main points here are:
1) Don't forget you're on the web. The web is cool, browsers are cool, make use of that.
2) Don't be afraid to play around. There aren't many well-established patterns here, so you may have to try out some of your own.
List Apart 可以帮助您开始：
“将您的内容放入我的口袋” 作者：CRAIG HOCKENBERRY
A List Apart can get you started:
"Put Your Content in My Pocket" by CRAIG HOCKENBERRY
对于现代智能手机来说，开发传统网页和专用网站实际上没有区别。
但您可以尝试一下 Apple、RIM、Motorola 和 Nokia 等主要厂商提供的模拟器，看看它们的外观如何。
With modern smartphones there's actually no difference between developing a conventional webpage and a dedicated website.
But you could try the emulators that the major players like Apple, RIM, Motorola and Nokia provides to see how they look.
我建议看看其他一些移动网站。我在下面贴了一些。
I'd suggest taking a look at some other mobile sites. I posted a few below.
由于现代移动浏览器的工作方式与桌面浏览器非常相似，因此“缩小 JS 和 CSS，优化图像”这句老话应该是您最关心的问题，因为带宽在移动设备上更有价值。
此外，请考虑以下事项：
您可能还会发现这很有帮助：为什么您的移动网站可能很糟糕
Since modern mobile browsers work quite much like desktop browsers, the old adage of "minify JS and CSS, optimize images" should be your primary concern, as bandwidth is more valuable on mobile devices.
In addition, consider following:
You might also find this helpful: Why your mobile site probably sucks
移动网站通常在普通手机上使用，并且经常访问 m.example.com 而不是 www.example.com。这些网站很少/没有 JavaScript 或 CSS 兼容性。当您询问移动网站时，请记住移动网站有两种类型。
现代智能手机应该像成熟的浏览器一样处理浏览器，但事实并非如此。事实上，iPhone 生活在一个幻想世界中，并且会报告超过 900 像素的窗口宽度！
您可以为智能手机执行一些技巧。触摸屏没有 :hover 伪类的用处。对于需要悬停的菜单来说，这可能是一个问题。你可以围绕这个进行设计。如何？你问...
苹果会查看一个新的元标签（对其进行谷歌搜索），其他智能手机浏览器也会查看此标签。有了这个，您可以强制智能手机报告其实际屏幕尺寸（以像素为单位），而不是预编程的幻想尺寸。
现在你已经做到了这一点，你可以使用CSS条件语句，
@media only all and (max-width:600px){
我用它来阻止
使移动设备屏幕变得混乱：例如灯箱。我还用它来修改图像宽度，以便它们更好地适合设备。为什么我选择 600 像素？我觉得许多较新的“上网本”也应该集中在这里。我希望这有帮助。
——戴夫
Mobile sites are often used on regular phones, and often go to m.example.com instead of www.example.com. These sites have little/no javascript or css compatibility. When you ask about mobile sites, keep in mind that there are two types of mobile sites.
Modern smartphone are supposed to handle browsers the same as a full fledged browser, but they are not. In fact, the iPhone lives in a fantasy world and will report a window width of over 900 pixels!
There are tricks that you can do for a smartphone. A touchscreen has no use for the :hover pseudo-class. This can be a problem for menus that require hovering. You can design around this. How? you ask...
Apple looks at a new meta tag (do a google search on it) and other smartphone browsers look at this as well. With this, you can force the smartphone to report it actual screen size in pixels, and not it's pre-programmed fantasy size.
Now that you have done this, you can use css conditional statements,
@media only all and (max-width:600px){
I've used this to block
<div>s that cluttered up a mobile device screen: lightbox, for example. I also used this to modify image widths, so they fit on the device better. Why did I choose 600 px? I felt that many of the newer "netbooks" should be lumped in here as well.I hope this helps.
--Dave
如果您希望专门针对 iPhone 或 iTouch 进行开发，请使用此条件语句。
这是一篇关于构建移动网站的文章。
http://www.alistapart.com/articles/pocket/
If you are looking to do development specifically for an iPhone or iTouch use thise conditional statement.
Here is an article about building sites for mobile.
http://www.alistapart.com/articles/pocket/
Meagan Fisher 关于设计有效的移动界面的演讲提供了很好的概述。她推荐了Cameron Moll 的《移动网页设计》一书。在技术方面，如果您还没有熟悉 XHTML Mobile Profile，我将首先熟悉它。
就设计而言，要细想。找一本排版精美的书，看看是否可以用 CSS 复制页面布局。 “应用于网络的印刷样式元素”是一个很好的起点。电话网站主要是滚动，而不是复杂的导航。节奏和间距很重要。保持图像较小且文本对比度较高，您最终会得到加载速度快且看起来不错的内容。
Meagan Fisher's talk on Designing Effective Mobile Interfaces provides a good overview. She recommends the book "Mobile Web Design" by Cameron Moll. Technology wise, I'd start by getting familiar with XHTML Mobile Profile if you're not already.
As far as design goes, think thin. Snag a book with nice typography and see if you can duplicate the page layout with CSS. "Elements of Typographic Style Applied to the Web" is a good starting point for that. Phone websites are about scrolling, not complex navigation. Rhythm and spacing are important. Keep images small and your text high contrast, and you'll end up with something that loads fast and looks good.
还有 Cameron Moll 的三部分《移动网页设计》：
移动网络现状
疯狂的方法
提示和信息技术
该系列是 2005 年的，但许多信息仍然相关。最后一部分“提示与技术”还列出了许多有关移动 Web 开发的其他资源。
There is also this threeparter, "Mobile Web Design" by Cameron Moll:
State of the Mobile Web
Methods to the Madness
Tips & Techniques
The series is from 2005, but many of the info is still relevant. The last part "Tips & Techniques" also lists a lot of other resources on mobile web development.