Updating the Design Spin website has been on our radar for quite some time! Unfortunately being busy with providing a service leaves very little time to keep our own house in order. Over time, between jobs, we have been fitting in our own site re-build. We hope you like what we have achieved?
We don't see the site as finished, but rather an ongoing project that we will iterate on and improve over time.
What's different about this site?
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.
Some Tools For This Job
I won't give you full blown details on how we got to the end result of this website, but 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 cosmicjs. 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, 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, you can setup hooks on urls of your choice. When we create a new article Cosmic Js notifies us through our specified url, allowing us to do things like, updating our sitemap and sending 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 within the Google Chrome browsers development tools, you can quickly audit any of your web pages for Progressive Web App, 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!
We've invested a fair amount of time in this site so will be sticking with it and improving it over time. There are lots of improvements we have in mind already, some of which we will be rolling out as soon as time permits. If you're interested in how a React website or any of the other technologies mentioned here could work for your online experience get in touch, we'll be happy to assist.