What a mobile-friendly website actually needs

Why the phone version is the real version

For most small businesses in the UAE, the bulk of visitors arrive on a phone. They tap a Google Maps result or an Instagram bio link. The desktop design you signed off on a laptop is the version fewer people see.

Google also looks at the mobile version of your site first when working out what your pages are about. If content or links are missing on mobile, Google may treat them as missing altogether.

Check your own figures if you have analytics. Many service businesses see well over half their visits from phones, though yours may differ.

Mobile-friendly isn't a badge that comes with a theme. It's a set of small things you can test.

A 10-minute test on your own phone

Do this with Wi-Fi off, and write down anything that annoys you along the way. Your customers hit the same problems and didn't tell you. If you can, borrow an older Android phone from someone in the family and repeat it.

• Find your site through a Google search and time how long until you can read the first heading
• Read a full page without zooming, outdoors if possible
• Open the menu and reach your most important page in two taps
• Tap the Call and WhatsApp buttons and check they open the right number
• Fill in your own contact form and check the email arrives
• Turn the phone sideways and check nothing breaks

Buttons sized for thumbs

Tap targets are the buttons and links people press. On a phone they need to be big enough to hit without zooming, roughly fingertip size, with enough space around them that nobody hits the wrong one.

The usual failures are small: a phone number in tiny grey text, a menu icon squeezed into a corner, links in a paragraph packed so tightly you open the wrong page. Google's own guidance suggests targets of around 48 pixels.

Test with the phone in one hand. Most people browse with a thumb, so anything important parked in the top corner sits in the hardest spot to reach.

Menus deserve a look too. A menu with 14 items and dropdowns two levels deep can work on a desktop. On a phone it's a maze. Most small businesses need five or six top-level links.

Text you can read without pinching

If you have to pinch to zoom, the page isn't mobile-friendly. Body text should be around 16 pixels, and paragraphs short enough that the eye doesn't lose its place on a narrow screen. Line spacing helps too. Text crammed together is tiring on a small screen.

Contrast matters more outdoors. Pale grey text on white might look elegant on a designer's monitor and vanish in the afternoon sun on Jumeirah Beach Road.

Watch for anything that makes the page slide sideways. Wide tables and fixed-width images are the usual causes. On a phone, a page should only ever move up and down.

Contact buttons, forms and pop-ups

On a phone, the easiest way to win an enquiry is a button that's always there. A slim sticky bar at the bottom with Call and WhatsApp lets a visitor reach you from anywhere on any page. Keep it slim, though. A bar that covers a quarter of the screen gets in the way of reading.

Forms need the same care. A phone number field should open the number keypad, and an email field the keyboard with the @ sign. Let the phone's autofill do its job. Cut every field you don't need, because typing on glass is slow and a long form is where a lot of mobile enquiries quietly die.

Then the pop-ups. An offer box that covers the page the moment it opens is annoying on a laptop and close to unusable on a phone, especially with a tiny close button. Google has said intrusive pop-ups on mobile can count against a page. If you must have one, show it later and make it easy to dismiss.

Details people check while on the move

A lot of mobile visits happen when someone is already on the way to you. They want your hours and directions, and they want them quickly.

Make the address a link that opens in Google Maps or Apple Maps, rather than an embedded map that's fiddly to drag with a thumb. Put opening hours in plain text, not inside an image, and update them when Ramadan or a public holiday changes them. If your website and your Google Maps listing disagree, customers usually find out the hard way, at a locked door.

Phone numbers should be tappable everywhere they appear, footer included. Write them in international format starting +971, so they also work for visitors on a foreign SIM.

Small things. On a phone they decide whether someone turns up.

Quick on mobile data, not just office Wi-Fi

Mobile coverage in UAE cities is generally strong. But a phone in a basement car park or deep inside a mall can still crawl, and your office Wi-Fi hides problems that a visitor on mobile data runs into every time.

Heavy images and extra scripts are the usual reasons a page drags. Our guide on why a website is slow goes through the causes and the order to fix them in.

For a second opinion, run the site through our free website checker. It uses Google's PageSpeed data and flags mobile issues that are easy to miss by eye.

A practical point a designer may not volunteer: building for phones first sometimes leaves the desktop version looking plainer than you'd like. That's usually the right trade. And if your current site can't be fixed without fighting its theme, a mobile-first redesign can cost less than a string of patches.

Call or WhatsApp us on +971 52 292 3875 and we'll go through the mobile version of your site with you.

Questions people ask