The initial problem was that the Das Keyboard site was originally on WordPress which required frequent, cumbersome updates. The site was also slow to load.
Our challenge was to create a beautiful website, while keeping in the mind the loading page speed as well as the user experience.
For the design of the website, I started with the Pixma Twitter Bootstrap template and filled each page with legacy content. I coordinated with the management and marketing teams here at Metadot to refine the text and better position our mechanical keyboards and RFID blocking products.
I used Google’s PageSpeed Tools to analyze the current site loading time. The website started with a score of 50 and is currently at a score of 94. As a developer, this increase makes me pretty happy. :)
Automation is important because the less work you have to do when performing repetitive tasks like compilation, the easier your job becomes.
For example, before we made the web site live on our development site, I used a prompt command to launch a Grunt plugin, which executed the tests and optimize the project to be efficient by executing minification, compilation, unit testing and more.
|A look at the Grunt plugin.|
Finally, I created a system for language translation on the new web site. Das Keyboard has an office in Germany, so it’s important that our website also be available in the German language. Stay tuned for an additional blog post about this side of the project.
Here is a look at the Pixma Template implemented on the Das Keyboard website:
|Pixma + Das Keyboard.|
To close, here is a look at the “before and after” Google Page Speed results using Twitter Bootstrap:
Google Page Speed
Before the Project Started: Das Keyboard on WordPress
During the Project: Das Keyboard on Twitter Bootstrap
After the Project Completed: Das Keyboard on Twitter Bootstrap with Grunt
Are you ready to see the final product? Go ahead and visit our website for a super fast user experience.