Mobile Website Design Best Practices for Businesses

In short

Design the phone layout first. It forces the editing a wide screen lets everyone avoid.
The first phone screen has room for four things: the phone number, what you do, one line of proof, one button.
Tap targets at least 44 pixels, body text at least 16, forms in one column with the right keyboard for each field.
The phone number belongs in the header on every page and, for service businesses, in a bar at the bottom of the screen.
Test on real phones over cellular. The simulator on a monitor has no thumb and no bad signal.

Design the phone first, then widen

Picture a design review. The agency wheels in a large monitor, the home page fills it, and everyone leans back. The photo is enormous. Three columns of services sit in a row. Someone says it looks premium. Nobody asks to see it at the size most customers will see it, a rectangle the size of a playing card, because that version has not been made yet. It will be made last, by whoever is free, in an afternoon.

That afternoon is where most mobile design goes wrong, and the fix is to reverse the order. Draw the phone layout first. A screen 375 pixels wide has room for one headline, one line of proof and one button before the visitor has to scroll. There is no room for the three-column row, the tagline under the tagline, or the second button that says "Learn more." Those get cut, and cutting them is the editing the wide screen let everyone skip. Then widen.

How important is this? Around six of every ten visits to a business site now start on a phone, Google ranks the phone version as the real one, and the phone is the only device where the customer can call with one tap. A responsive layout, defined in the technology guide, is the mechanism. What follows is how to use it well. If your site does not fit a phone yet, start with the mobile friendly guide.

A small screen is not a constraint on good design. It is the editor good design was missing.

The first screen on a phone

The first screen is roughly 375 by 650 pixels once the browser bar takes its share. It is the whole site for a visitor deciding whether to scroll, and most decide in seconds. Everything on it has to earn the space.

What earns a place on the first screen

A header with the logo and the phone number. Not the logo and a menu icon alone. The number, tappable, at the right.
A headline of eight words or fewer that names the service and the place. "AC repair in San Antonio, same day" fits on two lines and answers a stranger's first two questions.
One line of proof under it: a star rating with a count, a license, years, a job count. One, not three.
One button, close to full width, that says what happens: "Get a same-day quote." A second button splits the attention the first one needed.
The top of a real photo, cropped for portrait so the subject is in frame, not fighting the headline.

What does not earn a place: an autoplaying video, a carousel, a tagline explaining the headline, social icons, a chat widget that opens itself, and a cookie banner that covers the button. The lead generation layout guide applies the same discipline to the whole page; the first phone screen is where it matters most, because there is nowhere to hide the clutter.

Tap targets and type sizes

A thumb pressed flat on glass covers 40 to 50 pixels. Anything smaller is a guess. Apple's own guidance has been 44 by 44 points for years and it is still the right number: every button, menu item and standalone link at least that tall, with 8 pixels or more between neighbors. Links inside a paragraph cannot be that tall, so give the paragraph enough line height that two lines of links do not touch.

Type follows the same logic. A phone is held eight to twelve inches from the face; a monitor sits two feet away. Body text at 16 pixels is the floor, and 17 or 18 reads better for an audience over forty, which for many trades is the audience. Headlines on a phone land between 28 and 36 pixels, so the 60-pixel desktop headline needs a rule that scales it down. Lines should run 45 to 75 characters.

Contrast gets skipped because it looks fine on a calibrated monitor. Light gray on white, fashionable for a decade, is unreadable in sunlight. Use dark text on light backgrounds and check it outdoors. It is also what accessibility standards require.

Forms that a thumb can fill

A form that takes a minute on a laptop takes longer on a phone, and every extra second is a chance to give up. The mobile form is where a service business wins or loses the lead, and the practices are specific.

1
Ask for less.
Name, phone, what do you need. Three fields, four at most. Every field costs more on a phone, because typing costs more. Ask the rest on the call.
2
Stack the fields in one column.
Two fields side by side on a phone means two fields narrower than a thumb. One column, full width, each at least 48 pixels tall.
3
Tell the phone which keyboard to show.
The phone field brings up the number pad; the email field brings up the keyboard with the @ sign. One attribute per field, skipped on most sites.
4
Put labels above the fields, not inside them.
A label that disappears when the visitor starts typing is a label they cannot see when they need it.
5
Make the button say what happens.
"Get my estimate," full width, high contrast. "Submit" tells the visitor nothing.
6
Confirm on the same screen.
After sending, the visitor should see, without scrolling, that it worked and what happens next: "Thanks. We call back within an hour." The calls and estimates guide explains why that sentence changes the close rate.

If the form also does not send, or fills your inbox with spam, that is a separate repair and a common one on older WordPress sites. Form and script repair is a fixed-price job, and the spam fix that does not annoy real customers is worth reading before anyone adds a captcha.

The phone number is the mobile design

For a service business, the entire mobile site can be judged by one question: how many taps from arrival to a ringing phone? The right answer is one. The number sits in the header of every page, styled as a button, linked so that tapping it dials. Not inside the menu, because the menu is closed when the visitor arrives. Not in the footer, because most visitors never get there.

