响应式设计出错(以及如何解决)

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

响应式设计的概念很简单,但其非常简单是导致人们轻易犯错误的原因。 拥有多年经验的设计师已经习惯于为桌面设计,因此他们通常会根据桌面布局来规划设计。

桌面布局与平板电脑布局和移动布局不同,因为它们通常是多列的,通常包含大量的空白区域,而且由于缺少更好的单词,所有内容都只是“大”。 如果使用响应式设计技术,则应将此多列布局分解为单个列。

如果您的所有响应式设计在移动设备上查看时确实存在,那么您可能会遇到问题。 问题有多少取决于你的态度,但优秀的设计师关心良好的用户体验。 他们更关心糟糕的用户体验。 如果您的网站有糟糕的用户体验,并且您想成为一名优秀的设计师,那么您需要修复它。

将多列布局折叠到单个列中的这个问题是它不能按比例工作。 如果你必须水平缩小某些东西并且你没有做任何其他改变,它显然会垂直扩展。

将水从短的肥胖玻璃倒入高大的薄玻璃杯中,水呈高高的薄玻璃状,而水的体积保持完全相同。 设计师需要了解的是,通过网站,我们确实需要更改音量。 改变形状但保留内容通常不是一个好主意 究竟 相同。 有些东西必须给予。

真正获得设计师称号的人会明白,这代表了一个需要解决的问题,设计师实际上做的是找到问题的解决方案。 因此,找到最佳方式来提供网站的核心内容,而不会将用户体验变成令人沮丧的卷轴节目,这是完美的工作。 在将桌面设计分解为移动设计时,以下是一些值得考虑的事项:

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

对不起,但确实如此。 每个人都在鹦鹉学舌,但作为一个概念,它并没有多大帮助,因为如果你真正设计出“移动优先”,那么除非你一直坚持纯粹的单一列布局,否则尝试将其扩展到桌面设计将是噩梦般的。起来。

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

  • 桌面版
  • 景观移动
  • 肖像移动

如果你想要更加彻底,你还应该考虑:

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

完整列表,如果你想完全完整将是:

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

有这么多不同的可能性,很明显为什么懒惰的“一刀切”方法如此诱人,但同样明显的是为什么有这么多方法可以毁掉它。

2。 驯服那个庞大的页脚

桌面设计包括那些带有大量内部链接的巨大页面页脚? 太棒了,在桌面上可能非常方便。 在移动设备上,它看起来很荒谬,并且不仅仅是一种烦人的触摸。 您可以为每个设备断点设计完全不同的页脚。 只需在模态对话框中提供这些页脚链接,每个人都会获胜。

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

如果特定设备不常见,那么如果设计中存在一些仅在该设备上查看时出现的怪癖就不会那么糟糕。 设备越流行,你就越需要摆脱它上面出现的任何怪癖。

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

网站最重要的部分是核心信息。 是的,在某些网站上,最重要的部分是广告,它们仅用于提供广告,但如果您必须在显示核心消息或显示广告之间进行选择,请选择消息。 谷歌更有可能将你视为 不受欢迎的人 如果你隐藏核心内容然后提供一堆广告。 这是因为核心内容是谷歌为您编制索引的内容,并且当该内容未显示时,Google会将其视为具有欺骗性。

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

有些人提出隐藏内容是“惩罚”移动用户,但这有点荒谬。 现实情况是,您隐藏了内容,因为它可以增强桌面体验,但不足以为网站的核心消息做出贡献,因为它是必要的

5。 您可以使用其他背景

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

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

内容是网站的生命线,根据布局的限制对其进行修改或限制,这是网站所有者业余性的明显标志,并表明布局设计不合理。地点。 坚持你的原则,因为如果你默许,那个客户将会遇到麻烦。

客户永远是对的,除非该客户是网页设计客户。 客户很少知道什么对他们最有利,而且自称是一个知道如何为客户提供正确结果的网页设计师是很重要的。 否则你冒险创建另一个网站 厌恶.

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

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

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

如果您不控制折叠顺序, 此图像 清楚地解释了什么可能出错。 此外,您应该避免在移动设备上进行空间参考(例如“在左侧列中”),无论左侧还是右侧的内容都可以转移到上方或下方, 如果你让读者认为滚动查看非常重要,那么他们将不得不再次向后滚动,这并不酷。

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

使用CSS可以轻松控制字体大小,您可以为特定尺寸的显示设置不同的字体大小甚至不同的字体(如果它们看起来更好)。 您可以使用CSS媒体查询找到显示大小,然后将字体大小或字体修改为可显示内容的值,以便最大限度地利用您要定位的设备类型。

8。 最好使用响应式图像

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

标题图片由...提供

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。