Mobile-First B2B: Buyers Research on Their Phones First

B2B isn’t desktop-only. Buyers research between meetings, on commutes, and in the field. A plant manager opens a spec sheet on a phone. A VP skims a case study in an airport. If the page fails there, they don’t “come back on desktop.” They go to whoever loaded.

Mobile-first means you design the constrained layout first, then scale up. Desktop-first plus a collapsed header is how you get 10px tap targets and pinch-to-zoom forms.

What Mobile-First Means

Start at a 360–390px width. If the page works there, tablet and desktop are expansion, not rescue.

Touch

• Targets — 44×44px minimum for buttons, inputs, and nav links. 24px stacked links fail.
• Spacing — 8px+ between tappable items. Wrong-service taps are lost intent.
• Hover is not a plan — Hover-only dropdowns don’t exist on a phone. Use tap-open menus.

Type

• 16px base — Below that, iOS zooms inputs. Don’t set fields to 14px to “fit more.”
• Line length — One column. 45–75 characters. Stack desktop two-column copy.
• No pinch required — If they zoom to read a table or CTA, the layout failed.

Layout

Design the hero, a service template, and the contact form at mobile width first. Then add columns and extra proof. If a module only works at 1200px, it doesn’t ship.

Forms on Mobile

Forms are where B2B sites leak. The buyer already decided to talk. Then the form fights them.

Fewer Fields

Mobile users abandon long forms faster. Keep first-touch short:

• Quote or contact — Name, work email, company, message. Phone optional.
• Demo — Add role or use case if you need routing. Don’t add budget, headcount, and “how did you hear” on a phone.
• Download — Email and company. Gate the PDF. Don’t run a 12-field qualification form for a one-pager.

Qualify later. A completed short form beats an abandoned long one.

Inputs That Work

• Large fields — 48px tall is comfortable. Tiny custom dropdowns are not.
• Correct keyboards — type="email", type="tel". Don’t make people hunt for @.
• Autocomplete — name, email, organization. Reduce typing.
• Single column — Side-by-side name fields clip on 375px. Stack them.
• Selects — Native on mobile. Custom dropdowns often break tap.

Error messages go next to the field, not in a toast at the top of a long page. If submit fails, the invalid input must be visible without hunting.

Content and Navigation

Mobile users skim. Your IA still has to work when the header is a hamburger.

Scannable Pages

• One H1 — The offer. Not a slogan that wraps to four lines.
• Short paragraphs — Two to four sentences. Then a heading or a list.
• Bullets for specs — Certifications, capabilities, lead times. Stack tables or allow horizontal scroll.
• Proof early — A metric, logo row, or one-line outcome. Don’t hide proof under a 900px hero video.

Navigation

• Hamburger is fine — When you have 5–7 primary items. Keep the menu short. Don’t nest three levels.
• Sticky primary CTA — Request a quote, Book a demo, Contact. Always reachable. Header or a slim bar. Don’t make them open the menu to convert.
• Click-to-call — If you take phone leads, a tel: link in the header on mobile is a conversion path. Track it.

Footer links still matter. Thumbs often end at the bottom. Repeat services, industries, and contact.

Desktop Still Matters — After Mobile Works

Procurement and engineering will compare you on a monitor. Wide tables and case-study layouts belong there. Build them as enhancement: same content, wider grid.

Don’t ship a desktop masterpiece and “check mobile” in the last week. That’s how Core Web Vitals fail on phones — huge heroes, deferred CSS, forms that shift when the keyboard opens.

Test on a real device. Chrome’s device toolbar is a start. A mid-range Android on LTE is the truth.

---

We build mobile-first. Plan your rebuild and we’ll design the constrained layout before the desktop grid.