Case study – petason.hr

Cover – a little different from the typical In designing the cover, we were guided by several objectives: It was extremely important to align the design with the corporate identity … More

I thank you for your professionalism and cooperativeness

I really like the website, both web and mobile versions. I can‘t stress enough how thankful I am for your professionalism and cooperativeness, I was lucky enough to get your offer to create the website at the right time when I was looking for someone to do it. It was great to collaborate with you, I will gladly recommend you further.

Petra Bokan, Sales Manager at Petason d.o.o, petason.hr

Case study – petason.hr - logotip

Petason d.o.o. is one of the leading meat industries in Croatia that reached out to us with a wish to refresh their web presentation, adjust it to new technologies and trends, and in such way get closer to their target audience. Considering the credibility that this company has, but also the customers which include some really big names, we thought that only a website tailored to their business will properly present them. Read on to find out what that meant in their case.

Cover – a little different from the typical

In designing the cover, we were guided by several objectives:

  1. It must not resemble the homepages of most websites we encounter on the internet today,
  2. It should not be overloaded with content (this was one of the first wishes our client Petra made),
  3. It must be coherent and attractive,
  4. It must be interesting.

It was extremely important to align the design with the corporate identity of Petason d.o.o.. The elements of the website follow the colors of the logo (blue and pink), with the addition of certain neutral shades. We decided to use a series of animations on elements, which appear on hover (mouse movement) or when elements appear while the user scrolls through the website.

We decided to divide the homepage into several important segments, which will make the most sense to the user, and at the same time raise the credibility of the company behind this website.

Header Slider

The homepage slider does not have a typical promotional function in terms of presenting a special offer, but we have used it to emphasize the most important advantages of Petason ltd. – which are the following:

  1. This is about the number one meat industry in Dalmatia,
  2. which has a very wide range of products,
  3. which orders are delivered within 24 hours.
Homepage photo slider

We had several challenges when implementing the homepage slider:

a) We have installed an element that shows how long each slide is active before it is replaced by another (a line that is filled with another color), and it is a custom element that we have programmed for this purpose. Otherwise, when making a photo slider, we do not have a practice of using ready-made plugins, which there are really a lot of on the internet and are integrated with the web page via a simple installation in the WordPress interface. It’s not that we want to go a more complicated way, but the thing is that you have to be careful with each plugin, both in terms of compatibility with other elements of the website and due to problems with later maintenance. That’s why we prefer to implement our own solutions, so we can also say that the homepage slider on petason.hr is a completely customized thing, made to measure this business.

b) The second challenge that we had was presenting the photograph in combination with text. Over time, we have learned that few clients accept that their photographs don’t shine in full glory, rather, most struggle to reconcile with the fact that the photograph is “draped” with colors in order to “calm” it and make it a good background for the text, which would then be clearly presented. In the case of the petason.hr website, we didn’t even attempt to disrupt the look of the photographs in this way, but rather we sought ways for them to remain in their original form while the text on them was still clearly presented. We used the CSS technique of partial dimming of the photograph, being careful to precisely determine which part of it will succumb to this effect, i.e. that the dimming is only done where it is really necessary for the text to be readable. This is particularly tricky because the website is responsive, all slider elements (photograph, text, dimming element) are dynamic and show differently depending on the resolution and size of the screen. However, with a few suggestions from our client Petra, we managed to dose everything properly – the text doesn’t interfere with the image, the image doesn’t interfere with the text.

Maybe these two points sound like minor details that don’t need to be emphasized, but we do it precisely because these kinds of details are responsible for the client’s satisfaction or dissatisfaction with the final impression and result.

We also want to emphasize that the client significantly contributed to the website building project – with her choice of photographs, wishes and ideas about their positions, as well as some other suggestions that were related to the visual aspect. Such a collaborative approach to the project is a sure path to a good result, client satisfaction, and eventually a good user experience. Clients are in a way the first filter and an indicator of how the website will fare with an average user, so it’s important to hear out suggestions and take all criticism into account.

Production assortment

What was missing from the previous company website petason.hr was a clear presentation of product groups on the homepage, which was one of our first suggestions when the project was contracted. Therefore, we insisted that users already be familiar with the most important product range on the homepage, which will be the link to the internal pages where this presentation will be more detailed.

Group product presentation on the homepage

We are proud of this part of the presentation because we have circumvented typical elements – classic static blocks of text and images that can be seen on other websites with a similar offer. Instead, we created an interactive content exchanger, where the image is in the foreground (because a picture says a thousand words :-)), accompanied by a title, description and a button that leads to more information about each of the two main product groups. We have not forgotten to guide users to the general presentation of Petason d.o.o. products – through the button positioned to the right of the content exchanger, as we believe that there is never too much additional information.

Here is a presentation video that we decided to activate via a button (also to the right of the content switcher), which opens in a modal window. This saved us some space on the homepage and kept the page neat.

