Keys to Arabic Web Design

Arabic web design UX tips Web design

Arabic is the mother tongue of one of the fastest-growing sectors of internet users, with a 30-fold rise between 2000 and 2012 − and 41% of Saudis on Twitter, the highest rate in the world – so why are fewer than 1% of web pages in Arabic?

The answer is more technical than you might think. Although a kind of block printing called tarish developed in Egypt in the 9th-10th centuries, Arabic was not used with movable type on a large scale until after Napoleon brought printing presses to Egypt. Arabic script is far better adapted for hand lettering than separate metal types, as most letters change shape depending on the letters before or after them; some combinations can even be written vertically.

We needed to spend weeks making Arabic typography fully functional across all devices, given the poor support for Arabic fonts online

Challenges of Arabic Typesetting

Arabic website visitors will be used to reading right to left

Electronic media solved most of these problems, since Arabic fonts are designed with algorithms that alter letters depending on their place in the word. But the number of Arabic fonts available is still minimal compared to Latin fonts, and even fewer are supported online, leading to websites that often look outdated and clash with their company image.

Over half of all pages on the Internet are currently in English. However, Arabic grew more quickly than any other online language (over 2,500%) from 2001 to 2011, proving that Arabic speakers are making huge steps to catch up – sometimes in defiance of regimes that limit internet use. The political role of Arabic online is considerable: at least two regimes, those of Egypt and Tunisia, disintegrated due to the direct impact of social media.

Going mobile

Above all, smartphones are leading a sea change in web design, as they are now the principal means of accessing the internet for many people in towns and cities, and often the only way to get online in rural areas. Recent news stories of Syrian refugees using smartphones confirm their usefulness in our globalised world, enabling families to stay in contact even in conflict zones.

Mostly, though, we use internet for work, communication or leisure, wherever we are in the world. According to our research, 30-40 % of internet users in the Middle East surf the net regularly on their smartphone or tablet, and that’s a figure that is only set to grow. In our redesign of the University of Dammam’s bilingual Arabic-English website, we made the site fully mobile-friendly and flow intuitively like an app, as it was clear that most current and potential students would be using a mobile or tablet to access information on the site.

Switching to RTL

So what are the main obstacles to Arabic web design? Since Arabic reads right to left (RTL), Arabic versions of existing websites need to be completely flipped horizontally. Image selection is crucial: pictures need to be chosen specifically for LTR and RTL interfaces, as simply making a mirror image of them will look strange – and turn any writing in them to gibberish.

Most of all, Arabic websites that also incorporate European languages present a real challenge, as the text will be switching back and forth between RTL and LTR. A platform such as Drupal, which supports international and localised websites and even contains ready-made translation files for most standard strings, is ideal.

HTML Prototypes

Patternlab is based on creating pages via atoms, molecules, organisms and templates

When building an Arabic language website it’s helpful to start with an HTML prototype.

When we were commissioned to redesign the University of Dammam’s multilingual website, working with the web design company Bright Lemon, who designed the web architecture and built the back end of the site, we chose to use the HMTL software Patternlab. Patternlab uses a more organic method of creating websites by way of ‘atoms’, ‘molecules’, ‘organisms’, templates and pages, rather than the traditional wireframe model.

HTML prototypes enables the developer to create a clickable workflow that can be altered easily, and therefore cheaply. This in turn allows all the clients to see an overall view from the outset. Furthermore, if the HTML or CSS is of a high enough quality it can be used throughout Alpha, Beta and Production stages.

There are far fewer Arabic web fonts available than Latin fonts

Arabic Aesthetics in the Digital Era

Apart from the technical aspects of structuring an Arabic language website, the aesthetic experience is crucial. It can be tricky to make an Arabic version of an English site look the same across both formats, yet it is essential to brand coherence. For the University of Dammam site, we spent weeks making sure that the Arabic typography worked across all devices.

The Arabic script has provided us with a tremendously rich artistic legacy, from the boldness of early Kufic to the splendour of Ottoman monumental scripts. With each new evolution, Arabic writing has been adapted to suit new materials and mediums, from papyrus to paper, ceramics to textiles, metalwork to mosaic. Online typography is merely the latest in a long line of mediums in which we’re sure Arabic will triumph in too, using these keys to open the way.