mobile homepage design is where personal pages quietly lose their visitors. Most of the dashboards I have looked at put mobile traffic above 60 percent, and the layout work still happens on a desktop screen. There are three knobs worth turning, and none of them require rewriting anything: mobile typography, spacing, and touch targets. Twenty minutes covers all three.
## What phones actually break
Two failures show up on nearly every page I check. Headlines wrap into three lines because they were tuned against a desktop column. Body text runs wider than the screen because the hero image pushed horizontal padding inward. A third failure appears in about half: tap targets sit at 28 pixels when a fingertip needs roughly 44.
None of this is visible on a laptop. On a phone it reads as a page that was not built for the person holding it, and that judgement forms in seconds.
## Mobile typography: three numbers
Set body text at 17 pixels or larger. Below that, most readers pinch to zoom, and zoomed pages lose people faster than small text does.
Keep the measure between 34 and 40 characters on a 375 pixel wide screen. This is the piece of mobile typography that gets skipped most often: a paragraph using the full width is hard to return to after an interruption, and mobile reading is mostly interruptions.
Drop headings one step from their desktop size, not two. A title that fits a desktop column usually fits a phone after a 20 percent reduction. Going further turns the page into a smaller, weaker version of itself.
Line height belongs between 1.5 and 1.6 for body copy. Under 1.5, adjacent lines merge visually on high density displays.
## Spacing: measure in thumbs, not pixels
Desktop spacing follows the grid. Mobile spacing should follow whatever a thumb can reach without repositioning the hand. The bottom third of the screen is comfortable. The top corners are not, especially past 6.1 inches.
Put the one action you care about low or centred. A contact button pinned to the top of a mobile layout is harder to hit than the same button sitting after a short block of work.
Vertical padding between sections needs to be larger on phones than it feels on desktop. Around 48 pixels between blocks and 8 to 12 pixels inside them works. Anything tighter reads as one grey mass at arm's length.
## Touch friendly page: targets and one thumb reach
Every interactive element should clear 44 by 44 CSS pixels. Icons count. Anything drawn to look like a button counts. Inline text links inside a paragraph can get away with less, though not by much.
Leave 8 pixels between neighbouring targets. Two small icons touching each other produce most of the mis-taps I see on portfolio grids.
Test with your own hand, one handed, standing up. If reaching the navigation means shifting your grip, the reach is wrong.
## The twenty minute checklist
| Element | Desktop value | Mobile target | How to check on your phone |
|---|---|---|---|
| Body text | 16px | 17-18px, line height 1.5-1.6 | Read one paragraph without zooming |
| Headline | 36-48px | One step down, two lines max | Count the wrapped lines |
| Line length | Auto | 34-40 characters | Count one mid-paragraph line |
| Tap target | Mouse precision | 44x44px minimum | Tap each one five times, fast |
| Primary action | Top right | Bottom third or centred | Reach it one handed |
| Section gap | Tight grid | 48px or more | Do sections read as separate |
## FAQ
- Do I need a breakpoint for every device? One at 640px handles most of it. Add a second if your page carries a wide table.
- My theme already claims to be responsive. Then check one thing: does it keep its own spacing ratios, or does it scale the desktop layout down? Scaling produces 14px body text on a phone.
- Should I hide sections on mobile? Only ones repeating information available elsewhere. Hiding the portfolio grid to save space removes the reason most visitors arrived.
- How often should I re-check? After any content change, and once a year when you buy a new phone. Screen sizes drift slowly. Hands do not.
## Start tonight
Open your page on your own phone and do three things before touching the desktop version: raise body text to 17px, give every button 44px, move the contact link into the bottom third. Stop after those three.
On dynamic-profile.shop the mobile layout reads the same content, so changing these values does not mean rebuilding anything, and switching themes later leaves them alone. Start from [the homepage](/), keep [用留白说话](/blog/speaking-with-whitespace) open for the spacing half, and cross-check the foundation in [移动端优先的响应式设计](/blog/mobile-first-responsive-design). One caveat about testing: reading your own page in a quiet room is not the test. I am a bad judge of mine, because I already know what everything is supposed to say.