Reactive Web Design: The secret to building web apps that feel amazing

Technique 1: Instant loads with skeleton screens

When used well, this technique is almost never noticed, but has a huge impact on perceived performance of a site.

Facebook using a skeleton screen to improve perceived performance when you first open it
A screencapture of flipkart.com launched from the home screen in standalone mode on Android
app.jalantikus.com uses the Skeleton Screens pattern and reuses titles and thumbnails across transitions

Testing sites with skeleton screens

Testing how well sites use this technique is easy: simply use Chrome network emulation to make the network as slow as possible and then click around a site. If it is doing this well, the site will still feel snappy and responsive to your input.

The slowest speed supported in Chrome network emulation

Technique 2: “Stable loads” via predefined sizes on elements

You know that feeling where a website is jumping around while you’re trying to use it? You’re just trying to read an article and the text keeps moving around? That’s what we call an “unstable load”, and we need to burn it with fire 🔥🔥🔥.

slate.com content jumps around very aggressively as the page loads. The slower the network you’re on, the longer it jumps for.
Browsing an unstable site always reminds me of how I imagine it would feel to walk around during an earthquake
<!-- Always include sizes on images to prevent unstable loads -->
<img src='/thumbnail.png' style='width: 100px; height: 84px'>

Putting it all together

I’ve build a small demo site at reactive.surge.sh to demonstrate the difference between conventional and reactive web design.

Conventional article loading

Note how sluggish it feels and how frustrating content jumping is. Interestingly I find this orders of magnitude more annoying on mobile devices when tapping the screen and not seeing it react.

Loading an article with reactive web design

With reactive design the load feels instant and the site remains reactive when tapping the back icon and the article title multiple times

Wrapping up

The slower the network is, the worse the user experience becomes when page transitions block on the network and pages jump around for extended periods.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Owen Campbell-Moore

Owen Campbell-Moore

@owencm. Googler | Computer Scientist | JavaScript-er?