Responsive Relaunch of My Martial Arts Website
Relaunch of My Martial Arts Website
After 62 days of work, I relaunched today my martial arts website kogakure.de in a brand new, mobile-optimized design with a completely rewritten codebase. And I have time left until the end of April when Google will start to punish websites, which are not mobile-optimized.
The previous version of my website was driven by Django and you can have a look at the code on GitHub, but I don’t use Django anymore. Instead, I use Ruby on Rails and Ruby a lot at work and at home, which is why it was the best solution to use Jekyll to create my website, as I did with this website before.
And as with this website, I could reuse a lot of my automation and ideas, on how to structure the project. I use Gulp.js to watch for changes, run a development server with BrowserSync, and generate all my files.
And in the same manner, I minimize, combine, squash, revision, and optimize everything, including the Critical Render Path.
To give context, kogakure.de is my oldest website, I started it in 1999. Back then the design was dark, ugly, and with awful typography. Originally, it was intended to collect all knowledge I found about Ninja and Ninjutsu, but it became quickly popular.
In September 2004, I launched a new design, for the first time with bamboo as a design element and a white design. My website was mentioned in a popular science print magazine (P.M. Magazine), which increased the visits about 8 times the regular visits.
In April 2006, I launched the 4th edition of kogakure.de, running on ExpressionEngine. I created a new version of my bamboo design in Adobe Illustrator. The same year, my website became even more popular when German television broadcasters asked me to support them with information for their documentaries (Welt der Wunder, Galileo). After the broadcast of these documentaries, my visitor numbers exploded.
In April 2008, I relaunched the 5th edition of my website with Django and refreshed the design.
After I finished the relaunch of this website in April 2014 I started working on the new design of kogakure.de in early summer 2014. I stopped creating full-featured designs in Photoshop years ago, but I use it until now to create mood boards and quickly try iterations of different ideas. Early on I was sure I wanted to keep the bamboo and my Rakkan and decided to keep my style and don’t create something different.
I always start with Typography and selected a modular scale and a typeface early on. I found a typeface on Google Fonts (Exo), which matched perfectly my style and the topic of kogakure.de and was good to read.
More and more displays have a high pixel density now, which is the reason I decided to use as many vector graphics as possible. I recently read and heard a lot about SVG and decided to use SVG as my vector technique on kogakure.de. SVG is more capable and future-proof compared to vector fonts.
My bamboo and logo were created in Adobe Illustrator, and I thought it would make sense to use them as SVG. Unfortunately, I used the mesh tool of Illustrator to create my bamboo design, which is incompatible with SVG. I had to recreate the whole design with supported gradients (linear, elliptical, and radial).
I hate Adobes cloud solution and pricing and had decided months ago not to spend a shitload of money every month on a design tool, but instead bought Affinity Designer. Likewise, I recreated the bamboo with Affinity Designer, and it was fun, much faster, intuitive, and easier than with Adobe Illustrator. And the bamboo looks even better now!
Static site generator
I had decided on Jekyll early on because I had used it on this website, and it was a lot of fun and comfortable to create a website with Jekyll.
As with this website, I used Gulp.js again to automate everything from development to production. I wrote a series on Gulp.js if you would like to know more.
One problem, which is common on a static site, is that it’s hard to have dynamic content. My website is static, why Jekyll is a good fit. But creating a search without dynamically created pages and a database is not an easy task.
Grid and Responsive Design
There are two kinds of grid systems: Classical CSS Frameworks and Grids-on-Demand.
I’m a big fan of Grids-on-Demand and think CSS-Frameworks is a waste of time, money, and fun. The latter one creates a lot of CSS with class attributes, to use all over your markup and pollutes everything with class attributes (e.g.,
.push-3-of-12). With a Responsive Design, this gets even messier and is inflexible. You have to decide on major breakpoints and add class attributes to all of your containers for all your breakpoints. Examples of these types of frameworks are Bootstrap, Foundation, Pure.CSS, Unsemantic and others.
Grid-on-Demand Systems are far more flexible. They need a preprocessor to run and provide Mixins for your grid. You create grid code, when required, and don’t have to ship all possible variations of grids with your CSS. Examples of these systems are Susy and Singularity.
I used Singularity for kogakure.de, which I used before for this website. I like it in particular because it’s the most flexible system I’ve ever used. You can create every Grid imaginable with it.
On my website, I use four different grids: One with 3 columns, one with 6, with 14 and 16 columns. Because it’s silly to use 16 columns on a small screen or 3 on a desktop screen. With Singularity, it’s possible to create grids, which change depending on a Media Query.
On this website, I used BEM for the first time as a CSS architecture. I started like I do all my projects, but during development came across common CSS problems with specificity and had to overwrite a lot of CSS.
I stopped and decided to use BEM, nevertheless, I was never a fan of how class attributes are written in BEM, and refactored all my CSS. And even after this short time, I have seen many advantages. Everything is clear, easy to find a class attribute in the CSS. It is much more valuable with large teams.
I finished my Responsive Design in time, with Google starting to use mobile-friendly as a ranking factor, and equipped my website to work on all kinds of different devices and displays.
Responsive Web Design is now state-of-the-art and the best way to provide a website to an unknown number of screens, devices, and resolutions. Nobody knows the future, but we will see new devices, ranging from smartwatches up to 4K displays. And native apps can’t be the answer for most websites on the web.
Creating the website was a lot of work, but a lot of fun. And I hope it will be more fun for my visitors with mobile devices (currently 40% on phones and 9% on tablets) to read my essays and enjoy the site.