我该如何设计手机网站？

Question

如何开始开发可以从手机浏览的网站？例如,如果您从iPhone浏览Gmail网站,该网站看起来与普通网站不同.你必须设计两个不同的网站来做到这一点？如何知道移动浏览器是否访问该网站？

Answer 1

您无需设计两个不同的站点,但您可能希望让移动用户访问您的站点非常重要.

有几种方法可以解决这个问题,每种方法都有利有弊.我假设您的网站在数据库中有自己的信息,并使用一组模板发布该数据？(就像Ruby on Rails或Django站点; PHP站点;博客等;)如果你手工编写了一堆静态HTML页面,那么对你来说这将是更加劳动密集的方式.

1:相同的HTML,不同的SCREEN和MOBILE样式表

想法:您为所有请求提供相同的HTML结构.您为SCREEN创建样式表,为MOBILE创建一个样式表.

好:对你来说,程序员.维护2个样式表比维护2个完全独立的模板站点更容易.

不好:为您的用户.在移动设备上易于使用的站点通常对普通浏览器来说效率低下; 针对台式机/笔记本电脑优化的网站经常在移动设备上惨遭失败.显然,这取决于您对页面进行编码的方式,但在大多数情况下,将普通网站推送到移动浏览器对您的用户来说将是不利的.(有关Jakob Nielsen最近在移动网站上的可用性研究的摘要,请参阅http://www.useit.com/alertbox/mobile-usability.html.)

2:维护单独的站点

(Gmail维护的系统超过2个!它们基本上有不同的容器应用程序/模板来处理相同的数据:完整的AJAX浏览器版本;纯HTML浏览器版本;基本移动版本;原生黑莓应用程序;以及本机iPhone应用程序.)

这是真正关心移动和桌面存在的网站的新兴标准.这对你来说更有用,但总的来说它对你的用户来说要好得多.

从好的方面来说,你可以创建一个适用于移动设备的简化纯HTML网站,它可以作为没有javascript的稀有网络用户的后备,或者具有阻止他们使用"完整"的主要辅助功能问题"网站.

此外,根据您的用户群:在美国,人们通常可以访问台式机/笔记本电脑,并使用他们的移动设备进行辅助访问.例如,我使用台式电脑预订机票和租车,但我想在手机上查看我的预订代码.在许多情况下,您可以放弃限制在移动站点上提供的功能,并要求完整的计算机执行不常见的用例.

基本程序:

1. 设计和构建移动和屏幕的UI.
2. 以两个不同的URL启动网站; 新兴的会议是桌面版的www.yoursite.com,移动版的m.yoursite.com.(如果用户知道约定,则允许用户直接浏览m.yoursite.com.)
3. 在www.yoursite.com上,嗅探用户代理并测试用户的浏览器是否可移动.如果是这样,请将用户定向到m.yoursite.com.
   1. 有各种服务器语言(PHP,Perl,无论如何)都可以使用的嗅探器.检查许可证.这是一个用php编写的嗅探器的例子.
   2. 来自维基百科的关于用户代理嗅探的文章:"专门针对移动电话的网站,如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live!门户网站,往往很大程度上依赖于用户代理嗅探,因为移动浏览器往往彼此差异很大.移动浏览在过去几年中已经取得了成功,而许多不具备这些新技术的旧手机仍然被大量使用.因此,移动网络门户通常会产生完全不同的标记代码,具体取决于用于浏览它们的手机.可以很小(例如调整某些图像的大小以适应较小的屏幕),或者相当广泛(例如用WML而不是XHTML渲染页面)."
4. 在m.yoursite.com上,提供返回www.yoursite.com的链接.不应将点击此链接的用户重定向回移动网站,如何完成此操作取决于您的实施.

您可能想要关注Quirksmode的新兴文章,了解移动测试.

3:模板根据用户代理输出不同的数据块,并维护单独的样式表

与(2)类似,这需要您嗅探用户代理.与(2)不同,您仍然使用所有相同的页面逻辑,而不必维护两个单独的站点.如果您只是处理主要是阅读数据的博客或网站,这可能没问题.

在您的模板代码中,您可以说出类似的内容

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

这使您可以主要维护一组模板文件.您还可以简化您发送给移动用户的页面,这样当他们只是想阅读您的博客文章或其他内容时,他们就不会获得大页面.

Answer 2

如今,大多数移动设备都支持"移动样式表",这些样式表只是简单的替代样式表.您可以按正常方式向您的网站添加移动样式表,并包含以下media="handheld"属性:

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

那些样式将适用于手机.

这种方法的唯一问题是,如果你的HTML体积庞大,可能需要一段时间才能加载页面,因为大多数移动浏览器都比较慢(Opera Mini除外).这就是为什么像flickr和digg这样的大型网站使用不同的网站.

补充说明:

• 庞大的HTML不会影响Opera Mini,因为它使用代理从外部进行渲染,然后向设备发送特殊的"图像".
• 使用简单,干净的HTML,然后您可以将其发送到普通的浏览器和移动设备
• 您必须检查带有media属性的样式表组合.IIRC添加上面的代码将使浏览器忽略第一个样式表.如果你添加media="all"到第一个,将使用它们(你可以因此覆盖原始样式而不是重新开始).