在网页设计中，建立出色的响应式或自适应网站的诀窍是关注您网站的各个元素，并考虑网站更改可能如何影响它们。

在规划适合行动装置的设计时，尝试专注于包含或优化这些主要组件：

1. 标题内容

标题可以告诉访问者很多关于网站的讯息：

品牌是什么

它提供什么

采取哪些行动

如何搜寻所有内容

桌面布局有足够的空间在其网站标题上显示所有这些讯息。在行动装置上则更少——您的响应式或自适应设计需要考虑到这一点。

问问自己哪些元素应该在您的行动网站导航中可见。例如，一个标志应该在那里培养强大和一致的品牌标识。其他常见项目包括导航菜单，或者如果您正在构建电子商务网站，包括购物车图标。

2. 文字易读性

网站文本可能是一个难以处理的元素：您希望它看起来不错并反映您的品牌风格，但您必须确保您的设计选择不会影响易读性。

在针对不同设备进行设计时，您还必须考虑尺寸和样式可能不会随着萤幕尺寸的上下移动而缩放。不用说，在启动网站之前测试这一点很重要。

3.汉堡图标

导航对于每个网站都起着至关重要的作用，因此考虑用户如何根据他们的设备进行不同的互动非常重要。对于初学者，请考虑使用汉堡菜单。

汉堡菜单是指通常位于网站右上角或左上角的三行图标。在这一点上，大多数人都知道那些堆叠的水平线是做什么的，并且是浏览行动网页设计的值得信赖的选择。

4.导航放置

行动应用程式的日益普及影响了网站所有者构建行动导航的方式。我们比以往任何时候都看到设计超出了我们已经推荐的汉堡菜单。

对于一组较小的顶级导航连结（不超过三个或四个），一些品牌会考虑将它们作为粘性水平菜单添加到萤幕底部，或在网站标题中。另一种流行的导航方法是使用灯箱建立全萤幕弹出菜单。

5. 粘性标题

在自适应设计中，您可以使您的行动页面相对较短。然而，在响应式设计中，除非另有修改，否则所有桌面内容都会流入行动网页。

如果您尽了最大的努力，您的移动网页仍然运行很长时间，请考虑将页首设置为粘性。这样，用户可以随时访问您的导航。

6.视觉层次

网站的视觉层次是指访问者的眼睛在页面上所遵循的路径。杂乱的网站布局使访问者很难知道要关注哪些细节或下一步该去哪里，尤其是在行动网站上。

您可以向网页添加标题和子标题、图像块、空白、导航工具等，以便：

分解大量内容和复杂的主题

为页面上的讯息建立架构

确保您有一个平衡良好的设计

建立不同部分之间的关系

当您绘制每个版本的视觉细节时，您可以在自适应设计中考虑这一点。在响应式设计中，您必须小心，因为随着萤幕缩小，元素可能会调整大小或重新设置样式。

最好的办法是为桌上型电脑、平板电脑和行动装置设置全局样式 - 确保响应式重组过程不会干扰您内容的完整性。

7.页长

关于您网站内容的最后一个问题是它的长度。手头的导航可能会使长页面更容易在行动装置上滚动浏览——但在手机上浏览时，更少的滚动也会有所帮助。

通过自适应设计，您可以删除行动布局上的文本或图像部分。这样，您可以允许在桌面上阅读更多内容，同时保持行动版本的可读性。

8. 图像

网站图像在设计、品牌推广、讲故事和销售方面是非常有用的工具。在响应式和自适应设计中，请注意这些图像对页面性能的影响。虽然图像的重量对于自适应网站来说往往不是问题，但只使用您需要的图像仍然是一个好主意，这样它们就不会减慢您的页面速度。

9. 嵌入内容

使用嵌入式社群媒体小部件、影片或横幅广告等外部内容并不少见。在自适应设计中，您可以将这些外部元素放置在它们出现的容器的边界内。在响应式设计中，您应该确保自定义嵌入原始码以使其在容器的范围内。

10. 互动

互动设计元素应该是：

易于识别为交互式

在页面上可以找到

互动无误

考虑访问者期望与您的网站进行的各种微互动，这些交互的方式可能会有所不同。例如，假设您已将电话号码放在您的网站标题中。桌面用户可能会将其拨入手机。另一方面，行动用户希望点击通话。

平台之间的互动手势或设计继续存在差异。例如，一个图像滑块对于所有用户来说可能看起来都一样。但是，只有移动访问者可以点击以向左或向右滑动滑块。桌面访问者将使用滑鼠。

因此，无论您选择使用响应式网页设计还是自适应网页设计，都不要只关注如何在不同平台上重新定位、调整大小或表示您的内容。还要考虑上下文如何影响内容互动。