Food quality and safety

As we were thinking about the content, it seemed extremely important to emphasize on the homepage that Petason d.o.o. really takes care of this aspect of its business and show the certificates they have. The challenge was to present all this in an interesting way because, honestly, who reads boring texts about hygiene conditions and laboratory tests?! So we decided to put the picture in the foreground again, emphasize and animate the “entry of certificates into the frame” and not to exaggerate with the length of the text. We provided a button that leads to internal pages on the subject of Quality, where interested users can get all the necessary information.

Food quality and safety

Special offer

Petason.hr is a corporate website where there will not be much change in terms of content in the future. You often see news displayed on corporate websites, and you may have noticed that these news are sometimes old, even several years old. This practice creates the impression that the business is dull (nothing new to post) and that is exactly what we wanted to avoid when creating this website. Considering that Petason d.o.o. currently has 2 special offers, and will probably have more in the future, we have provided 2 introductory modules on the homepage, which lead to inner pages with more information. These are not the typical news that are displayed in these positions automatically (e.g. latest posts from the News category), but segments that the client has full control over i.e. they determine which pages will be displayed in these positions.


As always, we consider social proof to be a crucial part of any good marketing presentation, so on the website petason.hr we provided a section for references. The client accepted our suggestion and on that part of the website it’s possible to see the logos of some of their customers. We provided the possibility to show a larger number of logos, we believe that the company Petason d.o.o. will use this opportunity and in the near future boast some other partners as well.

Display of references

Inner pages

Within the inner pages there are several interesting points we want to highlight.

In terms of content structure, WordPress recognizes the concept of parent pages (which work similarly to categories and subcategories), however, there is no defined look for them on the frontend – and this had to be flawless in the case of the petason.hr website, given their content is very broad. Therefore, we designed the look of the parent pages, following the visual of the rest of the website.

Display of homepage content


As previously mentioned, it was extremely important to our client to make use of as many photos as possible in the presentation, so we anticipated that each inner page would be adorned with a full-width photo in the header. The client’s wish was to allow them to have a unique photo on each inner page, which we gladly fulfilled and extended the standard WordPress capabilities (enabling easy photo upload in the interface of each inner page).

Header of internal pages
Editing the header in the interface of each internal page (image upload module)

Contact page

We do not want to present the contact page (see it here) as a hard innovation, since you may have encountered this kind of concept before. However, it is not something seen on every corner, it is practical for the user, so we think it is worth mentioning as a specificity of the petason.hr website.

So, the Google Maps card with the company’s location spans the entire width of the website header, and the “body” page is reserved for textual data. On each internal page we have provided the possibility of displaying a contact form, because we are convinced that contact tools should always be at hand for the user. On the contact page this makes even more sense, so in addition to the textual contact data, we also have a contact form for quick inquiries here.

Appearance of contact page

Content management and expanding standard WordPress capabilities

Previously, we mentioned that we have expanded the standard WP capabilities by adding a module for uploading photos to the header of each inner page and customized the display of parent pages.

No, as always, we went much further than that – we integrated our own framework in Croatian language, by which Petason d.o.o. can change most of the content on the homepage and thus be quite an independent administrator of its website.

Besides the intuitive interface that we expanded from the standard WordPress options, we provided the client with video instructions for its use, thus fulfilling one of the most important requirements of any of our projects – independence in managing their own website in the future.

Multiliple languages

At the start it was agreed that the website petason.hr should be bilingual, which means that we had to anticipate several things in the beginning of the project.

  1. English content should have its own input frame that will work properly on the frontend of the website, so that there is no mixing of Croatian and English versions of the content.
  2. The English content client must be able to edit as easily as Croatian in the web interface.
  3. English content should be able to be optimized for search engines regardless of Croatian.

All this was made possible by the great WPML. For developers it can sometimes be a challenge, as it has extremely advanced capabilities and is technically very complex, but once set up correctly, it poses no problem for the website administrator to use it.

In the screenshot below you can see how the background interface of the petason.hr website looks with the English content entered (simple editing, just like with Croatian).

Content of english cover page (backend)


The conclusion can be summed up in one sentence – the client is satisfied with the final result, so are we. What follows for Petason d.o.o. in terms of their website is to work on its dynamism and to keep it alive. This will be achieved with additional content for the already foreseen subpages (we can see a lot of room for improvement here), and we believe that over time and as needed, they will create new sections – interesting to their target audience.

We would like to take this opportunity to thank our client Petra for her trust and kind words about our cooperation, and wish Petason d.o.o. all the best in their future business – even though this is just the beginning of our collaboration and there is no need for it to sound like a goodbye. 😉

We like to believe in the following – once a client, always a client.

Hire your Codeartist

Looking for a development of your own project?

Is your agency looking for a partner?