You have decided to get a website made. A few days later the designer sends you a draft: a big, elegant computer page. You like it and give your approval. The site goes live, you open it on your phone, and none of that elegance is left. The text is squeezed, important buttons are far down, and the phone number is nowhere to be found.
This is one of the mistakes I run into most often. The design was thought out for a computer, and the phone version was "squeezed in" afterward. But your customers most likely look at your site on a phone. The order should be the other way round.
What does mobile-first design mean?
Mobile-first design means the designer starts with the smallest screen. The first question is: "What is the most important thing for someone on a phone, using one hand, in a hurry?" The page is built around that answer. Only then is the same page stretched out to the wide computer screen.
Think of a shop window. A small window forces you to pick the most important product; a bigger one lets you add more. Start with a huge window and squeeze everything into a small one, and what matters gets lost.
What changes when most visitors come from phones?
Someone visiting on a phone is usually in a hurry. They have one finger, a small screen and a scattered attention span. What they are looking for is usually simple: a phone number, an address, opening hours, a price or an appointment.
A design that starts on the phone gives you:
- Important information first. What you do, where you are and how to reach you appear on the first screen.
- Less decoration. Space is tight on a phone, so every element has to earn its place. This also simplifies the computer version.
- One main action stands out. Something like "Call", "Book an appointment" or "Get directions". The visitor does not have to think about what to do.
- A lighter site. Because oversized images and heavy elements are not added in the first place, the page opens faster on a phone.
None of this makes your site look bad on a computer; a well-built structure works on both screens.
What should you ask your designer?
In the first conversation with whoever will build your site, clarify the following:
- "You will show me the design in its phone version too, right?" Do not approve a computer-only draft.
- "What will be on the first screen on a phone?" The answer should reflect your business: who you are, what you do and how people can reach you.
- "Will my phone number and booking button always be within reach?"
- "Will you test the design on a real phone?" A shrunk browser window on a computer is not the same as a real phone.
- "Can I open the test site on my own phone before it goes live?"
Asking these will not annoy a good designer.
What should you look at when you approve?
When you see the draft or the test site, you can use this table:
| What to look at | What it should look like |
|---|---|
| First screen | It is immediately clear what you do and how to reach you |
| Main action | The call, book or message button is prominent |
| Text | Short paragraphs, large and readable type |
| Images | In place, without weighing the page down |
| Menu | A few clear headings |
| Real content | Your real texts and photos instead of sample text |
The last row matters most. A design looks good with sample text, but when your real, long service name or address arrives, the layout can break. Ask to see the real content before you approve.
The most common phone design mistakes
These are the mistakes I have seen over the years. At the approval stage, checking for them is enough:
- Cramming everything onto the first screen. Space on a phone is limited; if five different messages appear at once, none of them gets read.
- A very long page in the wrong order. If a visitor scrolls past your story first and only finds your phone number at the very end, they may give up.
- Computer-only features. Menus that open when you hover with a mouse, or tiny links, do not work on a phone, because a phone has no mouse.
- Testing only on a computer. A shrunk window is no substitute for a real phone.
Take a law firm's website as an example. A client looks at it on a phone and on the first screen sees the firm, its area of practice and a "Call" button. That is enough. The firm's history, team photos and articles sit further down, for those who are interested. When the design starts on the phone, the order of priorities forms by itself.
What you can check and what the specialist does
What you can check:
- Open the draft on your phone first, then on a computer.
- Put yourself in the visitor's shoes: "Does someone who lands on this page for the first time understand what to do?"
- Show it to a friend on a phone and ask what they are looking for.
What the specialist does:
- Builds the pages for the small screen first, then expands them to the large screen.
- Makes sure the site opens quickly on a phone.
- Tests on different phones and browsers.
How long does it take, and can it be done in advance?
For a good designer, the phone-first approach is not extra work; it is simply the order of work. So it usually does not lengthen the schedule. What does delay things is often that content is not ready: texts, photos, the list of services. If you prepare these in advance, the process speeds up. For a firm timeline I would need to see your project, and I will not go into pricing here, since it depends on your needs.
Frequently asked questions
Does phone-first mean the computer view will be bad?
No. The computer view is designed too and works well. The difference is that the design starts on the phone, not that the computer is neglected.
Is it still necessary if my customers mostly use a computer?
For most businesses, a significant share of visitors comes from phones. You can see this in your own site's statistics. Even if computer visitors are in the majority, the phone-first approach makes your site simpler and faster.
My designer only showed a computer draft. Is that a problem?
It does not necessarily mean phones were ignored, but it is worth asking. Ask to see the phone view too, and do not approve without it.
Can I make my existing site phone-friendly afterward?
Sometimes, yes, but if the site is very old it becomes patch on top of patch. In that case building it from scratch can give a sturdier result. A specialist needs to look at your site.
The first impression of your site is usually formed on a phone screen. If you are thinking about having a new site made, have a look at my website design page to make sure the design process starts from the phone.