什么时候 Responsive 设计出错（以及如何修复它）

大多数网站使用 responsive 设计不正确地使用它，这会导致问题。 一般方法 responsive 设计是一种懒惰的设计，如果你采用这种方法，你的一些 responsive 网站将绝对完美地工作，其中许多不会。 对于那些工作完美的人来说，这可能归结为运气问题。

的概念 responsive 设计很简单，但正是它的简单性导致人们如此容易犯错。 拥有多年经验的设计师已经习惯于为 desktop，因此他们通常会根据 desktop 布局。

Desktop 布局与平板电脑布局和移动布局不同，因为它们通常是多列的，通常包含大量空白，而且一切都只是“大”，找不到更好的词。 如果 responsive 使用了设计技术，这种多列布局应该分解为一列。

如果这就是你的全部 responsive 实际上，当在移动设备上查看设计时，您可能会遇到问题。 有多少问题取决于你的态度，但好的设计师关心好的用户体验。 他们更关心糟糕的用户体验。 如果您的网站有糟糕的用户体验并且您想成为一名优秀的设计师，那么您需要修复它。

将多列布局折叠成单个列的问题是，它不能按比例工作。 如果您必须水平缩小某些内容并且不进行任何其他更改，则显然它将垂直扩展。

将短脂肪玻璃杯中的水倒入高个子的薄玻璃杯中，水变成高个子的薄玻璃杯的形状，而水的体积则保持不变。 设计师需要了解的是，通过网站，我们确实需要更改数量。 改变形状但保留内容通常不是一个好主意 究竟 相同。 一定要给的东西。

真正获得设计师称号的人会明白，这代表着一个有待解决的问题，而设计师真正做的是为问题找到解决方案。 因此，最好的工作是找到提供网站核心内容的最佳方式，而不会将用户体验变成令人沮丧的滚动盛宴。 这里有一些事情在分解时值得考虑 desktop 设计成移动设计：

1.“移动优先”是愚蠢的

对不起，但确实如此。 每个人都在重复这一点，但作为一个概念，它并不是很有帮助，因为如果你真的设计“移动优先”，那么试图将其扩展到 desktop 除非您一直坚持使用纯粹的单列布局。

最好的方法是物理设计至少三个（最多11个）不同的布局。 您可以考虑的最低要求包括：

• Desktop
• 景观移动
• 肖像移动

如果你想要更加彻底，你还应该考虑：

• 景观平板电脑
• 肖像平板电脑

完整列表，如果你想完全完整将是：

• 巨大 Desktop
• 普通 Desktop
• 大景观平板电脑
• 大肖像平板电脑
• 小景观平板电脑
• 小肖像平板电脑
• 大型景观移动
• 大型移动电话
• 小景观手机
• 小肖像移动
• 微小/可穿戴

有了这么多种不同的可能性，显而易见的是，为什么一个懒惰的“一刀切”的方法如此诱人，但显而易见的是，为什么有这么多方法来破坏它。

2。 驯服那个庞大的页脚

新的 desktop 设计包括那些带有大量内部链接的巨大页脚之一？ 太好了，这可能会非常方便 desktop. 在手机上，它看起来很荒谬，而且不仅仅是有点烦人。 您可以为每个设备断点设计完全不同的页脚。 只需在模式对话框中提供这些页脚链接，每个人都会获胜。

3。 在晦涩的设备上接受一些小怪癖

如果某个特定设备不常见，那么只有在该设备上查看时，设计中才会出现一些怪癖，这也并不坏。 设备越流行，您就需要越多的工作来摆脱出现在设备上的怪癖。

4。 您可以隐藏对核心消息没有贡献的内容

网站最重要的部分是核心信息。 是的，在某些站点上，最重要的部分是广告，并且仅存在于传递广告中，但是，如果您必须在显示核心消息或显示广告之间进行选择，请选择消息。 Google更可能将您视为 不受欢迎的人 如果您隐藏核心内容，然后投放大量广告。 这是因为核心内容是Google索引您的依据，而当该内容未显示时，Google则认为该内容具有欺骗性。

此外，像纯粹装饰性或美学的图像，但对核心信息没有显着贡献的图像，是完全减少或隐藏的候选者。

有人提出隐藏内容是在“惩罚”移动用户，但这有点荒谬。 现实情况是，您隐藏了内容，因为它的存在是为了增强 desktop 经验，但对网站的核心信息的贡献不足以使其成为必要

5。 您可以使用其他背景

最近，我接到了一个荒谬的任务：网站所有者为特定的背景付费，并希望所有内容都适合该背景。 项目符号点必须是非常精确的字符数，行的总数必须是精确的，依此类推。

这绝对是网页设计的不良做法，因为你应该这样做 决不要 设计内容以适合布局。 布局应 时刻 被设计为容纳内容。 如果由于某种原因布局无法容纳内容，则应该重新设计布局，而不是内容。 对于不同的设备，很有可能使用不同的背景。 你是设计师 动用你的想象力。

内容是网站的命脉，基于布局的约束对其进行修改或限制是网站所有者的明显业余态度，而内容的设计首先是不良的设计地点。 坚持您的原则，因为如果您默认，该客户将会遇到麻烦。

客户永远是对的，除非该客户是网页设计客户。 客户很少知道什么对他们最好，重要的是要坚持自己是一个知道如何为客户提供正确结果的网页设计师。 其他wise 您冒着创建另一个网站的风险 厌恶.

6。 手动控制折叠顺序（或避免内容中的空间参考）

这是一个复杂的问题。 网站的崩溃顺序取决于div的堆叠顺序。 您需要以正确的顺序堆叠div，以便它们以正确的顺序折叠。

拖累所见即所得的网站建设者所面临的问题之一就是你通常无法决定div的堆积顺序，在极少数情况下你可以做到这一点，你的辛勤工作每次都会被取消你做了最小的编辑，你将不得不重新进入并破解源代码。

如果您不控制折叠顺序， 此图像 清楚说明可能出问题的地方。 另外，您应该避免进行空间参考（例如“在左侧的列中”），因为在移动设备上，左侧或右侧的内容可能会移动到上方或下方， 加 如果你让读者认为滚动查看非常重要，那么他们将不得不再次向后滚动，这并不酷。

7。 对于不同的布局，您可能需要不同的字体大小

使用CSS可以很容易地控制字体大小，并且可以为特定的显示大小设置不同的字体大小，甚至可以设置不同的字体（如果看起来更好）。 您可以使用CSS媒体查询找到显示大小，然后将字体大小或字体更改为可以显示内容的值，从而最大程度地利用您要定位的设备类型。

8.最好用 responsive 图片

所有图像都应该是 responsive 只要有可能。 这带来了有时如果图像缩小太多，图像的细节可能会丢失。 此问题的解决方案是使图像可点击，以便用户可以查看与内容分开的图像的放大版本。 执行此操作的正常方法是通过模式对话框。

标题图片由...提供 Artur Martynowski