在网页设计中，建立一个优秀的响应或自适应网站的技巧是关心你网站的每个元素，并考虑网站变化可能会如何影响它们。在规划适合移动设备的设计时，试着包括或改进这些关键部件：

1.标题内容

乍一看，标题可以告诉访问者很多关于网站的信息：

品牌是什么

它提供哪些

采取什么行动？

如何搜索所有内容？

桌面布局有足够的空间在其网站标题上显示所有这些信息。移动终端更少——你的响应或自适应设计应该考虑到这一点。

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

2.文本易读性

网站文本可能是一个无法解决的元素：你希望它看起来不错，反映你的品牌风格，但你必须确保你的设计选择不会影响可读性。

在设计不同的设备时，您还必须考虑尺寸和风格可能不会随着屏幕尺寸的上下移动而缩小。不用说，在启动网站之前测试这一点很重要。

3.汉堡菜单

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

汉堡菜单是指通常位于网站右上角或左上角的三行标志。在这一点上，大多数人都知道这些层次的水平线是做什么的，它们是访问移动网页设计的可靠选择。

4.导航置放

移动应用程序的日益普及影响了网站所有者构建移动导航的形式。每个人都看到设计超出了我们过去介绍的汉堡菜单。

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

5.粘性标题

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

如果你尽了最大努力，您的移动网页仍在运行很长时间，请考虑将页眉设置为粘性。这样，客户就可以随时浏览您的导航。

6.视觉层次

网站的视觉水平是指访问者的眼睛在页面上遵循的路径。混乱的网站布局使访问者很难知道下一步该去哪里，尤其是在移动网站上。

可将标题和子标题、图像块、空缺、导航工具等添加到网页上，方便：

分解大量内容和复杂主题

构建页面上的信息

确保你有一个平衡和更好的设计

创建不同部分之间的关系

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

最好的办法是为台式机、平板电脑和移动终端设置全局风格，以确保响应重组过程不会影响您内容的完整性。

7.页长

你网站内容的最后一个问题是它的长度。手头的导航可能会让长页面更容易翻转到移动设备上—但在手机上更低的翻转也有帮助。

根据自适应设计，您可以删除移动布局上的文本或图像部分。这样，您就可以在桌面上阅读更多内容，并保持移动版本的可读性。

8.意境

网站图像是设计、品牌营销、讲故事和销售的非常有用的工具。在响应和自适应设计中，请注意这些图像对页面性能的影响。虽然图像重量通常不是自适应网站的问题，但仅仅使用你需要的图像仍然是一个好主意，这样他们就不会减缓你的页面速度。

9.置入内容

应用嵌入式社交网络小组件、视频或横幅广告等外部内容并不少见。在自适应设计中，您可以将这些外部元素放置在容器的边界内。在响应设计中，您应确保在容器范围内设置代码。

10.互动

互动设计元素应为：

易于识别为交互式

可以在页面上找到

互动无误

考虑到访问者期望与您的网站进行各种微互动，这些互动可能会有所不同。例如，假设您已经将联系电话号码放入您的网站标题。桌面客户可能会把它拨到手机上。另一方面，移动用户希望单击电话。

平台之间的交互式手势或设计继续不同。例如，图像滚轮可能对所有用户都是一样的。然而，只有移动访问者才能点击向左或向右滚动滚轮。桌面访问者将使用鼠标。

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