How to make your website multilingual. Case study part 2: Common issues

Having chosen the right approach to implement multiple languages on your website, you should expect some challenges before you get everything working. Get prepared for a few common issues.

Learn what solutions we developed to resolve those common problems while working on a recent project, completed partially pro bono as a Christmas gift for Sarcoma Association.

Jak dodać wielojęzyczność na stronie. Częste problemy. Na przykładzie serwisu rejestracji na Onkobieg.
Translated consent clauses shown in the Onkobieg (Oncorun) registration process. English version is still in the testing phase.

This mini-series of articles outlines:

  1. How to select the appropriate method of adding support for multiple languages to your website.
  2. What common difficulties you may expect when going multilingual (below).
  3. Key things to keep in mind when translating a website.

Step 2. Keep an eye out for common issues plaguing multilingual websites

Use already existing solutions for common problems. Learn how we overcame the issues we encountered when translating the Onkobieg (Oncorun) website.

Functions shared by the entire system

Problem:

Certain system functions may be shared and not assigned to particular language versions.

User login form, shared between all language versions.

In the case of the Onkobieg website, the login form was such a shared function – it was available in a modal window which redirected the user to the main page after logging in. This solution was sufficient for a single-language website, but a website translated into different languages requires more context – information on the language version used by the visitor.

Solution:

Website language version info was added to the user’s session.

Content hard-coded in the site template

Problem:

Certain elements (e.g. website footer) can be hard-coded (fixed) in the template code. Implementing different language versions necessitates the transfer of such content to the CMS or language files.

The Oncobieg website footer. Links and images are hard-coded in the website template.

The complexity of the HTML code used by the Onkobieg website made it impossible to manage content via the CMS or a WYSIWYG editor. Such attempts could scramble the HTML code structure.

On the other hand, the website code contained links, for example. This is why it should not be copied to different language files.

Solution:

We rebuilt the problematic part. We rewrote the CSS rules, simplifying the HTML code so that it can be edited in the CMS.

Consent forms (e.g. GDPR)

Problem:

Some websites have advanced clause management systems.

For example, in order to participate in Onkobieg, you need to accept among others: the race terms and conditions, PayU terms of service and the privacy policy.

Examples of consent clauses used in the Oncobieg registration process.

Giving consent in one language should be equivalent to accepting the content of the translation. We decided to add some safety measures to protect our client should two translations of the same consent form differ from each other – for example when an updated version of the English clause is already in force, but its Polish version has not yet been uploaded.

Solution:

At this time, the clauses on the Onkobieg website are not grouped together. This means that accepting a clause in one language is not equivalent to accepting its translation.


As a result of the changes, a growing number of Onkobieg (Oncorun) attendees from outside Poland will be able to register for the race in English. Thanks to our solution, the organizer will easily add new language versions at any time.

“A partner this involved is difficult to find. The majority of the translation was done free of charge as a Christmas present for the Association. We are very grateful for that!”

Szymon Bubiłek
Board Member, Sarcoma Association

#SidnetDonations: Mariusz for Webpack and the TipTop Foundation

We have “one simple way” of dealing with the upcoming Blue Monday – supposedly the most depressing day of the year (though this has never been proven scientifically). We use this method once every month, and its results can be truly astonishing. How do we deal with the winter blues then? Through the monthly #SidnetDonations, of course. As part of this initiative, we donate funds to open-source and charity projects based on requests from our colleagues.

This time, the projects that we will be supporting were selected by Mariusz Różański. Despite being the youngest of our team members, he already has several years of experience in web development, as well as being a dad. Mariusz works remotely from Toruń, primarily on projects for our British clients: THG and UK2.

Webpack

Webpack is an open-source JavaScript tool. It allows the user to merge resources, styles, scripts and graphics to create a single, optimized output file. Webpack combines individual project modules (e.g. JavaScript, Sass, Less, HTML files, external libraries and others), while also taking order and dependencies into account.

