Good mobile UX design is less about making a desktop site fit a smaller screen and more about designing for how people actually use phones: one hand, short sessions, frequent interruptions and a thumb as the only pointer. When those realities shape the interface, visitors find what they need faster and reach your contact, booking or checkout steps with less effort.
This article sets out the practices we apply when designing mobile interfaces in our web design work, from layout and touch to typography, feedback, motion and bilingual behavior. It focuses on UI and UX decisions at the level of a design system, so the same rules hold across every page you publish, and it includes a few details that apply specifically to Arabic and English audiences in the UAE.
Start from context, not from the desktop
Mobile visitors are rarely browsing at leisure. They are checking a price between meetings, comparing two clinics in a waiting room or opening a link shared on WhatsApp. That context should shape priorities before any visual work begins.
- Define top tasks per template. For a service page, it might be “understand the offer, see proof, start an inquiry”. For a product page, “see the product, check price and delivery, add to cart”. Everything else is secondary on a small screen.
- Order content as a single column. Write the sequence of blocks as a list. If it does not read logically top to bottom, the layout will not work on a phone.
- Expect arrivals mid-journey. Many mobile visits land on deep pages from search, ads or chat links, so every page needs its own clear orientation and next step.
Designing for thumbs and touch
Touch is less precise than a mouse, and the reachable area of the screen changes with the way a phone is held. Mobile UX design has to account for both.
Target sizes and spacing
Platform guidelines are a useful baseline. Apple recommends touch targets of at least 44 by 44 points, and Material Design suggests 48 by 48 density-independent pixels. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels for its AA level, with exceptions. Treat the platform figures as the practical standard for primary actions, and keep enough space between adjacent links that a slightly off tap does not trigger the wrong one.
Placing key actions within reach
The lower and middle parts of the screen are easiest to reach with a thumb; the top corners are the hardest, especially on larger phones. Primary actions, such as “Book a consultation” or “Add to cart”, work well in the content flow near the thumb or in a slim sticky bar at the bottom. Reserve the top of the screen for orientation elements, like the logo and a menu trigger, that people use less often.
Gestures as shortcuts, not requirements
Swipes and long presses are hard to discover and can conflict with browser gestures, such as swiping back. Use them to speed up actions that also have a visible control, never as the only way to do something. WCAG also expects that functions using complex gestures can be operated with a simple tap.
Typography and readability on small screens
Text is the interface for most business websites. On a phone, readability determines whether the argument for your service is read or skipped.
| Element | Practical guidance |
|---|---|
| Body text | Around 16px or larger, line height of roughly 1.5, and 30 to 45 characters per line on a phone |
| Headings | Scaled down from desktop so a heading fits in two or three lines, not five |
| Form inputs | At least 16px, which also prevents iOS Safari from zooming the page when a field is tapped |
| Contrast | Meets WCAG AA contrast, remembering phones are often read outdoors in bright light |
| Arabic text | Often needs a slightly larger size and more generous line height than Latin text for equal legibility |
Fluid type, using CSS functions such as clamp, lets sizes scale smoothly between breakpoints rather than jumping. It keeps headings proportionate on both a compact phone and a large one without separate rules for every device.
Feedback, states and motion
On a desktop, hover effects hint at what is clickable. Phones have no hover, so the interface needs other cues and clear responses to every action.
- Make interactive elements look interactive. Buttons should look like buttons, and text links should be distinguishable by more than color alone.
- Show pressed and loading states. A tap that produces no visible response invites a second tap and duplicate submissions. Change the button state immediately and show progress for anything that takes time.
- Design empty, error and success states. A search with no results, a failed payment and a sent inquiry each deserve a considered screen, not a default message.
- Use motion to explain, not decorate. A drawer sliding in from the side shows where the menu lives. Long entrance animations on every section only delay reading. Respect the prefers-reduced-motion setting for visitors who have asked their device to minimize movement.
Screen realities: notches, keyboards and browser bars
Modern phones introduce constraints that desktop layouts never meet. A few technical details prevent common frustrations.
- Safe areas. Rounded corners, notches and home indicators can clip content near the edges. The CSS env(safe-area-inset) values keep fixed bars and buttons clear of them.
- Dynamic viewport height. Mobile browser toolbars expand and collapse as people scroll, which makes the classic 100vh unit unreliable. The newer dvh and svh units handle this more predictably for full-height sections.
- The on-screen keyboard. When the keyboard opens, it can cover half the screen. Make sure the active field and the submit button remain visible and that sticky elements do not stack on top of the input.
- Orientation. Do not lock content to portrait unless there is a real reason. Some people use their phones in landscape, including those with mounted devices.
Bilingual mobile UX design in the UAE
Arabic and English interfaces share a structure but not a direction. Right-to-left layouts mirror more than text alignment, and phones make any inconsistency obvious.
- Mirror the layout logically. Menus, drawers, back arrows, progress indicators and carousels should follow the reading direction. Icons that imply direction need mirrored versions; logos, media controls and phone numbers usually do not.
- Keep the language switch easy to find. Place it in the header or menu, label it in the target language, and keep visitors on the equivalent page when they switch.
- Plan for text length changes. Button labels and headings change length between languages. Components should accommodate both without truncation or awkward wrapping.
- Use CSS logical properties. Properties such as margin-inline-start adapt automatically to direction, which reduces the bugs that appear when RTL is added late.
WhatsApp also deserves a deliberate place in the mobile interface. For many UAE audiences it is the preferred first contact, so a clear, well-placed WhatsApp option alongside calls and forms often suits visitors better than a form alone.
Testing and refining the experience
Design files are not phones. Prototypes should be reviewed on real devices early, including at least one mid-range Android phone, an iPhone and the in-app browsers of WhatsApp, Instagram and LinkedIn, where many visits actually begin.
After launch, measurement keeps the design honest. Track the steps that matter, such as taps on call and WhatsApp buttons, form starts and completions, and compare mobile and desktop behavior for the same pages. Session recordings and heatmaps show where people hesitate or tap on things that are not links. Short moderated tests with five or six people from your audience remain one of the most efficient ways to find the problems analytics only hints at.
Frequently asked questions
What is the difference between mobile UX and mobile UI design?
UX covers the whole experience: which tasks people come to complete, how content is ordered and how easily they reach an outcome. UI is the visible layer that supports it, including type, color, buttons, spacing and states. On mobile the two are tightly linked, because small visual choices, such as target size or button placement, directly change how easy a task feels.
Should mobile and desktop designs be separate?
They should share one responsive codebase and one design system, but not necessarily identical layouts. Content order, image crops, navigation patterns and action placement often differ by screen size. Designing the mobile layout first usually produces a clearer structure, which the desktop version then expands with more space rather than more complexity.
Are hamburger menus bad for mobile UX?
Not inherently. Hiding navigation saves space, but it also hides options, so it works best when the most important actions stay visible outside the menu. Many sites combine a menu icon with a visible primary action or a short bottom bar for key sections. The right pattern depends on how many destinations your visitors genuinely need.
How do we know if our mobile UX design is working?
Compare mobile and desktop conversion rates for the same pages and look for gaps. Track specific interactions such as form starts, form completions and taps on WhatsApp or call buttons. Review session recordings for repeated taps, abandoned forms and unusual scrolling. Then test changes one at a time, so you know which adjustment made the difference.
Interfaces that work in one hand
Mobile visitors judge a business by how easily they can do what they came for. Clear priorities, comfortable touch targets, readable type, honest feedback and careful bilingual behavior turn a responsive layout into an interface that earns inquiries on the device most of your audience holds.
If you would like a practical review of your mobile experience, Bdazzil can assess your key templates on real devices and outline the changes most likely to improve how visitors engage and convert.
