Given the rising emphasis on digitization, we no longer need to make the case for the importance of web applications. However, what has become of paramount importance in today’s business economy is the need to reach out to the target audience in a manner that they can relate to you. As the business environment becomes increasingly global, it becomes all the more essential that an organization’s web application, which is the first point of contact for the target audience, is able to connect with this audience. One of the main challenges in doing this is to cross the language barrier and this can be done with the help of multilingual web applications.
A few years back, one of our clients, is a leading insurance services company based in the Middle East, connected with us to address its web application needs. They needed a multilingual web application to handle their call center, command center, damage assessment and claim recovery services along with other sub-modules under this umbrella. Developing a multilingual website, especially in Arabic language, can add many complexities to web design as translating all the elements on the website and structuring it correctly so that the application displays all the elements of the page accurately and in a coherent manner can pose to be a challenge.
We had a great fun and lot of learning during the development of this web application. Through this blog, we thought of sharing the core challenges in developing this web application in Arabic and how we resolved those. If you are tasked with the creation of an Arabic web app, you will find it an interesting read.
Application Development using Arabic Layout:
The Arabic layout is an absolute reverse to the conventional Left-to-Right layout. In Arabic, the layout has to work on a Right-to-Left manner. We had to ensure that not only does the content have to feature correctly in the Right-to-Left layout but also ascertain that the other features of the web application such as icon placements, buttons, drop-downs, images and scroll bars etc. were all mirrored. In order to achieve this, we applied appropriate CSS files on each of the web pages that ensured that the UI and UX along with the content featured correctly on every page.
Content Translation:
Since the content of the application had to be in Arabic, it first needed translation from English. Using the tools like Google Translate and also language experts, we got the content translated in Arabic language and got that reviewed from the client to increase the accuracy of the translated text. All the iterations to the text post review were then added to the content.
Correct Currency Translation:
Since our client works in the insurance segment, we had to ensure that the numeric displays which included currency and plate numbers displayed correctly in Arabic. Since plate number and currency should not be displayed Right-to-Left, we had to apply the appropriate CSS files of every page and achieve this.
SEO Crawling with URL:
Today, tracking and reporting website traffic is essential to identify who uses your website. It is also important to get information on how your users are actually using the website and also achieve good search engine rankings. It also helps you identify peak traffic hours and helps you understand what you need to do next to streamline your digital efforts. We employed SEO crawling with URL by applying a post-fix in the URL that could easily be tracked by Google Analytics live traffic.
Font Selection:
While ensuring that the content featured correctly was an essential part of the web application design, we also had to ensure that the Arabic font that we used was the best to achieve great readability. To do so, we used the Droid Arabic Kufi that complemented the website design without compromising on the readability aspect.
Arabic Content Storage in Database:
In computer systems, characters are transformed and stored as numbers which are passed separately through a processor. We had to ensure that the storage of the Arabic code was done correctly. For this, we used Unicode so that database design changes such as char to nchar/varchar to nvarchar/text to ntext did not impact the application UI, UX and functionality in any way. Using Unicode also ensured that we could easily override the browser’s calculated track for embedded elements as well.
Along with all this, we also had to warrant that we use the right technology stack for our client. For this web application project, as for many of our other web application and mobile application development projects for Android and iOS, we used the ASP.NET MVC. This technology stack gave us more control over the rendered HTML, enabled clean SoC (separation of concerns), gave the opportunity for easily employing Test Driven Development, and also allowed easy integration with JavaScript frameworks and CSS. Additionally, the ASP.NET MVC stack is lightweight which reduced the bandwidth needs of the application.
During the course of the development of this application, we designed a complete framework that was implemented for this project and could be used easily for similar projects in the future. To achieve this, we used:
- A reusable architecture based on design patterns such as Repository pattern, Dependency injection on the backend.
- We employed CSS and JavaScript files for the common sections so that they could be reused in other modules or projects.
- We developed common reusable components such as File uploader, Data design code generator, Email and SMS services, etc. – these components can be easily used in developing any application, web or mobile.
While developing this application, we not only ensured that we developed a highly functional and usable web application in Arabic but also tried to mitigate many of the challenges that arise while developing such applications. Our aim, at the end of the day, was to develop a great web application for our client and at the same time develop a framework that would make it easier for us to manage such projects in the future.
