响应式Web设计:构建令人赞叹的Web应用程序的秘诀

在过去的一年中,我观察到一些开发人员使用了两种微妙的技术,这些技术使Web应用程序从缓慢而简陋的状态转变为高度反应性和优美的状态。

我相信这些技术非常重要,因此需要一个名称:“响应式Web设计”。

总而言之,反应式Web设计是一套技术,可用于构建始终感觉快速并响应用户输入而不受网络速度或延迟影响的站点。

作为Web开发人员和框架作者,我相信寻找方法使这些模式在我们构建的所有内容中均默认为提高UX和Web感知性能的重中之重。

方法1:使用骨架屏幕即时加载

如果使用得当,几乎不会注意到该技术,但是会对网站的感知性能产生巨大影响。

有趣的是,该技术几乎被所有本机应用程序使用,即使在糟糕的网络上也使它们感觉非常活跃,但几乎从未在网络上使用过!

这样的机会来了!

简而言之,框架屏幕可确保每当用户单击任何按钮或链接时,页面都会立即做出反应,方法是将用户转换到该新页面,然后在内容可用时将其加载到该页面中。

首次打开Facebook时,它使用骨架屏幕来改善感知性能

骨架屏幕是一种关键的感知性能技术,因为它们可使应用程序感觉更快,从而极大地减少了让用户感到疑惑的时刻:

到底是怎么回事?它甚至在加载吗?我点击正确吗?

Flipkart.com是使用此方法的网站的罕见示例。因此,浏览类别或点击产品感觉很快,即使加载实际结果需要几秒钟:

在Android上以独立模式从主屏幕启动的flipkart.com的屏幕截图

当最好地使用此技术时,可以重新使用诸如缩略图或文章标题之类的可用内容,以进一步提高感知性能,从而使负载感觉真正地即时。

app.jalantikus.com使用“骨架屏幕”模式,并在过渡之间重用标题和缩略图

使用骨架屏幕测试站点

测试网站使用此技术的情况很容易:只需使用Chrome网络仿真使网络尽可能慢,然后在网站周围单击即可。如果做得很好,该站点仍将保持敏捷并响应您的输入。

Chrome网络仿真中支持的最低速度

技术2:通过元素上的预定义大小“稳定加载”

您知道在尝试使用网站时会在何处跳来跳去吗?您只是在尝试阅读文章,而文字却在不断移动?这就是我们所说的“不稳定负载”,我们需要用火燃烧它。

slate.com的内容会在页面加载时迅速跳动。您使用的网络越慢,跳转的时间就越长。

不稳定的负载使网站难以与之交互,并使他们感到……好……不稳定!

浏览不稳定的站点总是使我想起地震时走动的感觉

不稳定的加载是由嵌入页面中的图像和广告引起的,但不包括任何尺寸信息。默认情况下,浏览器仅在加载它们时知道它们的大小,因此,一旦加载图像THUNK !,整个页面就会向下滑动。

为防止这种情况,页面上的所有标签必须主动包含它们将包含的图像的尺寸。

在许多情况下,某些页面上使用的图像始终具有相同的大小,因此它们的大小可以简单地包含在HTML模板中,但是在某些情况下,图像的大小是动态的,因此在上载图像然后进行模板化时应计算其大小在创建HTML时将其转换为HTML。

<!-始终在图像上包括尺寸以防止不稳定加载->

广告也是如此,当涉及不稳定的负载时,通常是罪魁祸首。尽可能创建一个将包含广告的div,并在模板中设置其大小,以最好地猜测该广告的大小。

请注意,在缓慢的网络上,不稳定的负载是最严重的情况,因为您只是在突然跳跃时才开始阅读内容,因此永远无法确保自己的安全。

放在一起

我在react.surge.sh上建立了一个小型演示站点,以演示传统Web设计和React Web设计之间的区别。

常规文章加载

请注意它的速度如何,内容跳跃的速度如何。有趣的是,我发现在移动设备上点击屏幕而看不到它的反应时,这个数量级的问题更为烦人。

使用反应式网页设计加载文章

使用反应式设计,当您多次点击“后退”图标和文章标题时,负载感觉很即时,并且站点保持反应性

包起来

网络速度越慢,当页面过渡在网络上受阻且页面跳动时间较长时,用户体验将变得越差。

借助Reactive Web Design,即使在缓慢而痛苦的网络上,我们也可以使我们的体验变得敏捷而敏感(“ Responsive Design”,因为这个名字已经被使用了,哦!)。

我很想听听社区中关于感知绩效对KPI(例如参与度和收入)的影响的数据!

另外,我鼓励框架和库的作者考虑如何使骨架屏幕和稳定负载成为默认设置,也就是成功的秘诀。

如果您对此有任何想法,请发给我@owencm,如果喜欢,请给它一个♥!

附言请务必在移动设备上查看演示站点react.surge.sh,以获取全面的荣耀!