将现有网站改为适用于移动设备

Question

将现有网站改为适用于移动设备

webmobile

4

我计划将现有网站变得适合移动设备。好的一面是，它完全基于文本，只有少量图片可能可以从移动版本中省略。

不好的一面是，这是一个非常复杂的网站，有大量页面（每个页面都可能因数据和用户访问而异），而且很多代码也是遗留代码（即旧的 HTML 代码不符合规范）。

因此，我想知道制作移动友好网站的最佳策略是什么？创建平行版本是不可能的，因为那将是一个巨大的任务。

显然需要单独的 CSS。但是，关于如何为移动设备设计以确保网站可用且外观良好的最佳实践/指南是什么？

供参考，后端使用 PHP + MySql，前端使用 HTML + CSS 和一些 JS（JS 具有退化性）。

编辑：更明确地说，我希望获得有关设计方面的建议。在为移动设备设计时有哪些好的实践方法？

- AJ.

5个回答

4

iPhone特定答案：

对于iPhone，我选择不进行优化。iPhone的Safari非常能够显示网页。有关iPhone优化，请参阅此答案和问题。

通用答案：

对于技术优化，我同意mr-euro的观点。设计上，您需要考虑小分辨率（如320x240）。我会避免使用下拉框或任何花哨的JavaScript效果。大多数移动设备无法很好地处理脚本，往往会变得缓慢。

- Kriem

1

设计方面怎么样？我非常关注移动设备设计的良好实践。更大的字体，更大的导航区域，不使用绝对定位。下拉菜单代替选项卡式导航等。 - AJ.

1

我的回答针对 iPhone 的特定考虑因素。您的问题可能适用于 iPhone，也可能不适用于 iPhone（仅限 iPhone）。我明确提到这是针对 iPhone 的具体答案。因此，我觉得它被投票否决很奇怪。受到您的评论影响，我进行了一些补充，并进入了更一般的问题。 - Kriem

+1 我没有看到任何值得被踩的东西在这里... - Paolo Bergantino

1

我也没有。只是想澄清一下，我没有给它点踩。 - AJ.

1

如果您成功将网站转换为W3验证的XHTML 1.1，则它将在移动电话浏览器中正确呈现。

- mr-euro

1

“渲染正确”和“渲染可读/可用”在移动电话浏览器的混乱中是两个非常不同的概念。这并不是对您的回答mr-euro的轻蔑，而是对移动电话浏览器和用户界面状况的抱怨。即使网站正确地呈现，如果它具有鼠标悬停、ajax、弹出窗口或其他动态元素，则很难访问。即使如此，手机通常会扭曲页面以使其适合人眼阅读，或者将其渲染得太小而无用。这是一个艰难的问题，也许需要三年时间才能找到好的解决方案。” - Jarret Hardie

确实，但每个移动浏览器的状态都超出了问题的范围。小图片，适当的语义（标题，副标题，段落等），避免使用JS，避免使用Flash，100％验证的代码，流体布局，最重要的是：没有固定宽度...！ - mr-euro

1

你可以尝试设置另一个服务器，将移动浏览器的请求代理到真实服务器并将它们提供给程序，例如tidy，该程序可以从相当丑陋的HTML构建有效的（X）HTML。这可能会让您在一些处理成本下使用现有服务，而不需要进行任何更改。

您可以在此处找到一个小型Ruby示例（使用本地代理）。

- Samuel Tardieu

我不会信任这样的应用程序。如果源HTML处于糟糕状态，它如何正确解析页面？ - mr-euro

它将会像一个WWW浏览器一样尝试去解释它。至少，在这里，所有的移动浏览器都会以相同的方式进行解释，因为代理已经完成了这项工作。 - Samuel Tardieu

0

我觉得你在这里需要更具体一些。普通手机的移动浏览器非常原始。如果你针对它们，你必须确保没有任何“难”的东西。页面基本上应该只是一些短文和全宽图片。

如果你针对iPhone/其他触摸设备，你只需要禁用flash/java、悬停和其他不可触摸的元素，这些元素可能你根本就没有。Mobile Safari真的像他的大哥一样，你不需要任何特殊的东西。

至于BlackBerry等设备，我不太确定，但可以参考wsj手机网站作为一个例子。

- ilya n.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Lacey · Accepted Answer

设计移动端页面的几个快速技巧：

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

希望这些技巧能够帮到你。