Queens of Kalmar

  • Type of project: Website
  • Role: Designer and developer
  • Languages & tools: HTML, JavaScript, PHP, Sass, Bootstrap, WordPress, Node.js, Gulp.js
  • Published: 10/02/2020

Background

For three years in a row, I have had the honor of creating the website for Queens of Kalmar, a non-profit association in Kalmar that works for a more equal society, and organizes an annual gender equality festival in Kalmar. I am personally very committed to their cause so, of course, I did not hesitate to help them out. During my work with the website, I also became a member of the association and have helped them out as a volunteer in several different projects.

Workflow

The client did not have a website when they first contacted me, and they didn’t really have a precise image of what they wanted their website to look like, so I had a lot of freedom to create something beautiful and interesting. I started by sitting down with some of the board members and going through what they wanted the website to provide for their audience and what kind of design appealed to them. They already had some graphic material done by a professional art director, so we decided to keep the logo and color scheme from that.

Originally, Queens of Kalmar was only a festival (not an association) and because of this, the website would get a lot of traffic before and during the festival week. However, before the third annual festival, they also started the non-profit association with the same name and wanted the website to represent both the association and the festival.

For the first two years, I designed the website in WordPress, using the Elementor theme and a myriad of different plugins. However, when I was re-designing the website before the third year (and also adding information about the newly formed non-profit) I decided to create a theme from scratch, which allows a lot more freedom than using someone else’s theme.

Under the hood

The theme is built-in blocks, allowing re-use of smaller components in other projects. I rely on the Bootstrap framework which I deliver through a CDN (content delivery network) for fast performance. I try to make as much use of the Bootstrap framework as possible (e.g. by adding padding and margin as classes) and only using custom CSS (via Sass) when needed. This is because the Bootstrap framework might already be cached in the user’s browser and make the site load faster.

I use Advanced Custom Fields Pro to create dynamic content on the website. I prefer ACF because it allows me to create a rather straightforward and self-explanatory interface for the client when they log in to WordPress to edit the website’s content themselves.

Visit website