Case Study: Habita

Thu, 20 Apr 2017 00:00:00 +0000

Habita is an open and transparent coworking hub based in Istanbul, Turkey. Because a new kind of space needed a new kind of site, Habita built theirs on Kirby, putting its rich API and flexible templating system at the service of a bold, information-rich design. Designer L Daniel Swakman walks us through the nuts and bolts of this breakthrough project.

What makes Habita unique?

The founders of Habita all left corporate jobs to realise their vision of a place where people could come together, pool their knowledge, and hold events — a special place for community and interaction. They wanted the space and the site to reflect these principles of flow and harmony in a modern and culturally meaningful way.

We built Habita’s brand on the rule of thirds. On the site, for example, the logo always sits at the intersection of mathematically arranged colour planes — which is easier said than coded, especially on a responsive page! Content flows freely from one part of the site to the next, reflecting deep into the code of our commitment to fostering collaboration. Kirby’s API was the gateway to this vision.

How important is the site to Habita?

The site is our main interface with the outside world and the primary channel through which Habita reaches out to new members. It is also where “habitans,” the many and diverse members of the community, express their vision.

As a new space, it needed to attract potential members right away while laying the groundwork to host a great deal of content — member pages, blog posts, past and future event photos, and the many unforeseeable artefacts of growth.

Why choose Kirby in the first place?

As an independent designer, I have been using Kirby for years. At a basic level, the back-end is simple enough not to claim too much of my time, and even my basic knowledge of PHP allows me to craft original templates that precisely reflect my vision. Habita’s striking design demanded complete control over the structure of the pages.

Furthermore, not having to deal with a database saves me a lot of grief — and money. I also know that my clients will find their way immediately around the Panel, even when their technical knowledge is severely limited. They are in complete control of their content, and that is a win for the both of us.

Of late, I have been deep-diving into the API and its features. To name but one, Content Representations make it easy to import data from anywhere, and I used them extensively on the Habita website to inject blog posts, member information, and event details throughout.

What is the most challenging aspect of building such a site?

Growing is always a challenge! Thanks to Kirby, we were able to expand Habita’s website from a simple one-pager listing all the blog posts to a full-on platform — all the while retaining every bit of the modularity and simplicity I had originally envisioned.

Now that all the modules are in place, the site can be refactored right from the Panel without any extra development work, simply by assembling the modules in new and original ways. As a vision, it is extremely challenging to implement, as it requires devising a visual logic, as opposed to coming up with a collection of static states. Kirby was designed from the ground up for such advanced content management strategies.

What is it like to design on Kirby?

Kirby’s custom fields and straightforward Panel make it possible to start outputting tailored content right away with a few simple PHP commands. No time is lost in coming up with placeholders and intermediary states. This flexibility makes it easy to convert mockups into functional templates from which I can present the client with as little or as much granularity as they require — or can handle! This is especially useful when a project evolves midway through its development.

Every time I design a site on Kirby, I improve my workflow. As a result, I am now confident in my ability to dive right in and iterate quickly on my ideas. This means faster turnaround times for my clients and greater flexibility for me.

What are your favourite Kirby plugins?

I rely on Visual Markdown by Jonas Doebertin and Uniform by mzur. Contact forms are not only very repetitive to design and code, they also happen to be quite painful and difficult to test across the wide range of devices that are in use today — not to mention the seemingly infinite variety of names, email addresses, and character sets that users may legitimately throw at them.

Are you active in the Kirby community today?

Not as much as I would like to be. I do use the forums a lot — they are a great reference! — but I have left only occasional comments. I was drawn to Kirby by its simplicity, and I do not consider myself an expert on its inner workings or on PHP as a language. I’ve learnt to bend it to my will over time — that is all! Still, one lives and learns: who knows what the future might hold?

Thank you for your time, Daniel!

Meet Daniel …

L Daniel Swakman is a ‘Full stack’ web & UI designer, passionate about creating meaningful and legible content experiences through design. Originally from Amsterdam, previously in Istanbul, ocasionally London and currently in Berlin. Europe basically.

Graduated as an architect+urbanist from Delft University of Technology in 2011, found his way into graphic and web design through the opportunity to affect and improve many people’s digital life. Acting in this world means an inevitable link between design and code.

Currently working (part freelancer, part in-house) on UI design of applications, branding & identity, and the overlap between analog and digital graphic design.

Follow Daniel on Twitter: @ldanielswakman

Kirby Kosmos Episode 9

Sun, 19 Mar 2017 00:00:00 +0000

I just counted 28 new plugins and extensions since our last Kosmos episode. Unbelievable! I can't possibly list them all here, but if you head over to Jens' and John's plugin repo, you can see for yourself. Also, we had well over 210k page views in the Forum last month and countless new websites powered by Kirby. What a community!

Powered by Kirby

Its always inspiring to see what others are creating with Kirby. This month’s picks are again very different and very unique:

Eindhoven
Urban Development
Chris Cubellis
Product Designer
m&p GmbH
Public Relations

Kirby Plugins

Out of the many new plugin mentioned above, I have selected a few you might like:

Pedro Borges, creator of the popular AutoGit plugin, has come up with two new plugins. Create a Tachyons-styled, human readable XML sitemap for search engines with the XML sitemap plugin or use the Meta Tag plugin to create Open Graph and Twitter cards meta tags for your site in a simple way.
The ImageOptim API recently came out of beta, and now Bruno Meilick has created the Kirby Imageoptim plugin that leverages this API via a simple file method. He also just published a couple of other plugins, including a Kirbytag to generate various random values.
Compress Kirby's output with Jurriaan Topper's Kirby Compress plugin. It strips all whitespace between html tags but leaves the whitespace inside

Kirby news and tutorials