WordPress Calculator From Zeni

WordPress Calculator From Zeni

During the redesign of the website for A-technology, we were asked to redesign their technological calculator. We not only created a redesign for the calculator, but also added new functionality.

You can read how we implemented a completely new website design in the article Website Speed and Reliability for A-technology.

Where Can the Calculator Be Used?

The calculator can be used by those who decide to build a house and would like to know what their possibilities are in heating and other modern technologies. The calculator is currently set up for a house of 160 m2, but there are plans to add more options. However, this does not prevent users from getting an overview of the technologies and their approximate prices.

What kind of calculator did we create

The new calculator basically works like the old one, so nothing has changed for users and they don’t need to learn anything new to use it. But the client has new options. One of them is to choose additional options. If the customers checks one of the main technologies, they will be offered additional options. The calculator is clearer and the customer knows exactly what technologies are connected with. As a result, they can better specify their requirements.

Additional options - Custom WordPress calculator from Zeni
Additional options – Custom WordPress calculator from Zeni

Another new feature is Required additional options. Some technologies include additional options that need to be added for everything to work. Therefore, some additional options may already be checked and may not be removed.

Required additional options - Custom WordPress calculator from Zeni
Required additional options – Custom WordPress calculator from Zeni

The last and probably the biggest improvement of the original calculator are Subsidies. The customer can choose one of the offered subsidies in the calculator and all necessary technologies are automatically selectedto meet this. Thanks to this, the customer sees what he has to reckon with if he is interested in the selected state subsidy.

Subsidy options - Custom WordPress calculator from Zeni
Subsidy options – Custom WordPress calculator from Zeni

If you want to send your calculation to an e-mail, you need to fill in some basic information. At the client’s request, we have extended the calculator with the option of uploading documents related to your project. Thanks to these materials, A-technology can prepare a custom-made design for you, exactly according to your requirements.

A-technology wants to give its clients an insight into the possibilities they have and allows them to choose the solution according to their ideas. The exact solution can be consulted with people from A-technology, who will provide you with more detailed information.

If you like our calculator solution or need help with the web, do not hesitate to contact us.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Image Optimization And Compression In WordPress

Image Optimization And Compression In WordPress

Image optimization and compression is very important. It reduces the time it takes to load your website, which can help you increase its traffic. Like that, your website can become more successful.

Image Size

Always use images at the size you actually display them. It is unnecessary to load an image with a resolution of 1024×1024 px if you display it on your website in a size of 16×16 px. 

Don’t overdo it with lots of pictures. The more images, the more data is loading and the slower the page is loading. Decide whether the image has any added value for your page, such as when writing articles.

In WordPress, each image is reduced to 4 different sizes when uploaded and it is then possible to load the version that suits a page best. For example, a size of a thumbnail in a blog is different from a size of a full image in a blog.

  • Thumbnail – 150 x 150 px
  • Medium size – maximum of 300 x 300 px
  • Big size – maximum of 1024 x 1024 px
  • Full size – the original size of an uploaded image

For additional website optimization, you can also add custom image sizes to WordPress.

Image Format

Bitmap Images

  • Suitable for very detailed images such as photographs.
  • Bitmap images contain a map of individual pixels.
A bitmap image
A bitmap image
  • JPEG format supports a large number of colours, making images look more vivid. JPG is best suited for displaying photographs.
  • PNG supports fewer colours than JPEG, but unlike JPEG, it supports transparency and also handles text and illustrations better.

In this meme, you can see the difference between JPEG and PNG in displaying illustrations and texts:

The difference between JPEG and PNG
The difference between JPEG and PNG
  • WebP format can be used as a modern replacement for JPG and PNG formats. Files in this format are much smaller than competing formats, while preserving the same quality.
  • An interesting fact is that this format was developed by Google.
  • WebP is not yet natively supported for WordPress, but there are plugins that can fix this. We use the WordPress plugin WebP Converter for Media.

Vector Graphics

  • It can save a huge amount of data, it contains instructions in text form to create an image and not a pixel map, as in bitmap graphics. Therefore, a larger file is not required to display a larger image.
  • If applicable, it is good to prefer it to bitmap (pixel).
  • Most often used for logos and icons.
  • The file size increases with the amount of details in the image.

A suitable format for vector graphics on a website is SVG.

