einklang is a local Pilates studio where I live. I have been friends with the Trainer for ages and since the studio had been represented by an outdated website, I gladly took the opportunity when she approached me.

Main Goals

The website is supposed to communicate various information about the studio and convert visitors into potential customers. It should be clean and easy to use while being distinctive and alluding to the Pilates Aesthetic.

Technology Stack

I wanted this to be the first production project to use my framework for Single page applications I had been working on. As the framework requires a custom REST API endpoint to fetch UI components and contexts from, using Node as the backend was the natural option. For the frontend, I used Sass, normalize.css and ES2015 JavaScript everywhere. On the frontend, transpiled and polyfilled with babel through webpack. A big gulpfile using Gulp 4 orchestrated the build process. I used Handlebars.js for templating. I really like the mustache syntax and the fact that it's written in JavaScript meant that I could isomorphically use the template parser on client and server.

It was actually not easy deciding for a CMS but after a bit of research, keystone.js seemed to be the most feature-rich/established choice. However, that is relatively speaking. The Node community may be moving at an insane speed but it currently lacks the comfort of mature platforms like PHP. As such, it was lacking multiple small features like repeating schemas and one crucial feature: Singletons. Keystone's only works in works in Lists datastructures for storing content, thus creating single items, to store a single page for example, is currently impossible.

I worked around this by creating a new data model for each page and using the first item of the list as the page's context. A hack at first, this data structure actually worked out fine and could even be beneficial because it allows for easy translation of content. Every list item could represent one particular language. Since the website is only in german, though, that didn't really matter.

Apart from its missing maturity, keystone was really a breeze to work with. Its unopinionated design made it really easy to create the data endpoint for the SPA and integrated with express very nicely. The added promise support made it especially easy to handle database queries. Moreover the admin panel is really well made and nice to use.

Moreover offline support was definitely a consideration but I didn't have the time to implement it.

Design

I wanted a design that communicated the goals of the site clearly, effectively and elegantly. The site should feel intuitive, responsive and predictable. This is achived through clear layout with strong lines to provide guidance, simple, clear typography and a mostly monochromatic color-scheme, only being supported by a singluar accent color matching the training mats. Slight animations while navigating among pages, make the experience feel app-like and natural. The website is of course completely responsive from 310px - 1500px max-width. It works on ie9+ and all recent versions of Chromium/Chromium/-mobile, Firefox, Safari/-mobile, Opera and friends.

Performance

On PageSpeed Insights the site currently scores 90 / 100, ironically mostly because of uncached google maps and -analytics requests. I've implemented responsive images (i.e. @2x resolution dependent on the display's pixel density) by using server side mustard cutting. Because of the SPA framework I made, when navigating to a page never visited before, the page fetches the entrypoint UI component connected to the URL pathname, any of its dependent components and its context, in a single request to the REST API. Then, it stores all of the data in localStorage. Any of these components were now already fetched once and won't be fetched again until they expire. The components can be any type of asset. Contexts are currently cached as well but fetched on each navigation to ensure up-to-date content. This results in exceptional performance on consecutive pageviews with the only investment being a few kb of non-critical JavaScript.

SEO

I migrated from the old website by making a custom 404 website for all pages and files of the old website. It links to a backup of the old site where users can view the old content if they wish to. Moved pages/files were 301 redirected to their new locations. The site previously actually had two domain names with the same content, so to prevent content duplication I just 301 redirected all requests from the alternative domain to the correct one so that navigation would still work. I used the domain migration tool of Google Webmaster Tools to migrate to the new domain name and inform Google about the changes. The site also previously ran both with and without a www subdomain. I chose to drop it for clarity and redirect every request to the non www version.

The result was that the relaunch didn't just hold the search ranking, it actually improved it. The site went from two results of the domain to four of them as the first Google results for "Studio Einklang".

In conclusion, the relaunch provided a lot of value to the studio. The new design is a lot more inviting and the added compatibility with mobile devices will surely benefit the users. The trainer and myself are very happy with the result. Since the relaunch, the rate of inquiries through the website has more than doubled and we've gotten lots of positive feedback from customers.