The practice that outperforms everything else for trades is a bar fixed to the bottom of the phone screen with the number on it, sometimes beside a "Text us" button. It sits where the thumb rests and follows the visitor down the page, so the moment they are convinced, the phone is under their thumb. It shows on phones and hides on desktops. Add the hours if you do not answer around the clock, and say what happens after hours, because a call that rings out at 9 p.m. is a customer who called someone else at 9:02.

Speed on cellular, and the images that decide it

Every practice above is wasted if the page has not painted by the time the visitor gives up. On office Wi-Fi your site is fast. The customer is on cellular in a parking garage, on a phone two generations old, and that is the connection the design has to survive. The speed guide covers the whole subject; here is the part that belongs to mobile design.

Images are the usual culprit. A hero photo uploaded at 4,000 pixels wide and 3 megabytes is sent to a phone that will show it at 375. The fix is to serve a phone-sized file to phones, which modern platforms do automatically and older ones do not, and to compress every image so nothing above the fold exceeds about 200 kilobytes. Video does not autoplay on cellular; it is a poster image with a play button. Fonts are one family in two weights, because every weight is another download before the text can appear.

Scripts are the quieter culprit. The chat widget, the analytics tags and the review carousel each load their own code alongside your content, and together they often decide whether the first screen appears in two seconds or six. A script that does not produce leads does not load on the first screen. Speed and Core Web Vitals work is mostly the enforcement of that rule.

Testing on real phones, and the practices in one table

The phone simulator in a browser is fine for layout and useless for everything else. It has no thumb, no cellular connection and no sunlight. Test on an iPhone and an Android phone, Wi-Fi off, outdoors, one hand only. Set the phone's text size one step larger than default, as many people over fifty have it, and see what breaks. Fill the form through and confirm the message arrives. Tap the number and let it ring. Repeat a week after launch, because a plugin update or a new widget will undo something.

Mobile website design best practices at a glance

Practice	Why	How to check
Design the phone layout first	Forces the editing a wide screen lets you skip	Ask to see the phone mockup before the desktop one
Four things on the first screen	A visitor decides in seconds whether to scroll	Screenshot the first screen and count the elements
Phone number in the header and a bottom call bar	The call is the conversion, and the bar sits where the thumb rests	Scroll down; the number is still on screen and dials on tap
Tap targets 44 pixels or larger, spaced	A thumb is not a cursor	Hit every button first try, one hand
Body text 16 pixels or larger, dark on light	Eight inches away, often in sunlight	Read a paragraph outdoors without zooming
Forms in one column, three or four fields, right keyboard	Typing on a phone is slow	Fill it with a thumb; the number pad appears for the phone field
Phone-sized images under 200 KB, no autoplay, one font family	Cellular is the real connection	Readable headline in under two seconds on cellular
Test on real phones, again after launch	Simulators do not have thumbs	Repeat the test above each quarter

Most of these practices cost nothing to include when a site is designed correctly and a great deal to bolt on afterward, which is the argument for building the site as custom software rather than fitting a template and hoping. To see the phone-first version of your own home page, the free mockup is exactly that: a developer designs your first screen for a thumb, and you keep it either way.

Free · no obligation

See your business done properly before you spend a dollar.

We will design a new home page for your business and show it to you at no cost. Custom, built the way a real development shop builds. Keep it either way.

Claim my free mockup See the work first

Go deeper

Free · No obligation

Does your site work for a thumb?

Tell us what happens when you open your site on a phone and we will tell you what is causing it and what the fix is. Free, and you keep the answer.

Which of these sounds like you? (pick any)

Questions people ask

Straight answers

Design the phone layout first and widen it afterward. Every other practice follows from that one, because a 375-pixel screen forces the choices a wide screen lets a designer avoid: one headline, one line of proof, one button, the phone number visible. Sites designed on a monitor and shrunk later carry the monitor's clutter onto the phone.

It decides most of your visits. Roughly six in ten visits to a small business website come from a phone, more for urgent services, and Google ranks the phone version of a site as the primary one. The phone is also the only device where a customer can call with one tap. A site that is merely tolerable on a phone loses to a competitor's site that was designed for one.

Sixteen pixels is the minimum for body text, and 17 or 18 reads better for audiences over forty. Headlines on a phone land between 28 and 36 pixels and should scale down from the desktop size rather than being fixed. Keep lines to 45 to 75 characters and use dark text on a light background so it survives sunlight.

At least 44 by 44 pixels, with 8 pixels or more between neighboring buttons. That is roughly the size of a thumb pressed on glass, and anything smaller produces mistaps. The main button on the first screen should be close to full width, and the call button should sit in the header or in a bar at the bottom of the screen where the thumb already rests.

For a service business, yes. A bar fixed to the bottom of the phone screen with a tappable number, often with a text or quote button beside it, sits where the thumb rests and stays visible as the visitor scrolls. It is the single practice we see raise call counts most reliably on trade and home service sites. Hide it on desktop screens, where it is unnecessary.

A single website whose layout rearranges itself to fit the screen that opens it: columns stack, type scales, the menu becomes a tap menu, images shrink to fit. It replaced the separate mobile site as the standard approach more than a decade ago. Responsive is the mechanism; the practices in this guide are how to use it well, and the technology guide explains the mechanism itself.

Where to go from here