Website for a Finnish MTB media, kuralappa.fi

Last updated on 
Screen capture from the live kuralappa.fi website front page

Kuralappa.fi project is probably the first commercial project I've done with WordPress where the articles are the center of the content - usually I make more interactive stuff 😄. Also it is the first project in ages where I did the design too.

Visit the website here: https://www.kuralappa.fi/

The process of making kuralappa.fi in a nutshell 🥜

  • A consulting call from the customer
  • First meetings
  • First design sketches
  • Refining the design
  • Coding
  • Meetings
  • Operational training
  • Customer creates the content
  • Final touches to the code
  • Going live

Never forget the customer

Always include the customer into the process as much as possible. Listen the ideas, understand the reasons behind them and bring in your expertise when and where needed. In the big picture, there is literally no downsides.

What I like the most, is to see how I can pass some of my knowledge on and make products that are really used. If a project like this was done without interaction, the chances for frustration, bad blood and literal project failure are high.

The Kuraläppä crew has been especially cool team to work with! ❤️

How the website design was made

I designed the website with the Adobe XD design software. With XD it was easy to demonstrate (prototype) how the site would actually look like and behave based on user actions.

The design had its inspirations from multiple different sources found online. The most important source of inspiration was probably the Field Mag 🏕.

For everyone whose work includes desigining UI/UX, I highly recommend involving the customer to the process by handing them a tasks like "Look for the best websites or apps for our next meeting.".

Prototyping the kuralappa.fi desktop view
Different prototype layouts from Adobe XD. Ads were one point that needed to be included in the design process.

Never forget "the mobile first"

As well known, mobile view is most likely the most viewed view on a website. The design process literally started from the mobile view, especially the navigation was thinked thruly. Instead of going with simple hamburge + link list model, we designed the mobile navigation to offer more.

Different versions of the mobile navigation

Technical solution

I used the combo I've found to be the best for me at this point:

  • WordPress
  • Custom theme with ACF Pro, Tailwind.css, Alpine.js, Swiper.js and this Cookie Consent
  • SEO handled by the Yoast SEO -plugin
  • Cacheing by Litespeed Cache
  • Classic editor and -widgets -plugins
  • Custom post type for the Ads
  • Git version control
  • Local by Flywheel for local development

Using this stack allows perfect balance between total freedom, performance and structured code that can truly be handed to any other developer. What lacks from the stack are linters and testing tools that would essentially make the code even cleaner and prevent errors.

🌶 Remember this: As you as an developer are not the end user, make sure that those CMS features are on point! Put some effort on keeping the admin panel and content creation views clean.

Performance

As usual, I aim to really fast results. How do you think I succeede this time?

Mobile performance results from the live front page. Major drags are by offscreen images from the carousel and image formats used (not WebP).
Desktop performance results from the live front page. Best Practices are drawn down by logs in the console and the non-2x images of the ads.

Participating into this project was also cool for me as an enthusiastic mountain biker - We made the first proper digital "newspaper" in the Finnish MTB scene! 👩‍🚀

Privacy Policy