Springe zum Inhalt

Designing for »the worst client« (aka yourself) is always a big challenge. Usually there is no hard limit in budget — neither in money, nor in time. When I uploaded the initial version of my portfolio website made with WordPress, my happiness about the result did not last very long. The design was only a temporary solution, because my own Corporate Identity was not finished yet. I knew that I was able to fix that over time, but on the techno­logical side, there were a couple of annoyances, that made me think a lot about my current web design workflow. This article is about my discovery of Kirby, a light­weight, file-based CMS as an alter­native to other established solutions like WordPress.

I have to admit at this point, that I didn’t follow any proven method to get this project finished, it was rather created by playing with design and code. Usually, I tend to use Photoshop (yeah, I’m kinda old school sometimes) for web design, because I think that designing in the browser makes me see the design too much from the technical perspective, which limits my creativity. But in this case, It was completely clear that I wanted to have something that uses a monospace font and the least amount of decorative elements as possible. So designing with code seemed to be an acceptable option in this particular case.

Why I Had Choosen WordPress

Overcoming Limitations

Almost everyone has heard of WordPress and every web designer probably knows that it is a CMS software with a strong focus on blogging. I switched from REDAXO to WordPress the day I discovered the Advanced Custom Fields (ACF) plugin, because it allows the developer to create custom forms for different types of content. When I designed a my bachelor thesis using InDesign (2011), I was wondering all the time: »Why do most website layouts look so boring compared to print?« While there was and is no universal answer to this question, I think it is connected to the design of our technology. For example: The typical WordPress template only had a single content column at that time or used some ugly worka­rounds to create additional content areas like a header slideshow. But with ACF, WordPress becomes a very versatile system, that can surpass those limitations.

The Ugly Parts

Compared to other CMS software, the community of WordPress developers is rather large. In most cases, it’s easy find a solution for almost every question or problem you have when developing a website with WordPress. There are a ton of plugins, widgets, snippets and themes at your fingertips, but sadly, the quality of those resources varies a lot.

While I really like the admin panel’s interface design and how fast it is keeping up with by imple­menting tidbits like drag-and-drop upload of image files or support for High-DPI screens, there are — on the other hand — a lot of downsides about WordPress:

  1. Image Resizing: WordPress resizes images only on upload by default. This might have been a good-enough solution in the days of desktop-only websites. But nowadays in the age of responsive design, there is a need for a lot different-sized versions of every image. For example, this site has roughly 3 – 4 sizes for every image file plus a High-DPI-version for each of those.1 It is possible in WordPress to define additional image sizes, but if you do that, uploading an image easily takes 30 seconds or more, which makes editing a pain in the ass. Additionally, a lot of those resized images are never used and only eat space on your server. If you change one of those sizes or switch to a different theme, you need an additional plugin to recreate all resized images.
  2. i18n: There is no support for multi-language websites out of the box. This can be fixed by … guess what? Another plugin! I used WPML, which works somehow, but is neither pretty nor free. And it also adds a meta tag to your frontend code, telling its version to the client without asking.
    Though the admin panel of WordPress is available in a variety of languages, choosing anything else but English comes at the cost of a heavy performance drop.2
  3. Security: Due to the fact that WordPress is the most popular CMS software, it also attracts a lot of attackers. This forces you to update it very frequently. And also, WordPress includes its version by default in a meta–tag, which makes it even easier for some assholes bad guys/​girls, to hack your site.
  4. Bloat: Using WordPress always feels like using bloatware. In a recent release, it startet to include some JavaScript-Code on every page for Emoji-support. While this may be nice for some blogging-contexts, for most users this is certainly unnecessary. Also, almost every plugin you install loads another JavaScript and CSS file on every page. You can tweak those things here and there, but it does not feel right to include a lot of code into your functions.php3 to turn off features, instead of enabling them.
  5. Performance: Well, this results in the most awful thing about WordPress: its poor performance (especially when keeping in mind that is used by a lot of hobbyists who are on cheap hosting plans). Sure, there are a lot of caching plugins, whose settings pages often contain dozens of optionas and seem to be overly complicated. I know WordPress very good and I still don’t get how exactly most of those plugins work — if they work at all. For every page request, WordPress initializes a lot of stuff I never use, from widgets to comments. On shared hosting, the server’s response time often exceeds 500 ms.

Final thoughts on WordPress

While the preceding lines may sound like a rant, I don’t hate WordPress. When I was studying Design, I gave tutorials to other students and taught them how they can make their own portfolio with WordPress using custom themes. And while none of them had ponderable experience in programming, most of them were able to achieve good results in comparably short time.

I think, the problems listed and described above are resulting from the fact, that WordPress ist just made for a different group of users. Although, Automattic (the company behind WordPress) makes money with their hosted platform WordPress​.com. Obviously, the software follows their business needs, which may differ from my needs and my philosophy as a web designer/​developer doing client work.

Hello Kirby

