移动友好的网页设计不仅仅是将桌面版本压缩到小屏幕上。使网站响应式只能部分满足移动用户的需求。一些基本的设计功能必须融入一个真正适合移动设备的网站。以下是为移动设备设计响应式网站时需要考虑的关键点。

使用大而清晰的字体

字体大小必须足够大，以便人们在台式机和移动设备上都能轻松阅读。14 像素的字体大小通常最适合桌面用户。但是，即使是 14 像素的字体也可能难以在小型移动设备屏幕上阅读。因此，您可能需要将移动设备的字体大小增加到 16 像素或更多。

字体必须是品牌的。但是，最好选择在小屏幕上干净易读的响应式字体。实验字体可能在桌面的大屏幕上可读。但是，当缩小尺寸以适应移动设备屏幕时，某些字体实际上变得不可读。因此，最好在各种设备上测试字体，以确保无论屏幕大小如何，一切看起来都正确。并且不要忘记检查字体在粗体或斜体时的外观。

不要假设移动用户会使用横向

您可能认为用户会水平握住手机来查看网站。然而，调查发现这不是真的。事实上，据估计，多达 90% 的人垂直拿着手机。即使该站点被证明难以使用，他们也不会切换到以横向模式查看站点。因此，最好在横向和纵向模式下测试易用性。

尽量减少所需的打字量

对于某些人来说，在手机上打字并不容易。因此，避免要求输入太多信息。请记住，有些人手指粗，手机小！您可以使用下拉菜单减少打字的需要。最好避免向用户询问不必要或冗长的信息。

避免大标题和长标题

如上所述，较大的字体在移动设备上更清晰。但是，您可以做得太大，尤其是头条新闻。如果标题的字体太大，您可能会发现移动屏幕的宽度只能容纳一两个字。如果是这种情况，标题可能会占据屏幕的大部分。过长的标题也会造成同样的问题。

空间链接

在移动设备上打字并不是唯一具有挑战性的事情。试图点击放置得太近的可点击元素也可能令人沮丧。因此，尽量避免将超链接和按钮放在一起。

使文本从背景中脱颖而出

当移动设备的字体按比例缩小时，它们的阅读难度更大。因此，当在移动设备上查看网站时，文本和背景之间的对比更为重要。例如，白色背景上的灰色字体可能在较大的桌面屏幕上可读。但是，当针对较小的移动屏幕按比例缩小时，对比度可能不足以使文本清晰易读。

空白仍然至关重要

移动设备显示文本的空间有限。即便如此，最好不要用完整的文本块填满整个屏幕。实际上，应该使用空格来分隔文本，就像在网站的桌面版本上一样。但是，移动设备上的空间会按比例缩小。空白也有助于解决在移动设备上选择可点击对象的一些困难。

剥离内容

在移动设备上的小空间内获取关键信息至关重要。因此，通常最好剥离内容并在折叠上方获取重要信息。如果用户可以看到折叠下方还有更多内容可供阅读，这也很有帮助。例如，在屏幕底部显示部分标题会鼓励人们向下滚动。

考虑按钮大小和位置

用鼠标很容易点击的按钮可能很难用手指按下。因此，在设计适合移动设备的网站时，请同时考虑按钮的位置和大小。

当人们使用移动设备时，他们倾向于用拇指点击按钮。因此，将按钮放置在不需要人们改变手部位置即可按下的位置。按钮通常也需要在移动屏幕上更加突出。如果可点击控件太小或太靠近，则选择正确的选项可能会很棘手。

消除弹出窗口

弹出窗口在桌面网站上非常有效。使用鼠标关闭弹出窗口相对简单。但是，在移动设备上，弹出窗口可能会占据整个屏幕。找到关闭选项可能具有挑战性。因此，最好消除网站移动版本上的弹出窗口。

确保图像和 CSS 被压缩

人们通常在旅途中使用移动设备。因此，页面加载速度比在桌面上更重要。您可以采取的任何措施来减少页面加载时间，都将改善移动设备上的用户体验。降低页面加载速度的方法之一是压缩 CSS（层叠样式表）代码和高分辨率图像。压缩图像和 CSS 使它们加载速度更快，但不会对功能或质量产生负面影响。

结论

移动友好不再是一个很好的选择；它必须从一开始就集成到网站的设计中。这意味着要做的不仅仅是缩放网站以适应较小的屏幕。这也意味着要考虑内容的布局、链接和按钮的位置以及排版。