SVG images cannot be uploaded to media libraries in WordPress. We can display these images using code in a plugin or in a template when creating the HTML structure, either by additional loading or embedding in the HTML structure.

In WordPress, the possibility of using it directly in HTML is also useful in Gutenberg or the Classic editor. We can insert SVG images in the editor as own HTML

The advantage of SVG images is also the possibility of modifying their displaying using CSS styling, as they are a common part of HTML.

Scalability
Scalability

Image Compression

Image formats usually support multiple levels of compression. Thus, it is possible to save more data with stronger compression, but also worse quality.

Compression should be applied to every image uploaded to your website. More compressed images are smaller and will load faster. However, you must not forget that with compression, images lose quality, so it is necessary to choose a compression that will sufficiently preserve their details.

An overly compressed image
An overly compressed image

Here, you can see the very convenient WebP format, which provides the best file size to file quality ratio, compared with the JPEG format.

The difference between WebP and JPEG
The difference between WebP and JPEG

WordPress Plugins For Image Compression

A good WordPress plugin can help you with image compression. There are various plugins to choose from, but we will mention only few here.

  • EWWW Image Optimizer – this WordPress plugin is free and automatically compresses images when you upload them,
  • Smush – in addition to image compression, it offers other useful optimization techniques,
  • WebP Converter for Media – replaces JPG and PNG files with the WebP format, so you can save more than half the load without losing any quality. After installing the plugin, the images will be automatically converted to the new format.

Image optimization and compression is just one of many aspects that can help you speed up your website and increase its traffic. To learn more, read 6 Ways to Improve the Speed and Performance of Your WordPress Website or Speed Up WordPress Websites by Optimizing JavaScript and CSS.

If you are interested in more information or you need an advice or help concerning your website speed, contact us and we will be happy to help.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Custom Menu For Engeto Without The Use Of JavaScript

Custom Menu For Engeto Without The Use Of JavaScript

We have recently created an interesting solution for our client Engeto – a custom menu without the use of JavaScript. This way, we did not slow down the performance of their website. In today’s article, you can read about how we worked on the menu and about the benefits of a menu without JavaScript.

Meet Engeto

Engeto organizes IT courses for beginners and advanced, helping people find a job in the IT industry. They cooperate with partner companies and on their website, you will find stories told by their graduates about how Engeto basically started their IT career, sometimes even with no prior experience.

We already helped them create their Absolventi and Termíny pages. Its graphics was based on theirs and we added filtering that wasn’t possible before. Their customers can now filter courses and graduates more easily.

Engeto asked for different options for both individuals and corporate visitors on their website. This wasn’t entirely possible on their previous website and its template. So we have started working on a custom solution for them.

Benefits Of A Menu Without JavaScript

As I already mentioned, the menu is working even without the use of JavaScript. We decided not to use JavaScript because it is not always necessary and only slows down the website loading. It was also quite a challenge for us. I am personally very proud of the menu in the mobile version, including a back button used to redirecting from a submenu to a main menu.

Mobile version - menu
Mobile version – menu
  • A loading speed of the website is not unnecessarily slowed down.
  • This adjustment allows the customer to create a menu exactly according to their ideas and thus display their course offers and web content.
  • Each page has an option in its administration to set which menu should be displayed in the header. Two menusare then managed in the settings. One for individual visitors, one for corporate visitors. This allows very simple administration and possible exchanges of menus for others.
  • The main menu is very easy to edit. All its elements are configurable via WordPress administration, so there is no need for a programmer to intervene in the code when any change is requested.
WordPress administration custom menu
WordPress administration custom menu

In order not to deceive you, I actually wrote one JavaScript code. The Divi template used on this website blocked the mobile access. Therefore, we had to write JavaScript that will bypass their JavaScript. The menu actually works best if you turn off JavaScript on the entire website, however, the rest of the website will refuse to work properly then.

How The Custom Menu Was Created

To create the menu, I used a combination of the <label> element and checkbox inputs. Thanks to their naming, these two elements can be linked, even if they are placed on different places on the page. Even better, it works the same way for multiple <label> elements linked to a single input. Thus, I achieved an opportunity to switch between a submenu and a main menu in the mobile version.

