Behind the brand Ikosoft stands the company Merlinka d.o.o., which has been our long–term client (practically, we have been “tracking“ each other since our beginnings and we have developed several web pages for several of his brands). Our client Ivica Pavlačić (owner of the company Merlinka d.o.o.) a few weeks ago put us in front of a very interesting challenge:
- We had to replicate the design and concept of the Ikosoft brand’s base / foreign website (the example should have been the website www.ikosoft.com/en-gb/) which it represents, enable it to have very specific content frameworks, and most importantly – make sure that without any programming knowledge he can manage all the specific segments of the homepage and inner pages itself.
- The only way to achieve this was to create a custom website, extend the native capabilities of WordPress and create specific blocks for content editing by extending the basic capabilities of Gutenberg.
WordPress and Gutenberg – the perfect combination for maximum flexibility, speed and stability.
Most WordPress websites and stores do not justify the use of a content editor, however, if one is used, we suggest using Gutenberg. The project we describe below gave the client immense freedom to build the content, define content frames, and even have a big say in the design and concept of the homepage and internal pages – and the use of Gutenberg significantly sped up the project, thus bringing financial savings. And most importantly, it brought the expected satisfaction to the client.
Gutenberg Content Editor/Block Builder is part of the WordPress core, making it maximally compatible, fast, and stable – in contrast to many other page builders. On the other hand, Gutenberg is developed by Automattic (owner of WordPress) with huge support from the programming community, making it definitively the most advanced content editor in the world. Gutenberg is built in React, incredibly fast, with great extensibility options.
Anyway, through native WordPress and Gutenberg we enabled our client to edit all front end elements on their website without any programming knowledge. With the project we also provided a video tutorial that helps all of our clients to learn the basics of content editing and become successful editors of their websites and stores.
For the construction of the homepage and content, mostly custom-created Gutenberg blocks and patterns were used. Here is how it looks:
Content switcher header (slider)
Advantages Segment
Gutenberg blocks for clients mean a huge time-saving – these are, in essence, predefined content (but also functional) frames that can be inserted into the page flow with one click, and if necessary, only replace the content without needing to edit the frame structure. This saves time, but also ensures consistency of presentation and design.
Carousel slider
We created a so-called carousel slider, i.e. a content switcher with the display of more than one element in one view, as a custom block, and gave the client the option to choose from various design functionalities:
We could go on and on about the story with blocks, as we have created many more customized and grouped templates for the client. The point is that the client, with Gutenberg in combination with the development of a custom WordPress theme, has gained a great deal of flexibility in creating content which is displayed consistently, responsively, and attractively across the entire web.
Some additional interesting elements of the website
Performance and Security
To make the website as fast as possible, we have done the following:
- CloudFlare integration – CloudFlare is a CDN network with a range of features, including ultra-fast servers with locations around the world, which means content from a website is delivered from the closest location to the user. CloudFlare also has its own page caching, meaning that visitors are served static content, making the loading of a website almost instant. CloudFlare provides many more tools to speed up the performance of a website, but they are outside the scope of this case study. In terms of security, CloudFlare has advanced firewalls (with various filtering options), dedicated tools to block malicious bots, IP addresses, DDoS protection, and much more.
- Using the modern WebP format for photos, which can reduce the size of photos by up to 80% in some cases.
- Lazy-load images – deferred loading of images outside of the viewport, significantly reducing server load and speeding up the web page.
- Compression and minification of all JavaScript and CSS files
- Configuration of page caching (serving static files instead of PHP files)
Conclusion
The website ikosoft.com.hr is vivid, modern, and yet simple to use in its concept and design (the client confirms this with his video statement). The biggest challenge was to deliver a website that would match the Ikosoft brand’s main website, where certain, very specific content frames had to be programmed in such a way that they were functional, yet simple to use for an administrator who has no programming knowledge.
It’s not bad to have a guideline, however, it’s difficult to not have much room to maneuver, so we are of the opinion that we have proven with this project that we can cope with even the most unusual demands, and have shown our versatility with WordPress and Gutenberg.
Our client Ivica says that we succeeded in that, for which we are extremely satisfied.
We thank him for the trust he has placed in us over the years and we look forward to all future projects with him.
