Case Study: Design Spin Design Spin Builds a React Website
Design Spin is a boutique independent design and development shop in Norwich, England. Principal Jason Foster focuses on creating premium interactive experiences for clients through web and mobile application development. Updating the Design Spin website had been on his radar for quite some time and this week we see the released product. Read on to hear the narrative directly from Jason Foster as written in his blog.
Jason Foster: "We don't see the site as finished, but rather an ongoing project that we will iterate on and improve over time. Our old website was built with WordPress. We love WordPress, as do the clients we have that are using it. But we wanted the new site to be something modern, incorporating some of the latest in what the web has to offer.
When you visit this website, the first page is delivered from the server then further page changes are handled client side. This makes the whole experience seem very quick. I will outline two of the tools used to get this job done.
This library also includes methods for rendering components on the server side. You may have seen apps that when loaded in your browser present you with an empty app container or a loading spinner, shortly followed by content. The content that follows was triggered to load after the initial page had been served. This all sounds innocent enough but if that content was important from an SEO perspective, the chances are a search engine may never know about it.
We used the server rendering features of react, so on initial page load our content is available to be crawled by a search engine.
As we were no longer using WordPress, we needed something to replace our content management system. WordPress has a built in Restful API, which would of worked well for this project, but we discovered Cosmic JS. Cosmic does everything WordPress does but without the programmatic hassle, so we could get the site up to speed quicker. They provide a useful library making it easy to query your data, so we wrapped this functionality on our own server routes so we could switch it out easily in the future should we ever need to.
Cosmic JS also provides Web Hooks for setup to the URLs of your choice. When we create a new article, Cosmic JS notifies us through our specified URL, allowing us to do things like update our sitemap and send out push notifications.
PROGRESSIVE WEB APPS
When we built this website we wanted to ensure that we ticked the boxes outlined by Lighthouse for a progressive web app. Lighthouse is available within the Google Chrome browsers development tools, allowing you to quickly audit any of your web pages for Progressive Web Apps, Performance, Best Practices and Accessibility.
We care about what Google deems as important, so put a fair bit of effort in trying to get what Google's Lighthouse deemed to be a performant website / web app. We got a 100% for PWA and are still tweaking a bit to try and up our performance score, on last check 86%.
Our home page has a pixelated animation of My face! On the first iteration of coding that, the performance score was really suffering, as it was basically blocking interaction on the website which in Lighthouse's opinion is a big no no. When things like this happen you have to get creative. We knew we wanted the animation, because it looks cool right? So we ended up doing the calculations for where each pixel should be in a web worker. This got us back to a pretty good performance score and everybody was happy again, phew!"
"I hope in the future that this new website will convince clients to avoid WordPress and use the fantastic Cosmic JS API to build apps and manage content.”
— Jason Foster, Principal and Lead Developer