To fit all this information into a standard WordPress menu, I needed to write my own MenuWalker. That is a class that you assign to your menu and the individual parts of the menu are then listed accordingly. In the class, we can then modify its functions and add some custom items to the menu.

Use Of The WordPress Plugin

The last technology that I used for this project was the Advance Custom Fields (ACF) WordPress plugin.

I still enjoy the possibility to add custom items to different WordPress administration parts. However, I ran into a small problem.

ACF cannot define at which menu level you want to add new editable items.

So, I created a code that detects the level in which the menu is currently at, and then enables or disables ACF items. This way, it is easier for the administrator to make certain adjustments, working only with specific items that they are supposed to set at the moment.

If you are also interested in a custom solution, oryou need to speed up your website or an advicecontact us, we are here for you.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Creating a Website for i4comfort

Creating a Website for i4comfort

The i4comfort application by A-technology brings complex yet simple solutions for a remote control of technology in your house. The idea of reducing heating costs, and thus also reducingthe CO2 footprint thanks to an intelligent technology control, attracted us and we were pleased to be involved in creating of a website for this application.

Why And How It Was Created

We created the website for i4comfort in CMS WordPress of an already existing client, for whom we launched a completely new production website this year. The company A-TECHNOLOGY s.r.o. has its presentation website a-technology.cz, so it was not only important to design the i4comfort website in a similar way as the parent one, but also to create a new identity for the new website at the same time.

A Comparison Between the Old And the New Website

The old i4comfort website had several drawbacks:

  • It did not meet the security criteria.
  • There was no development environment in the form of staging.
  • Its logo and appearance were outdated.
  • It was not responsive.
Old website

The new website:

  • It is fully responsive.
  • In multiple places, it has a CTA button calling for action, making it more likely to gain a customer.
  • We created a new logo and a new website design.
Home page of i4comfort

The Website Graphics

  • The website graphics correspond to the graphics of the mentioned parent website.
  • However, the new website has a unique and memorable design.
  • Its unique website identity makes it clear that it is a separate website.
  • At the same time, it feels familiar to customers of a-technology.
  • Information is not only communicated through text, but is also displayed graphically in many places, making it more memorable and clear.

Technical Functions

A Modern Experience

The website contains many visual effects which do not slow it down thanks to their careful integration. The website is also responsive on any device.

  • Many animations and interactive parts use only styling options (css).
  • There is no need to load JavaScript because of some clickable interactive sections where it is used very often on other websites.
  • Thus, the website is much faster, and yet provides the same quality experience, such as here:
Visual effects of website

The Website Responds to the User

The symbols of each technology change according to what the user is currently reading. The CTA button, icons, or navigation elements (top menu, dots on the right) also change according to the positions on the website. You can see everything on website „Jak funguje i4comfort“.

The Website Responds to the User

On page ,,Možnosti využití”, the images change interactively according to what the user reads. Thus, the reader can easily imagine what exactly they read about and also remember it better. This creates a unique, fast and interactive experience that will attract users.

Benefits of the New Website

Theme Built on Sage

Easy Configurability

  • The theme programmed by us for WordPress allows easy configurability.
  • The behaviour and style of the page header are separately configurable.
  • All content is easily editable without the need of developer’s intervention.

Mobile/Desktop Usability

The desktop environment is far from being just an enlarged mobile environment.  A good experience for every user is important to us.

  • All of the desktop space is used. Thus, as much information as possible is displayed on the screen and the website does not seem empty even on larger screens.
  • The mobile environment is adjusted for being used with a finger and also on smaller screens.
  • On a mobile, everything is easily clickable, simply and quickly accessible.
  • Many sections look significantly different on a mobile and a desktop.
  • For a better experience, many parts were simplified for a mobile. Some visual aspects used for a desktop were removed, because they had no added value for the mobile user.
Website is responsible

For i4comfort, we have created a new fast and clear website with a plenty of improvements. If you need help with creating of your website and want to provide your customers with a quality experience, do not hesitate to contact us, we will be happy to help you.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

5 Things We Must Not Forget When Creating a Website

5 Things We Must Not Forget When Creating a Website

Creating a website is a complex process that consists of several activities. From market research, through graphic design, web programming, text creation to the launch of the website. Read the following 5 things that are very important to us when creating a website and are always taken into account.

Keywords Analysis and Goal Setting