Because of the reasons listed above, I had been searching for an alter­native to WordPress for some time already, when I finally stumbled upon Kirby. The philosophy behind the CMS could be described like the complete opposite of WordPress in many aspects. When setting up a project with it, one does realize very quickly: Kirby is not for everyone. To work effec­tively with the software, you need at least some basic programming skills in HTML, CSS, PHP and probably in JavaScript. While WordPress tries to provide as much as possible without touching any code, Kirby acts more like a boilerplate or framework, intended as a solid foundation for your website. There is no real default theme, just a simple demo site, which serves as a starting point.

Never­theless does it provide a nice and clean API, which looks similar to jQuery. Whenever you’re working on a typical website for a small company, this allows you to stay focussed on your design and your frontend code. Synchro­nizing with a staging server is also quite easy, because there is no database you need to take care of. Everything is just stored in a folder structure. In my daily routine, this became very handy, because editing can be much faster sometimes, if you open content files directly from the Finder (or, if you’re a command line hero, you can use nano or vim). For sure, there is also an admin panel, you can use!

Custom Fields for Custom Websites

Except for a page title, there is no mandatory field for any page in kirby. The fields for every template are described in so-called blueprints. That means, you can, for example define title, text, thumbnail for a portfolio page or title, text, publishing date and excerpt for a blog post. This allows great flexi­bility, although it is not so advanced like WordPress in conjunction with ACF. But in most cases, it will suit all your needs. There are also fields for repeating content, if you want to implement a slideshow or something else more advanced. My approach changed from striving for a layout builder to fit every use-case to customized templates for particular content pages.

When it comes to content-editing, Kirby is not too opinionated and allows you to choose between a bunch of different options. I bet most Kirby users prefer Kirbytext, an extension of Markdown with additional and completely custo­mizable tags, so-called Kirbytags. IMHO, the best writing experience is achieved when installing the Visual Markdown Editor plugin, which provides a decent interface for editing. But If you prefer, there is also a WYSIWYG editor available.

Exten­si­bility & Confi­gu­ration

Kirby supports multi-language websites out of the box, so there is no need for an additional plugin for this case. The included field types reach from a simple text inputs to select boxes, date-pickers and many more. There are also a lot of additional third-party fields available. All in all, there are far less plugins available, than for WordPress. As the current version (2.2) does not support custom admin pages yet, confi­gu­ration happens mostly within a confi­gu­ration file. Another handy feature at this point: You can have a global confi­gu­ration file and specialized ones for your test server and your production server, which are automa­tically loaded depending on your site’s domain name.

Performance & Caching

One of the most stunning »features« of Kirby is it’s amazing performance. A simple page only needs a couple of milli­seconds, a more complex page like this one is still delivered in under 200 ms on my local machine. If you turn on page cache, it becomes even faster, almost like serving static HTML pages. Within the last years, performance has been a big topic within the web designer/​developer community. How much can the »best« website be worth, if a slow CMS lets your users have to wait several seconds for a page to load?

Conclusion

I am a big fan of using tools, that empower people who publish content on their own webspace to keep make the web as decen­tralized as possible. If you visit the website of Kirby’s creator Bastian Allgeier and read his thoughts, you notice that he has a similar attitude towards the evolution of the WWW, as I have. While a self-hosted WordPress site fulfills the same demands, I prefer the structure of Kirby which doesn’t lock you in. Everything is stored trans­pa­rently, so you are able to move your content to another platform without too much hassle.

Writing frontend code for responsive websites is already complicated enough, so if you’re a typical web designer — with some decent knowledge about how to code — a CMS like Kirby allows you to stay focussed on the things that really matter to you (…and which are probably design and frontend code). The documen­tation is still in development and could be more complete, but as far as I know, the team behind Kirby is constantly working on this. I am very excited about the developments we are going to witness within the next months and years and which direction Kirby will go. For every upcoming project, where I think Kirby is suitable for, I’m going to suggest it to the client as Kirby is now my CMS of choice.

Last, but not least: Creating and editing websites with Kirby made web design and especially development an enjoyable task for me again. It always feels like I am in control of what I am creating. when you look at Kirby’s showcase, you see a lot of great websites. Most of them feel like developers and designers enjoyed the process of creating them as I did with this site.


  1. I serve retina-optimized versions of all images with a higher compression, than the "regular" version. On high-density screens, pixels are so small, artifacts are harder so recognize, so JPEGs can be saved at lower quality to save lots of kilobytes, resulting in faster websites — especially on mobile.
    Further reading:
    Daan Jobsis (2012): Retina revolution, Scott Jehl (2012): Compressive Images, Hugh Spiller (2012): Can bigger images be smaller? 

  2. WordPress uses gettext for trans­lation. That means, that the original language strings are included directly into the code. I compared the performance by changing the interface language: When set to German, page generation became much slower, while gettext took about 30% of total script execution time. 

  3. In every WordPress theme, there is a file called functions.php. This file usually contains a mix of theme-specific confi­gu­ration instructions combined with additional theme-specific template functions. 

Wird geladen ...