以下为译文：
最近，谷歌员工暗示，不能供应友好用户体验的网站将受到来自谷歌搜索通信量的惩罚，谷歌在最近几年已经先容了多个算法的变革，侵害了许多网站的流量。
不过谷歌的惩罚不应该是你努力使网站友好的紧张动机，你的紧张动机该当是为你的用户供应他们想要的东西，为他们供应最好的用户体验。以是确保你的网站友好的工具是移动用户，而不是谷歌。
选择一个移动方案，着眼于更好的知足网站用户的需求
这里紧张有四个方法可以为用户供应更好的移动用户体验：
1. 创建一个单独的手机网站
如果你想供应一个不同于桌面网站用户体验的移动用户体验，创建一个单独的网站，让移动用户只有一个选择。
这个办理方案可能在某些情形下故意义，但是由于其过程类似于建立一个全新的网站，因此许多Web开拓者都避免这种方法。
由于谷歌认为这样的移动用户网站是不同于桌面网站的另一个网站，以是你该当在桌面网站设置一个rel=alternate链接tag，类似于：
<link rel=\公众alternate\"大众 media=\"大众only screen and (max-width: 640px)\公众 href=\"大众http://m.example.com/page-1\"大众 >
而在移动网站页面应包含rel=canonical链接tags，类似于：
<link rel=\"大众canonical\公众 href=\"大众http://www.example.com/page-1\"大众 >
2. 动态做事
移动和桌面网站不同URL的存在可能会给用户造成一些稠浊。另一方面，仅从屏幕宽度来判断用户设备是否是移动设备并不是一个可靠的方法。
因此你或容许以考虑动态做事，它可以用相同的URL做事于移动和桌面网站，只需根据用户设备供应不同的HTML。
这种方法有点繁芜，由于你须要有能力检测用户所利用设备的类型，如User-Agent（浏览器向做事器发送的数据头）。你可以在PHP中实现它（variable $_SERVER['HTTP_USER_AGENT']），然后你须要查询数据库来确定设备尺寸，以此来打算设备是否是一个小屏幕。
当你通过相同的URL为不同的设备供应不同的HTML时，你还须要发送HTTP Vary相应，让谷歌机器人知道你依赖用户设备的网站，其事情是不同的，你可以利用下面的方法实现：
<?php<br> Header('Vary: User-Agent');<br>?>
3. 相应Web页面
相应Web页面是指页面在Web页面尺寸中适应性的调度变革。这意味着，如果Web页面改变其尺寸，利用相同HTML代码的页面布局将在某种程度下适应本身。
在实践中，不仅不同尺寸屏幕上涌现的页面纬度不同，而且这些页面也须要适应设备方向的变革。比如说，当用户旋转设备的时候，如果开启了重力感应，其页面也会随之改变。由于屏幕的宽度和高度发生了改变。
这种方法被称为相应，由于它利用相同的HMTL动态的适应屏幕的变革，以是它非常的灵巧。这种相应常日是利用CSS media查询来实现，这里有个示例：
.c640 { display: block;}@media (max-width: 640px) {.c640 { display: none;}}
4. 移动运用
这种方法可以说是一种互补的办理方案，它包含在可以安装在用户设备上的移动运用中，有利用本地设备的能力。而且有些原生功能，用户无法通过访问你的网站来得到，例如向他们的设备发送一些推送关照等。
十个网站相应的技巧
1. 从网站访问次数最多的页面开始
如果你利用的是类似Wordpress这样的常见内容管理系统，你的事情将大略很多，由于你只须要通过一个相应站点改换主题即可。
如果你有一个基于定制开拓的网站，比如说是PHP类的情形下，你将须要为适应移动用户做一些定制开拓。
如果你有一个拥有上千页面的大网站，还要适应PHP类。你的事情将是巨大的，可能须要数月韶光才能完成。因此你须要为这些影响更多用户的页面制订一个标准。
在PHP类网站的情形下，很随意马虎确定影响更多用户的页面是发布于网站上的包，由于它们得到更多的访问量。除此之外，其他被访问最多的网页类型就不是很明确了。
因此你须要考虑站点谷歌剖析报告，如果你担心谷歌启动算法更新，惩罚非移动友好站点，那么最好看一下网站管理员工具报告，特殊是Search Queries和Top Pages。
你可以利用PHP网站管理员工具API类来提取你所须要的页面报告。
2. 利用浏览器开拓者工具在小屏幕上预览你的页面
一旦你找到了紧张处理的页面，你须要掌控目前可能涌现的问题，防止它们呈现在移动设备的屏幕上。
现在的浏览器（如Chrome）会供应工具，可以上你在不同的屏幕尺寸上预览页面。
3. 使视窗适应屏幕尺寸
在这一点中，你首先要做的事是定义一个可以根据屏幕尺寸调度的视窗。（视窗是指一个页面的可见部分），如果一个页面太大，不适应当前的屏幕分辨率，这时可能须要滚动条。
定义视窗可以通过窗口宽度匹配设备宽度来实现，可以通过HTML标记指定的视窗参数。下面的这个例子里，我们定义窗口宽度匹配设备宽度，初始缩放范围从1开始。这意味着移动浏览器将调度页面宽度缩放比例来适应设备宽度。
<meta name=\公众viewport\"大众 content=\"大众width=device-width, initial-scale=1\公众>
4. 从页眉页脚开始
当你通过窗口宽度匹配设备宽度定义视窗后，你可能会把稳到针对桌面的页面不适应小型移动设备屏幕，会涌现溢出问题。这是你须要构建HTML相应。常日情形下，所有的网站都有带有页面和页脚HTML的页面。你可以从这里开始，由于你改变这些页面和页脚将影响所有的页面。
5. 利用菜单按钮紧缩导航栏
PHP类网站下，可以利用两个水平菜单：一个常见的导航，另一个用于记录用户操作。
横向菜单可以利用可用的水平空间的上风，以是基本上所有的相应页面，其导航菜单都会有两个版本：一个是宽屏幕时，全体菜单选项可以水平显示，另一个则是菜单搜索按键加一个搜索栏。
网站利用media查询来显示单一类型的导航（或另一个），下面代码演示的是HTML和CSS实现该功能的简化版本：
<div class=\公众c1025\公众>Desktop menu here</div><div class=\"大众u1025\"大众>Mobile menu here</div>
@media (max-width: 1024px) {.c1025 { display: none;}}@media (min-width: 1025px) {.u1025 { display: none;}}
用PHP类构建的菜单按钮利用了一个很好的技巧来避免对JavaScript的需求。它利用一个隐蔽的表单复选框来掌握下拉菜单的可见性。
下面是利用HTML和CSS渲染这类菜单的简化版本：
<div id=\"大众navigation-menu\"大众> <input type=\"大众checkbox\公众 id=\公众navigation-button\"大众> <div class=\公众menu-items\"大众> <div><a href=\公众/browse/\"大众> All class groups </a></div> <div><a href=\"大众/browse/latest/latest.html\"大众> Latest entries </a></div> <div><a href=\公众/browse/top/top.html\公众> Top 10 charts </a></div> <div><a href=\公众/blog/\公众> Blog </a></div> <div><a href=\"大众/discuss/\"大众> Forums </a></div> <div><a href=\"大众/faq/\"大众> Help FAQ </a></div> </div> <label for=\"大众navigation-button\公众 id=\公众navigation-label\"大众> <span class=\公众drop-icon\公众>Icon Image here</span> </label></div>
.menu-items { position: absolute; z-index: 1001; background-color: #103754; border-color: #cccccc; border-style: solid; border-width: 1px; padding: 4px; top: 32px; line-height: 36px;}.menu-items a { color: #C3F0FF; font-weight: bold; text-decoration: none;}#navigation-menu { display: inline-block; padding: 6px 10px 0px 10px;}#navigation-menu .menu-items { display: none;}#navigation-button:checked + .menu-items { display: inline-block;}#navigation-menu input[type=\公众checkbox\"大众], #navigation-menu ul span.drop-icon { display: none;}
6. 捐躯不主要页面元素
完成页眉页脚，你还要连续你的步伐，穿梭于网站每个类型页面中，按照页面访问优先级（参照前文）。
利用浏览器开拓工具在小屏幕上预览页面，减少视窗分离器宽度，直到页面元素溢出视窗。
这时你须要找出哪些不主要的页面元素，你可以利用CSS样式通过media查询捐躯和隐蔽它们。
下面演示的是media查询定义逐渐减少点，用于隐蔽不同页面元素：
@media (max-width: 1024px) {.c1025 { display: none;}@media (min-width: 1025px) {.u1025 { display: none;}}@media (max-width: 499px) {.c499 { display: none;}}@media (max-width: 799px) {.c799 { display: none;}}@media (max-width: 640px) {.c640 { display: none;}}@media (max-width: 360px) {.c360 { display: none;}}
7. 利用Google Page Speed Insights来办理悬而未决的问题
谷歌验证一个网站是否移动友好的标准有什么？在视窗上显斧正好的可见内容只是个中的一个标准，还有其他一些不太好评估的，比如打仗点的间隔（如链接和按钮）。
幸运的是，谷歌供应了一个工具来帮助我们创造须要修复的问题，这只是Google Page Speed Insights工具的一部分。
你只须要输入一个你制作的页面URL，它会向你展示一个等级（0%-100%），让你知道你的页面在手机上的可用性等级，它还会显示该页面孔前所存在的问题。
8. 图像适应页面宽度限定
你可能会碰着这样一个问题，须要适应小屏幕的页面存在很多的图片元素。这时你有两种选择，一是如前面提到的，捐躯图片元素；二是自动的调节图片的宽度和高度，该方法适用于有可用的空间。
第二种方法可以通过将图片的宽度设置为100%（或其他百分比）来实现，然后将图片高度设置为自动，以此来担保原始图片的比例。如下段代码所示例的那样：
@media (max-width: 55em) {.blog-post-body p img { width: 100%; height: auto;}}
与图像干系的另一个方面是，如果你的菜单和图标利用的是小图像时，当浏览器缩放视窗来匹配设备宽度，那些小图片看起来会很大，如果那些图片分辨率很低的时候，更是会毁坏全体页面的质量。而办理这种问题的一个方法是利用高分辨率图片，设置较小值的宽度来匹配设备。
9. 安全“添补”链接和按钮四周
谷歌工具可能会报告的另一个范例问题是，你的链接或按钮太靠近对方了，这很随意马虎导致缺点操作。你可以利用CSS样式表“添补”这些链接和按钮的空间，下面是一个大略的示例：
.safe-padding { padding: 2px; line-height: 200%;}
10.利用谷歌网站管理员工具：移动可用性报告
谷歌在Google Webmaster Tools网站上为我们供应了另一种工具：Mobile Usability（移动可用性）。它可以给你一个进程的观点，以及任何你可能或者你认为没有办理的问题。
这个工具显示不同类型的问题：触摸元素太近、小字体尺寸、宽度固定窗口……。它可以给你供应拥有这些问题的页的总数以及URL。不过工具不会实时报告这些，实际报告大概会延迟一个星期，以是它的报告中或许会存在你已修复的问题。只管如此，它也是很有用处的，任何页面的问题都会有一个链接，你对此会一览无余。
总结
对Web开拓者来说，调度网站以适应移动设备是乏味和无聊的任务，远没有前端事情给人带来的愉快。然而这是必须的进行的一项任务。
移动适应事情仍在连续，只有部分页面适应了移动设备，以是在未来我们会看到更多的变革。
无论如何，本文是为了分享一些有用的信息给那些正处于网站适应移动设备过程的人们。如果您已经经历过类似的过程，或者您有其他比较较本文所分享的技巧而言更好的方法。您可以留下您的不雅观点，分享您的履历。