People type various terms into search engines to help them find what they are looking for. With keywords analysis, we can find phrases that are frequently searched for and are also related to your website’s content. This helps us find out which specific keywords visitors will be able to reach your website with.

Before creating a website, the most important thing is to define principles and values of the company, which will help to analyze keywords. It is necessary to focus on the company’s vision for the future and also on its story. Then, it is necessary to determine the company’s goals. Based on these factors, we will create a website for a quality variety of clients. 

Keywords analysis is an important priority for the success of your website, which then leads to search engine optimization.

Search Engine Optimization (SEO)

Thanks to SEO optimization, we can get your website among the top search results much easier. With the current level of search competition, the best possible search engine optimization is a must. 

For SEO optimization, we not only “tune” the texts on the website. It is a more complex process. What is important for optimization and what do we focus on?

  • Loading speed
  • website security
  • photo and product description; 
  • pictures; 
  • text optimization
  • correct headings, titles; 
  • SEO technical setting; 
  • and many more …

—> About poper creation of optimized website content, you can learn here: Proper creation of optimized website content

—> How to write articles for SEO, which we do, can be read here: SEO – How to write articles to be readable and optimized for search engines

Copywriting

The proper text writing on the website is the basis of the already mentioned search engine optimization and also of the web creation itself. Therefore, it is important to write texts that are not only interesting, but also gramatically correct with the use of appropricate keywords. Copywriting consists of preparation of texts in accordance with an analysis of your target audience and their optimization for search engines using keywords, the correct hierarchy of headings, etc.

You can read more about the essential elements of an article here: What essentials elements should be part of any article?

Website accessibility

Remember that it should be as easy as possible for the visitor to navigate through your page. Moreover, over 67 % of users browse the Internet on a mobile phone or a tablet today. If the visitor don’t find what they are looking for, the website is too complicated for them, various windows pop up on the website, or the website is overwhelmed by adds, they immediately leave and thus increase your website bounce rate, which also worsens SEO.

That’s why we create websites that always meet the necessary criteria. It is important to us to assure that your website is responsive and as accessible as possible to all visitors.

Accessible sites and the most common problems of websites were explained by our colleague Mishka here: An accessible website is suitable for everyone

How did we help with website accessibility? Read our case studies to find out:

—> Even a large school with a lot of activities can have a clear website

—> Accessible website for Primary and nursery School in Otnice

—> Website for Hrušovany Kindergarten on the Accessible School Theme

Marketing

If you want a really powerful website that delivers results, SEO optimization alone is not enough. When creating a website, you should consider how exactly you want to present it to your visitors. Will you write a blog? Will you offer various promotions or benefits? How do you want the reviews to be incorporated on your website? Based on your decisions and needs, we will adjust the website’s creating and design. After its launch, it is also important to invest in marketing, such as PPC campaigns or social media visibility, which we are also glad to help you with. 

You can read about how to properly prepare for marketing here: Prepare properly for marketing

If you want your website to be efficient and customer gaining, do not hesitate to contact us. We will be glad to help you. 

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Website speed and reliability for A-technology

Website speed and reliability for A-technology

One of our satisfied customers is A-technology. We have built a completely new website for them – from a graphic design, through a theme and a custom plugin, to a fully functional website. Learn how we dit it, which functionalities we created and how we achieved speed and reliability on their website.

A-technology 

A-technology has been implementing solutions for heating and cooling systems for the constructions and service of commercial and residential buildings since 2006. They also offer technological heating and cooling systems, such as solar systems, air conditioning or underfloor heating.

We created a new website design for them and incorporated various interesting functionalities into it according to the client’s requirements.

Website creation

  1. Communication with our client is vital for us. Firstly, we helped our client define their exact requirements.
  2. Our graphic designer Jarda created wireframes in which he defined the specific elements the website will contain. Then, he presented the graphic design draft, which we discussed together with the client.
  3. Our developers Daniel (me) and Zbyněk then created the theme and the plugin, once again tailored to the client needs.
  4. The client’s old website was replaced with a new one – faster and more reliable one.
  5. We were then gradually adding new functionalities and described every new change to our client.

Which functionalities did we create for A-technology?

  • Communication with the external service for service requests

We assured immediate resolving of clients’ requests by connecting the form directly to the supplier. The supplier will receive a filled form directly into its internal HELIOS system and will be able to immediately provide the required service to the client, without unnecessary idle time. Also, the service worker can effectively plan his working day.

  • Automatic address filling

