All articles

The new Codeatelier Website

As you might have noticed already, we’ve got a new website. Not because we don’t have enough work to do, but because the old one didn’t represent us correctly anymore.
Like we did, the web enhanced. There are more and more devices on wich we want to be represented in a correct and fast way. Our former site lacked those qualities.
So we quickly discarded the novel idea of the 2mb heavy fullscreen hero image.

Our way

At first we thought about our website’s goal. No, we don’t just want to show off our nice team portraits ;)
We defined two target groups:

  1. Potential clients
  2. Homee users, which want to learn more about us

In our next step we had to answer what we wanted to communicate to those groups.

Potential clients shall perceive us as an agency in the field of the internet of things. As contractor and partner we offer everything from concept to implementation.
Homee users shall see who’s behind their digital roommate.

Concept

From the beginning our goal was to develop a light, clear site. You’ll get the most important information right at the homepage – upfront with a contact form to provide a fast way to get in touch. Our team liked the idea of a page to introduce themselves. Maintenance of this page should not lead to to much work because it is our goal to grow and gain new employees. Applications go there ;)
The second and last menu item is our blog. We see blogging as a great tool to reflect on our own work, to keep homee enthusiasts up to date and to show our know-how in different areas. We will regularly post articles with details from within concept, design and development.

scribbles

To shape the reading experience as positive as possible, we try to answer the most important questions of the reader straight at the top of each article:

At the bottom of each article the author has the possibility to insert recommended articles to the reader. Later we aim to implement an automatic system based on tags added to each article.

Implementation

In two areas of our new site we needed the ability to easily add and edit pages:

Because of those requirements we had to use a CMS to implement our site. Due to the light nature of the site we didn’t want to use a heavy and for our needs exaggerated CMS. Our choice was Kirby. It is file based and operates without a database. However Kirby offers an enough configurable web panel to edit our sites content. You’ll find plenty about that in the extremely great Kirby Docs.

The blog consists of the folder “Blog“ with subfolders for each article. Located in each of those subfolders is a text file, which contains the blogpost’s text and metadata. Images for the article are in that subfolder, too.
All the logic happens in two templates – in the “Blog-Overview“ and the “Blog-Article“ template. The overview template looks for subfolders (=articles) and displays all of them with title, metadata and excerpt on the overview page. The article template fetches all data of the text and image files and displays the post on the article page. This template converts all markdown to HTML for the right representation. To add a new article is as easy as pie. You create a new folder/site (depends on whether you are in the file system or the web), fill out fields like “Title“, “Author“, “Date“ and “Text“ and you’ve got your new blog post.

The team site follows the same logic as the blog only there’s no employee detail page. The template fetches all information from the subfolder for each employee and displays all of them on the team page. Add, edit or rearrange employees is really easy, too.

At first, the whole site was hardcoded in HTML and CSS and in a second step converted into a dynamic site with Kirby and PHP. Some parts (“Blog“ and “Team“) are completely editable and extensible. In the other parts you can only change the text content in the web panel or text files.

Personally as an information designer with little programming knowledge I have long been looking for a CMS that let’s me easily convert completely individual designs into CMS templates. In Kirby I found exactly this <3

Have fun with our new site. We would love it if you decide to come back.

Tweet this article

Share this article on Facebook