When you flip a light switch, the light comes on instantly. This is an action and reaction without any delay in between. The reaction of the light coming in is expected and satisfying. When there is a delay it would feel broken.
With interactivity on a webpage, delays are prevalent. When we do a site search we type our keyword, click submit, and then wait for the page to refresh to see our results. When we want to refine our results or search for something else we repeat this process. The delays between submit clicks add up. They create friction in our interactive experience. We stop searching, even if we haven't yet found what we were looking for.
There is a better way to supercharge your website: Reactivity. Now, don't worry. This is not a technical term you need to fear. By the time we're done, you'll understand how reactivity can improve your website and why it matters.
Reactivity on websites is about making your site respond immediately when someone does something. No loading, no waiting, and definitely no hitting the refresh button. Whether searching for specific content, browsing a job board, or submitting a form, everything happens in real time.
Reactivity brings the same instant response to your website!
There are many ways a site can be reactive. Here are few cases followed by a video of some reactive components that we have built as a showcase.
Imagine you have a visitor who's searching for specific information on your website. With reactivity, as they type their search terms, relevant results show up instantly. They can quickly find the blog post, event, or volunteer opportunity they're looking for. No need to press 'Enter' and wait for the page to reload.
Showcase your association or community partners. Allow visitors to find potential partners to collaborate with. Browsing a large directory where every search requires a submit followed by a page refresh is tedious. A reactive interface inspires more searching due to reduced friction.
Now, consider your job board. As users filter options like job type, location, or salary range, the list of jobs changes to match in real time. There's no need for a user to press a 'Search' button and wait. The jobs they're interested in display immediately, enhancing their experience.
Similarly this interface could apply to other resources your organizations might offer, too! For instance, browsing past webinars or guides to learn from.
When a visitor fills out a form, like a registration or contact form, reactivity can make the process smoother. Any errors in form content are revealed faster and upon submit the user get's a confirmation immediately.
This video showcases a collection of examples of reactive interfaces that we have built. Included are examples of site wide search, blog filters, a job board, and member directory.
Making your website more reactive offers several key benefits:
Reactive experiences are possible through JavaScript. JavaScript is a programming language. It allows for scripting various actions and reactions that HTML cannot do alone. It can toggle a show/hide to reveal more content. It can open a modal or help validate a form.
The simple answer is sometimes yes but sometimes no. Javascript tools continue to evolve rapidly. There are fantastic tools including one of our favorites, HTMX that make sprinkling in a bit of interactivity here and there far more reasonable.
In many of the examples included in the video above, we use a plugin called Sprig for Craft CMS. Sprig provides some shortcuts to use HTMX with Craft’s templating engine. This makes adding reactive experiences like dynamic searches, filters, and forms even easier.
It takes effort to build a modern website. It's fantastic to have tools like HTMX and Sprig for Craft CMS to help make modern more affordable.
The power of reactivity lies in its ability to reduce the friction in your website interactions. Your nonprofit website is made more engaging, user-friendly, and effective when results are like turning on a light switch. Reactivity gives your website a superpower – one that your visitors will thank you for!
So, while 'reactivity' might sound like a tech term, it's really about improving your website for the people who use it. And that's something we can all get behind!
Let us know if you have any questions about adding a bit of reactivity to your website.
Each month we send original articles and curated reads to help your team be mightier.
Minds On Design Lab is a strategic design studio with digital expertise. We're passionate about elevating small and mighty teams in the social sector. We connect people to mission through beautifully designed branding, web, and print.
