Design Spin
Design Spin

New Site For Design Spin

By Jason Foster - Wednesday 21st Febuary 2018


Share:

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.

Javascript as a language has made a lot of advances over the last few years and has become extremely popular. It used to be known as a front end language, predominantly used for providing effects and interactions to web pages, things like image sliders for example. But today with the availability of node.js, it is possible to do a whole lot more.

Node allows Javascript to run on the server side. If this was a Wordpress website the language we would be using on the server side would be PHP, but we would still be using Javascript on the client side for any browser trickery such as the image sliders mentioned. As we see it, this is one of the benefits of using node for our server side implementation, much of the codebase used on the server side can be shared with the client and vice versa.

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:

React

React

Developed by Facebook, react is a popular javascript library for developing user interfaces. React allows you to break your page / user interface into smaller re-usable components that can have state and can be driven by state. When state in your app changes, React will only change what needs to change through its own complex differing algorithm.

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.

Cosmic Js

Cosmic JS

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!

Moving Forward


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.



Share:

© Copyright 2018 Design Spin

50 Havelock Rd, Norwich, NR2 3HG.
Tel: 01603 250693 Mob: 07823440895