Mariusz has been using this tool for several years, both for simple and complex web projects.

Which of Webpack’s features does he particularly like?

  • Configurability. Webpack is known for its extensive configuration options. It makes it possible to easily adjust every single detail to perfectly suit the project’s needs.
  • Website optimization. Webpack allows the user to split output files into smaller pieces. These so-called “chunks” may be set to load in certain circumstances but be skipped in others (e.g. in the mobile version).

“New frontend technologies are created virtually every day, with some being useless or borderline pointless. There is even a joke website counting the days since the creation of the last JavaScript framework, and so far I haven’t seen the counter go over 3 days. Among all these tools there are also those that actually increase productivity and become an inseparable element. For me, such a tool is Webpack,” Mariusz said.

TipTop Foundation

The organization helps children suffering due to disability, poverty or difficult life circumstances affecting their families.

“The TipTop Foundation is close to my heart because it helps children with reduced and increased muscle tone. The pain and discomfort that babies experience from the very first days of their lives make rehabilitation necessary and require strong perseverance on their parents’ part as well. This I know from personal experience,” our developer said.

The foundation supports parents through such activities as financing treatment, organizing rest and rehabilitation and assisting in collecting funds. It helps orphanages by carrying out renovation works thanks to donations, as well as providing the necessary equipment and helping the children directly.

“Some children are simply unable to develop properly without external assistance. It’s a wonderful thing that TipTop Foundation volunteers to look after them. If detected early, all ailments related to muscle tension can be cured completely. Therefore, nothing should prevent children affected by this condition from receiving the help they need to grow into strong, thoughtful people who will go on to build a better future for all of us,” Mariusz added.

How to make your website multilingual. Case study part 1: Select a method

Planning to add more language versions to your website? This is a step-by-step guide on how to do that. A real project we completed partially pro bono as a Christmas gift for a charity organization will serve as an example.

How to make a website multilingual. On an example of a real implementation of the Onkobieg registration website.
Two language versions of Onkobieg registration website – English version is still in the testing phase.

This mini-series of articles outlines:

  1. How to select the appropriate method of adding support for multiple languages to your website (below).
  2. What common difficulties you may expect when going multilingual.
  3. Key things to keep in mind when translating a website.

Step 1. Select the appropriate multi-language solution for your website

Before you start translating, take a moment to consider which method is best for your website.

We had 3 implementation models to choose from when taking on the Onkobieg (Oncorun) registration website CMS. Learn about the advantages and drawbacks of different solutions.

A. Copying the entire website

Procedure:

Copy the source code and the database. Launch the website under a different address and replace all text content with translations.

Advantages:

  • Simplicity. This solution is the simplest and quickest to implement.
  • No changes to the database. There is no need to modify the database – simply make a copy of it.
  • Altering text content in templates (e.g. footer content) is easy. Simply edit the content – no tools are necessary to handle multilingualism in templates.
  • Diverse content. Different language versions of the same site can differ from one another – some may have more content, some less.

Drawbacks:

  • Separate databases. Different language versions cannot share data without additional synchronization.
    Example: user accounts. If a user creates an account using the Polish language version, they will have to make another account if they want to use the English version.
  • No linking between subpages. Switching between different language versions of a single resource is more difficult.
    Example: returning to the main page from a subpage. If a user is browsing the Polish version of a subpage, they will be redirected to the home page after switching to the English version instead of staying on the same subpage.
  • Higher maintenance costs. Changes (to templates, database alterations, new functions) must be implemented separately for every language version.

B. Translation of individual database content

Procedure:

Add new language fields to the database (e.g. article title EN, article description EN). Translate the website by filling out the fields with content in the target language.

Advantages:

  • Little tampering with system architecture. Language switching is possible by adding a single global parameter to the website URL.
  • Easy switching between language versions. Every resource in the system exists in all language versions. This means that resource ID is the only thing required to retrieve data in a different language.
  • Single database. All language versions use the same database.
  • Low maintenance costs. Every change to a template affects every language version.