The form also includes an automatic address filling functionality based on a selected place on the map. It saves time.

  • Calculation of article reading time

Each new article contains information about how long it will take to read it. Thus, the reader can expect the approximate reading time and they will less likely leave the website.

  • Presentation pages

These are traditional but very important functionalities, such as references, used technologies, information pages or a blog.

  • Calculator

According to the customer’s chosen technologies, it calculates the preliminary price of the order in € and CZK. This functionality is currently being prepared for the client.

Fast and reliable website

Speed

  • We use only the necessary minimum amount of JavaScript.
  • Styling (css) loads only the needed data for the specific page.
  • Lazy loading of media – loading images, etc. are not blocking the browser and they are gradually being loaded so that the website is interactive as soon as possible.
  • We create code with an emphasis on website performance.
  • We use as few third-party plugins (running during page loading) as possible.
  • We use caching that significantly speeds up page loading.
fast website

Reliability

  • We use only well supported and tested plugins. Most functionalities are taken care of by our developers, which limits dependence on third-parties. Therefore, we can solve potential problems directly.
  • All plugins are regularly updated for bug fixes and security holes.
  • We always test everything on staging before deploying it to the production (live) server.
  • We regularly monitor the server.

Possibility to add functions on client’s request

We think of possibility of modifiability and extensibility in all new functionalities. We created a custom plugin and a Sage theme, which have a clean structure allowing us to continue with the development. We can easily add new features and fulfill our client‘s requests at any time.

Website accessibility

The website for A-Technology met all of the client’s criteria. We have made the website as accessible as possible, which is mobile-optimized, fast, secure and reliable. If you are also interested in such a website, do not hesitate to contact us.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Serial Killer – Why You Want a website created on Sage?

Serial Killer – Why You Want a website created on Sage?

Our Zeni Team had an opportunity to be a part of the international festival of TV and web series – Serial Killer. We created wordpress theme for their new website which is based on Sage. In this article, you can take a peek into our creating process and learn all the benefits of a Sage.

What is Serial Killer?

Creators of all best new series from Central and Eastern Europe meet at this international competition festival of televison and web series every year. You‘ve probably already figured that this idea makes many fans excited. On huge screens, they can watch exclusive premieres that cannot be seen anywhere else. Furthermore, in the Focus section, the festival always focuses on a different country and introduces its work.

Creating a Website

Since the festival caught our attention, we decided to help create its website.

At the beggining the HTML structure was created by the graphic designer Martin Pecina. It was then necessary to divide it into smaller parts and build an entire website based on it.

We divided the page into following sections:

  • series;
  • panels;
  • videos;
  • speakers;
  • team members.

For each mentioned section, we identified which data will need to be filled in and added the possibility of editing the data in the administration. It was also necessary to fit the data into the prepared graphics design to make content come to life.

Which Functionalities Did We Create for Serial Killer?

Bulk download of photos from individual days from presskit

Our client wanted the possibility of downloading photos from individual days all together in a zip file as presskit. We prepared the functionality that zips all the images and then the user can download them.

Subscription section

The option to buy a subscription was also needed to be added tort he internal web section. We solved this using Woocommerce and Gravity Forms which ensures purchase process, login and also access restrictions on certain pages.

Archiving Previous Years

This is one of the new features. The client requsted the possibility to archive series, series sections, panels and speakers. Thus, these won‘t be displayed in standard sections anymore but the client is able to add them to desired pages.

So Why You Want a wordpress theme build on Sage?

  • The best tool for creating templates

It helps the programmer to keep their code clean and redable. Whether we’re talking about writing CSS with SASS, Blade templates, Javascript routing or Controllers, in which it is directly possible to specify a functionality for a specific template. It’s so much more fun to work with such a tool.

  • It includes Laravel blade templating

This helps us to create simple and clean templates. In addition, we also installed ACF Sage directives in order to make working with ACF field easier and simpler.

  • Because JavaScript routing

Sage already includes the functionality allowing us to split the JavaScript into files and then load it only on specific pages. This makes JavaScript cleaner and thewe dont have to worry about unwanted Javacript running.

Website Perfomance

