Ahmad Rasas / Practical guides
Designing a website for Arabic and English
How Arabic RTL affects navigation, typography, mixed-language content and phone testing, with real bilingual website examples.
Plan both languages as complete experiences.
Arabic design needs readable Arabic type and right-to-left layout, while English needs its own readable rhythm. Translating the words and mirroring every element does not resolve navigation, content length or mixed-language information.
Give the text room.
Check headings, line height and paragraph length in the actual font. Test the longest service names and buttons on a phone. Keep brand names readable without distorting the supplied identity. In Rasas and the Dina case study, the two versions can be inspected directly.
Handle mixed directions deliberately.
Phone numbers, web addresses and some product names need a stable left-to-right presentation inside Arabic text. Check punctuation, prices and dates in context. Use layout properties that follow reading direction, and test rather than automatically reversing icons or media.
Keep equivalent routes connected.
A language switch should open the corresponding page. Each public language version needs its own URL and accurate content, with language links and search annotations that point to the intended equivalent. Do not label a shared English-only PDF as an Arabic document.
Test the journey, not just a screenshot.
Use both languages to open menus, review work, move sliders and prepare an enquiry. Check short and long swipes, keyboard focus, orientation changes and reduced motion. Phone emulation is useful, but it does not replace physical-device testing.