Drawbacks:

  • Identical website content. Language versions must be identical. This means that every resource must be translated into every language.
  • Altering text in templates is difficult. Text content needs to be placed in separate language files.
  • Limited scalability. Every new language version requires additional fields to be added for every resource in the administrator panel.

CSingle system for multiple website versions

Procedure:

Create separate language versions of a website within a single system. Link every website to a separate domain, subdomain or folder in the primary domain. Assign individual resources (e.g. subpages or blog articles) to the appropriate language version of the website.

Advantages:

  • Scalability. Once implemented it significantly simplifies adding new language versions.
  • Diverse content. Different language versions of the same site can differ from one another – some may have more content, some less. No need to translate all content (e.g. archived blog articles).
  • Easy switching between language versions. The database is shared. All language versions of every subpage have a common identifier.
  • Single database. All language versions use the same database.
  • Low maintenance costs. Every change to a template affects every language version.

Drawbacks:

  • Significant tampering with system architecture. Every module needs to be altered so that its resources are assigned to the appropriate site.
  • Altering text in templates is difficult. Text content needs to be placed in separate language files.

Our choice

Onkobieg is a registration website for a running event. It enables users to create accounts, make payments online and generate start cards for printing. The nature of the website makes it impossible to launch an English version using a separate database (method A.).

Ultimately, we opted for solution C. – though it is more labor-intensive, it also scales better and does not require all website content, such as archived posts, to be translated.

We also needed a tool for translating content embedded in the source code, such as content in the templates, notifications and error messages. As Onkobieg uses Laravel as its framework, we used its built-in translation package.


As a result of the changes, a growing number of Onkobieg (Oncorun) attendees from outside Poland will be able to register for the race in English. Thanks to our solution, the organizer will easily add new language versions at any time.

“A partner this involved is difficult to find. The majority of the translation was done free of charge as a Christmas present for the Association. We are very grateful for that!”

Szymon Bubiłek
Board Member, Sarcoma Association

#SidnetDonations: Łukasz for the WordPress Foundation and the Unaweza Foundation

It’s Christmas season and time to play Santa… oh wait, we do that every month. After all, we give gifts to charities and open source developers every month. This time, it was Łukasz Nowicki, our remote Senior WordPress & PHP Developer who selected the most ‘well-behaved’ foundations. Łukasz is living in the Masurian Lake District, where he is working on a project for our UK-based client, THG and UK2 (a THG company).

Which organizations will receive Christmas donations from Sidnet this year?

WordPress Foundation

The WordPress Foundation has been striving to ensure that access to online publishing tools remains free and democratic since 2010. And since it was founded by Matt Mullenweg, the creator of WordPress, it fully reflects the philosophy behind the WordPress platform itself.

It promotes projects and software which:

  • are covered by the GNU Public License,
  • are available free of charge – for everyone and for any purpose,
  • can be modified and re-shared at will,
  • enable users to translate their content into other languages,
  • can make use of plugins to extend their functionality without the need to modify the core software.

“I discovered WordPress in 2005 when I was looking for something which would allow me to set up a blog in an easy way, as such things were not as obvious back then. I tested several different solutions. I knew about the existence of b2/cafelog, as well as its evolution, i.e. b2evolution. But then I learned that another branch of this evolution existed as well. And that branch was, of course, WordPress”, Łukasz recalls.

As of today, WordPress is much more than just a blogging platform. It is a lifestyle. There are 140 WordCamps and 700 different groups organizing regular WordPress-themed meetings around the world. In addition, the website itself offers over 200 language versions, as well as 54,000 free plugins and 3,000 page templates. The entire WordPress platform consists of 350,000 lines of code, a number that amounts to 91 years of development work.

