Announcing a redesign of the Cafu websites

News about the Cafu Engine. Subscribe to the related ImageCafu News feed to stay informed.
User avatar
Site Admin
Joined:2004-08-19, 13:46
Announcing a redesign of the Cafu websites

Post by Carsten » 2016-03-07, 11:41

Dear friends,

I am very happy to announce that after many years, our website has been completely overhauled.

Cafu's website has been largely unchanged since was implemented with Joomla back in 2008, so you can imagine how excited I am to update it. The formerly used "Firenzie" theme has held up well over the years, but new design aesthetics and technologies such as mobile devices, web fonts, HTML5 and CSS3 have drastically changed the way websites are built.

After many tests with WordPress, I found that most of its leading themes are made for people who cannot make even minor changes to their HTML, CSS or JavaScript code. The result is that many themes have become huge applications with hundreds of options. The feature overload auto-generates equally huge HTML, CSS and JavaScript files that take longer to load and process than most of our screenshots. The result is so bad that even more plugins are required for implementing compression, minification and cache management, some in turn coming with hundreds of options of their own, still increasing the complexity. (Note that this is not WordPress' fault, but that of the themes I tried. There are many excellent themes for WordPress, I just never found one that met all of my requirements.)

A new basis

Happily, after a long search a solution was found that turned out to be a blessing: A combination of
build the new basis for the main Cafu website.

Pelican is a static site generator written in Python, a scripting language that I've long been very comfortable with (and thus preferred it over Jekyll). Pelican requires some close reading to get started and to configure it as desired (the Cafu website is not primarily a blog, but has mostly static pages), but then it gets very natural and straightforward to use. Also very helpful is to have a great theme right from the beginning, which brings me to the next point:

Unify is a theme that is based on Bootstrap, and as such shares all of Bootstrap's virtues: Very well implemented mobile-first responsiveness, very broad testing and support, and code and ideas that I was already familiar with from other projects. And I also very much like how good it looks! Unify is actually intended for developing stand-alone HTML pages "by hand", but I'm sure that more often than not it is used in a framework that facilitates the creation of content pages while re-using the theme. The framework in my case is Pelican, and it was a natural and perfect fit!

New fonts

Among the many customizations that I made to the combination of Pelican and Unify was the choice of fonts. I didn't want to use the same fonts like everyone else (even though they're certainly attractive) and not have a mix of a number of fonts, but rather a unique and consistent look of good typographic quality.

My choice for the main font fell on Source Sans Pro by Paul D. Hunt from Adobe. I like it a lot, but there were also two small problems: First, Source Sans Pro is, at the same size setting, a bit smaller than other fonts. That's not really bad, but I had to tweak the font size in many cases, especially when it is used near glyph icons (such as in the forum) where the relative sizes must match. Secondly, while Source Sans Pro renders beautifully under Linux and iOS (I haven't checked others), in its basic form as downloaded from Google Fonts or Font Squirrel, it looks downright ugly under Windows.

The solution of this problem is more than enough stuff to cover several posts on their own, but in short, it is related to the way how Windows deals with font hinting as explained e.g. here. Thus I used the Webfont Generator at Font Squirrel, testing all available settings of the "TrueType Hinting". This resulted in a satisfactory result that you can now see here -- this post is set in Source Sans Pro with the recomputed hinting information for Windows. This is also why we don't load the fonts at the Cafu website from a CDN!

Last but not least, my search for the best quality for the new Cafu design also led me to Hack by Christopher Simpkins. Hack is a beautiful typeface for source code that can be installed both as a desktop and as a web font. It is very well readable in all situations and we use it at the Cafu website wherever monospaced text occurs.

Btw., I hope that we can use both Source Sans Pro and Hack for in-game rendering in the Cafu Engine soon. The font handling therein needs an overhaul anyway, and that would also be a good opportunity to update the fonts!


Finally, I have applied to above design changes besides the main website also to the other Cafu websites, as far as possible: With our Wiki / User Manual, this worked very well: The DokuWiki system made it easily possible to adopt all of the above features.
Our forums are based on phpBB and the theme is based on Elegance by Artodia. The fonts are shared, but re-using Unify was not possible. Our C++ and Lua reference documentation and our issue tracker Trac still use their old legacy designs, I'll get back to them later.

Redesigning the Cafu website was a huge fun and I enjoyed it a lot. The main website uses contemporary technology now and its contents have much been streamlined. While I will continue to tweak and improve it over time, I'm now very happy with the result!

As always, feedback and suggestions are welcome. I'll now dig back into Cafu Engine development again, which I'm very much looking forward to as well!
Best regards,

Who is online

Users browsing this forum: No registered users and 2 guests