Whether a reader stays on your site depends mainly on whether you can attract their attention as soon as possible or not. But how do you do that if loading of the site takes forever? That’s why performance, reliability and speed are very important for your website.

Sage on its own will not guarantee that these requirements will be met. However, a good programmer combined with such a good tool as Sage can work wonders. Maybe even do a magic trick or two. After all, performance and speed always depends on the programmer themself.

As with our other projects, we try to load only the necessary data and thus always achieve a fast loading website. For example, we removed unnecessary CSS and JS files, added lazyload of images and many more.

Would you also like to build your website with such a high-quality tool as Sage? Would you also like to enjoy the great performance and speed? Don’t hesitate to contact us. Leave us a message and we contact you as soon as possible.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

New plugin for WordPress – Zeni map

New plugin for WordPress – Zeni map

One of the requested features of our satisfied clients is the map integration in which the company or its partners want to insert their stores, showrooms, places of issuances of goods or parking spots and zones. We would like to give you this feature in our new plugin!

What was the matter of developing the plugin

One day, David informed us that a client had asked him to add his partners to a map. At that moment, David started to involve the whole team and organize the development. He is convinced, like all of us from Zeni, that this new perspective would bring entrepreneurs higher satisfaction, from customers and partners.

We agreed that the functionality should not be hardcoded into the theme so that this feature can be reused by different clients. Therefore we decided to create a new plugin for WordPress, because a well-made plugin is much better than reworking the code in the template each time theme is changed.

The most important thing for us is the fact that we can continue working on the plugin continuosly and discover a lot of possiblities and add a lot of new features.

The client that already uses the plugin

We created a plugin according to the client’s assignment and we added some features on the top of that. The client is very satisfied with the plugin and they are using it on several pages on their website using many features that plugin provides. The plugin is very versatile. Few examples down:

Other possible uses

During the Covid times, we recieve suggestion for feature, and that is the ability to add a zones to the map, for example option to enter a zone by address and add detailed description to it:

Delivery zone 1 = price 0.50 €

We have already implemented this featurein the plugin and we are already discussing other enhancements.

Restaurants, which have several delivery zones with different shipping prices, might be interested in this feature. But this plugin has many other use cases.

Delivery zones - zeni map plugin

For example, this feature can be used by:

  • Restaurants;
  • production plants;
  • wholesale suppliers;
  • courier or taxi service.

What client says about this plugin?

reming.cz:

“To point out which e-shops and partners we work with, we wanted to create a map in which we could add the name of the e-shop/partner, its address, logo and link to the partner’s URL of our products. We assigned this to creator of our website Zeni team, and they developed a plugin for this purpose. It is used on product pages on our website.”

Ondřej Lhotský – owner

If you are interested in zeni map plugin, you can write us via the contact form and we will get in touch with you.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Case Study: Even a large school with a lot of activities can have a clear website

Case Study: Even a large school with a lot of activities can have a clear website

logo - Primary school Mládežnická 536, Trutnov
logo – Primary school Mládežnická 536, Trutnov

Once upon a time… 

…there were the six primary schools in Trutnov. They need to define and differentiate themselves and also attract attention. Primary school Trutnov 2 Mládežnická tried to achieve this with a colorful, graphically distinctive and very comprehensive website. Primary School Mládežnická is progressive and successful school, with lots of activities. In addition to the usual things like after-school care centre and school club, it offers school hobby groups and courses at the Eldorado Club. The school is very focused on sports activities and modern digital technologies. The school is also involved in international projects (Erasmus, E-Twinning) and students are participating in skills, knowledge and art competitions.

All this contributed to the fact that the school website became a little well-arranged labyrinth over time, where the visitor was easily lost. On the home page, the user did not know what to click. If user didn’t know the web well, he had to wonder where the information he was looking for might be. Related information was also often in different places. On the contrary, some information was duplicated in different places in different navigation menus several times.

How we helped

Our work was performed in 3 stages:

  1. we went trough an analysis of the original website
  2. we proposed a change in the structure and a new graphic design
  3. we transferred key content from the original website and significantly modified it for the the new one

Evaluation of the original website 

The basis of our work was to go through the web and find out where what was hidden. We have identified a number of shortcomings.

