RTL Digital Menus
Two mobile-first Arabic (RTL) digital menu interfaces — category navigation, responsive structure and on-phone readability.
Overview
- Projects
- Abu Rumanah Restaurant · Finzione
- Type
- Digital menus · mobile-first RTL interfaces
- Role
- WordPress Developer / UI Implementer · Front-End Developer
- Year
- 2025
- Stack
- WordPress · HTML · CSS · RTL · Responsive design
- Live
- aburumanah.com/menu · finzione.innovo.sa
Live site, captured
Context
A digital menu is read standing up, on a phone, in a few seconds. That is the whole design constraint.
Two restaurant menu interfaces, both Arabic and both mobile-first. A menu is one of the few interfaces where you can assume the device, the posture and the intent — which makes designing for anything else a mistake.
They are presented together because they solve the same problem with the same constraints: Arabic RTL, category navigation, and readability on a small screen.
Challenge
RTL is a layout direction, not a translation.
Arabic interfaces are frequently built by translating the text and leaving the layout facing the wrong way. Alignment, reading order, directional icons and navigation all have to flip with it, or the result reads as a foreign template.
On top of that, menus are long. Category navigation has to let someone reach a section without scrolling through everything above it.
My role
- Abu Rumanah Restaurant
- Implemented a mobile-first Arabic (RTL) digital menu and policy pages with a clean, responsive structure optimized for on-phone browsing.
- Finzione
- Built a mobile-first digital menu interface with RTL support, category navigation and a user-friendly visual structure.
Approach
- 01
Start at 375px
The phone is the primary case, so the phone layout is the one designed first — the wider layouts follow from it.
- 02
Direction first
RTL handled as a structural decision at the start, so alignment and reading order are right rather than patched.
- 03
Navigate by category
Category navigation so a long menu stays reachable without endless scrolling.
- 04
Keep it legible
Type, spacing and grouping tuned for reading a menu quickly rather than studying a page.
Technical work
- Arabic RTL implementation
- Right-to-left layout implemented properly — alignment, reading order and directional UI, not a mirrored afterthought.
- Mobile-first structure
- Layout built from the smallest breakpoint outward, which is the correct order when the phone is the actual device.
- Category navigation
- Navigation between menu sections built so a long list stays usable.
- Responsive implementation
- HTML and CSS within WordPress, checked across device widths.
- Supporting pages
- Policy pages implemented in the same responsive structure for Abu Rumanah.
Interface & UX
- Readable at arm's length
- Menu items grouped and spaced for scanning, with hierarchy carried by type rather than by boxes.
- Arabic that reads as Arabic
- The interface is laid out for an Arabic reader rather than translated into one.
- No app required
- A web menu that opens instantly is worth more than an app nobody installs at a table.
Outcome
- Delivered a mobile-first Arabic (RTL) digital menu and policy pages for Abu Rumanah Restaurant.
- Delivered a mobile-first digital menu interface with RTL support and category navigation for Finzione.
- Both delivered as responsive implementations optimized for on-phone browsing.
Related services
RTL Digital Menus — Gallery
Visuals on this page are schematics drawn for this portfolio, not screenshots of the live menus.
Have a site or store that needs to work better?
Tell me what is happening and on which page. A diagnosis is a useful first deliverable on its own.
I read every message myself and reply within one working day — usually with a question or two before anything else, because a scope worth quoting needs them answered.
Mostafa Nouh
Full-Stack Developer & Product Builder
- linkedin.com/in/mostafanoah
- Location
- Egypt · Remote