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 technological 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 lightweight, file-based CMS as an alternative 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
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 workarounds 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 implementing 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:
- 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.
- 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
- 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
assholesbad guys/girls, to hack your site.
functions.php3 to turn off features, instead of enabling them.
- 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.
Nevertheless 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. Synchronizing 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
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 flexibility, 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 customizable 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.
Extensibility & Configuration
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, configuration happens mostly within a configuration file. Another handy feature at this point: You can have a global configuration file and specialized ones for your test server and your production server, which are automatically 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 milliseconds, 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?
I am a big fan of using tools, that empower people who publish content on their own webspace to
keep make the web as decentralized 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 transparently, 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 documentation 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.
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.
Daan Jobsis (2012): Retina revolution, Scott Jehl (2012): Compressive Images, Hugh Spiller (2012): Can bigger images be smaller? ↩
gettextfor translation. 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. ↩
In every WordPress theme, there is a file called
functions.php. This file usually contains a mix of theme-specific configuration instructions combined with additional theme-specific template functions. ↩