以下是 Ben Terrill 的客座文章。Ben 在 Mobify 工作，并领导着一个团队，帮助其大型客户（如星巴克和 Threadless）获得出色的移动和平板电脑体验。Ben 是电子书 《取悦客户的 50 种方法》 的合著者：移动网页设计最佳实践指南。
Mobify 的 Julie Szabo 联系我，希望我帮忙宣传一下这本书。你们都知道我很少做这种事——所以要明确一点：这不是一篇赞助文章，没有金钱交易，而且这本书很好，而且免费。
我建议他们写一些东西作为客座文章，他们欣然同意从书中摘录了一些“最佳”内容。我在这里和那里添加了一些内容，分享一些额外的信息。希望您喜欢！
在 Mobify，我们最近分析了来自超过 2 亿访问我们电子商务客户网站的访客的数据，发现 27% 的网站访问来自在智能手机和平板电脑上购物的人。对于一些国家，例如巴西，我们发现近一半的电子商务流量来自移动设备。
现在，每个网络公司和发布商都需要制定移动网络策略，已经成为现实。我们 编写了一本电子书，介绍如何构建一个优秀的移动网站，以下是书中关于优化网站以满足所有移动网站访客需求的九个技巧。
提示和揭示（又名：渐进式公开）
移动设备很小，大多数网站都提供了大量信息。使用 渐进式公开 来向用户显示他们可以采取哪些操作来发现他们想要的内容。不要一次性向他们提供大量信息。相反，让他们根据需要展开或揭示内容。
手风琴可以演奏美妙的音乐
手风琴可以证明是一种有效的策略，用于显示内容而不会将页面无限延伸。在正确的上下文中使用它们。维护该上下文。确保您提供一致的展开和折叠提示。
示例 来自 Brad Frost 在 CodePen 上的模式库。
旋转木马让用户开心
旋转木马可能是图像展示、英雄图像 和相关内容的完美解决方案。请务必向用户显示旋转木马中包含多少项以及他们在这些项中的当前位置。如果您正在自动推进滑块，请确保在用户开始交互时停止自动推进。
尊重用户的粗手指和轻拍
我们都没有像我们希望的那样在我们的移动设备上灵活。我们都可能有一些“粗手指”症状。因此，请相应地设计您的操作。使触摸目标变大。我们建议 40px x 40px。也为目标提供大量边距。我们建议目标周围至少有 10px 的边距。主要操作应始终很大且可点击。
编者注：Apple 建议使用 44x44。 更多信息。
使用基于字体的图标节省时间
我们 ♥ 图标！它们为您的设计增添了趣味。为了避免管理包含视网膜资产和较小图标的精灵图，请选择基于字体的图标集，例如：Font Awesome；glyphish；iconsweets；或 symbolset。或者，创建您自己的图标。 方法如下。
编者注：本网站上的资源包括一篇关于 使用图标字体时应使用的正确 HTML 的文章、不同图标字体的汇总 以及 关于创建您自己的图标字体的屏幕录制。
运用一些资产管理技巧
生成视网膜图标，并使用 CSS background-size 属性将其缩小以用于非视网膜设备。它们仍然看起来很棒，并且不会占用比较小版本多出太多空间。
编者注：视网膜媒体查询 非常简单。这样您就可以仅向能够使用它们的屏幕提供视网膜图像。非视网膜屏幕 = 1x 图像以全尺寸显示，视网膜屏幕 = 2x 图像以一半尺寸显示。
了解可用视口大小，然后保持其流畅
当然，iPhone 4 的屏幕尺寸可能是 320px x 480px（或在 Apple 的营销中为 960px x 640px 的像素密度），但浏览器 chrome 的实际屏幕尺寸是多少？这实际上是您的用户将体验到的。（答案：320px x 414px。）了解您的可用屏幕尺寸，并使您的设计保持流畅，以便在纵向和横向两种方向上都能充分利用它。利用它，让您的用户满意。
将默认字体大小至少设置为 14 px
即使这看起来很大，但这也是正确的做法。唯一需要更小字体大小（并且仅降至最低 12 px）的情况是表单中非常精确的标签。
拥抱设备 API 的广阔世界
在将桌面网站转换为移动网站时，我们有时会忘记智能手机和其他移动设备可以访问用户位置、拨打电话、拍照等等。不要将您的创造力局限于桌面网站上的内容。
感谢 Chris 给出的分辨率提示:)。就在几周前，我还在为手机开发界面。当我开始寻找最佳分辨率时，这对我来说是一场灾难。现在我对选择更有信心了。旋转木马的想法也很酷。我甚至在考虑重新实现我的逐页向导解决方案。我认为旋转木马中的箭头将有助于让用户了解他们实际上可以前后滚动它，而不是点击底部的按钮
非常感谢您发布关于字体大小的权威决定。希望我的客户最终会屈服。
嗯。好吧，我认为 Mobify 真的很棒，我提交后就会去下载那本电子书。但是，嗯——
人们真的喜欢英雄单元和轮播图吗？
我想这都取决于你的受众，但在我的大学里，大多数是20到30岁的精通网络的21世纪的学生/教职工，你知道我们当地用户体验调查中轮播图的趋势是什么吗？没有人阅读它们。当然，它们在循环播放。我们的营销人员喜欢轮播图。学生在五分钟后还能回忆起首页之前的幻灯片吗？他们做不到。
这对我来说是有道理的。这就是我浏览网页的方式。我无法告诉你上次真正关注轮播图是什么时候了。如果说有什么原因的话，那就是就像我习惯了自动关闭弹出窗口和略过网络广告一样，我已经习惯了仅仅以肤浅的方式对待轮播图中的内容。
嗨，迈克尔，
我在Mobify担任设计师，并帮助撰写了这本电子书。非常感谢你抽出时间阅读它！
移动设备上的轮播图/滑块与桌面上的用途截然不同。在桌面上，它们通常如你所建议的那样用于营销材料或尝试在屏幕上容纳更多操作。而且我认为你是对的，它们最终可能会稀释用户操作并使体验变得不清楚。
它们在移动设备上真正闪光的地方在于披露额外的上下文内容，而不是提供营销信息。想想苹果应用商店以及它们如何使用轮播图引导你在类别中浏览相关应用程序。对于移动设备，滑块及其类似功能可以而且应该经常使用（当然是在正确的位置），以消除垂直滚动，因为垂直滚动会很快让用户脱离上下文。
例如，我们在Mobify处理许多电子商务网站。我们的研究表明，用户喜欢大型产品图片，但也喜欢折叠以上方的“添加到购物车”按钮。我们可以通过在页面顶部实现一个漂亮的滑块来解决此问题，以便用户可以在产品图片之间循环浏览——这非常适合展示产品，并使用户能够快速访问更多上下文信息。
希望这能帮助你解答你的问题。如果你还有其他问题，请随时给我发送电子邮件或发推文继续讨论。@kpeatt 或[firstname]@mobify.com。
凯尔，
你知道，即使这篇文章是关于移动设计的，但你完全正确——我是在考虑桌面环境中的轮播图。当我想到轮播图在导航方面的用途时，你甚至更正确了。在屏幕上左右平移（感觉像浏览）和向下滚动（感觉更深）之间存在心理差异。
这是一个很好的思考方式。滑动交互是你在请求更多相同的内容，滚动是你在请求更多其他内容。
看来轮播图有其用途，但它似乎并不是那种应该仅仅为了使用而使用的东西（这在今天看来很常见）。设计是围绕内容构建的，因此，如果在开发/设计网站时考虑到这一点，那么轮播图似乎可以成为用户收集信息的中心环节。
这种发展在Windows 8和触摸屏显示器上似乎很有趣。当然，触摸屏显示器现在可能很少见，但随着它们变得越来越流行——轮播图可能会像导航菜单一样变得必要（或常见）。在移动设备上，轮播图似乎不太必要或不友好——但桌面上的潜力在未来可能是巨大的。
页脚文本（如版权和法律声明）也可以使用较小的字体大小。需要阅读的用户可以放大，因此没有理由让它比必须的更占用设计空间。
嗨，zzzzBov，
你提出了一个合理的观点。我认为你是对的，你可以将版权声明的字体大小减小。在这种情况下，12像素可能比较合适。
也就是说，我个人喜欢尽可能地消除缩放的需要。我的感觉是，如果我正确地完成了我的工作，用户就不应该需要捏合缩放，因为我已经适当地呈现了我的内容。你可能不会对桌面网站发表同样的评论——部分原因是在电脑上缩放不太自然，但也因为没有必要。在这种情况下，我们可能是在谈论页面的最底部。那些不查找该信息的用户不会滚动到那么远，也不会介意页面底部多出一点空间。正在查找该内容的用户会感谢你抽出时间让他们更容易找到和阅读。如果内容足够重要，可以包含在你的网站上，那么它就足够重要，需要使其可读。
如果你还有其他问题，请随时给我发送电子邮件或发推文继续讨论。@kpeatt 或[firstname]@mobify.com。
凯尔，
我同意消除缩放的需要。事实是，绝大多数用户不会关心阅读页脚中的版权声明，这就是为什么可以安全地将文本缩小到如此小的原因。
实际上，我会。
并非总是如此，页脚中的内容通常出于法律原因很重要，并且可能会降低整体设计。即使是用户体验Stackexchange网站也使用小于
12px的字体大小来显示其版权内容。话虽如此，版权文本没有理由不能使用更大、更易读的字体。我主要是在挑剔使用绝对陈述（“唯一”的时间，强调我的意思），并提供一个规则不适用的示例。
绝对正确。与所有最佳实践一样，这些都不应被视为绝对真理。在许多情况下，这些建议中的任何一条都站不住脚。我会考虑在下一版中删除“唯一”一词。
很棒的文章……提供了清晰且实用的技巧，可以立即实施。
很棒的文章，提供了很棒的技巧。我希望CSS-tricks上能更频繁地出现此类客座文章。
这是一个非常好的列表，我将查看这本书。
好的文章，克里斯，你为我提供了更多关于字体大小的信息 :)
很棒的技巧，感谢发布免费资源。这本书是否有可能以其他移动友好格式发布？我个人认为PDF的移动体验很差。
感谢这些信息。这9个技巧确实很有用，而且这本书似乎即将被下载。继续努力！
这里有一些很棒的技巧。我最近一直在尝试使用JQuery Mobile，它为移动网站提供了更原生化的体验。它很棒而且非常快，但我认为响应式设计是未来的发展方向——现在正在进行一些非常棒的尝试（尤其是在最近推出的Mashable和The Next Web重新设计方面）。感谢你的技巧，我将查看那本电子书：D
很棒的技巧和评论，特别是关于在移动电子商务网站上使用轮播图的技巧。
轮播图为移动设备增加了不必要的开销。并非每个人都拥有大型数据管道。额外的60-250k对用户体验来说可能是真正的麻烦。
我最初想使用滑块（实际上是RoyalSlider）来实现一系列视频，以便用户可以滑动浏览播放列表并播放他们喜欢的视频。
在纸面上，我很喜欢它。但实际上，它增加了加载时间，增加了任务时间，坦率地说，它（以及我尝试的其他几个流行的滑块和视频播放器）无法胜任这项任务——尤其是在移动设备上。各种难以预料的行为需要使用一些权宜之计。
最后，我使用了一个视频和简单的链接将视频加载到同一个div中。轻量级、免费、快速，并且运行良好。对于那些禁用JS的用户，可以使用href作为后备方案，我得到了一个外观良好并在大量桌面和移动浏览器上都能正常工作的解决方案。
通常情况下，简单就是最好。
这篇文章真的很好。发布两年后仍然适用。