使现有网站移动友好

时间:2009-05-24 18:58:44

标签: web mobile

所以我打算让一个现有的网站移动友好。好的部分是它完全是基于文本的,有一些图像可能会从网站的移动版本中省略。

不好的一点是,它是一个非常复杂的网站,有大量的页面(每个页面可能因数据和访问网站的用户而异)很多也是遗留代码(如旧的HTML)哪个不验证)

所以我想知道制作移动友好网站的最佳策略是什么?创建并行版本是不可能的,因为这将是一个巨大的任务

单独的CSS显而易见。但是,为移动设备设计的最佳实践/指南如何确保网站可用并且看起来不错?

作为参考,后端在PHP + MySql中,前端在htmls + CSS和JS中的位(JS可降级)

编辑:为了更清楚,我想在设计方面提出建议。移动设备设计的良好实践是什么?

5 个答案:

答案 0 :(得分:5)

设计移动设备的一些快速提示:

  • 仅垂直滚动,不是水平滚动。
  • 使链接足够大,可以用手指轻轻按压(如果是触摸屏设备)。
  • 保持页面小(最好不超过20KB) - 包括任何图像或CSS文件
  • 接受某些设备会以不同方式呈现某些元素
  • 确保您的XHTML有效
  • 选择即使在明亮的日光下也能正常工作的配色方案
  • 仅包含相关内容 - 充分利用有限的屏幕空间
  • 尝试避免复杂导航
  • 不要在CSS中使用绝对大小调整
  • 使用最少的CSS和Javascript - 在使用
  • 时彻底测试
  • 利用手机中的功能(点击通话等)
  • 动员,不要只是最小化
  • 尽可能避免用户输入(从下拉列表中选择输入文本 - 如果可能)
  • 测试,测试,测试! (首先是模拟器,然后借用你的朋友和同事的电话来进行各种测试)
  • 为短期用户互动而设计 - 让人们可以快速轻松地完成任务。
  • 保持一致 - 遵循设计指南和事实标准
  • 使用链接的访问键

希望这些帮助。

答案 1 :(得分:4)

iPhone特定答案:

对于iPhone,我选择不优化。 Safari for iPhone非常有能力显示网页。有关iPhone优化的详情,请查看this answerthe question

一般回答:

我同意先生欧元的技术优化。设计明智,你必须考虑一个小分辨率(如320x240)。我会把这个问题留下来,或任何花哨的javascripting。 大多数移动设备都不擅长处理脚本,而且往往会变得迟钝

答案 2 :(得分:1)

如果您设法将网站转换为W3验证的XHTML 1.1,那么它将在手机浏览器中正确呈现。

答案 3 :(得分:1)

您可以尝试设置另一台服务器,该服务器将请求从移动浏览器代理到真实服务器,并将它们提供给tidy等程序,该程序可以从非常难看的HTML构建有效的(X)HTML。这可以让您使用现有服务,绝对没有变化,只需要一些处理成本。

您可以在此处找到small ruby example(使用本地代理)。

答案 4 :(得分:0)

我认为你必须在这里更具体。常规手机的移动浏览器非常原始。如果你瞄准他们,你必须确保没有“硬”。页面基本上应该只是带有全宽图像的短文本。

如果你定位iPhone /无论什么触摸,你只需要杀死flash / java,hovers和其他你可能根本没有的不可触摸的东西。移动Safari真的像他的大哥,你真的不需要任何具体的东西。

对于黑莓和其他东西,我不确定,但请查看wsj mobile site作为示例。