7

Ask DN: Designing for Right-to-Left (e.g. arabic) languages

4 years ago from , UX Designer at milkmonkey

I am about to start a web project for arabic audiences and I'm trying to gather some insight on how to build an interface for it.

I know that generally the UI has to be flipped and I found some ressources that cover the basics:

http://de.slideshare.net/lensco/web-design-for-righttoleft-languageshttp://viget.com/flourish/designing-for-rtl-languages-the-basics

I wondered if anyone from the DN Community has any additional experience or advice, especially for creating mobile interfaces.

4 comments

  • Ghaida ZahranGhaida Zahran, 4 years ago

    The technical stuff is not as easy as you might think. Literally everything in a website needs to be flipped. This means that if you're writing your site code in vanilla CSS, things are going to get tedious very quickly. Throw javascript plugins into the mix and you've just signed yourself up for a whole new front-end project.

    When I worked at ZURB, I was part of the team that brought RTL support out of the box to the Foundation framework. It would have been a nightmare to implement without Sass; we would have had to maintain two separate codebases. Instead we created a single variable that can be changed in the settings file that affects any horizontal direction in the project.

    This changed the way the team wrote components. For example, instead of writing margin-left everyone had to switch to writing margin-#{$default-direction}. This prevents any hardcoded horizontal direction styles and sets the direction control in one place.

    I think bootstrap has been working on a similar RTL implementation.

    The idea is you would need to start with the code for either language, then change one variable to generate CSS for the other language/direction

    2 points
  • Daniel ZanderDaniel Zander, 4 years ago

    I've both lived, and later worked with clients in the Middle East and I would say that getting the "technical stuff" right is the easy part. Getting the aesthetics (colors, icons, symbols, fonts etc etc) right is the hard part. But I guess that is always the case when working with a different market than the one you know and live in.

    Some resources: http://blog.webcertain.com/the-insider-secrets-to-creating-compelling-arabic-websites/22/01/2014/

    http://www.smashingmagazine.com/2010/09/19/showcase-of-web-design-in-the-arab-world/

    http://www.webdesignerdepot.com/2012/06/color-and-cultural-design-considerations/

    http://www.creativebloq.com/web-design/arabic-91412873

    And there is a bunch of good suggestions in the link you included yourself.

    2 points