Rainerhaertl.de
Update: Sadly Rainer, who I considered more than a client, died much too early on the 26th of October 2013. I know he will be missed.
One of these days Rainer Härtl — a respected credit expert — asked me why his website could hardly be found on Google and if I could have a look at it. Seeing that most of the data on the site was in PDF format (scanned images) it was not hard to find a reason. As the old site was not exactly state-of-the-art and far from optimal usability wise we agreed on a complete redo.
Structure
First point on the agenda was to find out what the actual goal of the website is. As it turns out Rainer really believes in helping the people that get screwed by banks. If he is unable to help directly he tries to give people (and lawyers) information that enables them to get their money back.
As such we identified three main goals of the site:
- Offer credit appraisals and seminars
- Offer information concerning laws and judgements
- Offer general information about how the banking system works
Backend
Most of the information offered on the site needs little to no updating and since Rainer has better things to do than keeping a CMS up to date we agreed on a static site solution. The whole site is generated by Middleman because I think it's the near-perfect combination of simplicity and extensibility.
Middleman comes with Haml, Sass and Compass support out of the box which gains it loads of bonus points. Furthermore it offers a few development goodies like a development server and there are plugins that handle JavaScript minimization and such.
Two other reasons for why I really enjoy working with Middleman are its template helpers that allow for Django-like template inheritance and their data management system. Yep, it has a data management system that is based on YAML files (okay no bonus points to give here...) and as simple as can be.
Frontend
On the front end I opted for a customized copy of Bootstrap for Sass a Sass version of Bootstrap on top of hand crafted HTML5 with a few hints from HTML5 Boilerplate. Especially when it came to writing a bullet proof .htaccess it came in really handy. And to make Internet Explorer tag along I threw in html5shim.
There are self-hosted videos on the site so Video.js and a combination of WebM and H.264 videos was used for maximum HTML5-ness while losing only a minimum of cross browser compatibility.
The other videos are YouTube hosted. And as it turns out there is a problem with having tens of YouTube videos embedded in a single page. If it does not break it runs super slow. My solution (after checking out a few projects that did not work for me) was to only fetch preview pictures from YouTube and whip up a little JavaScript that replaces the image with the actual video on click. I was surprised myself how well that works.
JavaScript minification is built into Middleman to smush the HTML I used middmen-minify-html. JavaScript that I could get from a CDN I got from there and images and videos got treated with ImageOptim and FFmpeg respectively. Let's just say the site is fast enough.
Summary
It was a fun project that involved not only coding but also a lot of content structuring. I enjoyed that quite a lot. What I also really like about the website is that it really is state-of-the-art. I would be hard pressed to make it faster or point out something that I wish would have been solved in a more modern way.