要避免的五个响应式网页设计陷阱

创建出色的响应式体验需要比媒体查询更多的内容。如果你认为创建柔软的布局是所有这些响应的事情,那就是你错过了这一点。事实上,我们需要为越来越多的支持Web的设备提供可靠的用户体验,并且从长远来看,创建完全独立的设备体验根本不具备可扩展性。创造适应性体验是一种更明智的前进方式,但这并不意味着这种方法并非没有挑战。

以下是您沿着响应道路前行时要避免的一些陷阱:

1.隐藏内容

由于响应式站点共享一个代码库,因此它们有更好的实现机会内容平价,这很棒。然而,这并不意味着它都是橡皮糖和蝴蝶。仍有许多响应式网站隐藏或删除较小屏幕的内容,以处理屏幕空间限制。

按照这个简单的指南:不要因为他们碰巧正在浏览的设备而惩罚用户。人们带着期望来到我们的网站和服务,我们的工作是确保他们能够实现他们的目标。移动用户将完成桌面用户将要做的所有事情,但必须以可用的方式呈现。所以尽可能确保尽可能多的人可以访问您的内容和功能。

值得注意的是隐藏的内容CSS仍然被下载,这对于表现而言非常糟糕,并将我们带到了下一个陷阱,以避免......

膨胀起来!

好的,所以你不会为小屏幕掏空内容而且你已经努力提供完整的体验,无论背景如何。一切都与世隔绝,对吗?好吧不,因为现在你有一堆东西加载,这需要时间。74%的移动用户将在5秒后离开(PDF)等待页面加载,而不幸的现实只是3%的小屏幕版本的响应式网站明显比他们的大屏幕对应物轻。这意味着用户承担了潜在大量下载的负担。

一个正常页面在巴拉克奥巴马的回应网站上重量超过4MB。四。兆字节。这是任何标准都不能接受的,但是当您考虑可能使用EDGE,3G或不良WiFi连接的用户时尤其会分崩离析。

对于一个网站,其目标是接触一般人群(所有人都有不同的移动竞赛,移动信条,移动颜色和移动宗教),这会导致严重的可访问性问题:

Sure, part of this is RIM’s doing, but these are real constraints that we need to be aware of

当然,这部分是RIM正在做的,但这些是我们需要注意的真正限制因素

创建响应式Web设计的最大挑战之一是提供全面体验的平衡行为,同时仍然保持全面的用户体验。切掉那个残骸, 跟随性能最佳实践,默认情况下不要假设强大的连接,并寻找方法来利用像这样的伟大技术条件加载保持初始页面大小。

3.忽略上下文约定

一部手机不是平板电脑不是笔记本电脑不是台式机不是电视机。

每个设备都提供自己独特的外形,接口约定,约束和机会。我们需要考虑所有这些变量,以创造对用户来说自然的体验。现在我不建议在浏览器中重新创建每个平台的原生UI,但我们需要注意人们如何握住他们的设备,他们习惯看到的图标等等。良好的响应体验到达浏览器沙箱之外,并且对用户和设备上下文表示同情。

根据定义,响应式网页设计不是移动设计,因此我们需要在设计中引入内容相关的元素。这意味着处理响应式导航以对整个环境中的访问者有意义的方式。这意味着设计触摸。这意味着避免迫使移动用户筛选出大量不同的内容,只是为了找到他们正在寻找的内容。

让我们考虑一下这些设备之间的许多差异,理解一些妥协是不可避免的,但要付出坚实的努力来更好地考虑上下文。

4.提供一个万能的体验

手机是多得多而不仅仅是各种小屏幕,这些新兴的环境解锁了全新的用例,模式和可能性。我们不应仅仅通过创建响应式布局来推销自己。例如,我们有时会忘记手机可以获取用户位置发起电话, 以及更多。希望很快,所有这些小工具上的浏览器都可以访问更多设备API,进一步推动网络上可能的界限。

我们应该尽一切努力使整个体验能够响应设备的功能。首先解决约束为我们提供坚实的基础,然后我们可以利用渐进增强特征检测把经验提升到一个新的水平。

5.依靠设备尺寸

320像素。 480像素。 768px。 1,024像素。折叠。哦,上帝,折叠。

事实上,我们无法控制访问者的浏览器尺寸,以及制造商决定制造设备的尺寸。相信我,他们正在尝试书中的各种尺寸。

Why you should never rely on device dimensions

为什么你不应该依赖设备尺寸

此外,由于书签栏,浏览器镶边和Ask Jeeves工具栏,页面高度始终更像是一个移动目标。但现在在移动网络世界中,通常不会通过浏览器的镜头看到网络体验。我们通过Facebook,Twitter和其他应用程序访问链接,每个应用程序都有自己的自定义chrome,用于包含Web视图。当然,内容的层次结构仍然很重要,你想尽快找到页面的内容,但你无法在可用的像素高度上完成所有工作,学会放手。

在他的文章中普通断点的夸耀,Jeremy Keith雄辩地说“这不是关于在断点处发生的事情,而是关于断点之间发生的事情。”这意味着我们的设计应该保持在一起,而不管任何特定的维度。

让设计本身找出断点应该发生的位置。我非常喜欢这个建议来自Stephen Hay:

“首先从小屏幕开始,然后展开,直到它看起来像狗屎。插入断点的时间!

通过让内容本身决定我们的响应式设计的断点,我们正在准备我们的设计不仅在今天的风景中看起来很棒,而且明天也是如此。

做进化

就创造适应性体验而言,我们处于冰山一角。虽然存在这些陷阱(以及本文未涉及的许多陷阱),但他们没有理由回避创建适应性体验。随着各种形状和大小的连接设备每天都出现在场景中,我们作为网络创建者有机会在他们到达时到达那里。虽然这无疑是令人生畏的,但我们应该接受这一挑战,并抓住机会随时随地接触到人们。



翻译字数超限