2008-08-13 53 views
6

我们正在为我们的客户之一构建移动站点的初始规划阶段。这个移动网站将成为我们为他们建造的主要网站的补充。我们已确定内容将成为主要网站的一小部分,并将针对预计使用该网站的主要受众群体。为您的主站点规划并构建移动启用站点

虽然期待通过一些示例移动网站,我们注意到很多网站的有WAP的URL实际上只是简单的HTML文件。 http://wap.mlb.com不是真的WAP启用,但简单的HTML。

我的问题是WAP想过去的?随着智能手机和iPhone能够呈现网站的能力,我们是否需要担心WML和WAP,还是将精简的HTML版本足够了?

你也可以推荐一个博客或教程或答案如何最好地检查移动设备?作为程序员,我们是否需要知道用户代理的每个变体,以便将它们重定向到我们的移动网站?

最后,你会为iPhone/Touch Safari浏览器编程一个移动网站,还是只是离开网站?

回答

4

较新的手机都与使用HTML美孚WAP2 e Profile(XHTML MP),它与普通的HTML非常相似。旧手机使用无线标记语言(WML)。

根据你的观众,我会考虑使用XHTML MP制作一个手机友好版本的网站,并完全删除WML。通过手机友好我的意思是轻型图形,小JavaScript和简单的导航。

要查看不同手机的功能,请看WURFL

此外,你可能想看看w3c的Mobile Web Best Practices

0

我觉得跟2.5G手机和新的3G手机的主要区别是,虽然2.5G手机使用自己的浏览器,浏览器上的3G手机已经成为他们的渲染能力更类似于/准确。另一方面,您可以使用CSS以大屏幕格式或小型移动优化渲染相同的HTML,所以我想发生的事情是“简单HTML”方法看起来像是最难的道路。此外,无表格布局允许网站更好地扩展,从而更容易以大屏幕和小屏幕格式呈现网站。

所以最终的问题将是目标市场的问题。您是否瞄准了具有完全支持3G功能的手机的技术人员?你瞄准的人最多可能有2.5G吗?

0

我的经验是,这取决于你想要做什么以及用户是谁/在哪里。

尽管WAP有很多负面报道,它的实力,你有低带宽高延迟连接。 WML内容通过运营商的网关得到优化,大大减少了无线数据传输量。如果您拥有iPhone等产品,那么在3G覆盖范围广的地区,您可以购买更丰富的内容,但如果您希望应用程序在更多方面表现良好,则WAP具有很大的优势。

有一点要注意与WAP的是,手机在WAP支持的质量变化很大(估计你也得说智能手机的网页浏览器相同)。他们中的大多数都显示页面正常,但表单处理在某些浏览器中确实很糟糕。

如果你根据用户代理改变内容,你也应该提供一个明确的方式来访问特定类型的内容(例如,单独的URI) - 自动选择并不总是正确的,你希望客户能够重写它。

如果您使用WAP开发,请查看WinWAP - 一个基于Windows的WAP浏览器。

1

我会强烈建议你看看Cameron Molls'Mobile Web Design。它不是建立移动优化网站的技术指导,而是让您思考各种可用选项,并总结每种优点和缺点。肯定会让你思考你正在采取什么方法,以及它是否是正确的。我认为它也有一些帮助检测移动设备请求到您的网站的资源的指针,那里有各种选项。

0

如果你想花很少的钱,你可以在亚马逊上找到我的书"Palm OS Web Application Developer's Guide"的旧版副本,价格低于1美元。尽管关于旧式Palm VII设备的具体提示不再适用,但有几个部分介绍如何制作可能仍适用的移动网站。我的基本建议是:首先用相关信息制作小页面,然后导航链接;将通用/样板内容推送到其他页面;尝试优化以减少用户在单个页面上花费的时间;并避免为页面下载大量对象(图像,JavaScript文件)以减少延迟。

3

这里有两件事情可以做,以提高iPhone的支持,没有做太多的工作:

制作页面向上滚动隐藏地址栏:

<script type="application/x-javascript"> 

    if (navigator.userAgent.indexOf('iPhone') != -1) { 
    addEventListener("load", function() { 
     setTimeout(hideURLbar, 0); 
    }, false); 
    } 

    function hideURLbar() { 
    window.scrollTo(0, 1); 
    } 

</script> 

并设置缩放的页面宽度(最好做一些测试,玩这个,还寻找那些可能使用user-scalable=true其他例子):

<meta name="viewport" content="width=320; user-scalable=false" /> 
0

该代码: 当我使用它时,导致w3验证器返回11个erorrs。 下面是它尝试使用的索引页面: 你不会使用多行,不使用。他们是模板行。

<!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”> 
1

截至目前(2014)

我们可能并不需要为移动设备单独的网站,而不是我们可以去前端libaries像Twitter的引导它采用响应渲染 使网站适应本身与屏幕尺寸,无论是平板移动设备桌面

其中一个主要优势是需要减少维护相比,有独立的移动和桌面网站。

为了更多地了解Twitter的引导点击here