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!
Conclusion
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!