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

Technique 1: Instant loads with skeleton screens

Facebook using a skeleton screen to improve perceived performance when you first open it

What is going on? Is it even loading? Did I tap it right? 🤔

A screencapture of launched from the home screen in standalone mode on Android uses the Skeleton Screens pattern and reuses titles and thumbnails across transitions
The slowest speed supported in Chrome network emulation

Technique 2: “Stable loads” via predefined sizes on elements 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

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.
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



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