Complicated menu

  • The website contains several independent menus
  • Top bar – login to the student’s book, to the email, to the website
  • Links to share – RSS, Youtube, Facebook
  • Navigation in the page header
  • Main navigation in the sidebar, which had up to 3 levels – it changes on the home page to squares at the top of the page
  • Projects menu – visible only on the home page

Inconsistency

  • The location of the main menu was in a different places on the home page and on the other pages
  • For several pages, News was listed first and content of the page was below them, for most of the pages it was the opposite
  • Some links from the menu referred directly outside the school website

Confusing or incomplete pages

  • It was not clear where to look for stuff, navigation overlapped with the content, similar information were in more menus
  • Some content (eg projects) was divided into several menus
  • Similar information were divided into several pages – the user had to click through the site unnecessarily before he got the required information
  • Some pages resembled „coloring books“ – multicolored texts were used so that it was not clear which information was most important on the page
  • Underlining of the text was used both to differentiate links and just to highlight text
  • Important information (eg specific measures due to COVID-19 for the school) were listed only in PDF files, not in text form directly on the site
  • Mandatory published information according to Act No. 106/1999, Coll., were missing

Inaccessible content (against WCAG 2.1)

  • Links were missing for quickly changing-over to the main content (criterion 2.4.1 level A)
  • Some menu items were not accessible from the keyboard (criterion 2.1.1 level A)
  • The text and background colors used were not sufficiently contrasting (criterion 1.4.3 level AA) . The first level of the side menu (if it had the submenu opened) had white text on a white background – the text was not visible at all
  • Some information was inserted into the tables unnecessarily, which caused problems with responsiveness on the mobile phone (criterion 1.4.10 level AA)
  • Link texts were only a web addresses without an explanation of where the links lead to (criterion 2.4.4 level A)
  • Rotating content (so-called Carousel) on the front page stole user attention from the other web content and could not be stopped (criterion 2.2.2 level A)
  • Some headings were not really headings, but only text formatted in the same way, lists were not actual lists (criteria 1.3.1 level A and 2.4.6 level AA)
  • Spaces were used in the articles to format and indent text (criterion 1.3.2 level A)
  • Bad text wrapping caused mostly by incorrect copying from a text editor (eg article TRUTNOV DRAGON was dominated by home teams) (criterion 1.3.2 level A)
  • There were abbreviated words and abbreviations that are incomprehensible for someone who didn’t know what it was, eg GaP, ŽP, etc. (criterion 3.1.4 of level AAA)

What was the result?

“The biggest benefit of the new website? Clarity, simplicity, easy orientation. ” Mgr. Zdeněk Géc, school principal

  • The website is fully accessible in accordance with WCAG 2.1 criteria passing the AA level (and thus also Act 99/2019, Coll.). As always, accessibility of the website was verified by SONS.
Certificate of accessibility of the https://zsmltu.cz website at the AA level from the SONS organization
Certificate of accessibility of the https://zsmltu.cz website at the AA level from the SONS organization
  • There is only one menu left on the site, which has only 2 levels. The original 79 selections of menu narrowed to 22.
  • Visual style has been unified across the web.
  • Information is always in one place. This makes them easier to update and easier to find.
  • We have merged pages with similar content into one (After-school Care Centre, Projects, School Club Octopus…).
  • Maximum amount of information is inserted as text directly on the site, instead of the original external documents, images with text, etc.
  • News from the given category are also listed on the relevant pages (COVID-19, Family, Octopus, Eldorado, Sport).
  • Web loading has accelerated significantly, both on the computer and on the mobile phone.

The WordPress content management system and our Accessible School Theme template are used on the new website. We created this template in order to easily meet the requirements of web accessibility according to the WCAG 2.1 specification. Originally, there were concerns about whether the template could serve such a demanding website – but the template was used without any problems. We did not encounter any technical problems and we were therefore able to focus on optimizing the content and the structure.

What to write in conclusion?

Do you also manage broadly focused school? Do you need not only to modify your website to meet the accessibility criteria, but really improve it? Contact us. We are not afraid of challenges. We work on each project individually and with dedication.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Case Study: website for Hrušovany Kindergarten on the Accessible School Theme

Case Study: website for Hrušovany Kindergarten on the Accessible School Theme

It is interesting how many people do not realize that the kindergarten websites are not intended for children (who usually cannot read), but for parents looking for information. So when you put together one kindergarten with 3 workplaces on one website and a mad graphic designer, the result is clear – yet quite typical.

