Mobile-first gets preached at every conference and in every LinkedIn post in 2026. And still, almost every week I run into the same thing: a freshly built website that looks lovely on a desktop and falls apart on a phone. Not because the designers are bad. Because they misunderstand the term.
Mobile-first doesn't mean you glance at the site on a smartphone once, right before launch. It means the phone is the starting point. Everything else comes after that. And it's exactly this order-of-operations trick that so many people in my field break.
Why do so many still design on the big screen?
Honestly? Because it's more comfortable. A 27-inch monitor gives you room. You can drop in big images, wide menu bars, elegant hover effects. It feels good while you're designing. The designer sits in front of a Cinema Display, drags boxes around, and everything looks generous.
Then the whole thing gets "scaled down" for mobile. And that's the mistake in thinking. A desktop layout squeezed into 375 pixels of width is not a mobile layout. It's a crushed desktop layout. The difference sounds academic, but it's the reason so many phone sites feel off.
Start with the narrow viewport instead, and you're forced to prioritise from minute one. What actually matters? What comes first? A 375-pixel screen forgives no decoration. That harshness is a gift, because it forces the page to be honest.
The four fails I see over and over
1. Buttons you aim at instead of tap
A finger is not a mouse pointer. Apple has recommended at least 44 by 44 points for touch targets for years, and Google's Material guidelines call for 48 by 48 dp. Even so, I regularly rebuild sites where the "Call now" button is 30 pixels tall and stuck right next to a second link. Tap that with your thumb and you miss half the time. On a tradesman's site in Olching, the single most important button, the phone number, was so small that older customers simply couldn't hit it. That costs real phone calls.
2. Hover menus with no touch alternative
On a desktop, a submenu drops down when you move the mouse over it. On a phone there is no "moving over." There's only tapping. If the main menu only works on hover, the phone user never reaches the subpages. I saw this on a law firm's website in Germering: the service pages were basically unreachable on a smartphone, because the dropdown only responded to a mouse. For months. Nobody had noticed, because everyone internally worked on a desktop.
3. Giant headers that eat half the screen
A fixed header with a logo, a slogan and three lines of navigation looks slick on a desktop. On a phone, a beast like that happily swallows half the visible area before the visitor sees any content at all. They scroll, and the header stays glued in place. On an iPhone, where space is already tight, that's just annoying. Rule of thumb: on a phone the header should take up no more than roughly 15 percent of the height.
4. The important stuff lands outside the thumb zone
Most people hold their phone in one hand and operate it with their thumb. The thumb comfortably reaches the lower half of the screen. The top edge is a stretch. If the only call-to-action sits up in the top right corner, you have to shift your grip. Sounds like a trifle, but it decides whether someone calls or keeps swiping.
The restaurant menu that needed three zooms
One example stuck with me. A restaurant client in the west of Munich wanted their menu online. The desktop draft was genuinely good. Two columns, clear prices, nice typography, everything in its place. On the big monitor: a treat.
Then I opened the page on my own iPhone. The two columns had been pressed into 375 pixels, which made the text tiny. To read the price of the pork knuckle, I had to pinch-zoom three times. Three zooms for a single number. Nobody does that when they're hungry and checking a menu at 7pm.
The frustrating part: it wasn't a question of skill. It was that before launch, nobody had tested the page with a real thumb on a real phone. Every sign-off went through laptop screenshots. We then made the menu single-column on mobile, bigger type, tappable categories that expand. Two hours of work. The difference was night and day. There's more on how we work in general on our web design page.
A mobile-first test even non-techies can run
You don't need to be a developer to catch the worst mistakes yourself. Take ten minutes and your own phone. Here's the routine I hand to clients too:
- Test one-handed. Hold the phone in one hand, the way you actually hold it day to day. No propping it up, no second hand to point with. Can your thumb reach every important button? The phone number, the contact form, the menu?
- No zooming allowed. Forbid yourself the pinch. If you have to zoom anywhere to read something, the type is too small. Full stop. No customer zooms in voluntarily.
- The five-second question. Open the homepage and count to five. After that, do you know what the company does and how to get in touch? Or is the header still eating everything?
- The cold test on a weak signal. Turn off Wi-Fi and load the site over mobile data, ideally out and about on a train heading into Munich. If it takes forever, the page is too heavy. Real users don't wait.
- The glove test. Sounds silly, but it's honest: if you can still hit the menu wearing a thick winter glove, the targets are big enough.
Run this once on an iPhone and once on an Android device, if you have one. The two render some things differently. And ideally hand the phone to someone who has never seen the site. You already know where everything is. A stranger's thumb is the most honest tester there is.
Why this matters more in 2026 than ever
Google has indexed the mobile version of a page first for years now. Which means: whatever is broken on the phone drags down your entire ranking, even for desktop searches. Based on the numbers we see across our own client projects in Fuerstenfeldbruck and the surrounding area, depending on the industry, 60 to 80 percent of visitors arrive via phone. For restaurants and local service providers, it's toward the upper end. I'm deliberately giving a range, because it swings a lot and I won't pretend a study figure applies to your specific site.
The maths is simple either way. If the majority of your prospects show up with a thumb, then the mobile view is your actual website. The desktop is the second version. Not the other way around.
What you can do right now
Grab your phone and run the test above. If it makes you a little queasy, because the buttons are too small or the header covers everything, that's no reason to panic. Most of this can be fixed without rebuilding the whole site.
We at bytebrise in Fuerstenfeldbruck are happy to give your site an honest once-over. A free website check, around 30 minutes, no sales talk. We tell you what's broken on mobile and what's worth fixing with little effort. Reach out through our contact form, and we'll test your site together with a real thumb. The way it should happen before every launch.