Pat David Avatar
ABOUT ARCHIVE

darktable

Happy New Year!

Way back in May of 2017 I made my first commit to start a new project for some friends of mine. Seven months later and we were finally able to publicly push the results: a new website for the awesome folks at darktable! (I already published a post about this on the darktable blog.)

darktable logo

For comparison, the old website is on the Wayback Machine.

Why?

I think the first question for approaching projects like this should always be: why?* What is the impetus for wanting to re-design the existing site? For the darktable folks, there were a few reasons I felt compelled to address.

  1. Responsive
  2. Static Site
  3. Focus on Images
  4. Modern
  5. Comments

* Because I want to is a perfectly valid answer, but I find that a well defined reason will help focus efforts better.

Responsiveness

The old site used a theme that wasn’t built for responsiveness. As such, it wasn’t adaptable for mobile (or tablet) users. It did scale a bit, but the results were a bit odd in places and didn’t flow well in others.

Responsive darktable website views
Mobile, tablet, bigger tablet (or desktop)

This re-design allowed us an opportunity to build the site from mobile-first ideas, be adaptable to various screen sizes, and to look nice while doing it. We could have tried to adapt the existing site theme to work well in responsive situations, but some of the other reasons (see static below) pointed to a complete teardown and rebuild as being a better option.

Static Site

I’ve been a pretty big advocate for simplifying things online in general, and one of the more common ways to do this is to avoid dynamically generating websites if you don’t need to. This is actually most of the time in my opinion.

Generate your site content once and serve it up as static html files (and assets) from the webserver. This severely restricts the attack vectors for potential problems later. Usually the only place you need to worry is if there’s a problem in the webserver (Apache/Lightspeed/Nginx, if you’re using IIS then the problem might be that you’re using IIS…).

This also has the side benefit of making things much faster for you and your visitors. There’s no waiting for db queries and heavy scripting on the server - just HTTP requests and responses. Old school cool.

Images

darktable is an amazing piece of Free Software for processing photographs. So I felt that photographs needed to really be showcased on the website. There were some images on the old site, but they were either slivers or small thumbnails. This is an advanced photo processor - show off all those awesome images!

Most of the posts have much larger and bolder placement of lede images to help fancy-up the place.

darktable blog lede example image darktable blog lede example image darktable blog lede example image darktable blog lede example image
A selection of blog post ledes from darktable.org

I took it a little further and used the lede images as full-viewport background images at reduced brightness.

darktable background page image screenshots darktable background page image screenshots

As a small, semi-nerdy Easter egg in design I made the aspect ratio of the lede images 2.39:1. The founder of darktable, johannes hanika, comes from a background in cinema, and I wanted to pay homage to that a little bit.

Modernity

This is quite a bit more subjective, but I felt many other parts of the site could use a facelift to leverage more modern practices in layout, type, and white space. We were able to use some prettier fonts like Open Sans as well as bump the font sizes (variable depending on device), line heights, and white space. All to hopefully increase legibility and provide a more pleasant experience overall.

Comments

Back in April 2017 houz had to disable commenting on the site. They had over 21,000 messages in the spam queue, and another 2,600 waiting for review. This was simply too much for the team to deal with.

There’s an entire thesis worth of investigating how bad comments have gotten on the internet in general. Unfortunately this also removes serious and thoughtful discussions or exchanges that could be happening (thanks a bunch you trolls…).

One of the reasons I originally set up the Discourse forum for pixls.us was to a) give everyone a place to interact and engage for Free Software photography, and b) to serve as a back-end for comments on the main website. The folks at Discourse have done an amazing job bringing back a little bit of order from the chaos.

This was nice because it gave us two important things in my opinion:

  1. We can manage the comments and user accounts, not some third-party network looking to make a buck by selling user data (Google, Facebook, Twitter, Disqus, etc…).
  2. We can actively combat spam problems in a single place, with more dedicated people available to help. On the bright side, Discourse already has robust tools to deal with spam and we’ve been lucky so far.

Not long after setting it up originally, the developers pushed the ability to use the forum as embedded comments in more than one site. This meant we could now use discuss.pixls.us as the commenting back-end for multiple sites. We first tested this by integrating it for comments on the digiKam website and things went quite well. From there it was a no-brainer to use it as the commenting system for darktable as well, so we created a darktable category on pixls just for them.

Thanks

Finally, I want to say a great big Thank You! to the darktable team in general for taking the time create and maintain such an awesome piece of software. Also, a big hug to Tobias Ellinghaus (houz) for putting up with me and doing so much to get the new site migrated and running (he’s responsible for migrating all of the old posts into a markdown format for the new build system).


Share this on: Google+ | Twitter | Facebook