WordPress has not only been Łukasz’s basic work tool, but also a genuine passion, for years. He even provides his own plugins to other users: “My plugins available in the WordPress catalog are utilized by thousands of active websites in various parts of the world. I know that someone somewhere finds my work useful, even though I have no idea who they are or where they live. It truly is an amazing feeling”, our developer added.

Unaweza

The Unaweza Foundation was established by Martyna Wojciechowska, who is known for her TV program called ‘Woman at the End of the World’. The goal of the Foundation is to equalize the social, legal and economic opportunities of women and children from various parts of the world.

The foundation is currently collecting funds to help:

  • albino children from Tanzania who are being hunted and mutilated,
  • children forced to dig through refuse in Mexico due to a lack of better life options,
  • women and young girls who are victims of human trafficking in Romania.

“Tanzania and Mexico may seem quite distant, but Romania certainly is not. Nonetheless, it is Romania that tops the European statistics in regard to the number of children sold into slavery and forced to become sex workers. Unaweza works closely with the Reaching Out Romania organization, which saves women and children from such a cruel fate”, Łukasz said.

The foundation will soon expand its activities to other countries as well, including El Salvador, the Philippines, Bolivia, and Lebanon. Its name comes from the Swahili word ‘unaweza’, which means ‘you can’.

“A long time ago, I had the pleasure to meet Martyna Wojciechowska at the Orlen Trophy 4×4 rally. I support the Unaweza Foundation privately as I find Martyna trustworthy. I am thus very happy that Sidnet will also donate to her cause, according to my wish”, our developer said.

#SidnetDonations: Olga for Creative Commons Polska and hospiCare

She brings a human touch to our team of engineers, translating from technologese into the language of users. Olga is responsible for marketing communication at Sidnet, combining analytical thinking with creativity. The open source and non-profit projects she selected exemplify this.

Discover the human side of technology – projects which our marketing expert considers worth supporting.

Creative Commons Polska

The Polish branch of Creative Commons (CC) – a non-profit organisation which helps adapt copyright laws to the realities of the Internet and promotes open access to culture and research. Creative Commons has been a provider of licences and legal tools for authors of photographs, recordings, books and websites since 2001, giving creators control over how they want to share their work online, and empowering users of shared materials.

4 basic types of CC licences:

Attribution, CC-BY. You can copy, alter, publish and distribute the material under the condition that you indicate the author of the original and the original licence.

ShareAlike, CC-SA. You can copy, alter, publish and distribute the material under the condition that you share it under the same licence as the original.

NonCommercial, CC-NC. You may copy, alter, publish and distribute the material, but you cannot profit from doing so.

NoDerivatives, CC-ND. You can copy, present and distribute the material only in its original form. You cannot adapt, build upon or remix the material.

These symbols can be found in various combinations on sites such as Flickr, YouTube, Wikipedia, Medium and Behance.

“I learned about Creative Commons thanks to CC0, a tool which enabled me to use photos and graphics without listing their authors. This was very useful back when I was at university, where I was responsible for promoting our student organization – I wanted to do it for free, but at the same time as professionally as possible. I want to support the Polish branch of CC, which, together with Centrum Cyfrowe Projekt: Polska, helps cultural institutions, teachers and others share and use open-access resources”, says Olga.

Icons: Creative Commons, CC BY 4.0

hospiCare

hospiCare is a mobile app project facilitating the work of those involved in caring for domestic children’s hospice patients.

“I did not know what domestic hospices were until I met Eliza and Paula – the creators of hospiCare. I wasn’t aware that a terminally ill child could stay at home at all times and still receive care from a hospice. Or that, in practice, it involves visits by a dozen doctors every day, hundreds of phone calls and messages, large amounts of medicines and scattered medical records which grow in size every day”, says Olga.

The hospiCare app can facilitate the work of medical teams and help carers in their everyday tasks. Its features will include online access for authorised users to the complete medical records of a given patient, medicine dosage reminders and tools making remote medical consultations easier. The app will be available for free to all children’s domestic hospices in Poland.

