平板电脑友好的设计最佳实践

以下文章由 Ben Terrill 撰写。 Ben 是电子书 平板电脑网页设计最佳实践 的合著者，也是 Mobify 的客户成功副总裁，他在那里为英国电信、星巴克和 Expedia 等大型客户网站工作。

平板电脑革命已经到来。 Adobe 的最新数据显示，全球网站的流量现在来自平板电脑的比智能手机多。 但是，标准的桌面网站在平板电脑上并不适用。 典型的桌面 12 像素字体太小，按钮也是如此。 图像不清晰，最糟糕的是，某些功能根本无法使用。

好消息是，您不必完全改造您的网站。 一个可用的桌面网站是构建一个有效的平板电脑网站的良好起点。 在本文中，我将分享来自 Mobify 最新电子书 平板电脑网页设计最佳实践 的六种技巧，这些技巧可以显著改善平板电脑上的桌面网站。

让网站完全支持触控

让您的桌面网站在平板电脑上脱颖而出的最佳方法之一是使其支持触控。 如果网站元素看起来可以滑动、点击或捏合，那么您需要构建该功能才能使您的网站支持平板电脑。

考虑添加轮播、手风琴、抽屉和面板等元素。 Mobify 提供各种各样的 开源 JavaScript 模块，您可以用于此目的。

编辑注： 我们最近介绍了 支持触控的滑块 的 JavaScript。 我还认为 Royal Slider 是一个不错的滑块，它支持触控并且也是响应式的。

增加默认字体大小和行高

不要让用户双击或捏合您的内容。 相反，将字体大小增加到至少 16px。 您还可以使用 1.5 的行高，以便在内容丰富的页面上为文本提供呼吸空间，就像下面示例中的 Mashable 所做的那样。 请记住，无论用户如何握持平板电脑，文本都必须始终易于阅读。

让触控方便

我们的手指比光标笨拙得多，因此增加不同触控目标之间的间距将提高用户准确性。 而且，让触控目标更大！ 我们的指尖通常需要 至少 44px 才能舒适地容纳在触控目标内，因此要为此而设计。

启用上下文键盘

软件键盘最棒的地方在于它们的动态性。 也就是说，您可以更改它们的布局以适应上下文。 例如，如果您的输入字段需要电子邮件地址，则键盘应包含“@”符号、下划线和连字符。 如果用户被要求输入电话号码，则提供数字键盘。 尝试在表单字段上使用以下输入类型

• 标准键盘 | <input type="text" />
• URL 参数 | <input type="url" />
• 特定于电子邮件的键盘 | <input type="email" />
• 数字键盘 | <input type="text" pattern="[0-9]*" />

编辑注： 我还详细介绍了有关 HTML5 输入属性/类型/元素 的数据。 它有点过时了，但仍然有用。

基于字体的图标大获全胜

平板电脑屏幕的分辨率和像素密度远大于台式机和笔记本电脑屏幕。 因此，如果图形不是针对高分辨率屏幕设计的，则它们可能看起来像素化。 因此，基于字体的图标是一个不错的选择，因为它们在超高分辨率显示屏上缩放良好； 它们使用 CSS 轻松着色和阴影； 并且它们只需要一个 HTTP 请求即可下载。 另外，您不必处理精灵表。

创建您自己的图标字体集，或使用现有字体集，例如 Font Awesome、glyphish、iconsweets、symbolset 或 icnfnt。

编辑注： 我曾经 总结了一大堆 图标字体（我还没有添加）。 我喜欢使用 这些 HTML 技术 将它们添加到页面中，这样可以确保它们的无障碍性。 我还喜欢使用 IcoMoon 来创建裁剪后的自定义图标字体集。

性能就是设计

现代网页设计技术（如响应式设计）会降低网站性能。 由于 57% 的用户在网站加载 3 秒后可能会离开您的网站，因此性能因素至关重要。 提高移动网站性能的一些技巧包括压缩图像以及合并 CSS 和 JavaScript 以减少 HTTP 请求次数和总体页面大小。 通过这些修复，您会注意到页面加载时间明显加快，以及更快乐、转化率更高的用户。 使用 Uglify、Sass、Compass 和 Mobify.js 等工具来自动化性能改进。

编辑注： 我在 #114：让我们做一些简单的事情来加快我们的网站速度 中介绍了其中一些性能技术和其他一些技术。

开始行动！

有了这些平板电脑转换技术，您就不必再为没有完全针对平板电脑优化的网站而感到压力。 想要了解更多关于如何使您的桌面网站支持平板电脑的方法，请阅读 Mobify 的免费电子书，平板电脑网页设计最佳实践。