【编者按】相比较桌面端，用户越来越多的从移动设备端访问网页，这已经不是什么新鲜事。然而开发者还是需要努力去让网站更好的适应现在的移动设备，与此同时，从谷歌最近宣布的消息可以看出，它可能会惩罚那些不能为移动设备用户提供良好用户体验的网站，这也迫使开发者努力做好这方面事宜。本文介绍了一些技巧可以帮助你更好的提供良好的移动用户体验。 以下为译文： 最近，谷歌员工暗示，不能提供友好用户体验的网站将受到来自谷歌搜索通信量的惩罚，谷歌在最近几年已经介绍了多个算法的变化，伤害了许多网站的流量。 不过谷歌的惩罚不应该是你努力使网站友好的主要动机，你的主要动机应该是为你的用户提供他们想要的东西，为他们提供最好的用户体验。所以确保你的网站友好的对象是移动用户，而不是谷歌。 选择一个移动方案，着眼于更好的满足网站用户的需求这里主要有四个方法可以为用户提供更好的移动用户体验： 1. 创建一个单独的手机网站 如果你想提供一个不同于桌面网站用户体验的移动用户体验，创建一个单独的网站，让移动用户只有一个选择。 这个解决方案可能在某些情况下有意义，但是由于其过程类似于建立一个全新的网站，因此许多Web开发者都避免这种方法。 由于谷歌认为这样的移动用户网站是不同于桌面网站的另一个网站，所以你应该在桌面网站设置一个rel=alternate链接tag，类似于： 而在移动网站页面应包含rel=canonical链接tags，类似于： 2. 动态服务 移动和桌面网站不同URL的存在可能会给用户造成一些混淆。另一方面，仅从屏幕宽度来判断用户设备是否是移动设备并不是一个可靠的方法。 因此你或许可以考虑动态服务，它可以用相同的URL服务于移动和桌面网站，只需根据用户设备提供不同的HTML。 这种方法有点复杂，因为你需要有能力检测用户所使用设备的类型，如User-Agent（浏览器向服务器发送的数据头）。你可以在PHP中实现它（variable $_SERVER['HTTP_USER_AGENT']），然后你需要查询数据库来确定设备尺寸，以此来计算设备是否是一个小屏幕。 当你通过相同的URL为不同的设备提供不同的HTML时，你还需要发送HTTP Vary响应，让谷歌机器人知道你依赖用户设备的网站，其工作是不同的，你可以使用下面的方法实现： 3. 响应Web页面 响应Web页面是指页面在Web页面尺寸中适应性的调整变化。这意味着，如果Web页面改变其尺寸，使用相同HTML代码的页面布局将在某种程度下适应本身。 在实践中，不仅不同尺寸屏幕上出现的页面纬度不同，而且这些页面也需要适应设备方向的变化。比如说，当用户旋转设备的时候，如果开启了重力感应，其页面也会随之改变。因为屏幕的宽度和高度发生了改变。 这种方法被称为响应，因为它使用相同的HMTL动态的适应屏幕的变化，所以它非常的灵活。这种响应通常是使用CSS media查询来实现，这里有个示例： 4. 移动应用 这种方法可以说是一种互补的解决方案，它包含在可以安装在用户设备上的移动应用中，有利用本地设备的能力。而且有些原生功能，用户无法通过访问你的网站来获得，例如向他们的设备发送一些推送通知等。 十个网站响应的技巧1. 从网站访问次数最多的页面开始 如果你使用的是类似Wordpress这样的常见内容管理系统，你的工作将简单很多，因为你只需要通过一个响应站点更换主题即可。 如果你有一个基于定制开发的网站，比如说是PHP类的情况下，你将需要为适应移动用户做一些定制开发。 如果你有一个拥有上千页面的大网站，还要适应PHP类。你的工作将是巨大的，可能需要数月时间才能完成。因此你需要为这些影响更多用户的页面制定一个标准。 在PHP类网站的情况下，很容易确定影响更多用户的页面是发布于网站上的包，因为它们获得更多的访问量。除此之外，其他被访问最多的网页类型就不是很明确了。 因此你需要考虑站点谷歌分析报告，如果你担心谷歌启动算法更新，处罚非移动友好站点，那么最好看一下网站管理员工具报告，特别是Search Queries和Top Pages。
你可以使用PHP网站管理员工具API类来提取你所需要的页面报告。 2. 使用浏览器开发者工具在小屏幕上预览你的页面 一旦你找到了首要处理的页面，你需要掌控目前可能出现的问题，防止它们呈现在移动设备的屏幕上。
现在的浏览器（如Chrome）会提供工具，可以上你在不同的屏幕尺寸上预览页面。 3. 使视窗适应屏幕尺寸 在这一点中，你首先要做的事是定义一个可以根据屏幕尺寸调整的视窗。（视窗是指一个页面的可见部分），如果一个页面太大，不适应当前的屏幕分辨率，这时可能需要滚动条。 定义视窗可以通过窗口宽度匹配设备宽度来实现，可以通过HTML标记指定的视窗参数。下面的这个例子里，我们定义窗口宽度匹配设备宽度，初始缩放范围从1开始。这意味着移动浏览器将调整页面宽度缩放比例来适应设备宽度。 4. 从页眉页脚开始 当你通过窗口宽度匹配设备宽度定义视窗后，你可能会注意到针对桌面的页面不适应小型移动设备屏幕，会出现溢出问题。这是你需要构建HTML响应。通常情况下，所有的网站都有带有页面和页脚HTML的页面。你可以从这里开始，因为你改变这些页面和页脚将影响所有的页面。 5. 使用菜单按钮收缩导航栏 PHP类网站下，可以使用两个水平菜单：一个常见的导航，另一个用于记录用户操作。
横向菜单可以利用可用的水平空间的优势，所以基本上所有的响应页面，其导航菜单都会有两个版本：一个是宽屏幕时，整个菜单选项可以水平显示，另一个则是菜单搜索按键加一个搜索栏。 网站使用media查询来显示单一类型的导航（或另一个），下面代码演示的是HTML和CSS实现该功能的简化版本： 用PHP类构建的菜单按钮使用了一个很好的技巧来避免对JavaScript的需求。它使用一个隐藏的表单复选框来控制下拉菜单的可见性。 下面是使用HTML和CSS渲染这类菜单的简化版本： |