“I admire the project, and its creators even more. The girls draw on their own experiences looking after terminally ill family members, but are far from wallowing in suffering. They have concrete ideas on how to finance hospiCare. They want to involve other parents of ill children who cannot find work despite their education and skills”, Olga adds.

The hospiCare team needs more funds to develop and maintain the app. To support the project, you can donate to Fundacja Zostaw Swój Ślad via bank transfer with the title “hospiCare”.

Festival of mobile development in Łódź. Mobilization IX review

Last Saturday I attended a conference organized by our friends of JUG Łódź. In between supporting the organization of the event, I had a chance to watch the presentations covering the topics of MVVM and CI/CD in the domain of mobile app development. I would like to share my impressions and thoughts.

Mobilization IX 2019 conference opening
Conference opening (Image: Paweł Włodarski/Mobilization).

“Building a CI/CD pipeline for your mobile app”

As we use CI/CD processes at Sidnet I wanted to check how others approach this practice to make sure that we aren’t missing anything important.

Peter-John Welcome, a guest from Johannesburg, has showcased the whole process in a very clear manner and it was mostly consistent with my experience. The Continuous Integration and Continuous Deployment (/Delivery) practices are nothing more than the automation of manual processes that occur during the Software Developer’s daily work, and the improvement of its various aspects.

Peter-John Welcome on CI/CD in mobile app development during Mobilization IX 2019
Peter-John Welcome during his CI/CD lecture, covering the domain of mobile app development (Image: Paweł Włodarski/Mobilization).

The speaker recalled the fact that the processes in the IT domain do not necessarily follow strict rules. For example, Peter-John Welcome mentioned the topic of using code-verifying bots to check for coding standards or formatting. He said that if no heated discussions at the stage of Code Review emerged, the automatic check could be skipped.

The idea is harmless but, in my opinion, it is also far from optimal. Speaking from my experience I can say that standardization eliminates senseless disputes. It becomes quite clear for everyone involved in the project, as to what formatting shall be used. The bot’s task is simpler as well. It is to make sure whether the given code matches the defined standards. Automation of this step is a time-saver for the whole team, so I wouldn’t recommend getting rid of it from the processes.

“MVVM as good (anti)pattern in iOS”

The developer world has been recently buzzing with regards to the MVVM (Model-View-ViewModel) pattern. Is it a righteous step to utilize it in iOS apps? Mateusz Szklarek considers this to be an error. Szklarek bases his beliefs on experience. His conclusions come, for instance, from a project concerning a mobile app involving 250 thousand lines of source code.

Mateusz Szklarek on using MVVM pattern in mobile app development during Mobilization IX 2019
Mateusz Szklarek’s speech on MVVM (Image: Paweł Włodarski/Mobilization).

As noted by Szklarek, MVVM eliminates the Massive View Controllers file problem, quite frequently emerging when MVC (Model-View-Controller) pattern is employed. In case of MVVM another problem is quite prevalent – namely, the Massive View Models.

MVVM is far from perfect. However, no perfect solution exists, to be honest. Whether the given idea or tool would work depends very much on the way in which it is utilized by  devs themselves. Szklarek said that following the crowd and using the MVVM methodology the way everyone uses it, is not really a valid strategy.

Solution? Common-sense, as usual. Any patterns or tools are there for you – just make sure you are using them in a manner that is rational. The solutions should be tailored to a problem, not the other way round. I would like to emphasize the fact, as the speaker I am referring to did, how important programming principles are. Following them makes it possible to tailor the given pattern and thus, to overcome the issues emerging in each and every model.

Although I was not able to participate in all presentations, I am glad that I could help the organizer.

“Krzysztof, respect for being ready to work hand in hand during the conference. Thanks for your mobilization!”

Marek Defeciński
Mobilization Organiser