“响应式文本”是否可取?

 

（译者注：本文提到的响应式文本指的是网站的文案根据不同的屏幕大小而有所增删，而不是字体大小的改变。作者通过分析Sifter网站的做法和设计师Frankie Roberto的demo，提出了他自己的观点，即是，响应式文本是不可取的。他认为，如果文案经过增删都能表达同样的意思，那为何不用最简洁的那个文案呢？另外，维护不同版本的文案会给编辑带来巨大的成本。）

从你所关注和你所阅读的内容来说，你或许注意到“响应式文本”的概念近期比较热门。调整文本的大小和字体使得在不同的设备上的阅读非常方面——这或许是你想象的——但是，这个“响应式文本”并不是这样，而是基于不同尺寸的设备来显示不同的内容。

一个例子是由设计师Frankie Roberto测试的网站。另外一个是Sifter App的导航菜单。 Roberto和Sifter使用Media Queries，根据不同尺寸的屏幕来显示或隐藏文本。

看了这样的做法，我还是保留意见，因为它的实际用处还不是很明确。并且，把这种效果成为“响应式”，会显得“抬举”它了，因为这其实就是一种优化代码的方法。下面是Sifter网站的一些截图：

Sifter改变导航菜单Tab的内容。查看大图.

这个效果是如何完成的？

在这个例子当中，你会注意到几样事情。截图显示了网站在不同尺寸的屏幕两种形式。

当你在大屏幕设备看这个网站，那么倒数第二个菜单的选项显示了完整的文案”Pricing&Plans”。而当你在小屏幕设备看，这个文案会变成只显示”Pricing”。这个特定的例子或许并不能说明什么，但是我最关注的是，这个被当作是”响应式文本”了。其实不是的。它只是简单地隐藏了冗余的内容，如果这个内容的重要性不足以显示在小尺寸屏幕上面，那其实是不关紧要的。

这个文案的改变，难道是说Sifter网站的Plans只提供给大尺寸屏幕的用户（译者注：大尺寸屏幕用户看到”Pricing&Plans”，而小尺寸屏幕看到”Pricing”，少了“Plans”），或者说其实”Plans”这部分本来就是多余的？我认为不是这样，因为不管屏幕尺寸是多大，这块的链接都是连到”…/plans”网页。这很可能会给小尺寸屏幕的用户带来困扰：用户点击的是”Pricing”但是链接到一个”Plans”的页面。

为了控制“Plans”这部分文案的显示或隐藏，Sifter的设计师把这个文本放在span里面。对一个菜单选项来说，这并没有什么大不了，但是从Frankie Roberto的示例来看，两个版本的差别就大了。我无法想象，维护一个多版本的网页内容是多么麻烦了。（更不要说，要考量这个被隐藏的文案本来是不是多余的。）

希望大家都知道要避免使用display:none !important;来隐藏内容。响应式设计是包括很多方面的，很多的技巧和技术构成了设计灵活网站的完mei策略。但是，这种方式的隐藏内容应该不属于策略的一部分。

不管怎样，这只是一个demo，对吧？

他清楚这点，并且他展示了一个使用场景。我为他的努力鼓掌——每个人都应该积极去尝试。然后Sifter是个活的网站——不是一个demo或某个概念的一个证明——它所做的被称为“响应式文本”。

我是”one Web“概念的忠实拥护者。如果你觉得很必要针对小尺寸屏幕来隐藏部分文案，那么你很有可能需要重新审视你所做的努力，少写冗余的文案或者重写文案。

采用“mobile-first”策略的一个挑战就是时刻保持敏锐的警觉，以便精简文案（当然这是我们需要的一种能力）。响应式文本似乎刚好相反。你实际上是在默认本来就有冗余的文案。你在做危险的猜想，认为有些小尺寸屏幕用户不需要这个隐藏的文案。

维护成本会增加

Frankie Roberto在他的domo做了不错的效果。在大尺寸屏幕，你看到完整的文案。当屏幕缩小，内容也在减少。

Roberto’s 在桌面屏幕显示完整内容

小尺寸屏幕，内容被缩减。

要实现这个很容易，对多余的文案加class控制它的隐藏或者显示。.

潜在的问题

• 为了在小尺寸屏幕的文案的可读性，文案必须高度结构化设计。例如，如果一个内容模块有10行，在平板设备，第2、 5、 9 、10行被隐藏，在iPhone中，第2、4、5、9、10行被隐藏，这样要依然保证文案的条理性。
• 在编辑内容时，在内容的哪块做调整，负责人需要一些技巧。这会导致新新内容的难度变高。

如果你在小尺寸屏幕的设备能够把信息传达清楚，那么就不再有需要去“增强”它。你加的任何东西，将会是多余的。

响应式文本有哪些潜在的使用场景？

我不认为有。但是，这只是我的观点。我鼓励读者和网络社区来用实例来反驳我的观点。

之前在Twitter上讨论这点的时候，我看到一些设计师的有趣的回应。很多人赞同，你的小屏幕上显示的内容，可以显示在任何其它的地方，因为这些内容是需要传达信息的精华。

Roberto (@frankieroberto)提出响应式文本可以用于自适应的新闻内容，比如，跟据屏幕尺寸，或者显示摘要或者完全的版本。这对于文摘新闻确实有好处，但是在一个讲究时效的环境里，文案编辑可就要绞尽脑汁了，因为他们需要写不同版本的内容，并且要保证内容能表达清晰。所以，这是需要考虑的一点。

Stephanie Rieger points out指出在大网站创建无冗余的内容是不大可能的，最起码是非常的费时间。

我在重建一个大型网站，同样遇到这样的问题。但我不确定仅仅是依据屏幕来隐藏内容这个方法是否可取。如果该文案是不相关或不值得显示，那么其实不必要隐藏它，而应该删掉或者不发布。

总结

我对Sifter网站和设计师所要实现什么效果的分析或许是错的。（记住这只是我的观点）。请随时通过评论告诉我。但是从网站的设计、代码、文案来说，我暂时还不会接受响应式文本，尽管它是个很有意思的尝试。

我在努力去想这个使用场景，要基于我为客户提供内容的基本原则，那就是如果内容不足以显示在所有设备上，那么内容的多少也不关紧要了。我认为这是非常严谨的，所以请把这篇文章涉及的代码和例子都看清楚，这样或许你能很好组织自己的思路。

记住，并不是因为“响应”，所以就很好。

---