Most websites are still designed on a laptop first.
The homepage gets built across a wide screen. The images look perfect. The headline sits exactly where it should. There’s room for a large menu, a paragraph, two buttons, and a little animation.
Then everything gets pushed into the mobile version.
The columns stack. The headline wraps onto six lines. The image crops strangely. The customer has to scroll through half the homepage before seeing what the business sells.
That isn’t really mobile design.
It’s the desktop website squeezed onto a smaller screen.
Start with the order of the page
A mobile website is read in one long line.
The customer sees one section, then the next, then the next. They can’t look across the screen and take in several things at once.
That makes the order more important.
Before designing the desktop version, decide what someone should see first on their phone.
Usually, they need the brand name, a clear idea of what the business sells, a strong image, and one obvious next step.
They probably don’t need two paragraphs of introduction, three buttons, an email popup, and an announcement covering the first screen.
Design the mobile page as its own experience.
Then give the desktop version more room.
Choose images for the shape of a phone
A wide website banner doesn’t always survive a vertical screen.
The product gets cut off. The model disappears. The empty space where the text was supposed to sit is gone.
Plan a separate mobile crop before the shoot when you can.
Take vertical images along with the wide ones. Leave room around the subject. Make sure the important part of the image can stay visible when the sides are removed.
If the website allows separate desktop and mobile images, use them.
That isn’t making two different brands.
It’s giving the same creative direction enough room to work in two different formats.
Design for fingers, not a mouse
A desktop cursor can click a small link easily.
A thumb can’t.
Buttons, menu links, product options, arrows, and close icons need enough room around them to be tapped without hitting something else. Current accessibility guidance sets a minimum target size of 24 by 24 CSS pixels in most cases, although larger buttons are usually more comfortable on a phone.
Pay attention to anything that sits close together.
Size options shouldn’t feel crowded. The menu shouldn’t require careful tapping. A popup needs a close button people can actually reach.
The design may look delicate in the editor.
It shouldn’t be difficult to use.
Mobile type needs its own decisions
Making the desktop headline smaller isn’t always enough.
A long headline that works across one desktop line can take over the entire phone screen. Very small body text can look refined in a mockup and become annoying on a real device.
Adjust the wording when needed.
Break paragraphs into shorter sections. Keep important information easy to scan. Use a clear difference between headings, body text, buttons, prices, and product details.
The customer should be able to understand the page while moving through it normally.
They shouldn’t have to zoom in or keep rereading sections because everything looks the same.
A beautiful mobile site still has to load
Large videos, oversized image files, custom fonts, animations, and multiple apps can make a site feel impressive on Wi-Fi and painfully slow everywhere else.
Google measures loading speed, responsiveness, and whether page elements move around while the site loads.
That last part matters on mobile.
Someone goes to press a product and the page shifts because another image appeared. They tap the wrong thing. A popup loads late and covers the screen. The menu takes a second to respond.
The brand stops feeling polished very quickly.
Use properly sized images. Be selective with animation. Remove apps that aren’t doing enough to justify the extra loading time.
Build it on a phone, then test it on another one
The mobile preview inside the website editor is a starting point.
Open the published site on a real phone.
Use the menu. Read the homepage. Open a product. Select an option. Add it to the cart. Fill out a form. Try to close every popup.
Then ask someone else to do it without explaining where anything is.
Your mobile website shouldn’t feel like a smaller copy of the desktop site.
It should feel like the version you expected most people to use.