How we created our new website

Learn how we created our new site, how we improved it, what’s new, and why is our new site better than the previous one.

Website as company presentation

Our website serves primarily as a presentation of the entire company and its services, which is why it should reflect our values – modern technologies, user-friendliness and visual attractiveness for the end-user.

However, our old site wasn’t able to fulfil some of these points anymore and that is why we got the request to redesign it.

New design

When creating our new site, we set a few goals that the new site should meet. These goals were:

• faster web response
• faster and more agile mobile responsiveness
• better SEO preparation
• blog section

CMS selection

A content management system is a tool that allows you to manage the content on a website. At QBSW, we have been using WordPress internally for years and we also use it as a backbone for our simple web projects. When choosing a content management system for our new website, we went with WordPress for several reasons such as clear administration, simple and easy extensions via plugins, open-source and SEO friendliness.

Our next step was choosing a framework. Should we code our own template or use one of the ready-to-go templates? Using a template can significantly speed up the creation of the website, which is why we decided to go with this solution. We chose the Salient template, which was the best fit for our requirements. However, we subsequently bent and modified it to suit our requirements.

Let’s go back

The initial plan was to visually improve and speed up our original website. We have been working on the site for several months as a side project with a low priority. Around November, the site was almost ready with its original content structure. However, our plan changed a little after the arrival of our new colleague, a graphic designer.

His arrival was probably the right impulse for a complete overhaul of the website and the creation of new elements and parts. We scrapped the site, that was already partially finished last November, and we started all over again from scratch.

Graphics and elements

The advantage of the Salient template is that it has an extensive library of built-in elements to use on your website. This is a function that we used a lot while creating our new site. The graphic designer chose the elements and modified them to fit his idea. Then I drag-and-dropped the elements to the website and modified them based on the requirements of our graphic designer.

English version or rework everything twice

We wanted to keep the new page multilingual just like the original. However, this multilingualism turned out to be a bit of a nightmare. For example, if we changed something in the Slovak language, or if the graphic designer said something like “make a smaller space here”, it was necessary to transfer this change to the English version. So we could say that we did everything twice.

We tried to postpone this problem as much as possible by making the English version only after we incorporated all the modifications to the Slovak version. We tried to do that, but you know how it is final final final…

(Not) forgotten things

We wanted to keep some features and content from the previous page on our new website. Therefore, we had to be very careful not to forget anything, as we added a lot of information to the website over the years that simply could not be missing from our new site.

Redirects

A very important component that our marketing department used and continues to use is redirects. For example, if you enter qbsw.com/job, the page will automatically redirect you to the career section. Redirects are quite useful on social networks or in various ads that our marketing department creates. It is a very important functionality that we eventually transferred to the new website – we migrated around 30 different redirects from the original site.

Links and Private Zone

The website is also intended for our clients, as it contains important information for them. Clients have access to a “secret” zone where they can find various useful links for manuals or programs. The entire zone had to be flipped over from the old site, made more visually attractive and, of course, we needed to keep all the links for our clients. We managed to manually migrate up to about 50 links this way.

Portfolio

One of the brand new parts on our website is the portfolio section. We selected twelve of our most interesting projects and created visually appealing microsites for them. 

On all of these microsites, you will find a photo of the project manager along with some information about the project from them. The sites also contain other information such as statistics and project features. But first, we had to get the information about the projects from our project managers and photograph them, even the ones from different branches. 

And, of course, the English version of the site had to be done. And then the graphic designer tells you that something needs to be modified in an element which is located in twenty-four different locations altogether.

Suffice to say, it took us about two months to create the Portfolio content section itself.

Blog

Launching a blog – the goal we set when creating the new website, was more complicated to accomplish than we thought. Although we have a company full of experts, not everyone has experience with writing or the time and opportunity to contribute to our company blog. However, we came up with a form of remuneration for each employee that contributes to our blog. If you happen to be one of the Q-employees and you would like to contribute to our blog, don’t forget to write Lucia!

Page optimization

Once we thought the page is really in its final state and ready to migrate, it was time for one of the most important and complex parts – page optimization.

We wanted the page to load as quickly as possible, so we had to use different combinations of page acceleration practices. Finally, we managed to get a pretty good result – 70/100 PageSpeed Insights on mobile and 97/100 on PC.

We achieved this good result by using the Cache Enabler and Fast Velocity Minify plugins, which we managed to set up correctly after a few hours of trial and error configuration.

Pictures

We wanted to make a good looking website and in our case, the equation was good looking website = lots of pictures. If you want the page to be as fast as possible and you have a lot of images on it, you have a lot of work to do. Compression is important. Many different plugins that can be implemented into our CMS can take care of the compression, so it would make no sense to optimize the images manually.

We opted for the use of the plugins Optimus + Lazy Load by WP Rocket. Optimus is a plugin that automatically reduces the size of images through a server and creates a .webp version for browsers that support .webp. The Lazy Load plugin provides Lazy Loading for images and iframes. Therefore, the browser does not have to wait for all images to load when you visit the web, it loads them only when they are visible to the user.

Improvements?

After almost a year of developing our new site, I need to say that we did a lot of good work. When comparing it to our original page, it is certainly a few steps ahead. I would also like to thank all the colleagues who participated in the creation of our new website. Let me mention a few more points on why our new site is better than the previous one:

• improved page readability and usability,
• average load time of 1.7s (50% improvement over old page),
• high Google Page Insights score, respectively. 70/97 (Mobile / PC),
• optimized images and use of lazy loading,
• modern and fresh design for 2019.

I hope you like the new site and if you happen to find room for improvement or any mistakes, please feel free to contact me at andrej.srna@qbsw.sk.