Mobile UX Fixes — RankUX Touch Target & Font Guide
RankUX's Mobile UX dimension flags touch targets below 44px and body text below 14px. Learn the CSS fixes that move the score from 58 to 90+.
---
Introduction
Mobile UX is the dimension where most sites score worst, including rankar.ai at 58/100. The two most-common issues — touch targets too small and body text too small — affect almost every page on the modern web. RankUX flags them precisely so they are easy to fix in CSS. This article walks through the fixes using rankar.ai's audit as the example.
The Touch Target Rule: 44x44px Minimum
RankUX flags every interactive element below 44 pixels in either dimension. For rankar.ai the count is 38 elements. The 44x44 rule comes from Apple's Human Interface Guidelines and matches the average fingertip touch area; Google recommends a slightly larger 48x48.
The CSS fix. For each affected element, set: ``css
.button {
min-width: 44px;
min-height: 44px;
padding: 12px 16px;
}
`
Padding adds touch area without enlarging visible content. This is the standard approach.
The cascade fix. Often a single CSS rule fixes many elements at once. If the 38 affected elements share a class, one rule update fixes all 38.
The Body Text Rule: 14px Minimum
RankUX flags every body text instance below 14 pixels. For rankar.ai the count is 13 instances. The 14px minimum comes from typography studies of mobile readability; 16px is the modern preferred floor.
The CSS fix. Set the body font size and use rem-based sizing for everything else:
`css
body { font-size: 16px; line-height: 1.5; }
small { font-size: 0.875rem; } / 14px /
`
Avoid pixel-fixed font sizes inside components — they bypass the body baseline.
The Viewport Meta Tag
Every mobile-friendly page needs:
`html
``
Without it, mobile browsers render the page at desktop width and zoom out, making everything tiny. RankUX checks for the tag and flags absence as a critical issue.
Mobile Navigation Patterns
Beyond touch targets and fonts, RankUX checks the mobile navigation pattern. Best practices:
- Hamburger menus should be 48x48 minimum and labelled.
- Drawer menus should slide from the side, not push the whole page.
- Bottom nav bars work well for 3-5 primary destinations.
The Path to Mobile UX 90+
For rankar.ai, the path from 58 to 90+:
- Fix the 38 touch targets — one to three CSS rules. 1-2 days of work. +15 points.
- Fix the 13 body text instances — one CSS sweep. Half a day. +10 points.
- Verify viewport meta — instant check. +0 if already set.
- Audit the mobile nav pattern — 1-2 day design review. +5-10 points.
Total: 3-5 days to reach the high 80s. Add another sprint for low-priority refinements to break 90.
What's Next
Mobile UX is fixed. The next article moves to Performance UX — rankar.ai's lowest-scoring dimension at 20/100 and the highest-leverage win in the project.
Apply This With the Rankar Toolkit
RankUX works best paired with the rest of the Rankar suite. Spin up the relevant tools: RankTalk • RankOps • RankAudit • RankWriter • RankTracker • RankAIO • RankBridge • RankLinks • RankLocal • RankLaunch • RankSpy • RankUX • RankLead. Each module shares data with the others — fewer tabs, one source of truth.