Hrušovany Kindergarten decided to do something about it. The starter was the legal requirement for web accessibility, but fortunately it was not just this. It was also an idea that a good school website does not have to be infantile, but mainly that visitors must easily find all the information they need.

Evaluation of the original website 

Complicated menu

  • When the visitor was looking for information in the menu, he had to click through up to 4 levels. The pages were divided in terms of content and then into individual kindergartens, or further into kindergarten classes, eg Basic information → Our classes → Kindergarten Havlíčkova → Ladybugs class or Kitchen → Payments → Kindergarten Havlíčkova
  • Some links pointed to pages with only one link or file, eg Documents → Basic information about SEP or Documents → School regulations.
Documents - School rules, original website
Documents – School rules, original website
  • Some pages have been listed several times in multiple menu locations, eg the Operating rules of the canteen were in Kitchen → Operating rules and also in Basic information → Tuition and meals → Operating rules
  • The website contained pages that had no content – they were not filled at all, eg Photo Gallery → Joint Events

Unsatisfactory graphics

  • The strong background distracted you as you browsed the web. The background image was also too large and significantly slowed down web loading.

Illogical content

  • Sections with similar content were in several places
  • Where to find us (only maps with address)
  • Contacts (address, emails, phones)Kontakty (adresa, emaily, telefony)
  • For example, the complete text of the “registration for meals” was listed on the page with the information: „Do not print this registration, it will be handed over to you at the parents’ meeting in August with the assigned variable symbol.”

Confusing pages

  • The entire contents of the articles were listed in the news section
  • Orientation in the text was hampered by the inconsistency of headings and articles  eg 
    • different size headings,
    • some headings were written in capital letters, others were not,
    • the whole text of some articles was bold, etc.
  • Important informations on the website were often only in PDF files or as images, not as text directly on the website, eg menus

Discrepancy with accessibility requirements according to WCAG 2.1

  • The site was not responsive
  • Links to skip to main content and other sections were missing
  • The web menu was not keyboard-operable
  • The website did not meet the requirements for contrast (web menu)
  • Informations were inserted as pictures without other textual anotation, eg Open Day, Enrollment in Kindergarten, Projects, Operation on summer holidays, Allergens …
  • Rotating stars at sections, which could not be stopped it
  • The structure and controls were inconsistent

Benefits of the new website

The website is fully accessible for the disabled people

We have obtained the Certificate of Web Accessibility from SONS. The website meets the WCAG 2.1 criteria at the AA level

Certificate of accessibility of the website mshrusovany.cz, SONS CR
Certificate of accessibility of the website mshrusovany.cz, SONS CR
  • The technical solution of accessibility included mainly:
    • fully responsive web,
    • fine-tuned color contrasts,
    • links to skip to navigation and main content,
    • solution of duplicate links,
    • accessibility of all web controls from the keyboard (incl. menu),
    • control and orientation on the web so that it is consistent on all sites, etc.
  • The content was also fundamentally revised:
    • maximized information inserted on the web as text,
    • all PDF documents supplemented with a text layer,
    • all images carrying information contain alternative descriptions,
    • Information on the pages is structured using multi-level headings.

Simplified structure and navigation on the website

  • The menu has only 2 levels.
  • The structure has been changed so that each workplace has a separate item in the menu and common informations are inserted into one place.
  • All documents of the kindergarten are on one page.

Mobile web

  • The site is fully responsive.
  • Significant speed increase of loading.

Simplicity and clarity

  • The contacts for the kindergarten are unified in the footer of each page (all workplaces and canteen).
  • All information about one workplace is on one page.
  • Information is always in one place on the web – it is easier to find and better maintained.
  • The site does not contain any blank pages.
  • Larger pages have contents section with links to individual sections in the beginning.
  • The „Back to Top“ link allows the user to go to the top of the page.
  • In the news overview, only a brief excerpt of the article with a link to the full article is given.

Unified graphics

  • Graphic elements use 4 basic colors.
  • The size of the headlines is unified across the web.
  • News icons facilitate visual orientation. (according to the given category.)

Summary

What to write in conclusion? Even a kindergarten in a village with three thousand inhabitants can have a website that is modern, fast, functional, clear and accessible.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR