Right-to-Left Website Development: Аdvice on design

Localization, the process of adapting a website to a particular locale, is essential for any interface, even if only a small amount of content is there. As different locales and different language groups have various features, developers must take into account these differences when creating a website. Some of these features may be difficult to understand, especially without the help of a native speaker. These features are particularly evident when it comes to designing and developing websites for the Middle Eastern market.

Demand for the creation of right-to-left (RTL) websites has grown over the years due to the fact that Arabic is the 4th most popular language globally. According to Arab Media Outlook, 60% of Arabic speakers prefer browsing internet content in Arabic. The lack of currently available content in Arabic and the existing need for this content among users is sure to continue this growth.

---

null

We’ve already taken a closer look at the peculiarities of developing RTL websites for the Arabic market in a recent blog post. In this post, we’ll be focusing our attention on some distinguishing features of RTL design.

RTL project design: The basics

The creation of web services and localization of already existing products for the Middle Eastern market is stipulated by certain features that can differ vastly from English (left-to-right) websites. The set of rules and design solutions used for LTR websites are of little value when developing websites for an Arabic RTL audience. This is because RTL websites require a different structure, typography, and imagery. At first glance, it might seem like an Arabic website is just a mirrored copy of an English one. However, it can involve a lot of effort to make a page with mirrored content appear properly on a screen.

SteelKiwi has already developed a number of RTL projects and we will be sharing our experience, including potential problems and solutions, below.

Writing and visuals

The main and most obvious difference between LTR and RTL languages is seen in the direction of writing. In RTL languages, writing and reading is done from right to left. This directional change affects the structure of the website, as well as typography, icons, and images.

To design an RTL project, we use a principle that seems simple at first. We flip or mirror every piece of content, with a few key exceptions. To understand what to mirror and what to change entirely, it’s important to imagine the motion of time which flows from right to left in Arabic. For example, a list of icons that displays a specific sequence should start from the right side on an RTL website.

With the help of some basic rules, designing an Arabic website can be fairly straightforward. However, when multilingual platforms are involved, it’s crucial to plan out the architecture of the projects properly in order to avoid language conflicts when switching from LTR to RTL languages.

When beginning work on this type of project, developers should spend time designing both LTR and RTL versions since each of these is equally important for a successful end result.

Typography

Proper attention should be given to Arabic typography. For the projects we’ve worked on, we’ve preferred to use Noto font which is recommended by Google Guidelines. To maintain easy readability, bold typeface should be avoided. Italicized font is also not used in Arabic.

Other typographic features to take into consideration include:

• aligning text to the right side;
• resizing font to preserve text readability. Traditional Latin typography fonts won’t fit properly with text in Arabic and therefore font sizes should be increased in the Arabic version;
• factoring in the length of words as most Arabic words are shorter than those in English;
• abbreviating days of the week, months, etc. is commonplace in English, but is not appropriate in Arabic;
• words in LTR languages don’t change their direction and neither do digits (like phone numbers with international dialing codes). These are still displayed on RTL websites as they would be on LTR websites.

Numerals

There are further distinctions with Arabic when it comes to numbers. Most Arab countries use the more traditional Western Arabic numerals. However, some countries like Iran and Afghanistan, use Eastern Arabic numerals more prevalently. Both numerical systems are used in Egypt and Sudan. Western Arabic numerals are slowly becoming increasingly popular, even in more conservative Arab countries like Saudi Arabia. Currently, Western Arabic numerals are used in North Africa.

As the use of numerals can differ based on the region, this feature is important to consider when localizing dates and icons and should match what is most commonly used by the locale.

Icons

Mirroring icons in an Arabic interface should be done with proper caution. Sometimes mirroring or flipping isn’t necessary and sometimes it is. Basic guidelines are as follows:

• Symmetrical icons, as well as icons without an explicitly specified direction (such as camera, download, user profile, etc.), don’t need to be flipped.

---

null

• Icons with an explicit direction should be mirrored. For example, the back button should point to the right in the RTL version.

---

null

• Icons that depict movement or text direction should be mirrored (such as text alignment icons, progress charts, etc.)

---

null

• Icons featuring English characters don’t need to be mirrored, but should be localized.

---

null

• The semantics of icons should be considered, with special focus placed on cultural peculiarities or alternate meanings of symbols being used. Potentially problematic icons, such as a piggy bank icon to symbolize thriftiness or a champagne glass to indicate a restaurant, may be appropriate in LTR sites, but might be inappropriate in RTL ones. It’s important to double-check if the icons used are easily understood in each culture they are being displayed in and, sometimes, this can only be done with the help of a native speaker.

---

null

Images

Not only do images make a website visually attractive, but they also convey a certain idea. Choosing an image requires appropriate selection, taking into account cultural peculiarities when it comes to perception.

Banners for the Arabic version of a website can be mirrored, but best practices recommend selecting individual images for each version of a website instead. Simply reflecting a horizontal image may result in distorted display when switching between LTR and RTL versions of the website.

Mirroring elements

Not all interface elements need to be mirrored. Below is a comprehensive overview of elements that may be found in a website’s layout and whether or not these should be mirrored in RTL projects.

• Navigation buttons & logo - a logo is usually placed in the left upper corner of English websites. In RTL websites, the logo is placed in the right upper corner. This principle also applies to the menu and navigation buttons which should be displayed in reverse order.
• Form fields - headings and icons that refer to a given field on a form should be placed in the opposite position on RTL websites.
• Breadcrumbs - breadcrumbs that are part of a website with a complex structure should be aligned to the right side and mirrored.
• Video and audio players - video and audio players should not be mirrored because they represent playback progress instead of the flow of time.
• Dates - Arabic-speaking users have their own calendar, but they are also used to the standard international date format. This element can be hyper-localized to match the locale, if the project requires it.
• Calendars - calendars need to be mirrored. Monday will be displayed on the right side and Sunday on the left one.
• Tables - columns of tables must be mirrored.
• Browser interface - Internet Explorer and Opera display scrollbars on the left side on Arabic websites.

Designing RTL websites

When designing and developing an RTL website, the decisions that need to be made can oftentimes be confusing for those used to designing LTR projects. Applying a mirrored structure should help those starting out ease into the transition and, by following some of the tips we’ve outlined above, we hope designers and developers will be able to succeed when creating an RTL project.

Thanks to our clients, SteelKiwi’s team of designers and developers has been able to learn many of the peculiarities of RTL languages and cultures. We’re ready to take on more RTL projects, challenging us to continue increasing our knowledge and finding the best solutions for RTL development. Find some useful tips and tricks for RTL development in our previous article.

If you have any questions about RTL development or design or if you’d like to get started on an RTL project, get in touch with our team and we will be happy to help!