I would highly recommend you check out Cameron Molls' book Mobile Web Design. Its not so much a technical how-to for building mobile optimised sites but makes you think about the various options available and summarises each ones pros and cons. Will definately make you think about what approach you're taking and whether its the right one. I think it also has some pointers to resources that help detect mobile device requests to your site, there are various options out there.
如果你想花很少的钱，你可以找到我的书的二手Amazon 上的“Palm OS Web 应用程序开发人员指南”，售价不到 1 美元。 虽然有关旧 Palm VII 设备的具体提示不再适用，但有一些关于制作移动网站的部分可能仍然适用。 我的基本建议是：首先将页面缩小为相关信息，然后是导航链接； 将通用/样板内容推送到其他页面； 尝试优化以减少用户在单个页面上花费的时间； 避免为页面下载大量对象（图像、JavaScript 文件）以减少延迟。
If you want to spend a very small amount of money, you can find a used copy of my book "Palm OS Web Application Developer's Guide" on Amazon for under $1. While the specific tips about the old Palm VII devices don't apply anymore, there's a few sections on making mobile websites that might still apply. My basic advice is this: make pages small with relevant information first, then navigation links; push generic/boilerplate content to other pages; try to optimize to reduce the amount of time a user spends on a single page; and avoid downloading lots of objects (images, JavaScript files) for a page to reduce latency.
My experience is that it really depends on what you're trying to do and who/where the users are.
While WAP got a lot of bad press, it's strength is where you have low bandwidth high-latency connections. The WML content gets optimised by the carrier's gateway to greatly reduce the amount of data transmitted over the air. If you have iPhones and the like, in areas with solid 3G coverage you can afford to go for richer content, but if you want an app to still perform well in more out of the way areas, WAP has a big advantage.
One thing to watch out for with WAP is that the quality of the WAP support in handsets varies a lot (guess you'd also say the same for smartphone web browsers). Most of them display pages ok, but the form handling is truly awful in some browsers.
If you vary content based on user-agent, you should also provide an explicit way to access a specific type of content (e.g. seperate uri's) - the automated choice is not always right and you want the client to be able to override it .
If you go with WAP development check out WinWAP - a Windows-based WAP browser.
I think the main difference with the 2.5G phones and the new 3G phones is that while 2.5G phones used their own browsers, browsers on 3G phones have become much more similar/accurate in their rendering capabilities.
On the other hand, you can use CSS to render the same HTML in either a large screen format or a small mobile-optimized one, so I guess what has happened is that the "simple HTML" approach just appeared to be the least difficult path to take. Also, tableless layouts allow websites to scale better, making it easier to render a site in both large and small screen formats.
So the end question will be that of a target market. Are you targeting a tech-savvy audience who will tend to have fully 3G-capable phones? Are you targeting people who might have 2.5G at the most?
We may not need separate site for mobile devices instead we can go for front end libaries like Twitter Bootstrap which uses responsive rendering so that site adapts itself to the screen size whether it be Tablet or Mobile device or Desktop
One of Major advantages is it takes less maintenance when compared to having separate websites for mobile and desktop.
Newer phones come with WAP2 which uses HTML Mobile Profile (XHTML MP), which is quite similar to normal HTML. Older phones use Wireless Markup Language (WML).
Depending on your audience I would consider making a mobile phone friendly version of the site using XHTML MP and drop WML completely. By mobile phone friendly I mean light graphics, little JavaScript and simple navigation.
To check capabilities of different hand phones, take look at WURFL.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>
The code:
Causes the w3 validator to return 11 erorrs when I use it. Here's the index page it was tried in: You'll not some multiple lines, not used. They're template lines.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>
发布评论
评论（8）
我强烈建议您查看Cameron Molls 的一本书移动网页设计。 它并不是构建移动优化网站的技术指南，而是让您思考各种可用的选项并总结每个选项的优缺点。 肯定会让你思考你正在采取什么方法以及它是否正确。 我认为它还有一些指向资源的指针，可以帮助检测移动设备对您网站的请求，有各种选项。
I would highly recommend you check out Cameron Molls' book Mobile Web Design. Its not so much a technical how-to for building mobile optimised sites but makes you think about the various options available and summarises each ones pros and cons. Will definately make you think about what approach you're taking and whether its the right one. I think it also has some pointers to resources that help detect mobile device requests to your site, there are various options out there.
如果你想花很少的钱，你可以找到我的书的二手Amazon 上的“Palm OS Web 应用程序开发人员指南”，售价不到 1 美元。 虽然有关旧 Palm VII 设备的具体提示不再适用，但有一些关于制作移动网站的部分可能仍然适用。 我的基本建议是：首先将页面缩小为相关信息，然后是导航链接； 将通用/样板内容推送到其他页面； 尝试优化以减少用户在单个页面上花费的时间； 避免为页面下载大量对象（图像、JavaScript 文件）以减少延迟。
If you want to spend a very small amount of money, you can find a used copy of my book "Palm OS Web Application Developer's Guide" on Amazon for under $1. While the specific tips about the old Palm VII devices don't apply anymore, there's a few sections on making mobile websites that might still apply. My basic advice is this: make pages small with relevant information first, then navigation links; push generic/boilerplate content to other pages; try to optimize to reduce the amount of time a user spends on a single page; and avoid downloading lots of objects (images, JavaScript files) for a page to reduce latency.
我的经验是，这实际上取决于您想要做什么以及用户是谁/在哪里。
虽然 WAP 受到很多负面报道，但它的优势在于低带宽高延迟连接。 WML 内容经过运营商网关的优化，大大减少了无线传输的数据量。 如果您拥有 iPhone 等设备，在 3G 覆盖稳定的地区，您可以负担得起更丰富的内容，但如果您希望应用程序在更偏僻的地区仍然表现良好，那么 WAP 具有很大的优势。
使用 WAP 时需要注意的一件事是，手机中 WAP 支持的质量差异很大（我猜您也会对智能手机网络浏览器说同样的情况）。 大多数浏览器都可以正常显示页面，但在某些浏览器中，表单处理确实很糟糕。
如果您根据用户代理改变内容，您还应该提供一种显式的方式来访问特定类型的内容（例如单独的 uri） - 自动选择并不总是正确的，您希望客户端能够覆盖它。
如果您进行 WAP 开发，请查看 WinWAP - 一个基于 Windows 的 WAP 浏览器。
My experience is that it really depends on what you're trying to do and who/where the users are.
While WAP got a lot of bad press, it's strength is where you have low bandwidth high-latency connections. The WML content gets optimised by the carrier's gateway to greatly reduce the amount of data transmitted over the air. If you have iPhones and the like, in areas with solid 3G coverage you can afford to go for richer content, but if you want an app to still perform well in more out of the way areas, WAP has a big advantage.
One thing to watch out for with WAP is that the quality of the WAP support in handsets varies a lot (guess you'd also say the same for smartphone web browsers). Most of them display pages ok, but the form handling is truly awful in some browsers.
If you vary content based on user-agent, you should also provide an explicit way to access a specific type of content (e.g. seperate uri's) - the automated choice is not always right and you want the client to be able to override it .
If you go with WAP development check out WinWAP - a Windows-based WAP browser.
我认为2.5G手机和新的3G手机的主要区别在于，虽然2.5G手机使用自己的浏览器，但3G手机上的浏览器在渲染功能方面变得更加相似/准确。
另一方面，您可以使用 CSS 以大屏幕格式或针对移动设备优化的小型格式呈现相同的 HTML，所以我猜发生的情况是“简单 HTML”方法似乎是最简单的路径采取。 此外，无表格布局允许网站更好地扩展，从而更容易以大屏幕和小屏幕格式呈现网站。
所以最终的问题将是目标市场的问题。 您的目标受众是精通技术且倾向于拥有完全支持 3G 功能的手机的受众吗？ 您的目标人群是否最多可能拥有 2.5G？
I think the main difference with the 2.5G phones and the new 3G phones is that while 2.5G phones used their own browsers, browsers on 3G phones have become much more similar/accurate in their rendering capabilities.
On the other hand, you can use CSS to render the same HTML in either a large screen format or a small mobile-optimized one, so I guess what has happened is that the "simple HTML" approach just appeared to be the least difficult path to take. Also, tableless layouts allow websites to scale better, making it easier to render a site in both large and small screen formats.
So the end question will be that of a target market. Are you targeting a tech-savvy audience who will tend to have fully 3G-capable phones? Are you targeting people who might have 2.5G at the most?
截至目前（2014 年），
我们可能不需要针对移动设备的单独站点，而是可以使用前端库，例如 Twitter Bootstrap，它使用响应式渲染
以便网站能够适应屏幕尺寸，无论是平板电脑、移动设备还是桌面
主要优点之一是它需要更少与拥有单独的移动和桌面网站相比，维护。
要了解有关 Twitter Bootstrap 的更多信息，请点击此处
As of now(2014)
We may not need separate site for mobile devices instead we can go for front end libaries like Twitter Bootstrap which uses responsive rendering
so that site adapts itself to the screen size whether it be Tablet or Mobile device or Desktop
One of Major advantages is it takes less maintenance when compared to having separate websites for mobile and desktop.
To know more about Twitter Bootstrap click here
您可以采取以下两件事来改善对 iPhone 的支持，而无需做太多工作：
使页面向上滚动以隐藏 URL 栏：
并设置页面宽度的缩放比例（最好进行一些测试并使用它，还可以查找其他示例可以使用
user-scalable=true）：Here are two things you can do to improve support for iPhones without doing much work:
Make page scroll up to hide URL bar:
And set scaling for the page width (best to do some testing and play with this, also look for other examples that may use
user-scalable=true):较新的手机配备了 WAP2，它使用 HTML Mobile Profile (XHTML MP)，与普通 HTML 非常相似。 较旧的手机使用无线标记语言 (WML)。
根据您的受众，我会考虑使用 XHTML MP 制作一个适合手机使用的网站版本，并完全放弃 WML。 我所说的手机友好是指简单的图形、少量的 JavaScript 和简单的导航。
要检查不同手机的功能，请查看WURFL。
另外，您可能还想看看 移动网络最佳实践。
Newer phones come with WAP2 which uses HTML Mobile Profile (XHTML MP), which is quite similar to normal HTML. Older phones use Wireless Markup Language (WML).
Depending on your audience I would consider making a mobile phone friendly version of the site using XHTML MP and drop WML completely. By mobile phone friendly I mean light graphics, little JavaScript and simple navigation.
To check capabilities of different hand phones, take look at WURFL.
Also, you might want to take a look at Mobile Web Best Practices from w3c.
代码：
当我使用 w3 验证器时，导致它返回 11 个错误。
这是尝试过的索引页面：
你不会有的多行，没用过。 它们是模板线。
The code:
Causes the w3 validator to return 11 erorrs when I use it.
Here's the index page it was tried in:
You'll not some multiple lines, not used. They're template lines.