large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2nBKQla">medium bookmark / Raindrop.io</a> |  </p>
<p>In the last year I’ve observed <strong>two subtle techniques</strong> being used by some developers that take a web app from feeling slow and janky to highly reactive and polished.</p>
<p>I believe these techniques are important enough that they need a name: <strong>Reactive Web Design</strong>.</p>
<p>In summary, reactive web design is a set of techniques that can be used to build sites that always feel fast and responsive to user input regardless of the network speed or latency.</p>
<p>As web developers and framework authors, I believe finding ways to make these patterns default in everything we build is a top priority for improving UX and perceived performance on the web.</p>
<h3>Technique 1: Instant loads with skeleton screens</h3>
<p>When used well, this technique is almost never noticed, but has a huge impact on perceived performance of a site.</p>
<p>Interestingly, the technique is used by almost all native apps and makes them feel very reactive even on terrible networks, but it is almost never used on the web!</p>
<p><em>Opportunity this way lies!</em>?</p>
<p>In short, skeleton screens ensure that whenever the user taps any button or link, the page reacts immediately by transitioning the user to that new page and then <em>loading in content to that page </em>as the content becomes available.</p>
<div><img src="http://ift.tt/2ownh1a" alt="1*tAz8By32NRGGypJIF6_sGg.png"></div>
<p>Facebook using a skeleton screen to improve perceived performance when you first open it</p>
<p>Skeleton screens are a key <em>perceived performance </em>technique as they make applications <em>feel </em>much faster, dramatically reducing the number of moments where the user is left wondering:</p>
<blockquote><p>What is going on? Is it even loading? Did I tap it right? <em>?</em></p></blockquote>
<p><a href="http://ift.tt/mTQBCK">Flipkart.com</a> is a rare example of a website that makes use of this approach. Browsing through categories or tapping on products therefore feels lightning fast, even when the actual results take a few seconds to load:</p>
<div><img src="http://ift.tt/2owsExC" alt="1*54hYHKhgcLpA5D9yOi0Waw.gif"></div>
<p>A screencapture of <a href="http://flipkart.com/">flipkart.com</a> launched from the home screen in standalone mode on Android</p>
<p>When this technique is used best, content that is already available such as thumbnails or article titles can be re-used to improve the perceived performance even further, making loads feel truly instant.</p>
<div><img src="http://ift.tt/2nSa3sB" alt="1*RivCwhp1kMqjD2AsM5-83A.gif"></div>
<p><a href="http://ift.tt/2owdx75">app.jalantikus.com</a> uses the Skeleton Screens pattern and reuses titles and thumbnails across transitions</p>
<h4>Testing sites with skeleton screens</h4>
<p>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.</p>
<div><img src="http://ift.tt/2nSaoeQ" alt="1*NC3XoTYVOEbWmNDhttn4TA.png"></div>
<p>The slowest speed supported in Chrome network emulation</p>
<h3>Technique 2: “Stable loads” via predefined sizes on elements</h3>
<p>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 <strong><em>burn it with fire </em></strong>???.</p>
<div><img src="http://ift.tt/2owtiuX" alt="1*L_QFBt0rlRNkWvZoxMMmxA.gif"></div>
<p>slate.com content jumps around very aggressively as the page loads. The slower the network you’re on, the longer it jumps for.</p>
<p>Unstable loads make websites hard to interact with, and makes them feel… well… <em>Unstable!</em></p>
<div><img src="http://ift.tt/2nSbQxA" alt="1*W0UPZSTKYMWEHaNbBCyY4A.gif"></div>
<p>Browsing an unstable site always reminds me of how I imagine it would feel to walk around during an earthquake</p>
<p>Unstable loads are caused by images and ads embedded into a page but not including any sizing information. By default the browser only knows the size of these once they have loaded, so as soon as an image loads in, <strong>THUNK!</strong>,<strong> </strong>the whole page slides down ?.</p>
<p>To prevent this, all &lt;img&gt; tags on a page must proactively include the dimensions of the image they will contain.</p>
<p>In many cases images used on certain pages are always the same size and so their size can simply be included in the HTML template, but in some cases the size of images is dynamic and thus their size should be calculated when the image is uploaded then templated into the HTML when it is created.</p>
<pre>&lt;!-- Always include sizes on images to prevent unstable loads --&gt;<br>&lt;img src='/thumbnail.png' style='width: 100px; height: 84px'&gt;</pre>
<p>The same is true for ads, often a culprit when it comes to unstable loads. Wherever possible, create a div that will contain an ad, and in your templating set it to be sized with your best guess at how big this ad will be.</p>
<p>Note that unstable loads are at their worst on slow networks as you have just settled into reading content when suddenly it jumps, and you can <em>never quite be sure that you’re safe</em>.</p>
<h3>Putting it all together</h3>
<p>I’ve build a small demo site at <a href="http://ift.tt/2owdvvZ">reactive.surge.sh</a> to demonstrate the difference between conventional and reactive web design.</p>
<h4>Conventional article loading</h4>
<div><img src="http://ift.tt/2nS8F9h" alt="1*vSbJQ42cy-3Q0IdJE8KDbg.gif"></div>
<p>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.</p>
<h4>Loading an article with reactive web design</h4>
<div><img src="http://ift.tt/2owrhi9" alt="1*xxGYpV_Qn82m9jJIYBqq-g.gif"></div>
<p>With reactive design the load feels instant and the site remains reactive when tapping the back icon and the article title multiple times</p>
<h3>Wrapping up</h3>
<p>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.</p>
<p>With <strong>Reactive Web Design</strong> we can make our experience feel snappy and responsive (“Responsive Design” as a name was already taken, d’oh!) even on slow and painful networks.</p>
<p>I’d love to hear about data from the community on the effect of perceived performance on KPIs such as engagement and revenue!</p>
<p>Additionally, I’d encourage framework and library authors to consider how to make skeleton screens and stable loads the default, also known as the <a href="http://ift.tt/29hBrIt"><em>pit of success</em></a><em>.</em></p>
<p>If you have thoughts about this, please tweet me <a href="https://twitter.com/owencm">@owencm</a>, and if you enjoyed this please give it a ♥!</p>
<p><em>P.S. be sure to check out the demo site </em><a href="http://ift.tt/2owdvvZ"><em>reactive.surge.sh</em></a><em> on a mobile device for it’s full glory!</em></p>
<div><a href="http://ift.tt/2nBKQla">http://ift.tt/2nBKQla</a></div>


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

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

Top Stories